diff options
Diffstat (limited to 'files/id')
362 files changed, 56353 insertions, 0 deletions
diff --git a/files/id/_redirects.txt b/files/id/_redirects.txt new file mode 100644 index 0000000000..809fc34c73 --- /dev/null +++ b/files/id/_redirects.txt @@ -0,0 +1,26 @@ +# FROM-URL TO-URL +/id/docs/HTML /id/docs/Web/HTML +/id/docs/JavaScript /id/docs/Web/JavaScript +/id/docs/JavaScript/Getting_Started /id/docs/Web/JavaScript/Getting_Started +/id/docs/JavaScript/Panduan /id/docs/Web/JavaScript/Panduan +/id/docs/JavaScript/Pengenalan_JS /id/docs/Web/JavaScript/Getting_Started +/id/docs/JavaScript/Reference /id/docs/Web/JavaScript/Reference +/id/docs/JavaScript/Reference/About /id/docs/Web/JavaScript/Reference/About +/id/docs/JavaScript/Reference/Global_Objects /id/docs/Web/JavaScript/Reference/Global_Objects +/id/docs/JavaScript/Reference/Global_Objects/Math /id/docs/Web/JavaScript/Reference/Global_Objects/Math +/id/docs/JavaScript/Reference/Global_Objects/Math/pow /id/docs/Web/JavaScript/Reference/Global_Objects/Math/pow +/id/docs/JavaScript/Reference/Statements /id/docs/Web/JavaScript/Reference/Statements +/id/docs/JavaScript/Reference/Statements/block /id/docs/Web/JavaScript/Reference/Statements/block +/id/docs/Learn/CSS/Introduction_to_CSS /en-US/docs/Learn/CSS/First_steps +/id/docs/Learn/CSS/Introduction_to_CSS/Box_model /en-US/docs/Learn/CSS/Building_blocks/The_box_model +/id/docs/MDN/Contribute/Content /id/docs/MDN/Guidelines +/id/docs/MDN/Contribute/Content/Layout /id/docs/MDN/Guidelines/Layout +/id/docs/MDN/Contribute/Content/Writing_style_guide /id/docs/MDN/Guidelines/Writing_style_guide +/id/docs/MDN/Langkah_Awal /id/docs/MDN/Contribute/Getting_started +/id/docs/Web/Guide/CSS /id/docs/Learn/CSS +/id/docs/Web/Guide/HTML /id/docs/Learn/HTML +/id/docs/Web/Guide/HTML/Pengenalan /id/docs/Learn/HTML/Introduction_to_HTML +/id/docs/Web/JavaScript/Reference/Methods_Index /id/docs/Web/JavaScript/Reference +/id/docs/Web/JavaScript/Reference/Properties_Index /id/docs/Web/JavaScript/Reference +/id/docs/Web/WebGL /id/docs/Web/API/WebGL_API +/id/docs/en /en-US/ diff --git a/files/id/_wikihistory.json b/files/id/_wikihistory.json new file mode 100644 index 0000000000..c7e8317627 --- /dev/null +++ b/files/id/_wikihistory.json @@ -0,0 +1,2171 @@ +{ + "Developer_Guide": { + "modified": "2019-03-23T23:27:41.297Z", + "contributors": [ + "bskari" + ] + }, + "Developer_Guide/Virtual_ARM_di_Lingkungan_Linux": { + "modified": "2019-03-23T23:27:45.214Z", + "contributors": [ + "ariestiyansyah" + ] + }, + "Games": { + "modified": "2020-07-23T02:23:56.130Z", + "contributors": [ + "SphinxKnight", + "wbamberg", + "firmanwyd", + "Alivanza", + "Dataware" + ] + }, + "Games/Publishing_games": { + "modified": "2020-07-23T02:24:59.333Z", + "contributors": [ + "wbamberg" + ] + }, + "Games/Publishing_games/Game_promotion": { + "modified": "2020-07-23T02:28:02.464Z", + "contributors": [ + "SphinxKnight" + ] + }, + "Games/Techniques": { + "modified": "2019-04-21T11:17:49.913Z", + "contributors": [ + "wbamberg" + ] + }, + "Glossary": { + "modified": "2020-10-07T11:10:52.018Z", + "contributors": [ + "peterbe", + "SphinxKnight", + "wbamberg", + "bekti", + "Jeremie" + ] + }, + "Glossary/404": { + "modified": "2019-03-23T22:32:14.780Z", + "contributors": [ + "bekti" + ] + }, + "Glossary/AJAX": { + "modified": "2019-03-23T22:19:41.769Z", + "contributors": [ + "galuhsahid", + "yahyaman", + "bekti" + ] + }, + "Glossary/API": { + "modified": "2019-03-23T22:32:10.841Z", + "contributors": [ + "bekti" + ] + }, + "Glossary/Algoritma": { + "modified": "2019-03-23T22:41:10.845Z", + "contributors": [ + "yayansupiana", + "astrominion", + "agungprasetyosakti" + ] + }, + "Glossary/Asynchronous": { + "modified": "2019-03-23T22:29:53.061Z", + "contributors": [ + "adoel90" + ] + }, + "Glossary/CSS": { + "modified": "2019-03-23T22:19:46.534Z", + "contributors": [ + "galuhsahid", + "bekti" + ] + }, + "Glossary/HTML": { + "modified": "2019-03-18T21:44:41.786Z", + "contributors": [ + "galuhsahid" + ] + }, + "Glossary/HTTP": { + "modified": "2019-03-23T22:19:40.425Z", + "contributors": [ + "galuhsahid", + "bekti" + ] + }, + "Glossary/Identifier": { + "modified": "2019-03-23T22:10:10.171Z", + "contributors": [ + "sori-goklas-hutagalung" + ] + }, + "Glossary/JSON": { + "modified": "2019-03-18T21:44:43.807Z", + "contributors": [ + "galuhsahid" + ] + }, + "Glossary/JavaScript": { + "modified": "2019-03-23T22:19:47.350Z", + "contributors": [ + "galuhsahid", + "bekti" + ] + }, + "Glossary/Method": { + "modified": "2019-03-23T22:32:21.055Z", + "contributors": [ + "bekti" + ] + }, + "Glossary/Null": { + "modified": "2019-03-23T22:18:02.352Z", + "contributors": [ + "dinugr" + ] + }, + "Glossary/Primitive": { + "modified": "2019-03-23T22:09:59.397Z", + "contributors": [ + "sori-goklas-hutagalung" + ] + }, + "Glossary/Python": { + "modified": "2019-03-18T21:42:33.944Z", + "contributors": [ + "adityaharist19" + ] + }, + "Glossary/SEO": { + "modified": "2019-09-22T13:59:47.933Z", + "contributors": [ + "duduindo", + "rizkysaskiaputra" + ] + }, + "Glossary/SVG": { + "modified": "2019-03-23T22:19:38.489Z", + "contributors": [ + "galuhsahid", + "bekti" + ] + }, + "Glossary/Statement": { + "modified": "2019-03-23T22:09:58.650Z", + "contributors": [ + "sori-goklas-hutagalung" + ] + }, + "Glossary/URL": { + "modified": "2019-03-23T22:19:45.495Z", + "contributors": [ + "galuhsahid", + "bekti" + ] + }, + "Glossary/Variable": { + "modified": "2019-03-23T22:09:46.873Z", + "contributors": [ + "bekti" + ] + }, + "Glossary/XML": { + "modified": "2019-03-23T22:19:46.777Z", + "contributors": [ + "galuhsahid", + "bekti" + ] + }, + "Glossary/property": { + "modified": "2019-03-23T22:32:18.314Z", + "contributors": [ + "bekti" + ] + }, + "Learn": { + "modified": "2020-08-08T15:57:34.011Z", + "contributors": [ + "excelrtuhin", + "lisa.angraini.la", + "setyadi", + "Transamunos", + "SphinxKnight", + "svarlamov", + "padila50", + "milhamj", + "bekti", + "miftahafina", + "bang_eko", + "Andrew_Pfeiffer" + ] + }, + "Learn/Accessibility": { + "modified": "2020-07-16T22:39:57.425Z", + "contributors": [ + "zahrulseptian295" + ] + }, + "Learn/CSS": { + "modified": "2020-07-16T22:25:34.322Z", + "contributors": [ + "sideshowbarker" + ] + }, + "Learn/Common_questions": { + "modified": "2020-07-16T22:35:24.163Z", + "contributors": [ + "ashymee", + "dennisblight", + "stephaniehobson" + ] + }, + "Learn/Common_questions/Bagaimana_cara_kerja_Internet": { + "modified": "2020-07-16T22:35:36.880Z", + "contributors": [ + "xenavrt", + "dennisblight" + ] + }, + "Learn/Common_questions/Berfikir_sebelum_membuat_kode": { + "modified": "2020-07-16T22:35:34.339Z", + "contributors": [ + "wahyuakbarwibowo" + ] + }, + "Learn/Common_questions/Pages_sites_servers_and_search_engines": { + "modified": "2020-07-16T22:35:39.876Z", + "contributors": [ + "ilhamm11194011" + ] + }, + "Learn/Common_questions/set_up_a_local_testing_server": { + "modified": "2020-07-16T22:35:52.964Z", + "contributors": [ + "dennisblight" + ] + }, + "Learn/Getting_started_with_the_web": { + "modified": "2020-07-16T22:33:53.018Z", + "contributors": [ + "Transamunos", + "thickkoezz", + "dennisblight", + "galuhsahid", + "bekti", + "miftahafina", + "adeyahya", + "chrisdavidmills" + ] + }, + "Learn/Getting_started_with_the_web/Akan_terlihat_seperti_apa_website_anda": { + "modified": "2020-07-16T22:34:16.825Z", + "contributors": [ + "thickkoezz", + "bekti", + "dovjay", + "yayansupiana" + ] + }, + "Learn/Getting_started_with_the_web/CSS_basics": { + "modified": "2020-07-16T22:34:58.859Z", + "contributors": [ + "thickkoezz", + "galuhsahid" + ] + }, + "Learn/Getting_started_with_the_web/HTML_basics": { + "modified": "2020-07-16T22:34:45.914Z", + "contributors": [ + "thickkoezz", + "adangwihanda", + "yasminzy", + "oktafh", + "bangyasri" + ] + }, + "Learn/Getting_started_with_the_web/How_the_Web_works": { + "modified": "2020-07-16T22:34:00.538Z", + "contributors": [ + "dennisblight", + "bekti" + ] + }, + "Learn/Getting_started_with_the_web/Installing_basic_software": { + "modified": "2020-07-16T22:34:08.020Z", + "contributors": [ + "Transamunos", + "thickkoezz", + "dennisblight", + "bekti", + "yayansupiana", + "agus_nurcholis" + ] + }, + "Learn/Getting_started_with_the_web/JavaScript_basics": { + "modified": "2020-07-16T22:35:10.743Z", + "contributors": [ + "willi-dev", + "MichaelSipayung", + "bekti", + "Fidelstu", + "miftahafina", + "adeyahya" + ] + }, + "Learn/Getting_started_with_the_web/Mengelola_file": { + "modified": "2020-07-16T22:34:33.806Z", + "contributors": [ + "thickkoezz", + "galuhsahid", + "BPiVcarD", + "vdanny" + ] + }, + "Learn/Getting_started_with_the_web/Publishing_your_website": { + "modified": "2020-07-16T22:34:25.723Z", + "contributors": [ + "bekti" + ] + }, + "Learn/HTML": { + "modified": "2020-07-16T22:22:18.743Z", + "contributors": [ + "bayuYudhaSaputra", + "fikrirazor" + ] + }, + "Learn/HTML/Howto": { + "modified": "2020-08-21T10:36:52.641Z", + "contributors": [ + "ikramwadudu99" + ] + }, + "Learn/HTML/Multimedia_dan_embedding": { + "modified": "2020-07-16T22:24:25.764Z", + "contributors": [ + "SphinxKnight", + "putrapuices", + "thickkoezz" + ] + }, + "Learn/HTML/Multimedia_dan_embedding/Adding_vector_graphics_to_the_Web": { + "modified": "2020-07-16T22:24:40.529Z", + "contributors": [ + "mujahid-it" + ] + }, + "Learn/HTML/Multimedia_dan_embedding/Responsive_images": { + "modified": "2020-07-16T22:24:34.275Z", + "contributors": [ + "mujahid-it" + ] + }, + "Learn/HTML/Pengenalan_HTML": { + "modified": "2020-07-30T01:00:05.720Z", + "contributors": [ + "setyadi", + "Zen-Akira", + "thickkoezz", + "ariaenggar" + ] + }, + "Learn/HTML/Pengenalan_HTML/Document_and_website_structure": { + "modified": "2020-07-16T22:24:04.997Z", + "contributors": [ + "mujahid-it" + ] + }, + "Learn/HTML/Pengenalan_HTML/HTML_text_fundamentals": { + "modified": "2020-07-16T22:23:32.925Z", + "contributors": [ + "Transamunos" + ] + }, + "Learn/HTML/Pengenalan_HTML/Structuring_a_page_of_content": { + "modified": "2020-07-16T22:24:19.411Z", + "contributors": [ + "mujahid-it" + ] + }, + "Learn/HTML/Tabel": { + "modified": "2020-07-16T22:25:12.167Z", + "contributors": [ + "jatmikaekachandra" + ] + }, + "Learn/How_to_contribute": { + "modified": "2020-07-16T22:33:44.062Z", + "contributors": [ + "SphinxKnight", + "bekti", + "ariestiyansyah" + ] + }, + "Learn/JavaScript": { + "modified": "2020-07-16T22:29:39.927Z", + "contributors": [ + "triashand", + "ariebrainware", + "bekti", + "miftahafina" + ] + }, + "Learn/JavaScript/Building_blocks": { + "modified": "2020-11-07T05:27:42.212Z", + "contributors": [ + "cxvq", + "Fidelstu" + ] + }, + "Learn/JavaScript/Client-side_web_APIs": { + "modified": "2020-07-16T22:32:39.540Z", + "contributors": [ + "awim" + ] + }, + "Learn/JavaScript/Client-side_web_APIs/Introduction": { + "modified": "2020-07-16T22:32:45.404Z", + "contributors": [ + "rizkypjt" + ] + }, + "Learn/JavaScript/First_steps": { + "modified": "2020-11-09T23:42:16.586Z", + "contributors": [ + "inbox.jen96", + "bekti" + ] + }, + "Learn/JavaScript/First_steps/What_is_JavaScript": { + "modified": "2020-07-16T22:30:08.653Z", + "contributors": [ + "ajiprio01", + "windykurniawan-windcode" + ] + }, + "Learn/JavaScript/Objects": { + "modified": "2020-07-16T22:31:50.305Z", + "contributors": [ + "thickkoezz", + "Fidelstu" + ] + }, + "Learn/JavaScript/Objects/Dasar-dasar": { + "modified": "2020-07-16T22:31:59.183Z", + "contributors": [ + "indrayoganata" + ] + }, + "Learn/Server-side": { + "modified": "2020-07-16T22:35:58.563Z", + "contributors": [ + "chrisdavidmills" + ] + }, + "Learn/Server-side/Django": { + "modified": "2020-09-27T09:04:00.240Z", + "contributors": [ + "MuhamadAzizi", + "AgungWiyono", + "aps2201", + "fikrirazor" + ] + }, + "Learn/Server-side/Django/Tutorial_local_library_website": { + "modified": "2020-09-27T09:52:56.557Z", + "contributors": [ + "MuhamadAzizi" + ] + }, + "Learn/Server-side/Django/development_environment": { + "modified": "2020-09-27T09:24:51.296Z", + "contributors": [ + "MuhamadAzizi", + "mujahid-it" + ] + }, + "Learn/Server-side/First_steps": { + "modified": "2020-07-16T22:36:09.052Z", + "contributors": [ + "ferdian89" + ] + }, + "Learn/Web_Mechanics": { + "modified": "2020-07-16T22:22:13.418Z", + "contributors": [ + "miftahafina" + ] + }, + "MDN": { + "modified": "2020-08-29T05:39:32.291Z", + "contributors": [ + "excelrtuhin", + "jswisher", + "SphinxKnight", + "wbamberg", + "bekti", + "Sheppy" + ] + }, + "MDN/About": { + "modified": "2020-08-09T11:25:04.711Z", + "contributors": [ + "harikun" + ] + }, + "MDN/Contribute": { + "modified": "2019-01-16T19:12:55.469Z", + "contributors": [ + "wbamberg", + "bekti", + "ariestiyansyah", + "Sheppy" + ] + }, + "MDN/Contribute/Feedback": { + "modified": "2020-09-30T17:51:12.443Z", + "contributors": [ + "chrisdavidmills", + "SphinxKnight", + "thickkoezz", + "wbamberg", + "chorie", + "viankakrisna", + "afishop", + "jswisher", + "pieteru_insekai" + ] + }, + "MDN/Contribute/Getting_started": { + "modified": "2020-09-30T17:12:29.554Z", + "contributors": [ + "chrisdavidmills", + "SphinxKnight", + "excelrtuhin", + "kangsantripaud", + "ISO", + "devmio", + "agenbaccaratnet", + "wbamberg", + "nsiregar", + "chorie", + "arifpedia", + "firmanwyd", + "bekti", + "bayuah", + "Mohdsalleh", + "Bobypurnomo", + "rio.putra", + "helloeny" + ] + }, + "MDN/Contribute/Howto": { + "modified": "2019-01-16T19:12:51.064Z", + "contributors": [ + "wbamberg", + "bekti", + "Sheppy" + ] + }, + "MDN/Contribute/Howto/Create_an_MDN_account": { + "modified": "2019-03-23T22:38:48.748Z", + "contributors": [ + "wbamberg", + "padila50", + "firmanwyd", + "taqiyyuki02", + "Lukman04" + ] + }, + "MDN/Contribute/Howto/Do_a_technical_review": { + "modified": "2019-03-23T22:32:05.940Z", + "contributors": [ + "wbamberg", + "heasanking" + ] + }, + "MDN/Contribute/Howto/Do_an_editorial_review": { + "modified": "2019-03-23T22:31:28.587Z", + "contributors": [ + "wbamberg", + "ElangSBP", + "bekti", + "Pieteru" + ] + }, + "MDN/Contribute/Howto/Set_the_summary_for_a_page": { + "modified": "2019-01-16T19:13:18.495Z", + "contributors": [ + "wbamberg", + "zekaras" + ] + }, + "MDN/Contribute/Howto/Tag": { + "modified": "2019-03-23T23:04:03.858Z", + "contributors": [ + "wbamberg", + "yayasl" + ] + }, + "MDN/Contribute/Processes": { + "modified": "2019-03-23T22:33:46.372Z", + "contributors": [ + "ignchristian", + "wbamberg", + "jswisher" + ] + }, + "MDN/Contribute/Tugas": { + "modified": "2019-01-16T19:13:42.819Z", + "contributors": [ + "wbamberg", + "firmanwyd", + "Cr7Pramana" + ] + }, + "MDN/Guidelines": { + "modified": "2020-09-30T15:29:57.815Z", + "contributors": [ + "chrisdavidmills", + "wbamberg", + "bekti", + "Sheppy" + ] + }, + "MDN/Guidelines/Writing_style_guide": { + "modified": "2020-09-30T15:29:58.831Z", + "contributors": [ + "chrisdavidmills", + "alvisolikah0507" + ] + }, + "MDN/Komunitas": { + "modified": "2019-05-29T21:20:10.743Z", + "contributors": [ + "alattalatta", + "KLIWONJagung", + "wbamberg", + "Makarim", + "firmanwyd", + "padila50", + "bekti", + "eriskatp" + ] + }, + "MDN/Komunitas/Conversations": { + "modified": "2019-03-23T22:41:40.315Z", + "contributors": [ + "wbamberg", + "jswisher", + "randiproska" + ] + }, + "MDN/User_guide": { + "modified": "2020-12-07T17:30:15.270Z", + "contributors": [ + "wbamberg", + "Sheppy" + ] + }, + "MDN/User_guide/Menghapus_halaman": { + "modified": "2019-01-16T18:55:32.659Z", + "contributors": [ + "wbamberg", + "helloeny" + ] + }, + "Mozilla": { + "modified": "2019-03-23T23:28:31.556Z", + "contributors": [ + "wim449", + "Sheppy" + ] + }, + "Mozilla/Add-ons": { + "modified": "2019-09-09T13:11:45.968Z", + "contributors": [ + "SphinxKnight", + "bekti", + "soulast", + "LukmanTambose", + "pieteru_insekai", + "novita" + ] + }, + "Mozilla/Add-ons/WebExtensions": { + "modified": "2019-07-03T08:48:34.929Z", + "contributors": [ + "SphinxKnight", + "herliansyah", + "fesuydev", + "wbamberg" + ] + }, + "Mozilla/Add-ons/WebExtensions/API": { + "modified": "2019-11-26T22:19:27.565Z", + "contributors": [ + "wbamberg" + ] + }, + "Mozilla/Add-ons/WebExtensions/API/browserSettings": { + "modified": "2020-10-15T22:32:28.909Z", + "contributors": [ + "SphinxKnight", + "joelinformaticien01", + "didikpramono" + ] + }, + "Mozilla/Add-ons/WebExtensions/API/notifikasi": { + "modified": "2020-10-15T22:05:36.197Z", + "contributors": [ + "asiongtobing", + "wbamberg", + "Azhe403" + ] + }, + "Mozilla/Add-ons/WebExtensions/API/windows": { + "modified": "2020-10-15T21:51:41.708Z", + "contributors": [ + "wbamberg", + "abbycar" + ] + }, + "Mozilla/Add-ons/WebExtensions/API/windows/CreateType": { + "modified": "2020-10-15T21:51:40.999Z", + "contributors": [ + "wbamberg", + "fesuydev" + ] + }, + "Mozilla/Add-ons/WebExtensions/Apa_Itu_WebExtensions": { + "modified": "2019-03-18T21:06:29.401Z", + "contributors": [ + "fesuydev" + ] + }, + "Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs": { + "modified": "2020-10-15T20:55:16.114Z", + "contributors": [ + "didikpramono" + ] + }, + "Mozilla/Add-ons/WebExtensions/Content_scripts": { + "modified": "2020-07-10T14:58:49.988Z", + "contributors": [ + "prajahutapea1980" + ] + }, + "Mozilla/Add-ons/WebExtensions/Your_first_WebExtension": { + "modified": "2019-03-18T21:06:21.389Z", + "contributors": [ + "fesuydev" + ] + }, + "Mozilla/Firefox": { + "modified": "2019-09-10T14:58:31.117Z", + "contributors": [ + "SphinxKnight", + "wbamberg", + "chorie", + "bekti", + "haris_haki89", + "StarGible" + ] + }, + "Mozilla/Firefox/Releases": { + "modified": "2019-03-23T23:09:29.710Z", + "contributors": [ + "wbamberg", + "bekti", + "ziyunfei" + ] + }, + "Pengembangan_Web": { + "modified": "2019-03-23T22:51:52.244Z", + "contributors": [ + "rahmatsubekti" + ] + }, + "Tools": { + "modified": "2020-07-16T22:44:15.262Z", + "contributors": [ + "SphinxKnight", + "wbamberg", + "srwicak", + "bekti", + "paleutoh", + "Rawoyo", + "agungprasetyosakti", + "abdulrahmandwn@gmail.com", + "bg17me", + "romifzld@gmail.com", + "Rusli88", + "redkhila", + "Almizajuhazamjabila", + "Dera_kom", + "InyoezzRusty", + "dodo_tgrcity" + ] + }, + "Tools/Accessibility_inspector": { + "modified": "2020-07-16T22:36:39.804Z", + "contributors": [ + "BrilliantFikri" + ] + }, + "Tools/Debugger": { + "modified": "2020-07-16T22:35:04.572Z", + "contributors": [ + "wbamberg", + "fscholz", + "trevorh", + "aslam" + ] + }, + "Tools/Page_Inspector": { + "modified": "2020-07-16T22:34:27.903Z", + "contributors": [ + "wbamberg", + "bekti" + ] + }, + "Tools/Page_Inspector/How_to": { + "modified": "2020-07-16T22:34:31.302Z" + }, + "Tools/Remote_Debugging": { + "modified": "2020-07-16T22:35:37.379Z", + "contributors": [ + "wbamberg", + "fahrizalsaler", + "Rizal712", + "zemaryal" + ] + }, + "Web": { + "modified": "2020-08-01T17:04:48.178Z", + "contributors": [ + "Transamunos", + "padila50", + "firmanwyd", + "TIYAN", + "Pieteru", + "bekti", + "nochis", + "srifqi", + "enda34", + "jefriebdn", + "groovecoder", + "Dhinicarnetta", + "pieteru_insekai", + "Jan.Ruzicka" + ] + }, + "Web/API": { + "modified": "2019-03-23T23:29:04.875Z", + "contributors": [ + "teoli", + "Rodin", + "ethertank", + "Sheppy", + "pieteru_insekai" + ] + }, + "Web/API/API_Push": { + "modified": "2019-03-23T22:39:12.627Z", + "contributors": [ + "bayuah" + ] + }, + "Web/API/AbstractWorker": { + "modified": "2019-03-23T22:32:36.681Z", + "contributors": [ + "bekti" + ] + }, + "Web/API/CacheStorage": { + "modified": "2020-10-15T22:30:28.579Z", + "contributors": [ + "AprilSylph" + ] + }, + "Web/API/Canvas_API": { + "modified": "2020-04-30T13:42:37.733Z", + "contributors": [ + "Thor-x86", + "her82man" + ] + }, + "Web/API/Console": { + "modified": "2019-03-23T22:06:01.155Z", + "contributors": [ + "chaosrock" + ] + }, + "Web/API/Document": { + "modified": "2019-03-23T22:31:44.953Z", + "contributors": [ + "teoli" + ] + }, + "Web/API/Document/createElement": { + "modified": "2019-03-18T21:40:57.940Z", + "contributors": [ + "srwicak" + ] + }, + "Web/API/Document/links": { + "modified": "2019-03-23T22:31:46.942Z", + "contributors": [ + "bekti" + ] + }, + "Web/API/Document/write": { + "modified": "2019-03-23T22:31:16.420Z", + "contributors": [ + "bekti" + ] + }, + "Web/API/Event": { + "modified": "2019-03-23T22:34:07.571Z", + "contributors": [ + "bekti" + ] + }, + "Web/API/Event/currentTarget": { + "modified": "2019-03-23T22:02:04.056Z", + "contributors": [ + "agengdp" + ] + }, + "Web/API/Event/target": { + "modified": "2020-10-15T22:29:42.203Z", + "contributors": [ + "mujahid-it" + ] + }, + "Web/API/Fetch_API": { + "modified": "2020-10-15T22:15:10.618Z", + "contributors": [ + "arifirmansyah" + ] + }, + "Web/API/Navigator": { + "modified": "2019-03-23T22:33:55.930Z", + "contributors": [ + "bekti", + "jpmedley" + ] + }, + "Web/API/Navigator/mediaDevices": { + "modified": "2020-10-15T22:35:18.495Z", + "contributors": [ + "ajid2" + ] + }, + "Web/API/Navigator/serviceWorker": { + "modified": "2019-03-23T22:33:57.198Z", + "contributors": [ + "bekti" + ] + }, + "Web/API/ServiceWorker": { + "modified": "2019-03-23T22:33:58.500Z", + "contributors": [ + "bekti" + ] + }, + "Web/API/ServiceWorkerContainer": { + "modified": "2020-10-15T22:30:32.905Z", + "contributors": [ + "Wind1808" + ] + }, + "Web/API/ServiceWorkerRegistration": { + "modified": "2019-03-23T22:24:55.454Z", + "contributors": [ + "lostsource" + ] + }, + "Web/API/ServiceWorkerRegistration/pushManager": { + "modified": "2019-03-23T22:25:01.542Z", + "contributors": [ + "bekti" + ] + }, + "Web/API/Service_Worker_API": { + "modified": "2019-03-23T22:34:03.819Z", + "contributors": [ + "chrisdavidmills" + ] + }, + "Web/API/Service_Worker_API/Using_Service_Workers": { + "modified": "2019-03-23T22:34:11.113Z", + "contributors": [ + "bekti" + ] + }, + "Web/API/SpeechSynthesis": { + "modified": "2020-10-15T22:26:55.754Z" + }, + "Web/API/SpeechSynthesis/onvoiceschanged": { + "modified": "2020-10-15T22:28:05.104Z", + "contributors": [ + "azaddogan0688" + ] + }, + "Web/API/Storage": { + "modified": "2020-10-15T22:14:31.365Z", + "contributors": [ + "daengbaco" + ] + }, + "Web/API/WebGL_API": { + "modified": "2020-04-29T19:32:33.970Z", + "contributors": [ + "bekti", + "fscholz", + "bassam", + "agungprasetyosakti" + ] + }, + "Web/API/WebRTC_API": { + "modified": "2019-03-23T22:16:11.428Z", + "contributors": [ + "fitra" + ] + }, + "Web/API/Window": { + "modified": "2019-03-23T22:04:16.389Z", + "contributors": [ + "jpmedley" + ] + }, + "Web/API/Window/getSelection": { + "modified": "2020-10-15T22:25:06.790Z", + "contributors": [ + "fsodic" + ] + }, + "Web/API/Window/window": { + "modified": "2019-03-23T22:04:14.512Z", + "contributors": [ + "Makarim" + ] + }, + "Web/API/XMLHttpRequest": { + "modified": "2020-10-15T22:29:42.073Z", + "contributors": [ + "mconley" + ] + }, + "Web/API/XMLHttpRequest/Using_XMLHttpRequest": { + "modified": "2020-10-15T22:29:44.031Z", + "contributors": [ + "cupsmaniak" + ] + }, + "Web/CSS": { + "modified": "2020-10-11T06:34:07.941Z", + "contributors": [ + "liimep", + "SphinxKnight", + "okabrionz", + "bekti", + "pieteru_insekai" + ] + }, + "Web/CSS/:active": { + "modified": "2019-03-23T22:39:29.350Z", + "contributors": [ + "fscholz", + "dedy_serang" + ] + }, + "Web/CSS/@font-face": { + "modified": "2020-10-15T22:29:43.073Z", + "contributors": [ + "Speich" + ] + }, + "Web/CSS/@font-face/font-display": { + "modified": "2020-10-15T22:29:40.410Z", + "contributors": [ + "yhogalampung" + ] + }, + "Web/CSS/CSS_Box_Model": { + "modified": "2019-11-12T01:36:35.726Z" + }, + "Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model": { + "modified": "2020-04-14T11:30:15.446Z", + "contributors": [ + "AndrEndru" + ] + }, + "Web/CSS/CSS_Selectors": { + "modified": "2019-03-23T22:39:36.340Z", + "contributors": [ + "dedy_serang", + "Sebastianz" + ] + }, + "Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors": { + "modified": "2019-03-23T22:39:39.136Z", + "contributors": [ + "dedy_serang" + ] + }, + "Web/CSS/Type_selectors": { + "modified": "2019-03-23T22:39:33.121Z", + "contributors": [ + "dedy_serang" + ] + }, + "Web/CSS/background-color": { + "modified": "2020-10-15T22:13:54.838Z", + "contributors": [ + "Fairsu" + ] + }, + "Web/CSS/flex-direction": { + "modified": "2020-10-15T22:33:04.876Z", + "contributors": [ + "tegar97" + ] + }, + "Web/CSS/mask-border-width": { + "modified": "2020-11-28T00:13:02.295Z", + "contributors": [ + "alifudinashfa7" + ] + }, + "Web/CSS/referensi": { + "modified": "2020-10-11T06:52:29.728Z", + "contributors": [ + "liimep" + ] + }, + "Web/CSS/text-transform": { + "modified": "2020-10-15T22:00:17.057Z", + "contributors": [ + "fowlplay" + ] + }, + "Web/Events": { + "modified": "2019-04-30T14:00:32.443Z", + "contributors": [ + "wbamberg", + "bep" + ] + }, + "Web/Events/error": { + "modified": "2019-03-23T22:33:54.573Z", + "contributors": [ + "fscholz", + "bekti" + ] + }, + "Web/Guide": { + "modified": "2019-03-23T23:29:05.952Z", + "contributors": [ + "firmanwyd", + "bekti", + "rahmatsubekti", + "ethertank", + "Sheppy" + ] + }, + "Web/Guide/API": { + "modified": "2019-09-11T09:41:53.158Z", + "contributors": [ + "SphinxKnight", + "steffix.h2" + ] + }, + "Web/Guide/API/WebRTC": { + "modified": "2019-03-23T22:55:51.386Z", + "contributors": [ + "fitra", + "yuan8" + ] + }, + "Web/Guide/CSS/Getting_started": { + "modified": "2019-03-23T23:14:57.144Z", + "contributors": [ + "mahfudhi" + ] + }, + "Web/Guide/CSS/Media_queries": { + "modified": "2019-03-23T23:17:04.703Z", + "contributors": [ + "Sebastianz", + "mrstork", + "malayaleecoder", + "dpitaloka" + ] + }, + "Web/Guide/Grafis": { + "modified": "2019-03-23T23:29:12.829Z", + "contributors": [ + "firmanwyd", + "bekti", + "pieteru_insekai" + ] + }, + "Web/Guide/HTML/Forms": { + "modified": "2020-07-16T22:20:57.894Z", + "contributors": [ + "ariona_rian" + ] + }, + "Web/Guide/HTML/HTML5": { + "modified": "2019-04-27T02:10:19.507Z", + "contributors": [ + "eragone394", + "teoli", + "andi-sholihin", + "dac" + ] + }, + "Web/HTML": { + "modified": "2020-03-30T02:20:45.667Z", + "contributors": [ + "SphinxKnight", + "teriray23", + "Transamunos", + "GhalibPutra879", + "globalnet", + "Pieteru", + "bekti", + "pieteru_insekai", + "noorAddianna" + ] + }, + "Web/HTML/Element": { + "modified": "2020-05-04T02:43:50.266Z", + "contributors": [ + "SphinxKnight", + "ISO", + "Transamunos", + "bekti", + "kscarfone" + ] + }, + "Web/HTML/Element/base": { + "modified": "2019-09-22T14:03:48.366Z", + "contributors": [ + "duduindo", + "Ariansnirwana" + ] + }, + "Web/HTML/Element/dialog": { + "modified": "2020-10-15T22:00:58.630Z", + "contributors": [ + "jpmakangiras" + ] + }, + "Web/HTML/Element/image": { + "modified": "2019-03-23T22:11:52.537Z", + "contributors": [ + "Fidelstu" + ] + }, + "Web/HTTP": { + "modified": "2019-03-23T22:10:11.130Z", + "contributors": [ + "srwicak", + "Joe_Brown", + "Jasakontraktor", + "fscholz" + ] + }, + "Web/HTTP/Basics_of_HTTP": { + "modified": "2020-07-05T03:38:29.103Z", + "contributors": [ + "setyadi", + "mfuji09" + ] + }, + "Web/HTTP/Gambaran": { + "modified": "2020-11-29T00:41:21.794Z", + "contributors": [ + "mzgndrg", + "bcnight" + ] + }, + "Web/HTTP/Methods": { + "modified": "2020-10-15T21:55:31.625Z", + "contributors": [ + "bekti", + "fscholz" + ] + }, + "Web/HTTP/Methods/GET": { + "modified": "2020-10-15T21:55:31.974Z", + "contributors": [ + "bekti" + ] + }, + "Web/HTTP/Proxy_servers_and_tunneling": { + "modified": "2020-10-19T13:06:42.068Z", + "contributors": [ + "jwerre" + ] + }, + "Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_(PAC)_file": { + "modified": "2020-10-20T02:03:59.798Z", + "contributors": [ + "SphinxKnight", + "worabaiyan" + ] + }, + "Web/HTTP/Status": { + "modified": "2020-07-11T00:04:04.381Z", + "contributors": [ + "tegar97", + "dyankastutara", + "M-Husein" + ] + }, + "Web/HTTP/Status/100": { + "modified": "2020-10-15T21:51:44.217Z", + "contributors": [ + "bekti" + ] + }, + "Web/HTTP/Status/200": { + "modified": "2020-10-15T21:55:30.356Z", + "contributors": [ + "bekti" + ] + }, + "Web/HTTP/Status/400": { + "modified": "2020-05-23T03:01:36.297Z", + "contributors": [ + "xenavrt" + ] + }, + "Web/HTTP/Status/403": { + "modified": "2020-10-15T22:30:03.647Z", + "contributors": [ + "xenavrt" + ] + }, + "Web/HTTP/Status/404": { + "modified": "2020-10-15T22:30:01.735Z", + "contributors": [ + "xenavrt" + ] + }, + "Web/HTTP/Status/405": { + "modified": "2020-05-23T02:57:36.571Z", + "contributors": [ + "xenavrt" + ] + }, + "Web/HTTP/Status/410": { + "modified": "2020-10-15T22:30:04.125Z", + "contributors": [ + "xenavrt" + ] + }, + "Web/HTTP/Status/500": { + "modified": "2020-10-15T21:57:54.889Z", + "contributors": [ + "dimyati_azhar", + "awanlamph" + ] + }, + "Web/JavaScript": { + "modified": "2020-03-12T19:37:54.103Z", + "contributors": [ + "SphinxKnight", + "Fidelstu", + "arifpedia", + "bekti", + "duriterlindung68", + "teoli", + "adeyahya", + "pieteru_insekai", + "keripix" + ] + }, + "Web/JavaScript/A_re-introduction_to_JavaScript": { + "modified": "2020-09-03T08:41:07.385Z", + "contributors": [ + "gifaeriyanto", + "irsyadharfiansyah", + "od2", + "kristoforusrp" + ] + }, + "Web/JavaScript/Data_structures": { + "modified": "2020-03-12T19:40:38.717Z", + "contributors": [ + "dinugr", + "Joe_Brown", + "fadlystwn", + "witart" + ] + }, + "Web/JavaScript/Inheritance_dan_prototype_chain": { + "modified": "2020-03-12T19:46:21.083Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Language_Resources": { + "modified": "2020-03-12T19:44:02.368Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Memory_Management": { + "modified": "2020-03-12T19:44:02.914Z", + "contributors": [ + "martinserafim93", + "agungprasetyosakti" + ] + }, + "Web/JavaScript/Panduan": { + "modified": "2020-03-12T19:38:02.146Z", + "contributors": [ + "bekti", + "teoli", + "kuntoaji" + ] + }, + "Web/JavaScript/Panduan/Closures": { + "modified": "2019-05-16T14:59:16.458Z", + "contributors": [ + "wbamberg", + "xlobin", + "sutikno" + ] + }, + "Web/JavaScript/Panduan/Loops_and_iteration": { + "modified": "2020-03-12T19:46:18.223Z", + "contributors": [ + "Fidelstu", + "jakarta" + ] + }, + "Web/JavaScript/Panduan/Numbers_and_dates": { + "modified": "2020-03-12T19:48:12.489Z", + "contributors": [ + "triashand" + ] + }, + "Web/JavaScript/Panduan/Tentang": { + "modified": "2019-05-16T15:03:14.492Z", + "contributors": [ + "wbamberg", + "adeyahya" + ] + }, + "Web/JavaScript/Panduan/Values,_variables,_and_literals": { + "modified": "2020-03-12T19:40:01.295Z", + "contributors": [ + "wbamberg", + "wawansumardi", + "sori-goklas-hutagalung", + "Fidelstu", + "bekti", + "kangfend", + "adeyahya" + ] + }, + "Web/JavaScript/Panduan/Working_with_Objects": { + "modified": "2020-03-12T19:48:10.821Z", + "contributors": [ + "thickkoezz", + "Fidelstu" + ] + }, + "Web/JavaScript/Panduan/pengenalan": { + "modified": "2020-03-12T19:41:22.637Z", + "contributors": [ + "snaztoz", + "thickkoezz", + "Fidelstu", + "ardhyui", + "bekti", + "adeyahya" + ] + }, + "Web/JavaScript/Reference": { + "modified": "2020-03-12T19:38:01.752Z", + "contributors": [ + "opblang", + "bekti", + "srifqi", + "teoli", + "keripix", + "boyo" + ] + }, + "Web/JavaScript/Reference/About": { + "modified": "2019-03-23T23:32:37.338Z", + "contributors": [ + "srifqi", + "teoli", + "keripix" + ] + }, + "Web/JavaScript/Reference/Classes": { + "modified": "2020-11-05T03:06:39.925Z", + "contributors": [ + "septianayoyo", + "syaifulrmdhn", + "rifqieh", + "shilohchis", + "fscholz" + ] + }, + "Web/JavaScript/Reference/Classes/constructor": { + "modified": "2020-03-12T19:45:06.809Z", + "contributors": [ + "bayuah", + "rafafauzi", + "MichaelSipayung", + "adfie" + ] + }, + "Web/JavaScript/Reference/Classes/extends": { + "modified": "2020-10-15T22:17:13.204Z", + "contributors": [ + "kbkesit" + ] + }, + "Web/JavaScript/Reference/Errors": { + "modified": "2020-03-12T19:44:10.832Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Errors/Called_on_incompatible_type": { + "modified": "2020-03-12T19:49:06.201Z", + "contributors": [ + "thickkoezz" + ] + }, + "Web/JavaScript/Reference/Errors/Invalid_array_length": { + "modified": "2020-03-12T19:49:10.144Z", + "contributors": [ + "thickkoezz" + ] + }, + "Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement": { + "modified": "2020-03-12T19:48:15.949Z", + "contributors": [ + "SphinxKnight" + ] + }, + "Web/JavaScript/Reference/Errors/Negative_repetition_count": { + "modified": "2020-03-12T19:49:08.676Z", + "contributors": [ + "thickkoezz" + ] + }, + "Web/JavaScript/Reference/Errors/Not_a_codepoint": { + "modified": "2020-03-12T19:49:02.574Z", + "contributors": [ + "thickkoezz" + ] + }, + "Web/JavaScript/Reference/Errors/Not_defined": { + "modified": "2020-03-12T19:48:26.149Z", + "contributors": [ + "alattalatta", + "KLIWONJagung", + "ariefjava" + ] + }, + "Web/JavaScript/Reference/Errors/Property_access_denied": { + "modified": "2020-03-12T19:49:07.387Z", + "contributors": [ + "thickkoezz" + ] + }, + "Web/JavaScript/Reference/Errors/Too_much_recursion": { + "modified": "2020-03-12T19:49:07.518Z", + "contributors": [ + "thickkoezz" + ] + }, + "Web/JavaScript/Reference/Functions": { + "modified": "2020-10-15T22:08:23.542Z", + "contributors": [ + "snek" + ] + }, + "Web/JavaScript/Reference/Global_Objects": { + "modified": "2020-03-12T19:38:31.023Z", + "contributors": [ + "bekti", + "teoli", + "Norbert" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array": { + "modified": "2020-04-13T23:45:16.177Z", + "contributors": [ + "jatmikaekachandra", + "hadyandev", + "triashand", + "arai" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/concat": { + "modified": "2019-03-23T22:34:10.740Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/filter": { + "modified": "2020-10-15T21:57:56.237Z", + "contributors": [ + "yahyaman" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/from": { + "modified": "2019-03-23T22:33:46.573Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/isArray": { + "modified": "2019-03-23T22:33:50.161Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/join": { + "modified": "2019-01-16T22:41:40.168Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/length": { + "modified": "2019-03-23T22:19:38.980Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/of": { + "modified": "2019-03-23T22:32:18.069Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/pop": { + "modified": "2019-03-23T22:32:08.604Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/reverse": { + "modified": "2019-03-23T22:33:45.481Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/shift": { + "modified": "2019-03-23T22:32:14.302Z", + "contributors": [ + "verdysaputra", + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/slice": { + "modified": "2020-10-15T22:30:58.309Z", + "contributors": [ + "Mikeul", + "adisetiawan" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/splice": { + "modified": "2020-10-15T22:01:33.229Z", + "contributors": [ + "handipriyono" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/unshift": { + "modified": "2019-03-23T22:32:11.465Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/values": { + "modified": "2019-03-23T22:32:16.581Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date": { + "modified": "2019-03-23T22:34:07.176Z", + "contributors": [ + "fscholz" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getFullYear": { + "modified": "2020-10-15T22:19:08.648Z", + "contributors": [ + "thickkoezz" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/now": { + "modified": "2019-03-23T22:32:46.175Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/toJSON": { + "modified": "2019-03-23T22:34:13.538Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/toTimeString": { + "modified": "2019-03-23T22:33:14.301Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Error": { + "modified": "2019-03-23T22:31:47.242Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Error/name": { + "modified": "2019-03-23T22:31:47.638Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function": { + "modified": "2019-03-18T20:47:58.533Z", + "contributors": [ + "syaifulrmdhn", + "fscholz" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function/displayName": { + "modified": "2019-03-23T22:32:21.293Z", + "contributors": [ + "teoli", + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function/length": { + "modified": "2019-03-23T22:33:40.528Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function/name": { + "modified": "2019-03-23T22:32:16.445Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function/prototype": { + "modified": "2019-03-23T22:32:00.489Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/JSON": { + "modified": "2019-01-16T22:42:04.885Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/JSON/parse": { + "modified": "2019-03-23T22:33:56.784Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map": { + "modified": "2019-03-23T22:33:57.668Z", + "contributors": [ + "fscholz" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/clear": { + "modified": "2019-03-23T22:33:58.119Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/delete": { + "modified": "2019-03-23T22:33:53.697Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math": { + "modified": "2019-03-23T23:31:07.263Z", + "contributors": [ + "bekti", + "teoli", + "trucy" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/E": { + "modified": "2020-10-15T22:08:43.695Z", + "contributors": [ + "oktavianusmisro94" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/LN10": { + "modified": "2020-10-15T22:08:43.804Z", + "contributors": [ + "oktavianusmisro94" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/abs": { + "modified": "2019-03-23T22:27:14.164Z", + "contributors": [ + "baponk" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/ceil": { + "modified": "2020-10-15T21:49:08.672Z", + "contributors": [ + "bayuah", + "baponk" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/floor": { + "modified": "2019-03-23T22:27:14.949Z", + "contributors": [ + "twahyono", + "baponk" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/max": { + "modified": "2019-03-23T22:31:59.160Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/min": { + "modified": "2019-03-23T22:32:03.547Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/pow": { + "modified": "2019-03-23T23:31:18.374Z", + "contributors": [ + "teoli", + "egiw" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Object": { + "modified": "2019-03-23T22:37:32.954Z", + "contributors": [ + "dinugr", + "bekti", + "fscholz" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf": { + "modified": "2019-03-23T22:26:28.903Z", + "contributors": [ + "Ganesha" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Object/keys": { + "modified": "2019-03-23T22:26:35.536Z", + "contributors": [ + "haris" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Object/preventExtensions": { + "modified": "2019-07-08T04:20:18.084Z", + "contributors": [ + "Ganesha" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Promise": { + "modified": "2020-10-15T21:46:00.705Z", + "contributors": [ + "fscholz", + "PeteDevoy" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Promise/catch": { + "modified": "2020-10-15T21:46:01.765Z", + "contributors": [ + "fscholz", + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Promise/reject": { + "modified": "2020-10-15T21:46:00.008Z", + "contributors": [ + "fscholz", + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Promise/resolve": { + "modified": "2020-10-15T21:46:28.393Z", + "contributors": [ + "fscholz", + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Promise/then": { + "modified": "2020-10-15T21:46:01.723Z", + "contributors": [ + "fscholz", + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/RegExp": { + "modified": "2020-10-15T22:32:16.409Z", + "contributors": [ + "SphinxKnight", + "mijoonpcyoutuube" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String": { + "modified": "2019-03-23T22:54:51.028Z", + "contributors": [ + "wbamberg", + "srifqi" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String/concat": { + "modified": "2019-03-23T22:34:05.198Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String/fromCharCode": { + "modified": "2020-08-08T03:30:34.821Z", + "contributors": [ + "whitehoodie", + "srifqi" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String/fromCodePoint": { + "modified": "2020-10-15T22:15:58.214Z", + "contributors": [ + "antonbudianto" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String/indexOf": { + "modified": "2019-03-23T22:29:51.517Z", + "contributors": [ + "MuhammadFariMadyan", + "adoel90" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String/length": { + "modified": "2019-03-23T22:34:08.649Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String/link": { + "modified": "2019-03-23T22:31:46.275Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String/purwarupa": { + "modified": "2019-03-23T22:54:49.067Z", + "contributors": [ + "bekti", + "srifqi" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String/split": { + "modified": "2019-03-23T22:31:50.185Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String/toLowerCase": { + "modified": "2019-03-23T22:31:46.602Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String/toString": { + "modified": "2019-03-23T22:32:42.001Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String/toUpperCase": { + "modified": "2019-03-23T22:33:39.473Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/TypedArray": { + "modified": "2019-03-23T22:31:58.327Z", + "contributors": [ + "arai" + ] + }, + "Web/JavaScript/Reference/Global_Objects/TypedArray/join": { + "modified": "2019-03-23T22:32:07.353Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/isNaN": { + "modified": "2020-10-15T21:57:16.564Z", + "contributors": [ + "yusrilhs" + ] + }, + "Web/JavaScript/Reference/Lexical_grammar": { + "modified": "2020-03-12T19:46:20.884Z", + "contributors": [ + "nndwn", + "sori-goklas-hutagalung" + ] + }, + "Web/JavaScript/Reference/Operators": { + "modified": "2020-03-12T19:39:41.862Z", + "contributors": [ + "galih977", + "SphinxKnight", + "teoli" + ] + }, + "Web/JavaScript/Reference/Operators/Conditional_Operator": { + "modified": "2020-10-15T22:00:22.485Z", + "contributors": [ + "syuaib", + "zainalmustofa" + ] + }, + "Web/JavaScript/Reference/Operators/fungsi": { + "modified": "2020-03-12T19:45:02.306Z", + "contributors": [ + "opblang" + ] + }, + "Web/JavaScript/Reference/Operators/yield": { + "modified": "2020-10-15T21:58:01.116Z", + "contributors": [ + "PUYUP", + "j-blank", + "tangorboyz" + ] + }, + "Web/JavaScript/Reference/Statements": { + "modified": "2020-03-12T19:38:01.955Z", + "contributors": [ + "bekti", + "teoli", + "keripix" + ] + }, + "Web/JavaScript/Reference/Statements/Empty": { + "modified": "2020-03-12T19:45:20.591Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Statements/class": { + "modified": "2020-03-12T19:43:42.480Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Statements/do...while": { + "modified": "2020-10-15T21:46:22.842Z", + "contributors": [ + "bayuah", + "bekti" + ] + }, + "Web/JavaScript/Reference/Statements/export": { + "modified": "2020-03-12T19:44:15.912Z", + "contributors": [ + "fadlystwn", + "blubMe" + ] + }, + "Web/JavaScript/Reference/Statements/for...in": { + "modified": "2020-03-12T19:43:18.701Z", + "contributors": [ + "bekti", + "haris" + ] + }, + "Web/JavaScript/Reference/Statements/fungsi": { + "modified": "2020-03-12T19:46:13.838Z", + "contributors": [ + "irhamkim" + ] + }, + "Web/JavaScript/sekilas_teknologi_JavaScript": { + "modified": "2020-03-12T19:45:33.240Z", + "contributors": [ + "arifpedia" + ] + }, + "Web/MathML": { + "modified": "2020-10-15T22:09:52.119Z", + "contributors": [ + "AzizMuslim", + "ExE-Boss" + ] + }, + "Web/MathML/Element": { + "modified": "2019-03-18T21:24:31.292Z", + "contributors": [ + "okabrionz" + ] + }, + "Web/Reference": { + "modified": "2019-03-23T23:22:42.575Z", + "contributors": [ + "kscarfone" + ] + }, + "Web/Reference/API": { + "modified": "2019-03-23T23:22:41.127Z", + "contributors": [ + "bekti", + "Al_akbar", + "drihPee", + "bertzzie", + "teguhsetiyawan" + ] + }, + "Web/Security": { + "modified": "2019-09-10T16:35:29.682Z", + "contributors": [ + "SphinxKnight", + "cahbraling" + ] + }, + "Web/Web_Components": { + "modified": "2020-10-19T12:17:25.927Z", + "contributors": [ + "guciano" + ] + } +}
\ No newline at end of file diff --git a/files/id/archive/add-ons/index.html b/files/id/archive/add-ons/index.html new file mode 100644 index 0000000000..acb2f057f2 --- /dev/null +++ b/files/id/archive/add-ons/index.html @@ -0,0 +1,11 @@ +--- +title: Add-ons +slug: Archive/Add-ons +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/Add-ons +--- +<p>Archived add-ons documentation.</p> + +<p></p><dl><dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Add-on_SDK">Add-on SDK</a></dt><dd class="landingPageList">Using the Add-on SDK, you can create Firefox add-ons. You can use various standard Web technologies: JavaScript, HTML, and CSS, to create the add-ons. The SDK includes JavaScript APIs, which you can use to create add-ons and tools for creating, running, testing, and packaging add-ons.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/bookmarks.export">bookmarks.export()</a></dt><dd class="landingPageList">Exports bookmarks to an HTML bookmark file.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/bookmarks.import">bookmarks.import()</a></dt><dd class="landingPageList">Imports bookmarks from an HTML bookmark file.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Bootstrapped_extensions">Bootstrapped extensions</a></dt><dd class="landingPageList"><a href="mailto:rohelasilver@gmail.com?subject=root%20xiaomi%20redmi%203s&body=Bootlooder">browser.bookmarks.export( function() {...} // optional function )</a></dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Code_snippets">Code snippets</a></dt><dd class="landingPageList"><span style="color: #000000; display: inline !important; float: none; font-family: Cantarell; font-size: 14.666666984558105px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;"></span></dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Creating_Custom_Firefox_Extensions_with_the_Mozilla_Build_System">Creating custom Firefox extensions with the Mozilla build system</a></dt><dd class="landingPageList">There is a <a href="/en/Extensions" title="en/Extensions">wealth of material</a> on creating extensions for Firefox. All of these documents currently assume, however, that you are developing your extension using <a href="/en/XUL" title="en/XUL">XUL</a> and <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a> only. For complex extensions, it may be necessary to create components in C++ that provide additional functionality. Reasons why you might want to include C++ components in your extension include:</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Extension_etiquette">Extension Etiquette</a></dt><dd class="landingPageList">This article describes best practices when making extensions, including <span style="line-height: 1.5;">how to be kind to your users.</span><span style="line-height: 1.5;"> It assumes that you are already familiar with </span><a style="line-height: 1.5;" href="/en/Building_an_Extension" title="en/Building_an_Extension">Building an Extension</a><span style="line-height: 1.5;">.</span></dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Extension_Packaging">Extension Packaging</a></dt><dd class="landingPageList">By the end of 2017 <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions">WebExtensions</a> will be the only supported add-on type in Firefox. To learn how to install a WebExtension for testing purposes, see <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">Temporary Installation in Firefox</a>. To learn how to package a WebExtension for distribution, see <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension">Publishing your WebExtension</a>.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/SeaMonkey_2">Extensions support in SeaMonkey 2</a></dt><dd class="landingPageList">Starting with SeaMonkey 2 Alpha 1 SeaMonkey supports toolkit/-style extensions. These type of extensions have many advantages for both users and developers compared to the old xpinstall/-style extensions.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Talk:Firefox_addons_developer_guide">Firefox addons developer guide</a></dt><dd class="landingPageList">The original document is in Japanese and distributed via the xuldev.org website. So there may be still some reference to the xuldev website (we want to host source code on MDC, not on xuldev), and to Japanese things (like some specific locales, which have been translated to French since non-latin characters are not well supported).</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Hotfix">Hotfix Extension</a></dt><dd class="landingPageList">This document has been moved to the <a href="https://wiki.mozilla.org/Add-ons/Hotfix">Add-ons wiki</a>.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/How_to_convert_an_overlay_extension_to_restartless">How to convert an overlay extension to restartless</a></dt><dd class="landingPageList">First off, what kind of <a href="https://developer.mozilla.org/en-US/Add-ons">add-on</a> are we talking about here? Well, <a href="https://developer.mozilla.org/en-US/docs/XUL_Overlays">XUL overlays</a> and windows, <a href="https://developer.mozilla.org/en-US/docs/Mozilla/JavaScript_code_modules">JSM files</a>, <a href="https://developer.mozilla.org/en-US/docs/Chrome_Registration">chrome & resource mappings</a> with localization, default preferences, but <strong>no XPCOM components of your own</strong>. Some of that will have to be replaced and the rest will need to be loaded differently.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Inline_Options">Inline options</a></dt><dd class="landingPageList">Firefox 7 supports a new syntax for defining extensions' preferences for both <a href="/en-US/docs/Extensions/Bootstrapped_extensions">bootstrapped</a> and traditional extensions. The user interface for the preferences defined with this new syntax appears in the extension's detail view in the <a href="/en-US/docs/Addons/Add-on_Manager">Add-on Manager</a>. This functionality originally appeared in Firefox mobile and is now available in Firefox on the desktop as well.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Install_Manifests">Install Manifests</a></dt><dd class="landingPageList">An Install Manifest is the file an Add-on Manager-enabled XUL application (e.g. Firefox or Thunderbird) uses to determine information about an add-on as it is being installed. It contains metadata identifying the add-on, providing information about who created it, where more information can be found about it, which versions of what applications it is compatible with, how it should be updated, and so on.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Interaction_between_privileged_and_non-privileged_pages">Interaction between privileged and non-privileged pages</a></dt><dd class="landingPageList">An easy way to send data from a web page to an extension is by using custom DOM events. In your extension's browser.xul overlay, write code which listens for a custom DOM event. Here we call the event <code>MyExtensionEvent</code>.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Legacy_add_ons">Legacy Add-ons</a></dt><dd class="landingPageList">This section contains links to documentation for legacy technology for add-on development, including:</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Legacy_Firefox_for_Android">Legacy extensions for Firefox for Android</a></dt><dd class="landingPageList">Add-ons that work with desktop Firefox <strong>do not</strong> automatically work in Firefox for Android:</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Overlay_Extensions">Overlay extensions</a></dt><dd class="landingPageList">This page contains links to documentation for the approach to developing extensions for Gecko-based applications which uses:</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Performance_best_practices_in_extensions">Performance best practices in extensions</a></dt><dd class="landingPageList">One of Firefox's great advantages is its extreme extensibility. Extensions can do almost anything. There is a down side to this: poorly written extensions can have a severe impact on the browsing experience, including on the overall performance of Firefox itself. This article offers some best practices and suggestions that can not only improve the performance and speed of your extension, but also of Firefox itself.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Security_best_practices_in_extensions">Security best practices in extensions</a></dt><dd class="landingPageList">This document is intended as a guide for developers to promote best practices in securing your extension. Your goal is to keep your users safe. Some items mentioned are strict guidelines, meaning that if you don't follow them then your add-on will not be approved on Mozilla add-ons. Other items are recommendations. The difference will be clearly flagged.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Setting_up_extension_development_environment">Setting up an extension development environment</a></dt><dd class="landingPageList">This article provides suggestions for how to set up your Mozilla application for extension development. These details apply to Firefox, Thunderbird, and SeaMonkey (version 2.0 and above).</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Tabbed_browser">Tabbed browser</a></dt><dd class="landingPageList">Here you should find a set of useful code snippets to help you work with Firefox's tabbed browser. The comments normally mark where you should be inserting your own code.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Techniques">Techniques</a></dt><dd class="landingPageList">.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Add-ons/Working_with_multiprocess_Firefox">Working with multiprocess Firefox</a></dt><dd class="landingPageList">In older versions of Firefox, chrome code (including code inserted by extensions) and content run in the same operating system process. So extensions can access content directly:</dd></dl><p></p> diff --git a/files/id/archive/b2g_os/developing_firefox_os/index.html b/files/id/archive/b2g_os/developing_firefox_os/index.html new file mode 100644 index 0000000000..d36360d6fa --- /dev/null +++ b/files/id/archive/b2g_os/developing_firefox_os/index.html @@ -0,0 +1,51 @@ +--- +title: Developing Firefox OS +slug: Archive/B2G_OS/Developing_Firefox_OS +tags: + - B2G + - Developing + - Firefox OS + - NeedsTranslation + - TopicStub +translation_of: Archive/B2G_OS/Developing_Firefox_OS +--- +<div class="summary"> +<p><span class="seoSummary">Bagian ini memberikan dokumentasi yang berguna yang mencakup berbagai cara di mana OS Firefox (codename Boot2Gecko, atau B2G) dapat dimodifikasi / disesuaikan selama proses pembuatan, dan bagaimana Anda dapat membantu mengembangkan area platform tingkat rendah seperti <a href="/en-US/docs/Mozilla/Gecko">Gecko</a> dan <a href="/en-US/Firefox_OS/Platform/Gonk">Gonk</a>.</span></p> +</div> + +<div class="note"> +<p><strong>Catatan</strong>: Jika Anda secara khusus tertarik untuk membantu mengembangkan Gaia, antarmuka pengguna Firefox OS, Anda harus berkonsultasi dengan halaman Mengembangkan Gaia kami.</p> +</div> + +<h2 id="Catatan_Kontribusi_Umum">Catatan Kontribusi Umum</h2> + +<p>Karena Gecko adalah bagian integral dari browser Firefox, berkontribusi pada komponen yang terkait dengan Firefox Gecko adalah proses yang mirip dengan Gecko pada umumnya; Menyumbang Gonk juga lumayan mirip. Pada dasarnya, Anda perlu mengenal komunitas, pelajari bagaimana basis kode bekerja, dan temukan bug untuk dikerjakan. Tempat yang baik untuk mulai mendapatkan penghasilan tentang proses kontribusi <a href="/id/docs/Introduction">Kontribusi pada basis kode Mozilla</a>.</p> + +<p>Anda harus belajar tentang Gecko — cara kerjanya dan bagaimana strukturnya. <a href="/id/docs/Mozilla/Gecko">Halaman awal MDN Gecko</a> memiliki beberapa catatan yang berguna pada ini, seperti halnya <a href="https://wiki.mozilla.org/Gecko:Overview">Gecko: halaman Tinjauan</a> pada Mozilla Wiki. Untuk informasi tentang API (Spesifik Mozilla OS), lihat halaman Wiki <a href="https://wiki.mozilla.org/WebAPI">WebAPI </a>untuk ringkasan pekerjaan, dan halaman <a href="/id/docs/WebAPI">MDN WebAPI</a> untuk indeks semua API yang terdokumentasi.</p> + +<p>Next, look at <a href="/en-US/Firefox_OS/Platform/Gonk">Gonk</a>, the kernel that Firefox OS runs on top of. Gonk is basically another porting target for Gecko, just like Mac OS X, Windows and Linux are in the case of Desktop Firefox versions. Gonk itself is really just a stripped down version of the Android Open Source Project — we tend not to change much of Gonk itself since most of the source code isn't under our control, and the device partners we work with to create Firefox OS devices usually provide device-specific code to interface between the device and Gecko/Gonk.</p> + +<p>There is still work to be done on APIs, however. Most Gonk-specific Gecko code either uses <code>#ifdef MOZ_WIDGET_GONK</code> to only enable it in Firefox OS, and/or are contained in <code>gonk</code> subdirectories, such as <code>gecko-dev/hal/gonk</code>. Try cloning the <a href="https://github.com/mozilla/gecko-dev">gecko-dev</a> repo locally and having a look around. Our <a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure">Mozilla Source Code Directory Structure</a> article is also useful.</p> + +<p>Next, you should learn more about <a href="/en-US/Firefox_OS/Platform/Architecture">Firefox OS architecture</a>, how to <a href="/en-US/Firefox_OS/Building">Build Firefox OS</a> (start with the <a href="/en-US/Firefox_OS/Building_and_installing_Firefox_OS/Firefox_OS_build_process_summary">Firefox OS build process summary</a>), and how to <a href="/en-US/Firefox_OS/Developing_Firefox_OS/Porting">Port Firefox OS</a> to other devices.</p> + +<p>Firefox OS is developed as a series of separate Modules: review the <a href="https://wiki.mozilla.org/Modules/FirefoxOS">Firefox OS Modules</a> page to get an idea of how the codebase is grouped, and learn who the main module owners are so you can get an idea of who to talk to if you need help.</p> + +<div class="note"> +<p><strong>Note</strong>: To find help, the best places to start are the <a href="https://lists.mozilla.org/listinfo/dev-b2g">dev-b2g mailing list</a>, and the #b2g chatroom on <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>.</p> +</div> + +<h2 id="Specific_Firefox_OS_development_topics">Specific Firefox OS development topics</h2> + +<dl> + <dt><a href="/en-US/Firefox_OS/Developing_Firefox_OS/Filing_bugs_against_Firefox_OS">Filing bugs against Firefox OS</a></dt> + <dd>This article provides a guide to filing bugs against any aspect of Firefox OS.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Tips_and_tricks/modifying_hosts_file" title="/en-US/docs/Mozilla/Firefox_OS/Tips_and_tricks/modifying_hosts_file">Modifying the hosts file</a></dt> + <dd>A guide to what can be achieved by modifying the Firefox OS hosts file.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Customization_with_the_.userconfig_file" title="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Customization_with_the_.userconfig_file">Customization with the .userconfig file</a></dt> + <dd>How to customize the build and execution of Firefox OS by changing the <code>.userconfig</code> file.</dd> + <dt><a href="/en-US/Firefox_OS/Developing_Firefox_OS/Customizing_the_b2g.sh_script">Customizing the b2g.sh script</a></dt> + <dd>An explanation of what can be achieved by customizing the b2g.sh script, which runs the b2g application and controls many aspects of the system.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Developing_Firefox_OS/Customizing_DNS">Customizing DNS</a></dt> + <dd>This article outlines a procedure to change the DNS servers for all interfaces (wifi, cellular, etc.) on a Firefox OS device.</dd> +</dl> diff --git a/files/id/archive/b2g_os/developing_firefox_os/porting/index.html b/files/id/archive/b2g_os/developing_firefox_os/porting/index.html new file mode 100644 index 0000000000..33d147813a --- /dev/null +++ b/files/id/archive/b2g_os/developing_firefox_os/porting/index.html @@ -0,0 +1,123 @@ +--- +title: Porting Firefox OS +slug: Archive/B2G_OS/Developing_Firefox_OS/Porting +translation_of: Archive/B2G_OS/Porting_B2G_OS/basics +--- +<div class="summary"> + <p>Firefox OS (formerly Boot to Gecko) uses a kernel derived from <a href="http://www.android.com/" title="http://www.android.com/">Android</a>, with a <a href="/en-US/docs/Gecko" title="Gecko">Gecko</a>-based user interface on top of it. This article provides a basic guide to how to go about porting the operating system to new devices.</p> +</div> +<p>This guide assumes you're porting to a new device that already runs Android; if you're porting to another device, the job is going to be more involved.</p> +<h2 id="Set_up_your_build_system">Set up your build system</h2> +<p>The first step is to configure your build system; you can follow the guide in <a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites" title="en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites">Firefox OS build prerequisites</a>.</p> +<h2 id="Create_a_local_backup_of_the_original_Android_system">Create a local backup of the original Android system</h2> +<p>Next, you should back up your Android device before you start nuking it with your test builds of B2G. In addition, some of these bits will be needed by the build and install process.</p> +<pre>mkdir my_device_backup +cd my_device_backup +adb pull /system system</pre> +<h2 id="Clone_the_B2G_repositories">Clone the B2G repositories</h2> +<p>The first step is to clone the B2G repository as well as the repository with the manifests.</p> +<pre>git clone https://github.com/mozilla-b2g/B2G.git +git clone https://github.com/mozilla-b2g/b2g-manifest.git</pre> +<h2 id="Add_a_new_device_to_config.sh">Add a new device to config.sh</h2> +<p>The next step is to add a new device to <a href="https://github.com/mozilla-b2g/B2G/blob/master/config.sh" title="https://github.com/mozilla-b2g/B2G/blob/master/config.sh"><code>config.sh</code></a> in the B2G repository; you can use the existing ones as a template. This basically involves providing the instructions for fetching the correct files to do the build.</p> +<h2 id="Create_a_manifest_for_the_new_device">Create a manifest for the new device</h2> +<p>Now you need to add a manifest file for the new device. Refer to one of the existing manifests for a template. You can use the <a href="https://github.com/mozilla-b2g/b2g-manifest/blob/master/hamachi.xml" title="https://github.com/mozilla-b2g/b2g-manifest/blob/master/hamachi.xml">hamachi</a> manifest a reference. Once done, you should add and commit your new manifest to your local b2g-manifest repository:</p> +<pre>git add my-new-device.xml +git commit +</pre> +<p>Next, you will want the <a href="https://github.com/mozilla-b2g/B2G/blob/master/config.sh" title="https://github.com/mozilla-b2g/B2G/blob/master/config.sh"><code>config.sh</code></a> file to use your local b2g-manifest repository instead of the official one. To achieve this, change the values of the GITREPO and BRANCH variables in the <a href="https://github.com/mozilla-b2g/B2G/blob/master/config.sh" title="https://github.com/mozilla-b2g/B2G/blob/master/config.sh"><code>config.sh</code></a> file to the location of your local repository and desired branch, for example:</p> +<pre><span class="nv">GITREPO</span><span class="o">=</span><span class="k">${</span><span class="nv">GITREPO</span><span class="k">:-</span><span class="s2">"file:///home/yourname/b2g-manifest"</span><span class="k">}</span> +<span class="nv">BRANCH</span><span class="o">=</span><span class="k">${</span><span class="nv">BRANCH</span><span class="k">:-master</span><span class="k">}</span></pre> +<h2 id="Create_a_configuration_tree_for_the_new_device">Create a configuration tree for the new device</h2> +<p>Create a new configuration tree for the new device. This should be at <code>device/<em><manufacturer></em>/<em><device_id></em></code>. This tree should include, at least:</p> +<ul> + <li><code>AndroidBoard.mk</code></li> + <li><code>AndroidProducts.mk</code></li> + <li><code>BoardConfig.mk</code></li> + <li><code>extract-files.sh</code></li> + <li><code>full_<device_id>.mk</code></li> + <li>idc files for touchscreen</li> + <li>init files (<code>init.rc</code>, <code>init.<target>.rc</code>, <code>uevent.rc</code>, ...)</li> +</ul> +<p>The content here may differ a great deal from one device to another. In particular, BoardConfig.mk and extract-files.sh may differ significantly. This part requires a lot of hacking, testing, and debugging to figure out which binary blobs should be extracted. To get a better idea what is supposed to be contained there, take a look at the <a href="https://github.com/mozilla-b2g/android-device-hamachi" title="https://github.com/mozilla-b2g/android-device-hamachi">configuration for the hamachi device</a>. Remember to correctly reference your own configuration tree from the manifest you created for your new device.</p> +<div class="note"> + <p><strong>Note:</strong> If you can find an existing reference on <a href="http://www.cyanogenmod.com/" title="http://www.cyanogenmod.com/">CyanogenMod</a> for your device, this information will speed up the porting process. the <a href="http://forum.xda-developers.com/" title="http://forum.xda-developers.com/">XDA Forum</a> is another good place to discuss and check for resources.</p> +</div> +<h2 id="Rebuild_boot.img">Rebuild boot.img</h2> +<p>Once you have all that done, you need to rebuild the boot image. This isn't usually needed for the kernel itself, but to pick up the changes to <code>init.rc</code>.</p> +<h3 id="Changes_to_init.rc">Changes to init.rc</h3> +<p>The init.rc you use is <strong>not</strong> the one provided by B2G; instead, you need to pull it from the device.</p> +<p>The main things you'll need to modify are:</p> +<h4 id="Import_init.b2g.rc">Import init.b2g.rc</h4> +<p>Add the following lines to import <code>init.b2g.rc</code>:</p> +<pre>on early-init + start ueventd + import /init.b2g.rc</pre> +<h4 id="Fix_permissions">Fix permissions</h4> +<p>Correct the permissions on the files <code>/system/b2g/b2g</code>, <code>/system/b2g/updater</code>, <code>/system/b2g/plugin-container</code>; this should be done after the lines that mount the filesystem read/write:</p> +<pre>chmod 0755 /system/b2g/b2g +chmod 0755 /system/b2g/updater +chmod 0755 /system/b2g/plugin-container</pre> +<p>You might want to start by modifying the <code>init.rc</code> from the new device instead of using the <code>init.rc</code> provided by the build system; if so, you need to remember to set <code>TARGET_PROVIDES_INIT_RC</code> in <code>BoardConfig.mk</code>.</p> +<h3 id="Prebuilt_kernel_vs._building_the_kernel_from_source">Prebuilt kernel vs. building the kernel from source</h3> +<p>You can use a prebuilt kernel, or you may build the kernel from source. To build the kernel from source, add AndroidKernel.mk and the kernel config to the device configuration tree.</p> +<p>The <a href="https://github.com/andreasgal/B2G/tree/master/glue/gonk/device/toro/maguro" title="https://github.com/andreasgal/B2G/tree/master/glue/gonk/device/toro/maguro">maguro</a> on the old build system is an example that builds the kernel from source.</p> +<h3 id="Extracting_and_modifying_an_existing_boot_image">Extracting and modifying an existing boot image</h3> +<p>It is possible to recover the boot image of a phone by dumping the contents of the <code>/dev/mtd/mtd1</code> or <code>/dev/mtd/mtd2</code> devices, the resulting image file can then be easily recovered:</p> +<pre>adb shell 'cat /dev/mtd/mtd1 > /sdcard/boot.img' +adb pull /sdcard/boot.img +</pre> +<p>Once the boot image file has been obtained it can be unpacked via a helper tool such as <a href="http://whiteboard.ping.se/Android/Unmkbootimg" title="Unmkbootimg">unmkbootimg</a>. The tool will extract both the kernel image (zImage) and the ramdisk (initramfs.cpio.gz) as well as printing out a command to rebuild the image with the same parameters of the original one, for example:</p> +<pre>$ unmkbootimg boot.img +Kernel size 3872576 +Kernel address 0x208000 +Ramdisk size 265102 +Ramdisk address 0x1500000 +Secondary size 0 +Secondary address 0x1100000 +Kernel tags address 0x200100 +Flash page size 2048 +Board name is "" +Command line "androidboot.hardware=aphone" +Extracting kernel to file zImage ... +Extracting root filesystem to file initramfs.cpio.gz ... +All done. +--------------- +To recompile this image, use: + mkbootimg --kernel zImage --ramdisk initramfs.cpio.gz --base 0x200000 --cmdline 'androidboot.hardware=aphone' -o new_boot.img +--------------- +</pre> +<p>To modify the ramdisk file create an output directory and extract it there:</p> +<pre>mkdir initramfs_dir +cd initramfs_dir +gunzip -c ../initramfs.cpio.gz | cpio -i +</pre> +<p>Make all the required changes (such as modifying init.rc) and repack the ramdisk using <code>mkbootfs</code>, be sure to use the version that has been built with the B2G host tools:</p> +<pre>/path/to/your/B2G/out/host/linux-x86/bin/mkbootfs . | gzip > ../newinitramfs.cpio.gz +</pre> +<p>Finally go back to the top-level directory and re-pack the boot image using the <code>mkbootimg</code>, also make sure you're using the version built with the other B2G host tools:</p> +<pre>/path/to/your/B2G/out/host/linux-x86/bin/mkbootimg --kernel zImage --ramdisk newinitramfs.cpio.gz --base 0x200000 --cmdline 'androidboot.hardware=aphone' -o newboot.img +</pre> +<p>If you now copy the new boot image under <code>out/target/product/$DEVICE/boot.img</code> (where $DEVICE is your device name) it will be automatically flashed when invoking <code>flash.sh</code>. Alternatively you can flash it by hand with the following commands:</p> +<pre>adb reboot bootloader +fastboot flash boot newboot.img +fastboot reboot +</pre> +<h2 id="Add_the_new_device_to_flash.sh">Add the new device to flash.sh</h2> +<p>Add the new device to <code>flash.sh</code>; the specifics of how to do this will depend on what tools need to be used to flash the new device.</p> +<h2 id="Configure_build_and_flash_the_new_device">Configure, build, and flash the new device</h2> +<p>Now you can try building for and flashing to your new device:</p> +<pre>ANDROIDFS_DIR=my_device_backup ./config.sh <device_id> '../b2g-manifest/default.xml' +./build.sh +./flash.sh</pre> +<h2 id="Test_and_debug">Test and debug</h2> +<p>We need some details added here; indeed, this entire article could use some help.</p> +<h2 id="FAQ">FAQ</h2> +<p>Forthcoming</p> +<h2 id="See_also">See also</h2> +<ul> + <li><a href="/en-US/docs/Mozilla/Firefox_OS" title="en-US/docs/Mozilla/Firefox_OS">Firefox OS</a></li> + <li><a href="https://github.com/mozilla-b2g/B2G" title="https://github.com/mozilla-b2g/B2G">B2G source code on Github</a></li> + <li><a href="http://www.android.com/" title="http://www.android.com/">Android web site</a></li> + <li><a href="https://autonome.wordpress.com/2013/01/15/firefox-os-devices-and-dark-matter/" title="https://autonome.wordpress.com/2013/01/15/firefox-os-devices-and-dark-matter/">A list of existing projects on Dietrich Ayala's blog</a> to port Firefox OS on some devices</li> +</ul> diff --git a/files/id/archive/b2g_os/firefox_os_apps/index.html b/files/id/archive/b2g_os/firefox_os_apps/index.html new file mode 100644 index 0000000000..370236dd14 --- /dev/null +++ b/files/id/archive/b2g_os/firefox_os_apps/index.html @@ -0,0 +1,85 @@ +--- +title: Firefox OS apps +slug: Archive/B2G_OS/Firefox_OS_apps +tags: + - Apps + - Building + - Components + - Firefox OS + - Installing + - NeedsTranslation + - TopicStub + - device APIs +translation_of: Archive/B2G_OS/Firefox_OS_apps +--- +<p class="summary">This section of the Firefox OS docs covers the specific techniques required — and available tools — for building Firefox OS apps. You'll find a number of details below, from Firefox OS building blocks/web components, to device APIs and App installation.</p> + +<h2 id="Building_Firefox_OS_apps">Building Firefox OS apps</h2> + +<dl> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Building_apps_for_Firefox_OS">Building apps for Firefox OS</a></dt> + <dd>Firefox OS/Firefox platform app specifics, including App installation and management APIs, manifest files, packaged and hosted apps, handling API permissions.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Localization">Localization</a></dt> + <dd>This set of articles provides information for developers wishing to provide localized versions of their apps.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Performance">Performance</a></dt> + <dd>This page lists performance-related topics specific to Firefox OS.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Firefox_Accounts_on_Firefox_OS">Firefox Accounts on Firefox OS</a></dt> + <dd>This article provides an overview of using <a href="/en-US/docs/Mozilla/Tech/Firefox_Accounts">Firefox Accounts</a> in Firefox OS.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Reference_apps">Reference apps</a></dt> + <dd>This page lists a number of sample apps we've put together for you to download, install, play with and learn from. Have fun!</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Screencast_series:_App_Basics_for_Firefox_OS">Screencast series: App Basics for Firefox OS</a></dt> + <dd>In this collection of short videos, developers from Mozilla and Telenor explain in a few steps how you can get started with building applications for Firefox OS.</dd> +</dl> + +<h2 id="Building_blocks">Building blocks</h2> + +<dl> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Building_blocks">Building Blocks</a></dt> + <dd>The Firefox OS Building Blocks are reusable UI components (also called 'common controls') that reflect OS-wide design patterns. Building Blocks are used to create the interfaces of all <a href="https://developer.mozilla.org/en-US/Firefox_OS/Platform/Gaia">Gaia</a> default apps. You are free to make use of these components in your own Firefox OS apps, or general Web apps.</dd> +</dl> + +<h2 id="Styleguides">Styleguides</h2> + +<dl> + <dt><a href="http://www.mozilla.org/en-US/styleguide/products/firefox-os/">Firefox OS Visual styleguide</a></dt> + <dd>Our style guide for Firefox OS visual design, covering colours, typeface, backgrounds, app icons, and the design of specific UI elements.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Copy_styleguide">Firefox OS Copy styleguide</a></dt> + <dd>This guide outlines the rules we follow for writing Firefox OS app copy, but can be used as a general guide to writing good copy for any app interfaces.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Firefox_OS_in_Arabic">Firefox OS in Arabic</a></dt> + <dd>A guide to the specific UX design implementation Firefox OS has in place for dealing with Arabic (and other RTL languages.)</dd> +</dl> + +<h2 id="Assets">Assets</h2> + +<dl> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Design_asset_library">Firefox OS design asset library</a></dt> + <dd>In this section you'll find design assets, artwork, graphic templates, fonts and other materials that will be helpful as you design Firefox OS/Gaia apps.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Icon_font">Firefox OS icon font</a></dt> + <dd>Firefox OS has its own icon font set available: this article explains how to use it in your own apps.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Transitions">Firefox OS transitions</a></dt> + <dd>A reference to some of the transitions used in Firefox OS to move between different states in apps, including animated GIFs demonstrating the animations used, plus code samples to show the CSS animation code needed to implement these animations.</dd> +</dl> + +<h2 id="References">References</h2> + +<dl> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Firefox_OS_device_APIs">Firefox OS device APIs</a></dt> + <dd>This article provides a list of pages covering those APIs, as well as the <a href="https://developer.mozilla.org/en-US/Apps/Build/Manifest">app manifest</a> permissions for each one.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Firefox_OS_app_tools">Firefox OS app tools</a></dt> + <dd>This page provides a list of useful tools, libraries, examples, etc. that are useful for Firefox OS app developers, whether you want a code template to copy, or need help with adding a specific feature to your Firefox OS app.</dd> +</dl> + +<h2 id="Other_app_topics">Other app topics</h2> + +<dl> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Porting_Chrome_apps">Porting Chrome apps to Firefox OS Apps</a></dt> + <dd>This article discusses the differences between Chrome apps and Firefox OS Apps, and how you can convert between the two.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/App_development_FAQ">App development FAQ</a></dt> + <dd>This FAQ is a compilation of answers to common app development questions.</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Mozilla/Marketplace">Firefox Marketplace</a></li> +</ul> diff --git a/files/id/archive/b2g_os/firefox_os_apps/pelokalan/index.html b/files/id/archive/b2g_os/firefox_os_apps/pelokalan/index.html new file mode 100644 index 0000000000..acb5aeb487 --- /dev/null +++ b/files/id/archive/b2g_os/firefox_os_apps/pelokalan/index.html @@ -0,0 +1,92 @@ +--- +title: Pelokalan aplikasi +slug: Archive/B2G_OS/Firefox_OS_apps/Pelokalan +translation_of: Archive/B2G_OS/Firefox_OS_apps/Localization +--- +<p></p><section class="Quick_links" id="Quick_Links"> + +<ol> + <li class="toggle"> + <details> + <summary>Build and install</summary> + <ol> + <li><strong><a href="/id/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS">Build and install overview</a></strong></li> + <li><a href="/id/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_OS_build_process_summary">B2G OS build process summary</a></li> + <li><a href="/id/docs/Mozilla/B2G_OS/B2G_OS_build_prerequisites">Build prerequisites</a></li> + <li><a href="/id/docs/Mozilla/B2G_OS/Preparing_for_your_first_B2G_build">Preparing for your first build</a></li> + <li><a href="/id/docs/Mozilla/B2G_OS/Building">Building B2G OS</a></li> + <li><a href="/id/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_installer_add-on">B2G installer add-on</a></li> + <li><a href="/id/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/Building_for_Flame_on_OS_X">Building B2G OS for Flame on Mac OS X</a></li> + <li><a href="/id/docs/Mozilla/B2G_OS/Choosing_how_to_run_Gaia_or_B2G">Choosing how to run Gaia or B2G OS</a></li> + <li><a href="/id/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/Compatible_Devices">Compatible Devices</a></li> + <li><a href="/id/docs/Mozilla/B2G_OS/Installing_on_a_mobile_device">Installing B2G OS on a mobile device</a></li> + <li><a href="/id/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_OS_update_packages">Creating and applying B2G OS update packages</a></li> + <li><a href="/id/docs/Mozilla/B2G_OS/Building/FOTA_community_builds">Building and installing FOTA community builds</a></li> + <li><a href="/id/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_Build_Variables_Reference_Sheet">B2G build variables reference sheet</a></li> + </ol> + </details> + </li> + <li class="toggle"> + <details> + <summary>Porting B2G OS</summary> + <ol> + <li><strong><a href="/id/docs/Mozilla/B2G_OS/Porting_B2G_OS">Porting overview</a></strong></li> + <li><a href="/id/docs/Mozilla/B2G_OS/Porting_B2G_OS/basics">Porting basics</a></li> + <li><a href="/id/docs/Mozilla/B2G_OS/Porting_B2G_OS/Porting_on_CyanogenMod">Porting on CyanogenMod</a></li> + </ol> + </details> + </li> + <li class="toggle"> + <details> + <summary>Developing Gaia</summary> + <ol> + <li><strong><a href="/id/docs/Mozilla/B2G_OS/Developing_Gaia">Developing Gaia overview</a></strong></li> + <li><a href="/id/docs/Mozilla/B2G_OS/Developing_Gaia/Running_the_Gaia_codebase">Running the Gaia codebase</a></li> + <li><a href="/id/docs/Mozilla/B2G_OS/Mulet">Run Gaia on desktop using Mulet</a></li> + <li><a href="/id/docs/Mozilla/B2G_OS/Developing_Gaia/Understanding_the_Gaia_codebase">Understanding the Gaia codebase</a></li> + <li><a href="/id/docs/Mozilla/B2G_OS/Developing_Gaia/Making_Gaia_code_changes">Making Gaia code changes</a></li> + <li><a href="/id/docs/Mozilla/B2G_OS/Developing_Gaia/Testing_Gaia_code_changes">Testing Gaia code changes</a></li> + <li><a href="/id/docs/Mozilla/B2G_OS/Developing_Gaia/Submitting_a_Gaia_patch">Submitting a Gaia patch</a></li> + <li><a href="/id/docs/Mozilla/B2G_OS/Developing_Gaia/Build_System_Primer">Gaia build system primer</a></li> + <li><a href="/id/docs/Mozilla/B2G_OS/Developing_Gaia/Different_ways_to_run_Gaia">Different ways to run Gaia</a></li> + <li><a href="/id/docs/Mozilla/B2G_OS/Developing_Gaia/make_options_reference">Make options reference</a></li> + <li><a href="/id/docs/Mozilla/B2G_OS/Developing_Gaia/Gaia_tools_reference">Gaia tools reference</a></li> + </ol> + </details> + </li> + <li><a href="/id/docs/Mozilla/B2G_OS/API">B2G OS APIs</a></li> +</ol> +</section><p></p> + +<div class="summary"> +<p><span class="seoSummary">This set of articles provides information for developers wishing to provide localized versions of their apps.</span></p> +</div> + +<h2 id="Tutorials">Tutorials</h2> + +<dl> + <dt><a href="/en-US/Apps/Build/Localization/Getting_started_with_app_localization">Getting started with app localization</a></dt> + <dd>This tutorial provides a detailed guide to app localization.</dd> + <dt><a href="/en-US/Apps/Build/Localization/App_Localization_with_Transifex">Connecting developers and translators with Transifex</a></dt> + <dd>This article explores the use of <a href="https://www.transifex.com/">Transifex</a> for managing translation work, both for app developers and localizers.</dd> +</dl> + +<h2 id="Reference">Reference</h2> + +<dl> + <dt><a href="/en-US/docs/Web/Apps/Build/Localization/L10n.js_reference">L10n.js reference</a></dt> + <dd>This article provides a reference for the l10n.js library, and its associated date helper, l10n_date.js.</dd> + <dt><a href="/en-US/docs/Web/Apps/Build/Localization/Internationalization_helpers_IntlHelper_and_mozIntl">Internationalization helpers: IntlHelper and mozIntl</a></dt> + <dd>This article looks at how Firefox OS handles localization of dates, times, numbers and collators from version 2.5 onwards, using the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl">Internationalization API</a> and Gaia's built in helpers, <a href="https://github.com/mozilla-b2g/gaia/blob/master/shared/js/intl_helper.js">IntlHelper</a> and <a href="https://github.com/mozilla-b2g/gaia/blob/master/shared/js/moz_intl.js">mozIntl</a>.</dd> + <dt><a href="/en-US/docs/Web/Apps/Build/Localization/Localization_code_best_practices">App localization code best practices</a></dt> + <dd>Localization best practices and advanced techniques for experienced Gaia/app developers.</dd> + <dt><a href="/en-US/Apps/Build/Localization/Developing_Bidi_Apps">Developing Bidi Apps</a></dt> + <dd>Best coding practices and guidelines for developing bi-directional (<em>left-to-right</em> and <em>right-to-left</em>, RTL) apps.</dd> +</dl> + +<h2 id="Tools">Tools</h2> + +<dl> + <dt><a href="https://github.com/robnyman/TranslationTester">Translation tester</a></dt> + <dd>This app is for testing translations for Firefox OS apps and provides a blueprint for adding translation support to your own apps.</dd> +</dl> diff --git a/files/id/archive/b2g_os/index.html b/files/id/archive/b2g_os/index.html new file mode 100644 index 0000000000..5d4a5149dc --- /dev/null +++ b/files/id/archive/b2g_os/index.html @@ -0,0 +1,79 @@ +--- +title: Firefox OS +slug: Archive/B2G_OS +tags: + - Boot to Gecko + - Firefox OS + - Gaia +translation_of: Archive/B2G_OS +--- +<p><strong>Firefox OS</strong> (kadang-kadang disingkat <strong>FxOS</strong>) adalah sistem operasi mobile baru yang dikembangkan oleh Mozilla. menggunakan kernel Linux dan mesin berbasis Gecko, yang memungkinkan pengguna menjalankan aplikasi yang dikembangkan seluruhnya menggunakan <a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a>, <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a>, dan open web application APIs lainnya.</p> + +<p>Firefox OS saat ini dalam pengembangan besar; kami terus bekerja untuk membuatnya lebih mudah digunakan dan hack pada Gaia (aplikasi standar) dan membuat sendiri. Namun, Anda perlu pengetahuan tentang sistem untuk melakukan hal-hal seperti membangun Firefox OS stack, atau memasang Firefox OS kedalam handphne Anda. Link dibawah ini adalah panduan untuk pengembang web yang tertarik menjalankan dan membuat peribahan untuk Gaia atau mengembangkan aplikasi untuk berjalan di perangkat Firefox OS.</p> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Documentation" name="Documentation">Dokumentasi tentang Firefox OS</h2> + + <dl> + <dt><a href="/id/docs/Mozilla/Firefox_OS/pengantar_Firefox_OS" title="en-US/docs/Mozilla/Firefox_OS/Introduction">Pengantar Firefox OS</a></dt> + <dd>Informasi pengantar tentang apa itu Firefox OS dan bagaimana cara kerjanya.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Tips_and_tricks" title="/en-US/docs/Mozilla/Firefox_OS/Tips_and_tricks">Tips dan trik Firefox OS</a></dt> + <dd>Beberapa artikel pendek tentang tips dan trik yang berguna untuk mengetahui Firefox OS disaat melakukan hacking.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Apps" title="/en-US/docs/Mozilla/Firefox_OS/Apps">Menulis aplikasi untuk Firefox OS</a></dt> + <dd>Dokumentasi tentang membuat aplikasi Firefox OS.</dd> + <dt><a href="https://marketplace.firefox.com/developers/" title="https://marketplace.firefox.com/developers/">Pusat pengembang</a></dt> + <dd>Kumpulan peralatan, tutorial, dan layanan untuk pengembang aplikasi Firefox OS.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/UX" title="/en-US/docs/">UX (Pengalaman pengguna)</a></dt> + <dd>Panduan untuk Gaya user experience desain, maupun pola kode dan template untuk membantu Anda membuat aplikasi Firefox OS yang menarik dan konsisten.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Platform" title="/en-US/docs/Mozilla/Firefox_OS/Platform">Platform Firefox OS</a></dt> + <dd>Dokumentasi tentang platform Firefox OS, termasuk Gonk, Gaia, dan lainnya. Ini termasuk dokumentasi untuk membangun dan memasang platform ke perangkat, serta membangun simulator dan emulator.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Security" title="/en-US/docs/Mozilla/Firefox_OS/Security">Keamanan</a></dt> + <dd>Dokumentasi tentang keamnan di Firefox OS; ini termasuk topik tentang keamanan perangkat dari setiap perspektif: untuk pengembang aplikasi, perangkat integrator, dan sebagainya.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Performance" title="/en-US/docs/Mozilla/Firefox_OS/Performance">Performa</a></dt> + <dd>Artikel tentang mengoptimalisasi aplikasi Firefox OS.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Troubleshooting" title="/en-US/docs/Mozilla/Firefox_OS/Troubleshooting">Pemecahan Masalah</a></dt> + <dd>Panduan untuk mengatasi masalah umum pada Firefox OS.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Debugging" title="en-US/docs/Mozilla/Firefox_OS/Debugging">Debugging pada Firefox OS</a></dt> + <dd>Panduan untuk debugging aplikasi mobile dan Firefox OS itu sendiri.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Developer_phone_guide" title="/en-US/docs/Mozilla/Firefox_OS/Boot to Gecko developer phone guide">Panduan untuk Firefox OS developer phone</a></dt> + <dd>Panduan untuk Firefox OS developer phones, Mozilla memberikan telepon ke beberapa pengembang. Panduan ini juga berlaku jika sesorang memasang Firefox OS ke teleponnya</dd> + </dl> + + <p><span class="alllinks"><a href="/en-US/docs/tag/B2G" title="/en-US/docs/tag/B2G">Lihat Semua...</a></span></p> + </td> + <td> + <h2 class="Community" id="Community" name="Community">Dapatkan bantuan dari komunitas</h2> + + <p>Jika Anda bekerja dengan Firefox OS, atau mengembangkan aplikasi yang ingin dijalankan di perangkat Firefox OS, ada komunitas yang akan membantu Anda!</p> + + <ul> + <li>Ajukan pertanyaan Anda ke Mozilla Boot to Gecko IRC channel: <a class="link-irc" href="irc://irc.mozilla.org/b2g" title="irc://irc.mozilla.org/b2g">#b2g</a></li> + </ul> + + <p><span class="alllinks"><a class="external" href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">Jangan lupa tentang <em>netiquette</em>...</a></span></p> + + + <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Topik Terkait</h2> + + <ul> + <li><a href="/en-US/docs/Mobile" title="en-US/docs/Mobile">Mobile</a></li> + <li><a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a></li> + <li><a href="/en-US/docs/CSS" title="en-US/docs/CSS">CSS</a></li> + <li><a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a></li> + </ul> + + <h2 class="Tools" id="Sumber_Lain">Sumber Lain</h2> + + <ul> + <li><a class="link-https" href="https://wiki.mozilla.org/B2G/FAQ" title="B2G/FAQ">Mozilla wiki FAQ</a></li> + <li><a class="link-https" href="https://wiki.mozilla.org/B2G/Schedule_Roadmap" title="https://wiki.mozilla.org/B2G/Schedule_Roadmap">Roadmap</a></li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Feature_support_chart" title="/en-US/docs/Mozilla/Firefox_OS/Feature_support_chart">Feature support chart</a></li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Geeksphone_FAQ" title="/en-US/docs/Mozilla/Firefox_OS/Geeksphone_FAQ">Geeksphone FAQ</a></li> + </ul> + </td> + </tr> + </tbody> +</table> diff --git a/files/id/archive/b2g_os/installing_on_a_mobile_device/index.html b/files/id/archive/b2g_os/installing_on_a_mobile_device/index.html new file mode 100644 index 0000000000..9ee7eb6251 --- /dev/null +++ b/files/id/archive/b2g_os/installing_on_a_mobile_device/index.html @@ -0,0 +1,100 @@ +--- +title: Installing Firefox OS on a mobile device +slug: Archive/B2G_OS/Installing_on_a_mobile_device +translation_of: Archive/B2G_OS/Installing_on_a_mobile_device +--- +<div class="summary"> + <p><span class="seoSummary">Once you've built Boot to Gecko for a <a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites#Have_a_compatible_device_or_use_an_emulator">supported mobile device</a>, you can install it. This article will guide you through the process.</span></p> +</div> +<div class="note"> + <strong>Note:</strong> The first time you flash your phone, it <strong>must</strong> have Android 4 (Ice Cream Sandwich) installed. The process will not work correctly otherwise. Once you've done your first install of B2G, however, you can simply update on top of it.</div> +<h2 id="Installing_ADB">Installing ADB</h2> +<p><strong>On OSX</strong></p> +<p>If you have homebrew on OSX:</p> +<pre>brew install android-platform-tools</pre> +<p>Otherwise, download the Android Developer Tools and add the binaries to your PATH.</p> +<p><strong>On Ubuntu</strong></p> +<pre>sudo apt-get install android-tools-adb</pre> +<h2 id="Flashing_your_phone">Flashing your phone</h2> +<p>To flash everything to your phone, simply connect your phone and type:</p> +<pre>./flash.sh +</pre> +<p>That's it. The B2G you've currently got built will flash onto your device.</p> +<p>Note that If you are updating across revisions with significant Gaia changes, you might need also do:</p> +<pre class="brush: bash">cd gaia +make reset-gaia</pre> +<p>This will wipe all of your data stored in Gaia, but also clear out obsolete Gaia settings and prefs so that you'll boot into a "clean" Gaia. In theory <code>./flash.sh</code> should do this already, but for some devices (e.g. hamachi) <code>./flash.sh</code> only flashes a subset of modules (<code>./flash.sh -f</code> will force flash everything.)</p> +<h3 id="Configuring_the_udev_rule_for_your_device">Configuring the udev rule for your device</h3> +<p>On Linux, if you get this,</p> +<pre>< waiting for device ></pre> +<p>that probably means that you haven't added a udev rule for the fastboot device, which is not the same as the one for adb. (Though it also might just mean you need to run ./flash.sh with sudo) You can get the USB vendor ID by running <code>lsusb</code> now, but typically it's Google's: 18d1, so adding this line in your <code>/etc/udev/rules.d/51-android.rules</code> would work:</p> +<pre>SUBSYSTEM=="usb", ATTR{idVendor}=="18d1", MODE="0666", GROUP="plugdev"</pre> +<div class="note"> + <strong>Note:</strong> If you get a very helpful <code>libusb</code> error "-3" on Linux, it means you need to be root to have the needed access to the USB device. Run the script again using <code>sudo</code>.</div> +<div class="note"> + <strong>Note 2</strong>: If you have an Unagi or a Geeksphone Keon phone, you need two lines like this - one for the original phone vendor's ID, and one for Google's.</div> +<h3 id="Special_notes_for_Hamachi_Helix_and_Leo_devices">Special notes for Hamachi, Helix, and Leo devices</h3> +<p>If your phone is a hamachi, helix or leo device, the ./flash.sh script will now default to flashing only gecko and gaia. It is recommended that you flash with the OEM as a base build to get the firmware and the gonk layers and then flash the gecko and gaia on top. If you want to flash using the images, there is an override flash where you can ./flash.sh -f and it will use the image files to flash your device.</p> +<h3 id="Special_notes_for_the_Samsung_Galaxy_S2">Special notes for the Samsung Galaxy S2</h3> +<p>If your phone is a Galaxy S2 and you are using heimdall 1.3.2 (the latest version; use <code>heimdall version</code> to check), you may see an alarming error "FACTORYFS upload failed!" followed by "Heimdall flashing failed" and some additional information. This is actually a success condition, and you can ignore the advice.</p> +<p>To get rid of this strange behavior, grab a <a class="link-https" href="https://github.com/Benjamin-Dobell/Heimdall" title="https://github.com/Benjamin-Dobell/Heimdall">source copy</a> of heimdall, downgrading to the 1.3.1 release ("<code>git checkout fbbed42c1e5719cc7a4dceeba098981f19f37c06</code>"), then compile it according to the <code>README</code>, then install that to make the error go away. However, this isn't strictly necessary.</p> +<div class="note"> + <p>Note: the image size may not a problem. see the next tip</p> +</div> +<p>All versions of heimdall are unable to flash a system.img larger than 100MB. Do:</p> +<pre>ls -l ./out/target/product/galaxys2/system.img +</pre> +<p>to see how big yours is. If it's too large, ask in IRC for advice; there are ways to do it in two stages.</p> +<p>The argument of heimdall command may not work and result in fail when trying to flash. You'll need to change it in the ./flash.sh script, the argument must be in uppercase (l.185) :</p> +<pre>case $project in + "system") + $HEIMDALL flash --FACTORYFS out/target/product/$DEVICE/$project.img + ;; + + "kernel") + $HEIMDALL flash --KERNEL device/samsung/$DEVICE/kernel + ;; + + "") + $HEIMDALL flash --FACTORYFS out/target/product/$DEVICE/system.img --KERNEL device/samsung/$DEVICE/kernel && + update_time + ;; + esac</pre> +<p> </p> +<h2 id="Added_step_for_the_Samsung_Galaxy_S2">Added step for the Samsung Galaxy S2</h2> +<p>If you're flashing onto the Galaxy S2, there is an additional step to follow. Gaia does not get flashed automatically by the <code>flash.sh</code> script; you'll need to also do:</p> +<pre>./flash.sh gaia +</pre> +<h2 id="Flashing_specific_partitions_to_fastboot_phones">Flashing specific partitions to fastboot phones</h2> +<p>You can flash specific partitions to fastboot phones (that is, any phone other than the Samsung Galaxy S2). For example:</p> +<pre>./flash.sh system +./flash.sh boot +./flash.sh user +</pre> +<p><strong>WARNING</strong>: flashing user (at least) may delete your user-specific data (contacts, etc.).</p> +<h2 id="Updating_specific_modules">Updating specific modules</h2> +<p>You can update specific components of B2G by specifying their names when flashing. For example:</p> +<pre>./flash.sh gaia +./flash.sh gecko +</pre> +<p>In order to update only one application you can use BUILD_APP_NAME environment variable:</p> +<pre>BUILD_APP_NAME=calendar ./flash.sh gaia</pre> +<p>If your phone is not for developer (you aren't interested on test apps and/or require optimization), you can update gaia using:</p> +<pre>VARIANT=user ./flash.sh gaia</pre> +<h2 id="Next_steps">Next steps</h2> +<p>At this point, your phone should be running Boot to Gecko! It's time to experiment, <a href="/en-US/docs/Mozilla/Firefox_OS/Application_development" title="en-US/docs/Mozilla/Firefox_OS/Application_development">write some code</a>, <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing" title="en-US/docs/Mozilla/Firefox_OS/Platform/Testing">test</a>, or <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging" title="en-US/docs/Mozilla/Firefox_OS/Debugging">do some debugging</a>!</p> +<div class="note"> + <strong>Note:</strong> A helpful usage tip: if your build of B2G starts up with the lock screen requesting a pass code to unlock the phone, the default code is 0000.</div> +<h2 class="note" id="Troubleshooting">Troubleshooting</h2> +<p>Here are a some tips for what to do if your device doesn't work right after installing B2G, or updating it to a new version</p> +<h3 class="note" id="If_the_UI_doesnt_start_up">If the UI doesn't start up</h3> +<p>If you update your phone and the user interface doesn't start up, you can reset it to clear out out-of-date configuration and the like. This may bring it back to life, but note that it may also delete your user-specific data (contacts, etc.). Here's how:</p> +<pre>cd gaia +make reset-gaia +</pre> +<h3 class="note" id="If_you_want_change_from_developer_to_production_mode">If you want change from developer to production mode</h3> +<pre>cd gaia +make reset-gaia PRODUCTION=1</pre> +<p><strong>WARNING</strong>: reset-gaia may delete your user-specific data (contacts, etc.).</p> +<h3 class="note" id="image_is_too_large_error_message_on_.flash.sh_execution">"image is too large" error message on ./flash.sh execution</h3> +<p>It might mean that you phone needs to be rooted first before flashing it. As b2g needs to be written on root partition, your phone needs to be rooted in order to install it.</p> diff --git a/files/id/archive/b2g_os/introduction/index.html b/files/id/archive/b2g_os/introduction/index.html new file mode 100644 index 0000000000..1c113d8712 --- /dev/null +++ b/files/id/archive/b2g_os/introduction/index.html @@ -0,0 +1,88 @@ +--- +title: Pengantar Firefox OS +slug: Archive/B2G_OS/Introduction +tags: + - B2G + - Firefox OS +translation_of: Archive/B2G_OS/Introduction +--- +<p><strong>Firefox OS</strong> (juga disebut dengan codename "Boot to Gecko" atau "B2G") adalah sistem operasi open source Mozilla berbasis Linux dan teknologi Mozilla Gecko. Firefox OS adalah sistem operasi mobile yang bebas dari teknologi ekslusif saat ini menjadi platform yang kuat yang memberikan pengembang aplikasi kesempatan untuk menciptakan produk unggulan Selain itu, Firefox OS fleksibel dan cukup mampu membuat pengguna bahagia.</p> +<p>Untuk pengembang Web bagian yang paling penting untuk dipahami adalah bahwa seluruh antarmuka pengguna adalah aplikasi web, yang mampu menampilkan dan meluncurkan aplikasi Web lainnya. Modifikasi yang Anda buat ke antarmuka pengguna dan aplikasi yang Anda buat untuk berjalan di Firefox OS adalah halaman Web, meskipun dengan meningkatkan akses ke perangkat kerasa dan layanan mobile.</p> +<p>Anda dapat belajar bagaimana membangun dan memasang Firefox OS dengan <a href="/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS" title="en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS">mengikuti panduan praktis kami</a>.</p> +<h2 id="Persyaratan_perangkat_keras">Persyaratan perangkat keras</h2> +<p>Perangakat mobile berbasis ARM terbaru cukup kuat untuk mendukung proting Firefox OS. Bagian ini mencakup persyaratan perangkat keras dasar serta fitur perangkat keras yang direkomendasikan.</p> +<table> + <thead> + <tr> + <th scope="col">Komponen</th> + <th scope="col">Minimum</th> + <th scope="col">Rekomendasi</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">CPU</th> + <td>ARMv6</td> + <td>Cortex A5 class atau lebih<br> + ARMv7a dengan NEON</td> + </tr> + <tr> + <th scope="row">GPU</th> + <td>—</td> + <td>Adreno 200 class atau lebih</td> + </tr> + <tr> + <th scope="row">Connectivity</th> + <td>—</td> + <td>WiFi<br> + 3G</td> + </tr> + <tr> + <th scope="row">Sensors</th> + <td>—</td> + <td>Accelerometer<br> + Proximity<br> + Ambient light<br> + A-GPS</td> + </tr> + </tbody> +</table> +<p>Untuk pengalaman pengguna yang baik, itu ide yang baik untuk memilih perangakat yang menawarkan profil warna seragam (Implementasi dengan graphics device driver) dan dukungan headphone untuk mematikan dan menyalakan dan untuk menghentikan dan memutar media. Fitur ini umumnya ada di kalangan smartphone modern.</p> +<h2 id="Tips_penggunaan">Tips penggunaan</h2> +<p>Bagian ini memberikan beberapa tips yang akan membantu Anda menggunakan Firefox OS. Ini adalah penampung sampai kita memiliki dokumentasi penggunaan nyata.</p> +<h3 id="Membuka_Kunci_telepone">Membuka Kunci telepone</h3> +<p>Jika Anda membangun Firefox OS, pada saat dijalankan meminta kode pass untuk membuka kunci perangkat Anda, kode standar adalah 0000. Beberapa Firefox OS akan melakukan ini seraya kami mengembangkan dan menguki layar kunci.</p> +<h3 id="Menangkap_screenshot">Menangkap screenshot</h3> +<p>Menangkap screenshot simpel dengan menekan tombol power dan home secara bersamaan. Gambar screenshot akan berada di <code>/sdcard/screenshots</code> pada perangkat Anda; Anda dapat mengaksesnya menggunakan aplikasi Galeri pada telepon Anda, juga.</p> +<p>Jika karena alasan tertentu tidak dapat bekerja, Anda juga dpaat melakukannya dari terminal Linux atau Mac OS X komputer yang memiliki sistem Firefox OS.</p> +<ol> + <li>Pastikan Anda telah memasang aplikasi ffmpeg. + <ol> + <li>Pada Mac, Jika Anda menggunakan, Anda dapat melakukan ini dengan <code>sudo port install ffmpeg</code>. untuk homebrew, jalankan <code>brew install ffmpeg</code>.</li> + <li>Pada Linux (Ubuntu/Debian), gunakan <code>sudo apt-get install ffmpeg</code>.</li> + </ol> + </li> + <li>Sambungkan telepon ke komputer menggunakan kabel USB.</li> + <li>Arahkan telepon Anda kedalam situasi apapun yang ingin Anda screenshot.</li> + <li><code>cd</code> ke direktori <code>B2G/gaia</code></li> + <li><code>make screenshot</code></li> + <li>Anda sekarang memiliki screenshot bernama <code>screenshot.png</code>.</li> +</ol> +<h3 id="Remote_debugging_dengan_ADB">Remote debugging dengan ADB</h3> +<p>Untuk mengaktifkan USB Debugging via adb, buka aplikasi Pengaturan dan arahkan ke Informasi Pernagkat > Informasi Lebih Lanjut > Pengembang. Dari daftar, berikan tanda centang pada Remote Debugging. Terakhir, hubungkan perankat via USB dengan komputer Anda.</p> +<h3 id="Tombol_dan_kontrol">Tombol dan kontrol</h3> +<p>sebuah perangkat Firefox OS memiliki sejumlah tombol fisik:</p> +<dl> + <dt> + Tombol Home</dt> + <dd> + Tombol ini umumnya berpusat dibawah layar. Menekannya akan mengembalikan Anda ke peluncur aplikasi. Menekannya secara lama membuka tampilan card switching; gesekan ke atas pada tampilan tersebut akan hilang.</dd> + <dt> + Volume rocker kontrol</dt> + <dd> + Pada sisi kiri adalah volume rocker; Menekan bagian atas dari rocker akan meningkatkan volume dan menekan bagian bawah akan menurunkan volume.</dd> + <dt> + Tombol Power</dt> + <dd> + Tombol power berada di pojok kanan atas perangkat.</dd> +</dl> diff --git a/files/id/archive/b2g_os/phone_guide/flame/index.html b/files/id/archive/b2g_os/phone_guide/flame/index.html new file mode 100644 index 0000000000..697980244f --- /dev/null +++ b/files/id/archive/b2g_os/phone_guide/flame/index.html @@ -0,0 +1,73 @@ +--- +title: Flame +slug: Archive/B2G_OS/Phone_guide/Flame +tags: + - B2G + - Firefox OS + - Flame + - NeedsTranslation + - TopicStub + - developer phone + - official reference device +translation_of: Archive/B2G_OS/Phone_guide/Flame +--- +<p><img alt="A picture of the Flame device, showing the Firefox OS homescreen containing several app icons." src="https://mdn.mozillademos.org/files/8373/flame-dev-hud.png" style="float: left; margin-bottom: 20px; margin-right: 50px; width: 25%;"></p> + +<p><span class="seoSummary">The Flame device is the official reference device for developing, testing, and debugging Firefox OS and open web apps. This guide provides basic information about its hardware specifications as well as practical documentation specific to experimenting with, developing for, and testing of software compatible with this phone.</span></p> + +<p>The Flame hardware offers a representative set of specs — including FWVGA display and dual-core processor — to help developers build great content and experiences. A stable hardware platform is also good for testers, making it easier to test and address specific software issues without having to worry about device model-specific bugs, etc.</p> + +<p>If you have your phone in hand and want to start playing with it, developing and distributing apps, or contributing to the Firefox platform, the following links will also get you where you need to go:</p> + +<ul> + <li><a href="/en-US/Firefox_OS">Firefox OS zone</a>: For creating your own Firefox OS builds and contributing to the B2G and Gaia projects.</li> + <li><a href="/en-US/Apps">App Center zone</a>: For building open web apps compatible with Firefox OS.</li> + <li><a href="/en-US/Marketplace">Marketplace zone</a>: For information on publishing and distributing apps.</li> + <li><a href="https://marketplace.firefox.com/">Firefox Marketplace</a>: The best place to find and publish new Firefox OS apps.</li> +</ul> + +<p>If you’d like to find out more about updating the operating system, recovering it, pushing apps to it, or phone specs, you’ll find the information you need at the following two articles :</p> + +<ul> + <li><a href="/en-US/Firefox_OS/Developer_phone_guide/Flame/Initial_setup">Initial setup</a>: Essential steps to follow for setting up your computer to work with your Flame.</li> + <li><a href="/en-US/Firefox_OS/Developer_phone_guide/Flame/Updating_your_Flame">Updating your Flame</a>: How to update or upgrade Firefox OS on your Flame, push apps to it, and troubleshoot and test it.</li> +</ul> + +<h2 id="Get_a_device">Get a device</h2> + +<p>Flame sales have come to an end. There are still opportunities left for Mozilla contributors to get free Flames, including the upcoming Foxtrot program. If you have questions about getting a device for development or testing, please reach out to Asa Dotzler on the <a href="irc://irc.mozilla.org/fxos">#fxos</a> channel on IRC.</p> + +<h2 id="Device_specifications">Device specifications</h2> + +<p>You can find more of the device specifications listed on our <a href="/en-US/Firefox_OS/Phone_guide/Phone_specs">Phone and device specs page</a>.</p> + +<h3 id="Network"><strong>Network</strong></h3> + +<ul> + <li>GSM 850/900/1800/1900MHz</li> + <li>UMTS 850/900/1900/2100MHz</li> + <li>Wifi 802.11b/g/n</li> + <li>Bluetooth 3.0</li> +</ul> + +<h3 id="Hardware">Hardware</h3> + +<ul> + <li>Dual-SIM</li> + <li>NFC</li> + <li>Accelerometer</li> + <li>FM radio</li> + <li>Proximity Sensor</li> + <li>GPS W / A-GPS support</li> + <li>Ambient Light Sensor</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/Firefox_OS/Developer_phone_guide/Flame/Initial_setup">Initial setup</a>: Essential steps to follow for setting up your computer to work with your Flame.</li> + <li><a href="/en-US/Firefox_OS/Developer_phone_guide/Flame/Updating_your_Flame">Updating your Flame</a>: How to update or upgrade Firefox OS on your Flame, push apps to it, and troubleshoot and test it.</li> + <li><a href="https://hacks.mozilla.org/2014/08/videos-getting-started-with-your-flame-device/">Getting started with your Flame</a>: How-to videos by Chris Heilmann.</li> + <li><a href="http://mozilla.github.io/flame-on/">Flame On</a>: Great starting page for all Flame owners created at Mozilla Festival 2014.</li> + <li><a href="https://blog.mozilla.org/press/2014/02/developer-momentum-2/">Original announcement</a>: Press Announcement, February 23, 2014.</li> +</ul> diff --git a/files/id/archive/b2g_os/phone_guide/flame/updating_your_flame/index.html b/files/id/archive/b2g_os/phone_guide/flame/updating_your_flame/index.html new file mode 100644 index 0000000000..f3ca1ae59c --- /dev/null +++ b/files/id/archive/b2g_os/phone_guide/flame/updating_your_flame/index.html @@ -0,0 +1,411 @@ +--- +title: Updating your Flame +slug: Archive/B2G_OS/Phone_guide/Flame/Updating_your_Flame +translation_of: Archive/B2G_OS/Phone_guide/Flame/Updating_your_Flame +--- +<div class="summary"> +<p>This article covers how to update the software on your Flame — including updating Firefox OS and pushing new apps to your phone — along with backing up your data, and other useful troubleshooting and testing information. Before starting to do any of this, you should make sure you have run through the <a href="/en-US/Firefox_OS/Developer_phone_guide/Flame/Initial_setup">Initial setup</a> information.</p> +</div> + +<h2 id="Quick_guide_to_updating_your_device">Quick guide to updating your device</h2> + +<p>There is a lot of information in this article, so here we've included a quick start guide that takes you through the steps you need quickly to get your device updated. You can refer to the below sections for more detail if it is needed.</p> + +<h3 id="Full_flash_to_the_latest_base_image">Full flash to the latest base image</h3> + +<p>This set of steps needs to be done before you do anything else to your phone (see {{anch("Base image")}} and {{anch("Base image installation")}} if you require more details.)</p> + +<div id="magicdomid12"><span class="author-p-18262"><strong>Prerequisites</strong>: Make sure you have adb and fastboot installed and available in your system's <code>PATH</code> (see <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Installing_ADB">Installing ADB and Fastboot</a>.)</span><br> + </div> + +<ol> + <li id="magicdomid14"><span class="author-p-18262">Download the latest base image —</span><a href="http://cds.w5v8t3u9.hwcdn.net/v18D_nightly_v4.zip" class="external external-icon">Base image v18D_nightly_v4</a> — <span class="author-p-18262">to your computer.</span></li> + <li id="magicdomid18"><span class="author-p-18262">On your Flame device, enable remote debugging by navigating to <em>Settings > Developer</em> and enabling the </span><a href="https://developer.mozilla.org/en-US/Firefox_OS/Debugging/Developer_settings#Debugging_via_USB">Debugging via USB</a><span class="author-p-18262"> option.</span></li> + <li id="magicdomid20"><span class="author-p-18262">Connect your Flame to your computer via a USB cable.</span></li> + <li id="magicdomid22"><span class="author-p-18262">Verify that the computer is connected to the device by typing this command:</span> + <pre class="brush: bash"><span class="author-p-18262 i">adb devices</span><span class="author-p-18262"> </span><span class="author-p-18262"> </span> +</pre> + You should see something like the following: + + <pre class="brush: bash">List of devices attached +94f7ce4c device</pre> + If you don't see your device attached (no second line), then try unplugging and replugging the USB cable and trying again; also check that <em>Debugging via USB</em> is enabled on the phone as mentioned in step 2. If you get a message saying that adb could not be found, you probably haven't set your path correctly (see prerequisites.)</li> + <li id="magicdomid28"><span class="author-p-18262">Extract the base image zip file and navigate to the new directory, using for example:</span> + <pre id="magicdomid31" class="brush: bash"><span class="author-p-18262 i"><em>cd </em></span><span class="author-p-18262 i url">v18D_nightly_v4</span></pre> + </li> + <li id="magicdomid33"><span class="author-p-18262">Run the flashing script by running the correct below command for your system</span> + <pre class="brush: bash"><span class="author-p-18262"># Windows</span> +<span class="author-p-18262 i"><em>flash.bat</em></span> + +<span class="author-p-18262"># Linux / OSX</span> +<span class="author-p-18262 i"><em>./flash.sh</em></span></pre> + </li> +</ol> + +<div class="note"> +<p><span class="author-p-18262"><strong>Note</strong>: if you don't see the right filename for your system, you can rename flash.bat or flash.sh back and forth as needed. The contents are the same.</span></p> +</div> + +<div class="note"> +<p>Note: Verify the contents of the base image using the checksum below:</p> + +<pre>Checksum: <strong>SHA512(v18D_nightly_v4.zip)= 9105e29fd39da1ae487b01da4431a803d619d31482147b4383002b8a10268905fd444b108a438395a78d289cfe4e8fba10c3fb6b0d187f3535f027bf90c2391a </strong>Build id<strong>: 20150527010201</strong></pre> +</div> + +<p>At this point you should be on the latest 2.5 base image, and be able to receive OTA updates.</p> + +<div class="note"> +<p><span class="author-p-18262"><strong>Note</strong>: if you want to be on the very latest builds of flame (that have not been smoke tested), go to settings -> developer, scroll down to the bottom, and change the channel to nightly-latest. Reboot the device, then go back to settings -> device info and check for updates. You can update to the latest version without having to shallow flash. For shallow flashing see the next section.</span></p> +</div> + +<h4 id="Update_channel_reset_bug">Update channel reset bug</h4> + +<p>As mentioned in {{bug(1217490)}}, some Firefox OS testers testing Firefox OS 2.5 latest OTA updates (on Flame, but also on other dogfooding devices) may find that when they install an OTA update, their update channel is reset to <code>nightly</code>, meaning that they won’t receive subsequent OTA updates coming through other channels. To avoid this, it is recommended that you set your update channel to <code>nightly-latest</code> in the Firefox OS settings via WebIDE. To do this:</p> + +<ol> + <li>Plug your phone into your computer via USB (make sure <em>Debugging via USB</em> is set to <em>ADB and DevTools</em> in the Phone's <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Developer_settings">Developer Settings</a>)</li> + <li>Go to Firefox Desktop and open <a href="/en-US/docs/Tools/WebIDE">WebIDE</a>.</li> + <li>Connect WebIDE to your phone by selecting it under <em>USB Devices</em>. Accept the connection prompt that appears on your phone.</li> + <li>Under <em>Other</em> on the right hand side of the WebIDE UI, select <em>Device Settings</em>.</li> + <li>Find <code>app.update.channel</code> in the list, and change the setting value in the corresponding textbox to <code>nightly-latest</code>.</li> + <li>Find <code>app.update.channel.backup</code> and change the setting value to <code>nightly-latest</code> if you want it to persist after further updates.</li> +</ol> + +<h3 id="Shallow_Flash_to_the_latest_Firefox_OS_nightly_(Gaia_and_Gecko)">Shallow Flash to the latest Firefox OS nightly (Gaia and Gecko)</h3> + +<p>This set of steps only needs to be done if you want to update to the VERY latest builds (see {{anch("Updating your Flame to a nightly build")}} if you require more details.)</p> + +<div id="magicdomid50"><span class="author-p-18262"><strong>Prerequisites</strong>: Windows users will need to install <a href="https://cygwin.com/">Cygwin</a>, which provides a Linux-like environment on Windows.</span><span class="author-p-18262"> The instructions below include steps for how to automatically install the appropriate packages if you don't already have it installed.</span></div> + +<div id="magicdomid51"> </div> + +<ol> + <li id="magicdomid52"><span class="author-p-18262">Download the latest build from </span><a href="https://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central-flame-kk/">Mozilla Central</a><span class="author-p-18262">. Download both the b2g-XX.XX.en-US.android-arm.tar.gz and gaia.zip files.</span></li> + <li id="magicdomid54"><span class="author-p-18262 b"><strong>All platforms:</strong></span><span class="author-p-18262"> Download the <a href="https://raw.githubusercontent.com/Mozilla-TWQA/B2G-flash-tool/master/shallow_flash.sh">shallow flash script</a> in the same directory as the build files.</span></li> + <li id="magicdomid58"><span class="author-p-18262 b"><strong>Windows users:</strong></span><span class="author-p-18262"> Also download the <a href="https://raw.githubusercontent.com/Mozilla-TWQA/B2G-flash-tool/master/shallow_flash.bat">shallow_flash.bat Windows</a> script in the same directory.</span><span class="author-p-18262"> If you don't already have Cygwin installed, also <a href="https://cygwin.com/setup-x86.exe">download the installation file</a> (you don't have to run it, the <code>shallow_flash.bat</code> script will use the installer to automatically configure the necessary packages).</span></li> + <li id="magicdomid60"><span class="author-p-18262">In your terminal, <code>cd</code> into the directory you saved the files in and flash the builds to your phone using the following:</span> + <pre class="brush: bash"><span class="author-p-18262 b"># Linux</span> +<span class="author-p-18262">./shallow_flash.sh --gaia=gaia.zip --gecko=b2g-XX.XX.en-US.android-arm.tar.gz</span> + +<span class="author-p-18262 b"># Mac</span> +<span class="author-p-18262">./shallow_flash.sh --gaia gaia.zip --gecko b2g-XX.XX.en-US.android-arm.tar.gz</span> + +<span class="author-p-18262 b"># Windows</span> +<span class="author-p-18262"># You could also double click the shallow_flash.bat icon (with the cogs) from Windows Explorer. +shallow_flash.bat</span></pre> + </li> +</ol> + +<p>This process will flash gaia.zip and a single b2g-XX.XX.en-US.android-arm.tar.gz file onto your phone. T<span class="author-p-18262">he files will be sent to the device and it will reboot after the process completes.</span></p> + +<div class="note"> +<p><span class="author-p-18262"><strong>Note</strong> : On Linux, if the script fails during </span>flashing Gaia, you can try replacing full options by their shortened version to see if that helps. Replace <span class="author-p-18262"><code>--gaia=gaia.zip</code> by <code>-g gaia.zip</code></span> and <span class="author-p-18262"><code>--gecko=b2g-XX.XX.en-US.android-arm.tar.gz</code> by <code>-G b2g-XX.XX.en-US.android-arm.tar.gz</code></span>.</p> +</div> + +<h2 id="Updating_upgrading_the_Flame's_software">Updating & upgrading the Flame's software</h2> + +<p>We have two main "channels" of Firefox OS software version releases for the Flame phone:</p> + +<ul> + <li>The first channel is our release channel. Flames ship with this channel and will receive over-the-air updates for future major versions, that is, Flames will update from 1.3 to 2.0 to 2.1, etc.</li> + <li>The second channel is our nightly channel. Flames can be flashed to this channel, and after the initial flashing will get over the air updates on a daily or nearly daily basis. </li> +</ul> + +<h3 id="Base_Image"><a name="Base Image">Base Image</a></h3> + +<p>You can get recovery files and tools at the following storage locations:</p> + +<h4 id="Up-to-date_(use_these_unless_you_have_a_good_reason_not_to)">Up-to-date (use these unless you have a good reason not to)</h4> + +<ul> + <li>Production: + <ul> + <li>Stable: <a href="http://cds.w5v8t3u9.hwcdn.net/v18D.zip">Base image v18D.zip</a>: The very latest stable archive, containing a Flame base production image of Firefox OS 2.0.</li> + <li>Nightly: <a href="http://cds.w5v8t3u9.hwcdn.net/v18D_nightly_v4.zip">Base image v18D_nightly_v4</a>: The very latest nightly archive, containing a Flame base production image of Firefox OS 2.5. This is the same as the previous one but with the updated system partition size (see {{Bug("1184980")}}.) Before updating your phone to a Nightly build you should flash the latest base image to make sure the underlying systems are up to date. + <pre>Checksum: <strong>SHA512(v18D_nightly_v4.zip)= 9105e29fd39da1ae487b01da4431a803d619d31482147b4383002b8a10268905fd444b108a438395a78d289cfe4e8fba10c3fb6b0d187f3535f027bf90c2391a +</strong>Build id<strong>: 20150527010201</strong> +</pre> + </li> + <li>Nightly: <a href="http://cds.w5v8t3u9.hwcdn.net/v18D_nightly_v3.zip">Base image v18D_nightly_v3</a>: Contains a Flame base production image of Firefox OS 2.5 that includes security, font, NFC, camera, and other fixes (see {{bug(1154072)}} for more details.) + <pre>Checksum: <strong>SHA512(v18D_nightly_v3.zip)= 98ec1d24604eaed4a22e7d1439501544622788b30f8f2993409bfc2244a4886863d33238aa78ccb7cd5f9f71464058b81920cc0ba85806a1dbf0220d08a8444b</strong></pre> + </li> + </ul> + </li> + <li>Engineering: There is no engineering Base image. Use a production base image and <a href="#Updating_to_nightly_build">flash it to an engineering nightly build</a>.</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: You can find out what base image your device is running using the command <code>adb shell getprop ro.bootloader</code>. The version is the last four characters, with the last one then removed, prefixed by 'v' (e.g. L1TC000118D0 > v18D).</p> +</div> + +<div class="warning"> +<p><strong>Important</strong>: When running a shallow or full flash, your phone data will be overwritten: you should therefore back up your data before updating! See the {{anch("Backing up and restoring your Flame data")}} section for more details.</p> +</div> + +<h4 id="Outdated">Outdated</h4> + +<p>These base images are stable & production only.</p> + +<ul> + <li><a href="http://cds.w5v8t3u9.hwcdn.net/v188.zip">Base image v188.zip</a>: An updated archive containing a Flame base image of Firefox OS 2.0 with bug fixes from the previous image.</li> + <li><a href="http://cds.w5v8t3u9.hwcdn.net/Flame_2.0_v180_1.zip">Base image v180.zip</a>: An older archive containing a Flame base image of Firefox OS 2.0.</li> + <li><a href="http://cds.w5v8t3u9.hwcdn.net/v123.zip">Base image v123.zip</a>: A discontinued image of Firefox OS 1.3 based on Android Jellybean; you shouldn't use this anymore.</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: Using a locale with base image v188 produces a mixed UI with locale and English languages.</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: Firefox OS images v180 and above are based on Android KK (Kitkat, 4.4); JB (Jellybean, 4.1–4.3) builds have now been discontinued and are no longer supported, so don't use anything older than v180.</p> +</div> + +<h3 id="Base_Image_installation">Base Image installation</h3> + +<p>To install the base image on your device:</p> + +<ol> + <li>Make sure remote debugging is enabled on your Flame, using the <em>Remote debugging/Debugging via USB</em> option in the device's <a href="/en-US/Firefox_OS/Debugging/Developer_settings#Debugging_via_USB">Developer settings</a> (the option is different, depending on whether you have Firefox 1.3 and under, or Firefox 1.4+ installed).</li> + <li>Connect your Flame to your computer via a USB cable if it isn't already. Verify that the computer is connected to the device by running the <code>adb devices</code> command in a terminal.</li> + <li>Download the base image <code>.zip</code> file referenced above. Unzip it onto your Desktop.</li> + <li>Go into the directory you extracted the software into and run it: + <ul> + <li>On Windows, enter the directory in your command prompt, then run the <code>flash.bat</code> script using <code>flash.bat</code> (or double click the file in explorer).<br> + <strong>Note</strong>: If <code>flash.bat </code>is missing, simply rename the <code>flash.sh</code> file to <code>flash.bat</code>, then run that. Make sure you have <code>adb</code> and <code>fastboot</code> installed and available on <code>PATH</code>.</li> + <li>On Linux / OSX, enter the directory in your terminal, then run the <code>flash.sh</code> script using <code>./flash.sh</code> (previous instructions encouraged you to use sudo. Don't. It is <strong>really dangerous</strong> to use sudo with things you download from the Internet. If the flash script fails to see your device, please double-check that your <a href="/en-US/Firefox_OS/Firefox_OS_build_prerequisites#For_Linux.3A_configure_the_udev_rule_for_your_phone">udev rules</a> are correct). If you do not see a <code>flash.sh</code> file, simply rename <code>flash.bat</code> to <code>flash.sh</code> first and then use the above command.</li> + </ul> + </li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: If you get a "permission denied" error when running the above commands, your shell script probably doesn't have the right permissions. Running <code>chmod +x flash.sh</code> on it should solve this problem.</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: If the flash script gets stuck at "< waiting for device >" while the display shows "ThunderSoft(R)", the script doesn't have permission to access the device while in fastboot mode. You need to setup the <a href="/en-US/Firefox_OS/Firefox_OS_build_prerequisites#For_Linux.3A_configure_the_udev_rule_for_your_phone">udev rules</a> to give it access. Also USB 3 ports may not work well with fastboot and can be the cause of this problem.</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: You are also welcome to build your own builds to install on the Flame: see <a href="/en-US/Firefox_OS/Building_and_installing_Firefox_OS">Building and installing Firefox OS</a>.</p> +</div> + +<h4 id="Font_fix">Font fix</h4> + +<div class="warning"> +<p><strong>Important</strong>: This step is only needed for base image v180.</p> +</div> + +<p>After updating Gecko and Gaia to nightly with the v180 base image, there will be a mismatch between the fonts that Gecko and Gaia expects and what the base image provides (this has been fixed as of v188). To fix this, you have two choices:</p> + +<ul> + <li>download our <a href="https://people.mozilla.org/~mwu/fira-font-update.zip">font update package</a>, extract it, navigate into the directory created by extracting, and run the supplied <code>flash.sh</code> script.</li> + <li>use the <a href="https://github.com/Mozilla-TWQA/B2G-flash-tool/blob/master/update_system_fonts.sh"><code>update_system_fonts.sh</code></a> script, which will download and flash the system fonts automatically.</li> +</ul> + +<h3 id="Updating_your_Flame_to_a_nightly_build"><a name="Updating_to_nightly_build" id="Updating_to_nightly_build">Updating your Flame to a nightly build</a></h3> + +<div class="note"> +<p><strong>Note</strong>: For the current build, Nightly development builds of Firefox OS do not support A-GPS, which may lead to slow performance of GPS functionality. We plan to resolve this in an updated future Nightly channel.</p> +</div> + +<div class="warning"> +<p><strong>Important</strong>: When running a shallow or full flash, your phone data will be overwritten: you should therefore back up your data before updating! See the {{anch("Backing up and restoring your Flame data")}} section for more details.</p> +</div> + +<ol> + <li>Before updating your phone to a Nightly build you should flash the latest base image to make sure the underlying systems are up to date. Download a <a href="#Base Image">base image</a> <u>with the same or a higher version of Firefox OS than the version you intend to use in step 3 below</u> and use it to update your device's software, as explained above.</li> + <li>Because the above step installs a fresh operating system on your device, you'll need to enable remote debugging on your Flame again, using the <em>Remote debugging </em>option in the device's <a href="/en-US/Firefox_OS/Debugging/Developer_settings">Developer settings</a>.</li> + <li>Next, choose a build to install (found on <a href="https://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/">https://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/</a>). You'll want one of the following: + <ul style="margin-left: 40px;"> + <li>Production builds (including locales) + <ul> + <li><a href="https://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central-flame-kk/">Latest master builds</a> (currently 2.6)</li> + <li><a href="https://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-b2g44_v2_5-flame-kk/">Latest v2.5 builds</a></li> + <li><a href="https://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-b2g37_v2_2-flame-kk/">2.2 build</a></li> + <li><a href="https://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/2015/07/2015-07-24-00-12-07-mozilla-b2g34_v2_1-flame-kk/">2.1 build</a></li> + <li><a href="https://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/2015/07/2015-07-23-00-02-07-mozilla-b2g32_v2_0-flame-kk/">2.0 build</a></li> + </ul> + </li> + <li>Engineering builds (with test apps and only pseudo-locales) + <ul> + <li><a href="https://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central-flame-kk-eng/">Latest master builds</a> (currently 2.6)</li> + <li><a href="https://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-b2g44_v2_5-flame-kk-eng/">Latest v2.5 builds</a></li> + <li><a href="https://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-b2g37_v2_2-flame-kk-eng/">2.2 build</a></li> + <li><a href="https://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/2015/07/2015-07-24-00-12-07-mozilla-b2g34_v2_1-flame-kk-eng/">2.1 build</a></li> + <li><a href="https://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/2015/07/2015-07-22-16-02-01-mozilla-b2g32_v2_0-flame-kk-eng/">2.0 build</a></li> + </ul> + </li> + </ul> + </li> + <li>Pick a version and download both the <code>b2g-XX.XX.en-US.android-arm.tar.gz</code> and <code>gaia.zip</code> files. Save them inside a directory on your Desktop called something like <code>fxos</code>.</li> + <li>Download the <a href="https://raw.githubusercontent.com/Mozilla-TWQA/B2G-flash-tool/master/shallow_flash.sh">shallow flash script</a> and save it in the same directory as the above two files.</li> + <li><strong>For Windows users:</strong> Also download the <a href="https://raw.githubusercontent.com/Mozilla-TWQA/B2G-flash-tool/master/shallow_flash.bat">shallow_flash.bat</a> windows script and install <a href="https://cygwin.com">Cygwin</a>, which provides a Linux-like command environment on Windows. You will need to install the default Cygwin <em>base</em> category plus the <em>unzip</em> package but shallow_flash.bat will do this for you if you download and copy the Cygwin setup*.exe to the same folder as the script.</li> + <li> + <p>In your Terminal, <code>cd</code> into the directory you saved the files in and Flash the builds to your phone using the following:</p> + + <p><strong>Linux</strong>:</p> + + <pre class="brush: bash">./shallow_flash.sh --gaia=gaia.zip --gecko=b2g-XX.XX.en-US.android-arm.tar.gz +</pre> + + <p><strong>Mac</strong>:</p> + + <pre class="brush: bash">./shallow_flash.sh --gaia gaia.zip --gecko b2g-XX.XX.en-US.android-arm.tar.gz</pre> + + <p><strong>Windows</strong>:</p> + + <p>Double click <code>shallow_flash.bat</code> (with the cogs icon) or run it from a command shell. It will flash <code>gaia.zip</code> and a single <code>b2g-XX.XX.en-US.android-arm.tar.gz</code> file.</p> + </li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: If your update fails with an error "Flashing out/target/product/flame/system.img failed because the image was too large.", you will need to update to the newest {{anch("Base Image","base image")}}, then try applying the nightly build again. This is because the system partition size has been updated (see {{Bug("1184980")}}.)</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: If you get a "permission denied" error when running the above commands, your shell script probably doesn't have the right permissions. Running <code>chmod +x shallow_flash.sh</code> on it should solve this problem.</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: A "shallow flash" updates <a href="/en-US/docs/Mozilla/Gecko">Gecko</a> and <a href="/en-US/Firefox_OS/Platform/Gaia">Gaia</a> plus data directories, as opposed to a full flash, which updates Gecko/Gaia, but also the underlying <a href="/en-US/Firefox_OS/Platform/Gonk">Gonk</a> layer and associated binaries particular to that device type. This is why it is a good idea to update to the official <a href="#Base Image">base image</a> first, as suggested above, then shallow flash over the top of that, once you've got the Gonk/binary layer right.</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: You can check the update status of each build on <a href="https://wiki.mozilla.org/B2G/QA/Flame_OTA">the Flame OTA status page</a>.</p> +</div> + +<p>Once the install procedure finishes the phone should reboot into the updated build and display the first time user workflow.</p> + +<h4 id="Switch_to_nightly_update_channel">Switch to nightly update channel</h4> + +<p>In v2.2 you can change the <strong>Update channel</strong> from <code>default</code> to <code>nightly</code> under <a href="/en-US/Firefox_OS/Debugging/Developer_settings#Update_channel">Developer settings</a>.</p> + +<p>Below is the older method, if you don't find that setting in your device.</p> + +<ol> + <li>Make sure remote debugging is enabled on your Flame, using the <em>Remote debugging/Debugging via USB</em> option in the device's <a href="/en-US/Firefox_OS/Debugging/Developer_settings">Developer settings</a>.</li> + <li>Download the <a href="https://github.com/Mozilla-TWQA/B2G-flash-tool/blob/master/change_channel.sh">change channel</a> script: follow the link, press the <em>Raw</em> button, then use your browser's save functionality to save the page directly as <code>change_channel.sh</code>.</li> + <li>In your Terminal, <code>cd</code> into the directory you saved the script in and change the update channel on your phone using the following command:<br> + + <pre class="brush: bash">./change_channel.sh -v nightly</pre> + </li> + <li>Once the phone reboots, check for updates by going into <em>Settings > Device information > Check now.</em></li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: This step isn't needed in newer versions of the Firefox OS software — you should just get OTA updates automatically.</p> +</div> + +<div class="note"> +<p><strong>Note:</strong> You can choose between several different update channels. Run "<code>./change_channel.sh -h</code>" to see the other channel options.</p> +</div> + +<h3 id="Fastboot_mode">Fastboot mode</h3> + +<p>If flashing a new build to your phone fails to work, your phone may become unresponsive, leading to the phone rebooting in recovery mode. The recovery mode provides few options (<em>Reboot</em>, <em>Update from adb</em>, <em>Wipe data</em>, <em>Wipe cache</em>, and <em>Update from sdcard</em>). Unfortunately, selecting <em>Update from adb</em> triggers a sideload mode in which you cannot use the other adb commands. The <code>adb sideload</code> command would work but the various flash scripts rely on other adb commands.</p> + +<p>You can force fastboot mode as follows:</p> + +<ol> + <li>Power off the phone (which may involve removing the battery in extreme cases...).</li> + <li>Plug in the USB cable.</li> + <li>Power the phone up again by pressing the Volume Down and Power buttons together.</li> +</ol> + +<p>The phone should now display the text "FASTBOOT": it is in fastboot mode and is waiting for a USB connection. At this point, a USB-connected, computer with adb installed should see the phone listed when the <code>fastboot devices</code> command is run. Note that regular adb would not see the device — only fastboot sees it. In this mode, you can use the flash script to install the last <a href="#Base Image">base image</a> as explained above. As the script does use both adb and fastboot commands, you may see some initial error and warnings from adb, but the device should be flashed properly at the end of the procedure.</p> + +<h3 id="Emergency_download_mode">Emergency download mode</h3> + +<p>If flashing a new build to your phone fails to work, your phone becomes unresponsive, and the phone cannot enter fastboot mode, you can use emergency mode for recovery. You'll need the provided emergency USB cable with the “Recovery Cable” red label on it and the <a href="http://cds.w5v8t3u9.hwcdn.net/Flame_Rescure_Tool_(updated_with_tutorial).zip">Emergency Download Tool</a> to enter this mode. For full instructions, see the Flame emergency rescue tool tutorial included in the download tool's files. Contact the device maker (flameservice [at] thundersoft.com) if you need any more technical support.</p> + +<p><img src="https://mdn.mozillademos.org/files/9787/EmergencyDownloadTool.jpg" style="height: 363px; width: 497px;" alt="Emergency download tool dialog box as it is when it start."></p> + +<div class="note"> +<p><strong>Note</strong>: The tool provided is Windows-only.</p> +</div> + +<h3 id="Recovery_mode">Recovery mode</h3> + +<p>You can enter recovery mode to clear your phone data or manually update the firmware. There are two ways to enter this mode:</p> + +<ul> + <li>If <a href="/en-US/Firefox_OS/Debugging/Installing_ADB">ADB</a> tools are available, make sure Remote debugging is turned on in the phone's <a href="/en-US/Firefox_OS/Debugging/Developer_settings#Remote_debugging">Developer settings</a>, connect your phone to your computer via USB and enter <code>adb reboot recovery</code> on the command line.</li> + <li>If your phone is powered off, press the Volume Up + Power buttons together.</li> +</ul> + +<p>When in recovery mode, press the Volume up/down keys to move the selection highlight, and the Power key to select. Make sure you have your phone data (Contacts, SMS, etc.) backed up before clearing data, and your upgrade packages downloaded before updating.</p> + +<h2 id="Backing_up_and_restoring_your_Flame_data">Backing up and restoring your Flame data</h2> + +<p>When using a Flame, you won't want to lose your phone's contacts and other data while upgrading to a new build (as explained earlier in this article). To backup and restore data you can use our Backup and restore profile tool, which is contained in the <a href="https://github.com/Mozilla-TWQA/B2G-flash-tool">B2G-flash-tool Git repo</a>.</p> + +<ol> + <li>To use this, first open up your terminal/command line.</li> + <li>Clone the above repo (you'll need <a href="http://www.git-scm.com/downloads">Git installed</a>) using + <pre class="brush: bash">git clone https://github.com/Mozilla-TWQA/B2G-flash-tool</pre> + </li> + <li>The tool is a Python file: <code>backup_restore_profile.py</code>. Make sure you have <a href="https://www.python.org/downloads/">Python installed</a> (2.7.x is probably best.) Linux and Mac systems should have this out of the box.</li> + <li>Enter the directory you just cloned using <code>cd B2G-flash-tool</code>.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: When using this tool, you'll also need to make sure that your phone is connected via USB to your computer, and that ADB (see {{anch("Important steps to follow first")}} above) and Debugging via USB (in your device's <a href="/en-US/Firefox_OS/Debugging/Developer_settings">Developer settings</a>) are enabled.</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: If you get a message complaining about lack of permissions to execute this file, <code>cd</code> into the directory where you saved the file, and run the following command:</p> + +<pre class="brush: bash">chmod +x backup_restore_profile.py</pre> +</div> + +<h3 id="Backing_up_data_from_your_phone">Backing up data from your phone</h3> + +<p>Before backing up you should make sure your device is updated with the most recent OTA update. To do this, on your phone go to <em>Settings app > Device Information > Check for updates > click Check Now</em>. If there is an update available, you should shortly get a notification of an available update. Choose to install the update.</p> + +<p>Now, in the directory where you saved the <code>backup_restore_profile.py</code> file, run the following:</p> + +<pre class="brush: bash">python backup_restore_profile.py -b</pre> + +<p>This should save your device profile to a directory called <code>mozilla-profile</code>, in the same directory as the script is located.</p> + +<div class="warning"> +<p>Warning: by default, it does not save the internal sd card content. So files like photos or videos from the gallery app will not be saved. If you want to backup the sd card content, add the --sdcard option</p> + +<pre class="brush: bash">python backup_restore_profile.py -b --sdcard</pre> +</div> + +<h3 id="Restoring_data_to_your_phone">Restoring data to your phone</h3> + +<p>Before restoring you should again make sure your device is updated with the most recent OTA update. Go to <em>Settings app > Device Information > Check for updates > click Check Now</em>. If there is an update available, you should shortly get a notification of an available update. Choose to install the update.</p> + +<p>In the directory where your <code>mozilla-profile</code> directory is located (see above section), run the following:</p> + +<pre class="brush: bash">python backup_restore_profile.py -r</pre> + +<div class="note"> +<p><strong>Note</strong>: You can get a list of all the options the tool supports by running <code>python backup_restore_profile.py -h</code>.</p> +</div> + +<h2 id="Pushing_apps_to_your_Flame">Pushing apps to your Flame</h2> + +<p>The <a href="/en-US/Firefox_OS/Using_the_App_Manager">App Manager</a> and <a href="/en-US/docs/Tools/WebIDE">WebIDE</a> tools make it easy to push apps to your phone, for testing, etc.</p> + +<h2 id="RAM_adjustment">RAM adjustment</h2> + +<p>You can adjust the available RAM capacity to see how apps perform on Firefox OS phones with lower memory footprints.</p> + +<p>This is accomplished by entering fastboot mode (install fastboot first, which is available on the same SDK page as <a href="/en-US/Firefox_OS/Debugging/Installing_ADB">ADB</a>) and typing:</p> + +<pre class="brush: bash">adb reboot bootloader +fastboot oem mem [0|256-1024]</pre> + +<p>“0” is the memory automatically detected and “256-1024” is the number of megabytes. For example, if you want to adjust device RAM capacity to 512M, enter <code>fastboot oem mem 512</code>.</p> + +<p>You'll need to then reboot your device for the settings to take effect. This can be done using:</p> + +<pre class="brush: bash">fastboot reboot</pre> + +<p>The current memory size can be returned by entering fastboot mode and typing:</p> + +<pre class="brush: bash">fastboot getvar mem +</pre> diff --git a/files/id/archive/b2g_os/phone_guide/index.html b/files/id/archive/b2g_os/phone_guide/index.html new file mode 100644 index 0000000000..bbfc5ecee3 --- /dev/null +++ b/files/id/archive/b2g_os/phone_guide/index.html @@ -0,0 +1,85 @@ +--- +title: Firefox OS phone guide +slug: Archive/B2G_OS/Phone_guide +tags: + - Firefox OS + - Landing + - NeedsTranslation + - Phones + - TopicStub +translation_of: Archive/B2G_OS/Phone_guide +--- +<div class="summary"> +<p><span class="seoSummary">This section contains developer information relevant to specific phones that run Firefox OS — both developer and consumer devices.</span> We have general information available on <a href="/en-US/Firefox_OS/Building_and_installing_Firefox_OS" title="Building and installing Firefox OS">Building and installing Firefox OS</a> and <a href="/en-US/Firefox_OS/Developing_Firefox_OS" title="/en-US/docs/Mozilla/Firefox_OS/Hacking_Firefox_OS">Hacking Firefox OS</a>, so please go there for information about building and installing the platform from scratch. Developers with specific phones in their possession may however find the following articles useful.</p> +</div> + +<h2 id="Developer_phone_information">Developer phone information</h2> + +<p>The phones listed here are specifically geared towards developers wanting to experiment with Firefox OS, including developing apps and contributing to the operating system itself. As such, they typically have unlocked SIMs, system files, etc.</p> + +<dl> + <dt><a href="/en-US/Firefox_OS/Phone_guide/Flame">Flame</a></dt> + <dd>The Flame device is the official reference device for developing, testing, and debugging Firefox OS and open web apps, produced in partnership with T<sup>2</sup>Mobile.</dd> + <dt><a href="/en-US/Firefox_OS/Phone_guide/Geeksphone">Geeksphone</a></dt> + <dd>In this article we cover some basic tips on how to keep your Geeksphone up-to-date and how to tweak the system Gaia applications.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Phone_guide/Nexus_5">Nexus 5</a></dt> + <dd>This article provides information about using Firefox OS on a Nexus 5, including Flashing Firefox OS onto your device.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Phone_guide/Nexus_4">Nexus 4</a></dt> + <dd>This article provides information about using Firefox OS on a Nexus 4, including Flashing Firefox OS onto your device.</dd> + <dt><a href="/en-US/Firefox_OS/Phone_guide/ZTE_OPEN">ZTE OPEN</a></dt> + <dd>This article contains information on the ZTE OPEN Firefox OS device.</dd> + <dt><a href="/en-US/Firefox_OS/Phone_guide/ZTE_OPEN_C">ZTE OPEN C</a></dt> + <dd>The ZTE Open C is an updated ZTE-produced Firefox OS device, with higher end hardware and newer software.</dd> +</dl> + +<h2 id="Consumer_phone_information">Consumer phone information</h2> + +<p>The phones listed here are consumer models, so not ideal for developers wanting to hack on devices. However, might be still useful for developers looking for more technical information on these consumer models. For a more complete list of devices, see our <a href="https://www.mozilla.org/en-US/firefox/os/devices/">Find Firefox OS near you</a> page.</p> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/Firefox_OS/Phone_guide/Alcatel_One_Touch_Fire">Alcatel One Touch Fire</a></dt> + <dd>Based on Firefox OS 1.3 and available in more than 5 countries.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Phone_guide/Alcatel_One_Touch_Pixi_3_%283.5%29">Alcatel One Touch Pixi 3 (3.5)</a></dt> + <dd><span>High-end consumer smartphone, powered by Firefox OS 2.0, with a 2 megapixel camera.</span></dd> + <dt><a href="/en-US/Firefox_OS/Phone_guide/Alcatel_Onetouch_Fire_C_4020D">Alcatel Onetouch Fire 2C 4020D</a></dt> + <dd>Based on Tarako Firefox OS (1.3T) and released in India.</dd> + <dt><a href="https://developer.mozilla.org/en-US/Firefox_OS/Phone_guide/Alcatel_One_Touch_Fire_C">Alcatel Onetouch Fire C</a></dt> + <dd>Based on Tarako Firefox OS (1.3T) and released in India.</dd> + <dt><a href="https://developer.mozilla.org/en-US/Firefox_OS/Phone_guide/Alcatel_One_Touch_Fire_E">Alcatel Onetouch Fire E</a></dt> + <dd>Available in 5 countries.</dd> + <dt><a href="https://developer.mozilla.org/en-US/Firefox_OS/Phone_guide/Cherry_Mobile_Ace">Cherry Mobile Ace</a></dt> + <dd>Based on Firefox OS 1.3T and available in the Philippines.</dd> + <dt><a href="/en-US/Firefox_OS/Phone_guide/Fx0">Fx0</a></dt> + <dd>First Firefox OS phone released in Japan, by KDDI.</dd> + <dt><a href="https://developer.mozilla.org/en-US/Firefox_OS/Phone_guide/Huawei_Y300_II">Huawei Y300 II</a></dt> + <dd>Based on Firefox OS 1.1 and available in the Philippines and Mexico.</dd> + <dt><a href="/en-US/Firefox_OS/Phone_guide/Intex_Cloud_FX">Intex Cloud FX</a></dt> + <dd>First Firefox OS Tarako phone released in India and based on Firefox OS 1.3T.</dd> + <dt><a href="/en-US/Firefox_OS/Phone_guide/LG_fireweb">LG Fireweb</a></dt> + <dd>Based on Firefox OS 1.1 and available in Uruguay and Brasil.</dd> + <dt><a href="/en-US/Firefox_OS/Phone_guide/Spice_Fire_One_MI_FX1">Spice Firefox MI FX1</a></dt> + <dd>Based on Tarako Firefox OS (1.3T) and released in India.</dd> + <dt><a href="/en-US/Firefox_OS/Phone_guide/Spice_Fire_One_MI_FX2">Spice Firefox MI FX2</a></dt> + <dd><span>High-end consumer 3G smartphone powered by FirefoxOS 1.4 with a 2 megapixel camera, released in India.</span></dd> + <dt><a href="/en-US/Firefox_OS/Phone_guide/Symphony_GoFox_F15">Symphony GoFox F15</a></dt> + <dd>First Firefox OS Device to come with 3G video calling capability, launched in Bangladesh.</dd> + <dt><a href="/en-US/Firefox_OS/Phone_guide/Zen_U105_Fire">Zen U105 Fire</a></dt> + <dd>Based on Firefox OS Tarako, available in India.</dd> + <dt style="font-size: 13.63636302948px; line-height: 19.0909080505371px;"><a href="https://developer.mozilla.org/en-US/Firefox_OS/Phone_guide/ZTE_Open_II">ZTE Open II</a></dt> + <dd style="font-size: 13.63636302948px; line-height: 19.0909080505371px;"><span style="font-size: 13.63636302948px; line-height: 19.0909080505371px;">Has a</span><span style="font-size: 13.63636302948px; line-height: 19.0909080505371px;">1.2 GHz dual core </span><span style="font-size: 13.63636302948px; line-height: 19.0909080505371px;">processor and a </span><span style="font-size: 13.63636302948px; line-height: 19.0909080505371px;">2.0 MP </span><span style="font-size: 13.63636302948px; line-height: 19.0909080505371px;">Rear Camera</span>, available in 7 countries.</dd> + <dt style="font-size: 13.63636302948px; line-height: 19.0909080505371px;"><a href="/en-US/docs/Mozilla/Firefox_OS/Phone_guide/Orange_Klif">Orange Klif</a></dt> + <dd style="font-size: 13.63636302948px; line-height: 19.0909080505371px;"><span>The Orange Klif is a 3G Smartphone, powered by Firefox OS 2.0, with a 2 megapixel camera. It is available in a number of African countries.</span></dd> +</dl> + +<h2 id="General_Firefox_OS_information">General Firefox OS information</h2> + +<dl> + <dt><a href="/en-US/Firefox_OS/Phone_guide/Phone_specs">Firefox OS phone data</a></dt> + <dd>In this article we list the various available Firefox OS phones along with information such as their code names, availability, and specific hardware features.</dd> + <dt><a href="/en-US/Firefox_OS/Phone_guide/Firefox_OS_device_features">General device features</a></dt> + <dd>This page lists typical Firefox OS hardware features and minimum hardware requirements.</dd> + <dt><a href="/en-US/Firefox_OS/Troubleshooting">Troubleshooting</a></dt> + <dd>This article provides tips for resolving common problems you may have while using Firefox OS.</dd> + <dt><a href="/en-US/Firefox_OS/Phone_guide/Best_practices_open_reference_devices">Best practices for open reference devices</a></dt> + <dd>A set of best practices that we believe should come highly recommended for any widely available open reference devices. All of the recent Firefox OS reference devices have followed these practices.</dd> +</dl> diff --git a/files/id/archive/b2g_os/platform/index.html b/files/id/archive/b2g_os/platform/index.html new file mode 100644 index 0000000000..ec17b4cd1d --- /dev/null +++ b/files/id/archive/b2g_os/platform/index.html @@ -0,0 +1,82 @@ +--- +title: The Firefox OS platform +slug: Archive/B2G_OS/Platform +translation_of: Archive/B2G_OS/Platform +--- +<div class="summary"> + <p><span class="seoSummary">The Firefox OS platform consists of many components. While you don't need to understand its architecture in order to build applications that run on Firefox OS, if you're working on developing or porting the platform — or are simply curious — the following documentation may be of interest to you.</span></p> +</div> +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Documentation" name="Documentation">Documentation about the Firefox OS platform</h2> + <dl> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Architecture" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Architecture">Firefox OS architecture overview</a></dt> + <dd> + An overview of how Firefox OS is structured internally; this is primarily of interest to platform developers and people doing porting work.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Apps_architecture" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Apps_architecture">Firefox OS apps architecture</a></dt> + <dd> + An overview of the application model on Firefox OS.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia">Gaia</a></dt> + <dd> + Documentation about Gaia, the user interface application for Firefox OS devices; this is a Web application running atop the Firefox OS software stack.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Gonk" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Gonk">Gonk</a></dt> + <dd> + Documentation about Gonk, the operating system layer underneath Gaia. This consists of a Linux kernel and a hardware abstraction layer to which Gecko communicates.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Gecko" title="/en-US/docs/Mozilla/Gecko">Gecko</a></dt> + <dd> + Gecko is the layer of Firefox OS that provides the same open web standards implementation used by Firefox and Thunderbird, as well as many other applications.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Security" title="/en-US/docs/Mozilla/Firefox_OS/Security"> Security</a></dt> + <dd> + Documentation about security in Firefox OS; this includes topics about security devices from every perspective: for app developers, device integrators, and so forth.</dd> + <dt> + <a href="/en-US/Firefox_OS/Debugging/Out_of_memory_management_on_Firefox_OS">Out of memory management on Firefox OS</a></dt> + <dd> + This article explains how low memory situations are managed on Firefox OS, using the low memory killer and low memory notifications.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Feature_support_chart" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Feature_support_chart">Feature support chart</a></dt> + <dd> + A chart of which features are available in which types of Firefox OS builds.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Settings_list" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Settings_list">Firefox OS settings list</a></dt> + <dd> + A list of common setting names that can be used with the <a href="/en-US/docs/WebAPI/Settings" title="/en-US/docs/WebAPI/Settings">Settings</a> API.</dd> + </dl> + <p><span class="alllinks"><a href="/en-US/docs/tag/B2G" title="/en-US/docs/tag/B2G">View All...</a></span></p> + </td> + <td> + <h2 class="Community" id="Community" name="Community">Getting help from the community</h2> + <p>If you're working with Firefox OS, or developing applications you'd like to run on Firefox OS devices, there are community resources to help you!</p> + <ul> + <li>Consult the Boot to Gecko project forum: {{ DiscussionList("dev-b2g", "mozilla.dev.b2g") }}</li> + </ul> + <ul> + <li>Ask your question on Mozilla's Boot to Gecko IRC channel: <a class="link-irc" href="irc://irc.mozilla.org/b2g" title="irc://irc.mozilla.org/b2g">#b2g</a></li> + </ul> + <p><span class="alllinks"><a class="external" href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">Don't forget about the <em>netiquette</em>...</a></span></p> + <br> + <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related topics</h2> + <ul> + <li><a href="/en-US/docs/Mobile" title="en-US/docs/Mobile">Mobile</a></li> + <li><a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a></li> + <li><a href="/en-US/docs/CSS" title="en-US/docs/CSS">CSS</a></li> + <li><a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a></li> + </ul> + <h2 class="Tools" id="Resources">Resources</h2> + <ul> + <li><a class="link-https" href="https://wiki.mozilla.org/B2G/FAQ" title="B2G/FAQ">Mozilla wiki FAQ</a></li> + <li><a class="link-https" href="https://wiki.mozilla.org/B2G/Schedule_Roadmap" title="https://wiki.mozilla.org/B2G/Schedule_Roadmap">Roadmap</a></li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Feature_support_chart" title="/en-US/docs/Mozilla/Firefox_OS/Feature_support_chart">Feature support chart</a></li> + </ul> + </td> + </tr> + </tbody> +</table> +<p> </p> diff --git a/files/id/archive/b2g_os/quickstart/aplikasi_pertama_kamu/index.html b/files/id/archive/b2g_os/quickstart/aplikasi_pertama_kamu/index.html new file mode 100644 index 0000000000..ecc95018a2 --- /dev/null +++ b/files/id/archive/b2g_os/quickstart/aplikasi_pertama_kamu/index.html @@ -0,0 +1,210 @@ +--- +title: Aplikasi Pertama Kamu +slug: Archive/B2G_OS/Quickstart/aplikasi_pertama_kamu +translation_of: Archive/B2G_OS/Quickstart/Your_first_app +--- +<article class="brush: js"> + <div class="summary"> + <p>Aplikasi Open web memberikan kemudahan kepada Pengembang web persis seperti apa yang mereka inginkan selama ini: lingkungan cross-platform yang didedikasikan untuk aplikasi yang diinstal dan dibuat hanya dengan menggunakan HTML, CSS, dan JavaScript saja - dengan Firefox OS sebagai yang pertama yang mendedikasikan platform Aplikasi Open web ini. Panduan ini bertujuan untuk membuat Anda belajar dan membangun aplikasi, dengan petunjuk arsitektur dasar dan petunjuk membangun Aplikasi sehingga Anda dapat membuat aplikasi besar berikutnya!</p> + </div> + <p>Jika Anda tidak ingin mengikuti panduan ini, Anda dapat men-download template aplikasi <a href="https://github.com/chrisdavidmills/mdn-app-template">quick start </a>kami. Cari tahu lebih banyak tentang apa ini, dengan membaca panduan <a href="https://developer.mozilla.org/en-US/docs/Project:MDN/Style_guide/Sample_app_coding_guidelines#Apps_template">Template aplikasi</a> kami.</p> + <h2 id="Struktur_Aplikasi">Struktur Aplikasi</h2> + <h3 id="Paket_vs._Aplikasi_yang_dihost">Paket vs. Aplikasi yang dihost</h3> + <p>Ada dua jenis aplikasi Open web yaitu: dikemas dan dihosting.</p> + <ul> + <li>Aplikasi dikemas dasarnya berformat file zip yang berisi semua aset aplikasi: HTML, CSS, JavaScript, gambar, manifest, dll.</li> + <li>Aplikasi Hosted dijalankan dari server di domain yang diberikan, seperti situs web standar.</li> + </ul> + <p>Kedua jenis aplikasi ini memerlukan file manifest yang valid. Ketika tiba saatnya Anda ingin untuk mendaftarkan aplikasi Anda di Firefox Marketplace, Anda akan meng-upload aplikasi Anda sebagai file .zip atau memberikan URL di mana aplikasi anda dihosting.</p> + <div style="width: 480px; margin: 0 auto;"> + <p><iframe frameborder="0" height="270" src="https://www.youtube.com/embed/Q7x-B13y33Q/?feature=player_detailpage" width="480"></iframe></p> + <div class="video-caption"> + <p><span class="long_text short_text" id="result_box" lang="id"><span class="hps">Dibuat</span> <span class="hps">dalam kemitraan dengan</span> <span class="hps">Treehouse</span><span>:</span></span> <a class="button" href="http://teamtreehouse.com/?cid=1154"><span class="long_text short_text" id="result_box" lang="id"><span class="hps">Periksa mereka</span><span>!</span></span></a></p> + </div> + </div> + <p>Untuk tujuan panduan ini, Anda akan membuat aplikasi host yang akan tinggal di alamat localhost Anda. Setelah aplikasi Anda sudah siap untuk daftar di Firefox Marketplace, Anda dapat membuat keputusan untuk bundel sebagai aplikasi dikemas atau meluncurkannya sebagai aplikasi host.</p> + <h3 id="Manifests_Aplikasi">Manifests Aplikasi</h3> + <p>Every Firefox app requires a manifest.webapp file at the app root. The <a href="/en-US/docs/Web/Apps/Manifest"><code>manifest.webapp</code></a> file provides important information about the app, such as version, name, description, icon location, locale strings, domains the app can be installed from, and much more. Only the name and description are required. The simple manifest included within the app template is similar to the following:</p> + <pre class="brush: js">{ + "version": "0.1", + "name": "Open Web App", + "description": "Your new awesome Open Web App", + "launch_path": "/app-template/index.html", + "icons": { + "16": "/app-template/app-icons/icon-16.png", + "48": "/app-template/app-icons/icon-48.png", + "128": "/app-template/app-icons/icon-128.png" + }, + "developer": { + "name": "Your Name", + "url": "http://yourawesomeapp.com" + }, + "locales": { + "es": { + "description": "Su nueva aplicación impresionante Open Web", + "developer": { + "url": "http://yourawesomeapp.com" + } + }, + "it": { + "description": "La tua nuova fantastica Open Web App", + "developer": { + "url": "http://yourawesomeapp.com" + } + } + }, + "default_locale": "en" +}</pre> + <div style="width: 480px; margin: 0 auto;"> + <p><iframe frameborder="0" height="270" src="https://www.youtube.com/embed/dgAUgHQOm8M#t/?feature=player_detailpage" width="480"></iframe></p> + <div class="video-caption"> + <p>Made in partnership with Treehouse: <a class="button" href="http://teamtreehouse.com/?cid=1154">Check them out!</a></p> + </div> + </div> + <p> </p> + <p>A basic manifest is all you need to get started. For more details about manifests, read <a href="/en-US/docs/Web/Apps/Manifest">App Manifest</a>.</p> + <h2 id="App_Layout_Design">App Layout & Design</h2> + <p>Responsive design has become increasingly important as more screen resolutions become standard on different devices. Even if the main target of your app is mobile platforms such as Firefox OS, other devices will likely have access to it as well. <a href="//developer.mozilla.org/docs/CSS/Media_queries">CSS media queries</a> allow you to adapt layout to device, as shown in this skeleton CSS example:</p> + <pre class="brush: css">/* The following are examples of different CSS media queries */ + +/* Basic desktop/screen width sniff */ +@media only screen and (min-width : 1224px) { + /* styles */ +} + +/* Traditional iPhone width */ +@media + only screen and (-webkit-min-device-pixel-ratio : 1.5), + only screen and (min-device-pixel-ratio : 1.5) { + /* styles */ +} + +/* Device settings at different orientations */ +@media screen and (orientation:portrait) { + /* styles */ +} +@media screen and (orientation:landscape) { + /* styles */ +}</pre> + <p>There are many JavaScript and CSS frameworks available to aid in responsive design and mobile app development (<a href="http://twitter.github.com/bootstrap">Bootstrap</a>, etc.) Choose the framework(s) that best fit your app and development style.</p> + <h2 id="Web_APIs">Web APIs</h2> + <p>JavaScript APIs are being created and enhanced as quickly as devices are. Mozilla's <a href="https://wiki.mozilla.org/WebAPI">WebAPI</a> effort brings dozens of standard mobile features to JavaScript APIs. A list of device support and status is available on the <a href="https://wiki.mozilla.org/WebAPI">WebAPI</a> page. JavaScript feature detection is still the best practice, as shown in the following example:</p> + <pre class="brush: js">// If this device supports the vibrate API... +if('vibrate' in navigator) { + // ... vibrate for a second + navigator.vibrate(1000); +}</pre> + <p>In the following example, the display style of a <code><div></code> is modified based on changes in the battery state of the device:</p> + <pre class="brush: java">// Create the battery indicator listeners +(function() { + var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery, + indicator, indicatorPercentage; + + if(battery) { + indicator = document.getElementById('indicator'), + indicatorPercentage = document.getElementById('indicator-percentage'); + + // Set listeners for changes + battery.addEventListener('chargingchange', updateBattery); + battery.addEventListener('levelchange', updateBattery); + + // Update immediately + updateBattery(); + } + + function updateBattery() { + // Update percentage width and text + var level = (battery.level * 100) + '%'; + indicatorPercentage.style.width = level; + indicatorPercentage.innerHTML = 'Battery: ' + level; + // Update charging status + indicator.className = battery.charging ? 'charging' : ''; + } +})();</pre> + <p>In the code sample above, once you confirm that the <a href="https://developer.mozilla.org/en-US/docs/DOM/window.navigator.battery">Battery API</a> is supported, you can add event listeners for <code>chargingchange</code> and <code>levelchange</code> to update the element's display. Try adding the following to the quickstart template, and see if you can get it working.</p> + <p>Check the <a href="https://wiki.mozilla.org/WebAPI">WebAPI</a> page frequently to keep up to date with device API statuses.</p> + <h3 id="Install_API_functionality">Install API functionality</h3> + <p>In our sample quickstart app template, we've implemented an install button that you can click when viewing the app as a standard Web page, to install that site on Firefox OS as an app. The button markup is nothing special:</p> + <pre class="brush: html"><button id="install-btn">Install app</button></pre> + <p>This button's functionality is implemented using the Install API (see install.js):</p> + <pre class="brush: js">var manifest_url = location.href + 'manifest.webapp'; + +function install(ev) { + ev.preventDefault(); + // define the manifest URL + // install the app + var installLocFind = navigator.mozApps.install(manifest_url); + installLocFind.onsuccess = function(data) { + // App is installed, do something + }; + installLocFind.onerror = function() { + // App wasn't installed, info is in + // installapp.error.name + alert(installLocFind.error.name); + }; +}; + +// get a reference to the button and call install() on click if the app isn't already installed. If it is, hide the button. +var button = document.getElementById('install-btn'); + +var installCheck = navigator.mozApps.checkInstalled(manifest_url); + +installCheck.onsuccess = function() { + if(installCheck.result) { + button.style.display = "none"; + } else { + button.addEventListener('click', install, false); + }; +}; +</pre> + <p>Let's run through briefly what is going on:</p> + <ol> + <li>We get a reference to the install button and store it in the variable <code>button</code>.</li> + <li>We use <code>navigator.mozApps.checkInstalled</code> to check whether the app defined by the manifest at <code>http://people.mozilla.com/~cmills/location-finder/manifest.webapp</code> is already installed on the device. This test is stored in the variable <code>installCheck</code>.</li> + <li>When the test is successfully carried out, its success event is fired, therefore <code>installCheck.onsuccess = function() { ... }</code> is run.</li> + <li>We then test for the existence of <code>installCheck.result</code> using an <code>if</code> statement. If it does exist, meaning that the app is installed, we hide the button. An install button isn't needed if it is already installed.</li> + <li>If the app isn't installed, we add a click event listener to the button, so the <code>install()</code> function is run when the button is clicked.</li> + <li>When the button is clicked and the <code>install()</code> function is run, we store the manifest file location in a variable called <code>manifest_url</code>, and then install the app using <code>navigator.mozApps.install(manifest_url)</code>, storing a reference to that installation in the <code>installLocFind</code> variable. You'll notice that this installation also fires success and error events, so you can run actions dependent on whether the install happened successfully or not.</li> + </ol> + <p>You may want to verify the <a href="/en-US/docs/Web/Apps/JavaScript_API">implementation state of the API</a> when first coming to Installable web apps.</p> + <div class="note"> + <p>Note: Installable open web apps have a "single app per origin" security policy; basically, you can't host more than one installable app per origin. This makes testing a bit more tricky, but there are still ways around this, such as creating different sub-domains for apps, testing them using the Firefox OS Simulator, or testing the install functionality on Firefox Aurora/Nightly, which allows you to install installable web apps on the desktop. See <a href="/en-US/docs/Web/Apps/FAQs/About_app_manifests">FAQs about apps manifests</a> for more information on origins.</p> + </div> + <h2 id="WebRT_APIs_(Permissions-based_APIs)">WebRT APIs (Permissions-based APIs)</h2> + <p>There are a number of WebAPIs that are available but require permissions for that specific feature to be enabled. Apps may register permission requests within the <code>manifest.webapp</code> file like so:</p> + <pre class="brush: js">// New key in the manifest: "permissions" +// Request access to any number of APIs +// Here we request permissions to the systemXHR API +"permissions": { + "systemXHR": {} +}</pre> + <p>The three levels of permission are as follows:</p> + <ul> + <li>Normal — APIs that don't need any kind of special access permissions.</li> + <li>Privileged — APIs available to developers to use in their applications, as long as they set access permissions in the app manifest files, and distribute them through a trusted source.</li> + <li>Certified — APIs that control critical functions on a device, such as the call dialer and messaging services. These are generally not available for third party developers to use.</li> + </ul> + <p>For more information on app permission levels, read <a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Packaged_apps#Types_of_packaged_apps" title="/en-US/docs/Web/Apps/Packaged_apps#Types_of_packaged_apps">Types of packaged apps</a>. You can find out more information about what APIs require permissions, and what permissions are required, at <a href="/en-US/docs/Web/Apps/App_permissions">App permissions</a>.</p> + <div class="note"> + <p>It's important to note that not all Web APIs have been implemented within the Firefox OS Simulator.</p> + </div> + <h2 id="Tools_Testing">Tools & Testing</h2> + <p>Testing is incredibly important when supporting mobile devices. There are many options for testing installable open web apps.</p> + <h3 id="Firefox_OS_Simulator">Firefox OS Simulator</h3> + <p>Installing and using the <a href="https://marketplace.firefox.com/developers/docs/firefox_os_simulator">Firefox OS Simulator</a> is the easiest way to get up and running with your app. After you install the simulator, it is accessible from the Tools -> Web Developer -> Firefox OS Simulator menu. The simulator launches with a JavaScript console so you can debug your application from within the simulator.</p> + <h3 id="App_Manager">App Manager</h3> + <p>The new kid on the block with regards to testing tools is called the <a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_App_Manager">App Manager</a>. This tool allows you to connect desktop Firefox to a compatible device via USB (or a Firefox OS simulator), push apps straight to the device, validate apps, and debug them as they run on the device.</p> + <h3 id="Unit_Testing">Unit Testing</h3> + <p>Unit tests are extremely valuable when testing on different devices and builds. jQuery's <a href="http://qunitjs.com">QUnit</a> is a popular client-side testing utility, but you can use any set of testing tools you'd like.</p> + <h3 id="Installing_Firefox_OS_on_a_Device">Installing Firefox OS on a Device</h3> + <p>Since Firefox OS is an open source platform, code and tools are available to build and install Firefox OS on your own device. Build and installation instructions, as well as notes on what devices it can be installed on, can be found on <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform">MDN</a>.</p> + <p>Dedicated Firefox OS developer preview devices are also available: read our <a href="https://marketplace.firefox.com/developers/dev_phone">Developer preview phone page</a> for more information.</p> + <h2 id="App_Submission_and_Distribution">App Submission and Distribution</h2> + <p>Once your app is complete, you can host it yourself like a standard web site or app (read <a href="/en-US/docs/Web/Apps/Publishing/Self-publishing_Apps">Self-publishing apps</a> for more information), or it can be <a href="https://marketplace.firefox.com/developers/submit/app/manifest">submitted</a> to the <a href="https://marketplace.firefox.com">Firefox Marketplace</a>. Your app's manifest will be validated and you may choose which devices your app will support (e.g. Firefox OS, Desktop Firefox, Firefox Mobile, Firefox Tablet). Once validated, you can add additional details about your app (screenshots, descriptions, price, etc.) and officially submit the app for listing within the Marketplace. Once approved, your app is available to the world for purchase and installation.</p> + <h3 id="More_Marketplace_Listing_Information">More Marketplace & Listing Information</h3> + <ol> + <li><a href="/en-US/docs/Web/Apps/Publishing/Submitting_an_app">Submitting an App to the Firefox OS Marketplace </a></li> + <li><a href="/en-US/docs/Web/Apps/Publishing/Marketplace_review_criteria">Marketplace Review Criteria </a></li> + <li><a href="http://s.vid.ly/embeded.html?link=8k2n4w&autoplay=false">App Submission Video Walkthrough </a></li> + </ol> +</article> diff --git a/files/id/archive/b2g_os/quickstart/index.html b/files/id/archive/b2g_os/quickstart/index.html new file mode 100644 index 0000000000..ebe1f7c220 --- /dev/null +++ b/files/id/archive/b2g_os/quickstart/index.html @@ -0,0 +1,49 @@ +--- +title: Build +slug: Archive/B2G_OS/Quickstart +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/B2G_OS/Quickstart +--- +<div class="summary"> + <p>Quickstart information on coding open web apps.</p> +</div> +<dl> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/Intro_to_open_web_apps">Introduction to open web apps</a></dt> + <dd> + What are open web apps? How they differ from regular web pages? Why is this significant? This article aims to answer these questions and more.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/Your_first_app">Your first app</a></dt> + <dd> + This article takes you through the basic steps and additional knowledge on top of regular web development required to create installable open web apps.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/Intro_to_Firefox_OS">Introduction to Firefox OS</a></dt> + <dd> + An introduction to Firefox OS, Mozilla's new open web app-based mobile platform.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/Intro_to_manifests">Introduction to manifests</a></dt> + <dd> + An FAQ designed to answer any questions you may have about manifests, hosting apps, origins, and other such topics.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/For_Web_developers">App development for web developers</a></dt> + <dd> + If you're a web developer, how do open web apps differ from what you're used to? This article explains all.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/For_mobile_developers">App development for mobile developers</a></dt> + <dd> + If you're a native mobile application developer, what advantages can open web apps bring to you, and how do they differ from what you are used to? Here are some ideas.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/Developing_app_functionality">Developing app functionality</a></dt> + <dd> + This page talks about the kinds of different functionality that you might want to build into your apps, with links to further information.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/Payments">Payments</a></dt> + <dd> + How do you build functionality to make people pay for installing your open web apps? Here is the lowdown.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/App_tools">App tools</a></dt> + <dd> + Last for this section, we provide some links to more information on the tools available to help you develop great open web apps.</dd> +</dl> diff --git a/files/id/archive/b2g_os/simulator/index.html b/files/id/archive/b2g_os/simulator/index.html new file mode 100644 index 0000000000..6bc32a3c38 --- /dev/null +++ b/files/id/archive/b2g_os/simulator/index.html @@ -0,0 +1,120 @@ +--- +title: Firefox OS Simulator +slug: Archive/B2G_OS/Simulator +translation_of: Archive/B2G_OS/Simulator +--- +<div class="note"> +<p><span class="notranslate">Halaman ini menjelaskan Firefox OS Simulator untuk pengembang menargetkan Firefox OS 1.2 atau yang lebih baru.</span> <span class="notranslate"> Jika Anda sedang mengembangkan aplikasi untuk Firefox OS 1.1, maka Anda harus memeriksa dokumentasi untuk <a href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=id&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&tl=id&u=https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_1.1_Simulator&usg=ALkJrhjLGmEfIFMgZfT5XpZ_Sly2k5a4QQ">Firefox OS 1.1 Simulator</a> gantinya.</span></p> +</div> + +<p><span class="notranslate"><span style="line-height: 1.5;">Firefox OS Simulator adalah versi dari lapisan yang lebih tinggi dari Firefox OS yang mensimulasikan perangkat Firefox OS, tapi berjalan pada desktop.</span></span> <span class="notranslate"> <span style="line-height: 1.5;">Ini berarti bahwa dalam banyak kasus, Anda tidak perlu perangkat nyata untuk menguji dan men-debug aplikasi Anda. Ini berjalan di jendela ukuran yang sama sebagai perangkat Firefox OS, termasuk antarmuka pengguna Firefox OS dan built-in aplikasi, dan mensimulasikan banyak dari Firefox OS perangkat API.</span></span></p> + +<p> </p> + +<p><span class="notranslate"><span style="line-height: 1.5;">Simulator ini dikemas dan didistribusikan sebagai Firefox add-on.</span></span> <span class="notranslate"> <span style="line-height: 1.5;">Setelah Anda download dan diinstal di Firefox, Anda dapat menjalankannya, mendorong aplikasi untuk itu, dan melampirkan alat pengembang untuk itu menggunakan <a href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=id&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&tl=id&u=https://developer.mozilla.org/en-US/Firefox_OS/Using_the_App_Manager&usg=ALkJrhhiU_VHfZmBfFqWM876lmojeCcK0Q">App Manajer</a> alat atau <a href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=id&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&tl=id&u=https://developer.mozilla.org/docs/Tools/WebIDE&usg=ALkJrhg95QnRVJFRYvYWSZqZ7xKohU0MDw">WebIDE.</a></span></span></p> + +<h2 id="Instalasi"><span class="notranslate"><span style="line-height: 1.5;">Instalasi</span></span></h2> + +<p><span class="notranslate"><span style="line-height: 1.5;">Untuk menginstal simulator, menggunakan <a href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=id&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&tl=id&u=https://developer.mozilla.org/docs/Tools/WebIDE/Setting_up_runtimes&usg=ALkJrhgPJxcVX3YxJ-BpvTbvIveBUD_nSQ#Adding_a_Simulator">WebIDE ini Mengelola penambahan Komponen panel</a> (tersedia sebagai bagian dari Firefox 34 dan seterusnya).</span></span> <span class="notranslate"> <span style="line-height: 1.5;">Beberapa versi yang tersedia, dan Anda disarankan untuk menginstal mereka semua, untuk fleksibilitas maksimum.</span></span></p> + +<div class="note"> +<p><span class="notranslate"><span style="line-height: 1.5;">Dimulai dengan Firefox 43, tentang: halaman addons mungkin menampilkan peringatan tentang addon Anda menjadi unsigned.</span></span> <span class="notranslate"> <span style="line-height: 1.5;">Simulator yang benar ditandatangani pada waktu menginstal, namun mereka kemudian dimodifikasi sehingga muncul "rusak".</span></span> <span class="notranslate"> <span style="line-height: 1.5;">Mereka akan terus berjalan dengan sukses meskipun pesan peringatan ini.</span></span> <span class="notranslate"> <span style="line-height: 1.5;">Rinciannya di <a class="external external-icon" href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=id&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&tl=id&u=https://bugzilla.mozilla.org/show_bug.cgi%3Fid%3D1197262&usg=ALkJrhh8Nr70Eiyi7fTUlTWRBzBuY4UIvg" title="Simulator harus berhenti mengubah isinya">bug 1.197.262.</a></span></span></p> +</div> + +<p><span class="notranslate">Untuk memulai Simulator, Anda memilih dari daftar runtime WebIDE ini.</span> <span class="notranslate"> Untuk lebih jelasnya, lihat <a href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=id&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&tl=id&u=https://developer.mozilla.org/docs/Tools/WebIDE/Setting_up_runtimes&usg=ALkJrhgPJxcVX3YxJ-BpvTbvIveBUD_nSQ#Selecting_a_runtime" style="font-size: 14px; font-weight: normal; line-height: 1.5;">petunjuk pada dokumentasi WebIDE.</a></span> <span class="notranslate"> Setelah menjalankan Simulator, Anda dapat mendorong aplikasi untuk itu dan debug mereka menggunakan WebIDE, seperti yang Anda bisa dengan perangkat nyata.</span></p> + +<p><span class="notranslate">Jika Anda menggunakan <a href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=id&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&tl=id&u=https://developer.mozilla.org/Firefox_OS/Using_the_App_Manager&usg=ALkJrhilhaVxZ6vwknqLTSb4902e4mkm7w">Manajer App</a> (alat tua tersedia sebelum WebIDE), Anda dapat menginstal simulator melalui tombol berikut:</span></p> + +<p><a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/" style="margin-bottom: 20px; padding: 10px; color: white; text-align: center; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; display: inline-block; background-color: rgb(129, 188, 46); white-space: nowrap; text-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 0px; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 0px 0px, rgba(0, 0, 0, 0.298039) 0px -1px 0px 0px inset;">Install Simulator</a></p> + +<h2 id="Simulator_UI" style="line-height: 30px;"><span class="notranslate">Simulator UI</span></h2> + +<p><span class="notranslate"><span style="line-height: 22.00800132751465px;">Simulator muncul sebagai jendela terpisah, berukuran sehingga area layar simulasi adalah 320x480 piksel. Untuk mensimulasikan peristiwa sentuhan Anda dapat mengklik tombol mouse dan tarik sambil memegang tombol ke bawah.</span></span> <span class="notranslate"> <span style="line-height: 22.00800132751465px;">Jadi dengan mengklik dan menyeret kanan-ke-kiri dari Home Screen, Anda akan melihat aplikasi built-in, serta setiap aplikasi yang telah ditambahkan:</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7173/simulator-1.2.png" style="display: block; height: 623px; margin: 0px auto; width: 810px;"></p> + +<p><span class="notranslate">Simulator ini memiliki dua tombol di toolbar di bagian bawah:</span></p> + +<ul> + <li><span class="notranslate">tombol di sebelah kiri membawa Anda ke layar Home, atau switch Simulator off jika Anda terus ke bawah</span></li> + <li><span class="notranslate">tombol di sebelah kanan switch Simulator antara potret dan orientasi landscape.</span> <span class="notranslate"> Ini akan menghasilkan <a href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=id&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&tl=id&u=https://developer.mozilla.org/en-US/docs/WebAPI/Managing_screen_orientation&usg=ALkJrhia-icPKIA4rWz0jVVStupylXzb-w#Listening_orientation_change" title="/ en-US / docs / WebAPI / Detecting_device_orientation">orientationchange</a> acara.</span></li> +</ul> + +<h2 id="Emulasi_kartu_SD"><span class="notranslate">Emulasi kartu SD</span></h2> + +<p><span class="notranslate">Dalam Simulator kartu SD perangkat dipetakan ke "fake-sdcard" direktori di profil Simulator ini, yang itu sendiri terletak di dalam "ekstensi" direktori di bawah profil Firefox yang Simulator diinstal.</span> <span class="notranslate"> Sebagai contoh:</span></p> + +<pre>/path/to/Firefox/Profiles/Firefox-profile-name/extensions/fxos_2_2_simulator@mozilla.org/profile/fake-sdcard</pre> + +<p><span class="notranslate">File membaca atau menulis menggunakan <code><a href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=id&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&tl=id&u=https://developer.mozilla.org/en-US/docs/Web/API/Navigator.getDeviceStorage&usg=ALkJrhgI8i4x7Pb6fpAI6dNl1Xnbktkcjw">getDeviceStorage</a></code> API akan muncul di sini.</span></p> + +<p><span class="notranslate">Sebelum versi 2.2 dari Simulator, Anda harus menciptakan "palsu-sdcard" direktori secara manual untuk bekerja.</span> <span class="notranslate"> Dari 2,2 dan seterusnya, "palsu-sdcard" direktori dibuat untuk Anda secara otomatis.</span></p> + +<p><span class="notranslate">Juga dari versi 2.2 dan seterusnya, jika Anda menjalankan Simulator dari baris perintah Anda dapat menentukan direktori yang berbeda dengan melewati <code>--storage-path</code> option.</span></p> + +<p>.</p> + +<div class="note"><span class="notranslate"><strong>Catatan:</strong> ini sebagian besar dimaksudkan untuk pengujian API.</span> <span class="notranslate"> Musik akan dibaca tidak dari "palsu-sdcard" direktori, tapi dari sistem anda <code>~/Music</code> gambar dari <code>~/Pictures</code> video dari <code>~/Videos</code></span> <span class="notranslate"> Download pergi ke <code>~/Downloads</code></span> <span class="notranslate"> user-dirs.dirs redefinitions didukung.</span></div> + +<h2 id="Keterbatasan_Simulator"><span class="notranslate">Keterbatasan Simulator</span></h2> + +<p><span class="notranslate">Perhatikan bahwa Firefox OS Simulator bukan simulasi sempurna.</span></p> + +<h3 id="Keterbatasan_hardware"><span class="notranslate">Keterbatasan hardware</span></h3> + +<p><span class="notranslate">Terlepas dari ukuran layar, Simulator tidak mensimulasikan keterbatasan perangkat keras dari perangkat Firefox OS seperti memori yang tersedia atau kecepatan CPU.</span></p> + +<h3 id="Codec_audio_video"><span class="notranslate">Codec audio / video</span></h3> + +<p><span class="notranslate">Codec berikut tergantung pada decoding hardware-accelerated dan karena itu belum didukung:</span></p> + +<ul> + <li><span class="notranslate">MP3</span></li> + <li><span class="notranslate">AAC</span></li> + <li><span class="notranslate">H.264 (MP4)</span></li> + <li><span class="notranslate">WebM</span></li> +</ul> + +<p><span class="notranslate">Ini berarti tidak mungkin untuk menggunakan Simulator untuk pemutaran video tes di aplikasi dan di website seperti Youtube yang mengandalkan codec ini.</span></p> + +<h3 id="API_yang_tidak_didukung"><span class="notranslate"><a name="Unsupported-APIs">API yang tidak didukung</a></span></h3> + +<p><span class="notranslate">API tertentu yang bekerja pada perangkat tidak akan bekerja pada Simulator, umumnya karena hardware pendukung tidak tersedia pada desktop.</span> <span class="notranslate"> Kami telah menerapkan simulasi untuk beberapa API seperti geolocation, dan berharap untuk menambahkan lebih banyak dalam rilis mendatang.</span> <span class="notranslate"> Namun, saat ini API tidak didukung.</span> <span class="notranslate"> Menggunakan mereka mungkin melemparkan kesalahan atau hanya mengembalikan hasil yang salah:</span></p> + +<ul> + <li><span class="notranslate"><a href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=id&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&tl=id&u=https://developer.mozilla.org/en-US/WebAPI/WebTelephony&usg=ALkJrhh_j20hjW62I2PCym0uEk6ZDkC5Xg" title="/ en-US / WebAPI / WebTelephony">Telephony</a></span></li> + <li><span class="notranslate"><a href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=id&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&tl=id&u=https://developer.mozilla.org/en-US/docs/WebAPI/WebSMS&usg=ALkJrhh0fNSSadvAgfRc9m70E6kKQZJGEw" title="/ en-US / docs / WebAPI / WebSMS">WebSMS</a></span></li> + <li><span class="notranslate"><a href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=id&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&tl=id&u=https://developer.mozilla.org/en-US/docs/WebAPI/WebBluetooth&usg=ALkJrhjXZD0gnn2DdWRATWs9oCF_kPonGA" title="/ en-US / docs / WebAPI / WebBluetooth">WebBluetooth</a></span></li> + <li><span class="notranslate"><a href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=id&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&tl=id&u=https://developer.mozilla.org/en-US/docs/WebAPI/Using_Light_Events&usg=ALkJrhjOPaB1T9SgcUHrHvlW1t4OQMDxNg" title="/ en-US / docs / WebAPI / Using_Light_Events">Ambient Light</a></span></li> + <li><span class="notranslate"><a href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=id&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&tl=id&u=https://developer.mozilla.org/en-US/docs/WebAPI/Proximity&usg=ALkJrhi2L5Fy4geflJxjlU_qpL01_j7Cnw" title="/ en-US / docs / WebAPI / Proximity">Kedekatan</a></span></li> + <li><span class="notranslate"><a href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=id&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&tl=id&u=https://developer.mozilla.org/en-US/docs/WebAPI/Network_Information&usg=ALkJrhhGKVIjQCodDQ084RRO-Ae72XkRqw" title="/ en-US / docs / WebAPI / Network_Information">Jaringan Informasi</a></span></li> + <li><span class="notranslate"><a href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=id&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&tl=id&u=https://developer.mozilla.org/en-US/docs/Online_and_offline_events&usg=ALkJrhjP-JiIr8ZtxgMe3IkezGhTVaZM-w" title="/ en-US / docs / Online_and_offline_events">navigator.onLine dan acara offline</a></span></li> + <li><span class="notranslate"><a href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=id&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&tl=id&u=https://developer.mozilla.org/en-US/docs/WebAPI/Vibration&usg=ALkJrhh_8iOJaMHxPBtgnmqCyAoSLAJfzg" title="/ en-US / docs / WebAPI / Getaran">Getaran</a></span></li> +</ul> + +<p> </p> + +<h2 id="Mendapatkan_bantuan"><span class="notranslate">Mendapatkan bantuan</span></h2> + +<p><span class="notranslate"><span style="line-height: 1.5;">Jika Anda memiliki pertanyaan, mencoba meminta kami pada</span> <a class="external external-icon" href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=id&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&tl=id&u=https://lists.mozilla.org/listinfo/dev-developer-tools&usg=ALkJrhhBFGFa27xpIxOaSVb4c839Bbe4gQ" style="line-height: 1.5;">daftar dev-pengembang-alat mailing</a> <span style="line-height: 1.5;">atau</span> <a href="irc://irc.mozilla.org/#devtools" style="line-height: 1.5;">#devtools pada <span style="line-height: 1.5;">irc.mozilla.org.</span></a></span></p> + +<h3 id="Cara_mengaktifkan_verbose_logging"><a name="Simulator-verbose-logging"></a> <span class="notranslate"> Cara mengaktifkan verbose logging</span></h3> + +<p><span class="notranslate">Anda dapat melihat pesan login dari aplikasi Anda di <a href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=id&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&tl=id&u=https://developer.mozilla.org/en-US/docs/Tools/Web_Console&usg=ALkJrhiZzzNSS8b4UW2tadz4NXa5XpKhBw">Web Console,</a> yang dapat Anda melampirkan ke aplikasi Anda menggunakan <a href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=id&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&tl=id&u=https://developer.mozilla.org/docs/Tools/WebIDE/Troubleshooting&usg=ALkJrhhlei8rYKFPh9dfWSZTe603GWFmKA">WebIDE.</a></span> <span class="notranslate"> Jika Anda ingin menangkap pesan awal terjadi selama startup aplikasi, sebelum konsol akan terhubung dan bekerja, Anda dapat mengaktifkan verbose logging di Simulator.</span></p> + +<p><span class="notranslate">Kunjungi about: config <strong>dan</strong> menciptakan preferensi baru.</span> <span class="notranslate"> Nama preferensi yang berbeda untuk setiap versi Simulator:</span></p> + +<ul> + <li>extensions.fxos_1_3_simulator@mozilla.org.sdk.console.logLevel untuk Firefox OS 1.3</li> + <li>extensions.fxos_1_2_simulator@mozilla.org.sdk.console.logLevel untuk Firefox OS 1.2</li> +</ul> + +<p><span class="notranslate">Set ke nilai string "semua", dan menonaktifkan, kemudian mengaktifkan kembali, add-on di Add-on manajer.</span> <span class="notranslate"> Sekarang pesan tambahan tentang operasi Simulator akan muncul di <a href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=id&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&tl=id&u=https://developer.mozilla.org/en-US/docs/Tools/Browser_Console&usg=ALkJrhi-YOakQ7mjFwTBMJ03WnwFGnM_TQ">Browser Console.</a></span></p> + +<h2 id="Membangun_Simulator"><span class="notranslate">Membangun Simulator</span></h2> + +<p><span class="notranslate">Jika Anda ingin menguji patch ke Gecko atau Gaia kode yang Simulator mengandung, Anda mungkin tertarik dalam <a href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=id&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&tl=id&u=https://developer.mozilla.org/en-US/Firefox_OS/Running_custom_builds_in_the_App_Manager&usg=ALkJrhjAsJ_jEMen5cjEL52j67pWM6pJ9A">memodifikasi simulator</a> untuk menggunakan kustom Gecko membangun atau profil Gaia.</span> <span class="notranslate"> Atau, Anda dapat <a href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=id&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&tl=id&u=https://developer.mozilla.org/en-US/Firefox_OS/Building_the_Firefox_OS_simulator&usg=ALkJrhgT9AvDL9qx7tKDFir9gbYZUI1kOA">membangun Simulator baru</a> dari checkout Gecko Anda.</span></p> + +<h2 id="Alternatif"><span class="notranslate">Alternatif</span></h2> + +<p><span class="notranslate"><a href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=id&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&tl=id&u=https://developer.mozilla.org/en-US/Firefox_OS/Developing_Gaia/Different_ways_to_run_Gaia&usg=ALkJrhgLVoOC-gJPhHeon-XAPX5KUhI3zg">Berbagai cara untuk menjalankan Gaia</a> - termasuk daftar <em>mereka</em> dalam rangka kemudahan untuk menjalankan <em>dan</em> ketertiban kedekatan <em>membalikkan</em> untuk produk dikirim (sesuai dengan itu, Firefox OS Simulator paling mudah tapi terjauh.</span></p> diff --git a/files/id/archive/b2g_os/using_the_app_manager/index.html b/files/id/archive/b2g_os/using_the_app_manager/index.html new file mode 100644 index 0000000000..39a43a9762 --- /dev/null +++ b/files/id/archive/b2g_os/using_the_app_manager/index.html @@ -0,0 +1,233 @@ +--- +title: Using the App Manager +slug: Archive/B2G_OS/Using_the_App_Manager +translation_of: Archive/B2G_OS/Using_the_App_Manager +--- +<div class="summary"> +<p>The App Manager is a new tool available in Firefox for Desktop, which provides a number of useful tools to help you test, deploy and debug HTML5 web apps on Firefox OS phones and the Firefox OS Simulator, directly from your browser.</p> +</div> + +<p>{{EmbedYouTube("z1Bxg1UJVf0")}}</p> + +<p>The App Manager is composed of:</p> + +<ul> + <li>An <a href="#Apps_panel"><em>Apps panel</em></a>, which manages local apps (app source code located on your computer) and apps hosted externally, allowing you to package and install them on your device or simulator, and debug them using Toolboxes</li> + <li>A <a href="#Device_panel"><em>Device panel</em></a>, which displays information about the connected device including Firefox OS version installed, permissions required for using device APIs on the device, and apps installed</li> + <li><a href="/en-US/docs/Tools_Toolbox"><em>Toolboxes</em></a>, which are are sets of developer tools (web console, inspector, debugger, etc.) that can be connected to a running app via the Apps panel to perform debugging operations</li> +</ul> + +<h2 id="Quick_setup"><a name="Configuring_device">Quick setup:</a></h2> + +<p>This section is designed to get you up and running as soon as possible; if you need some more detail please skip forward to the {{ anch("Device and system configuration") }} section and start reading from there. Also see the {{ anch("Troubleshooting") }} section for help if you are having trouble.</p> + +<ol> + <li>Make sure you have Firefox Desktop 26+ installed</li> + <li>Open the App Manager (in the URL bar, type <code>about:app-manager</code>)</li> + <li>If you don't have a real device: + <ol> + <li><a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/">Install the Firefox OS Simulator</a></li> + <li>In App Manager's bottom toolbar, click on <em>Start Simulator</em>, then click on the name of the installed simulator, which should appear there.</li> + </ol> + </li> + <li>If you have a real device: + <ol> + <li>Make sure your device is running Firefox OS 1.2+</li> + <li>In the Settings of your device, disable Screen Lock (<code>Settings > <code>Screen Lock</code></code>) and enable Remote Debugging (<code>Settings > Device information > More information > Developer</code>)</li> + <li><a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/">Install the ADB Helper</a> add-on in Firefox Desktop</li> + <li>Connect your device to your machine via a USB cable</li> + <li>You should see the name of your device in the App Manager's bottom bar. Click on it.</li> + </ol> + </li> + <li>The bottom bar should show "Connected to: xxx"</li> + <li>Click on the <em>Apps</em> panel and add an app (packaged or hosted)</li> + <li>The <em>Refresh</em> button validates your app and installs it on the Simulator/Device</li> + <li>The <em>Debug</em> button connects the developer tools to the running app</li> +</ol> + +<h2 id="Device_and_system_configuration">Device and system configuration</h2> + +<p>The first thing you'll need to do when using the App Manager is make sure your system and phone are set up correctly. This section will run thrugh all the steps required.</p> + +<h3 id="Firefox_1.2_required">Firefox 1.2+ required</h3> + +<p>Make sure your device is running Firefox OS 1.2/Boot2Gecko 1.2 or higher. To check which version of Firefox OS the device is runing, go to <code>Settings > Device Information > Software</code>.</p> + +<p>If you don't have a high enough version installed, depending on what phone you have you will need to either install an available nightly build of Firefox 1.2+, or configure and build it yourself from source.</p> + +<p>Builds available:</p> + +<ul> + <li><a href="http://downloads.geeksphone.com/">Geeksphone Keon/Peak builds</a> (to find out more about using these, read <a href="/en-US/docs/Mozilla/Firefox_OS/Developer_phone_guide/Updating_and_Tweaking_Geeksphone">Updating and Tweaking your Firefox OS Developer Preview phone/Geeksphone</a>)</li> + <li>More to follow</li> +</ul> + +<p>To build your own Firefox OS 1.2+ distribution, follow the instructions located at <a href="/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS">Building and installing Firefox OS</a>, starting with <a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites">Firefox OS build prerequisites</a>.</p> + +<h3 id="Remote_debugging">Remote debugging</h3> + +<p>Next, you need to enable remote debugging in Firefox OS. To do so, go to <code>Settings > Device information > More information > Developer</code> and check the Remote Debugging checkbox.</p> + +<h3 id="Adb_Helper_Add-on" name="Adb_Helper_Add-on">ADB or ADB helper</h3> + +<p>The process uses the Android Debug Bridge (ADB) to handle the device-computer connection and communication. There are two options for running ADB:</p> + +<ul> + <li> + <p>Let Firefox handle ADB (recommended). <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/">Install the ADB Helper add-on</a>, which makes the process easier. With this installed, there's no need to install the ADB, and no need to type the <code>adb forward</code> command: everything is handled by the add-on.</p> + <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/" style="margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;" title="https://addons.mozilla.org">Download ADB Helper Add-on</a></li> + <li>Use ADB manually. You need to have it installed on your computer - download and install <code>adb</code> (see the <a href="http://developer.android.com/sdk/index.html">Get the Android SDK</a>) as part of the Android SDK package. You'll need to enable port forwarding by entering the following command into your terminal: + <pre>adb forward tcp:6000 localfilesystem:/data/local/debugger-socket</pre> + Note that you'll need to do this every time the phone is restarted or unplugged then re-plugged.</li> +</ul> + +<div class="note"> +<p>Note: There's no need to run this command if you installed the ADB Helper Add-on.</p> +</div> + +<h2 id="Connecting_your_device_to_the_App_Manager">Connecting your device to the App Manager</h2> + +<p>With all your configuration done, it's now time to plug your device into your computer and start the App Manager:</p> + +<ol> + <li>Plug the device into your computer via USB.</li> + <li>Disable Screen lock on your device by going to <code>Settings > Screen Lock</code> and unchecking the <code>Lock Screen</code> checkbox. This is a good idea because when the screen gets locked, the phone connection gets lost, meaning it is no longer available for debugging.</li> + <li>Start the App Manager — In Firefox Desktop select the <code>Tools > Web Developer > App Manager</code> menu option, or type <code>about:app-manager</code> in the URL bar.</li> + <li>At the bottom of the App Manager tab, you will see a connection status bar (see screenshot below). You should be able to connect your device by clicking the "Connect to localhost:6000" button.</li> + <li>If this works successfully, a prompt should appear on your device: "An incoming request to permit remote debugging connection was detected. Allow connection?". Tap the OK button (You may also have to press the power button on the phone so you can see the prompt.) The connection status bar should update to say "Connected to B2G", with a Disconnect button available to press if you want to cancel the connection.</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6263/connection-status.png" style="width: 600px; height: 30px; display: block; margin: 0px auto;"></p> + +<div class="note"> +<p>Note that the other controls in the connection status bar allow you to connect a simulator to the App Manager, which we cover in the next section, below, and change the port that the connection happens on. If you change the port, you'll also need to enable port forwarding for this port as well, as instructed in the {{anch("Enable port forwarding")}} section, above.</p> +</div> + +<h2 id="Using_a_Firefox_OS_Simulator_Add-on"><a name="Simulator">Using a Firefox OS Simulator Add-on</a></h2> + +<p>If you haven't got a real device available to use with App Manager, you can still try it out using a <a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> Add-on. To start off, install the appropriate simulator for your operating system:</p> + +<p><a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/" style="margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Install Simulator</a></p> + +<div class="note"> +<p>Note that currently there is only a Firefox OS 1.2 simulator available, although more may appear in the future.</p> +</div> + +<p>Once you've installed the simulator, you need to go to the connection status bar at the bottom of the App Manager tab, and click the "Start simulator" button. Three buttons will appear:</p> + +<ul> + <li>"Firefox OS 1.2" ... etc (or something similar): the leftmost button contains the name of the simulator version you have installed. Click it to start the connection to the simulator.</li> + <li>"Add": the middle button navigates to the simulator install links in this article, so you can add more Simulators (Firefox OS 1.2, Firefox OS 1.3, ...).</li> + <li>"Cancel": the right hand button cancels the connection.</li> +</ul> + +<h2 id="Apps_panel_2"><a name="Apps_panel">Apps panel</a></h2> + +<p>Now everything is working, let's review the functionality available inside the App Manager, starting with the Apps Panel. From here, you can import an existing app to push onto your device and debug:</p> + +<ul> + <li>To install a local app, click on the plus next to the "Add Packaged App" label and use the resulting file chooser dialog to select the directory your app is contained inside.</li> + <li>To install an externally hosted app, enter the absolute URL of the app's manifest file into the text field inside the "Add Hosted App" box, then press the plus button.</li> +</ul> + +<p>Information about your app should appear on the right hand side of the window, as seen below:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6261/apps-panel.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p> + +<p>Clicking on <em>"Update"</em> will update (install) the app on the device. Clicking on <em>"debug"</em> will connect a toolbox to the app, allowing you to debug its code directly:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6265/debug.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p> + +<div class="note"> +<p>Note: You'll enjoy playing around with the toolbox — try altering the DOM, CSS etc. and you'll see the updates reflected on the device in realtime. Such updates will be saved on the installed app code; you'll see them next time you open the app on the device.</p> +</div> + +<p>If an app was not added successfully — for example if the URL was incorrect, or you selected a packaged app folder — an entry will be added to the page for this app, but this will include error information.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6259/apps-error.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p> + +<p>You can also delete an app from this view, by hovering over the App name/description on the left of the window, and pressing the "X" button that appears in each case. This however doesn't remove the app from the device. To do that you need to manually remove the app using the device itself.</p> + +<h2 id="Device_panel_2"><a name="Device_panel">Device panel</a></h2> + +<p>The <em>Device</em> tab displays information about the connected device. From the <em>"</em>Installed Apps<em>"</em> window, apps on the device can be started and debugged.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6267/device-tab.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p> + +<div class="note"> +<p>Note: Certified Apps are not listed by default. <a href="#Debugging_Certified_Apps">See how to debug certified apps</a>.</p> +</div> + +<p>The "Permissions" window shows the required priviledges for different <a href="/en-US/docs/WebAPI">Web APIs</a> on the current device:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6269/permissions.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p> + +<p>Finally, you can take a screenshot of the current device display by clicking the "Screenshot" button. The screenshot appears in a new tab on Firefox, and from there you can save or discard it as you wish.</p> + +<h2 id="Debugging_Certified_Apps_2"><a name="Debugging_Certified_Apps">Debugging Certified Apps</a></h2> + +<p>Currently only devices running a development build of Firefox OS 1.2 are capable of debugging certified apps. If you have a development build, you can enable certified app debugging by changing the pref <code>devtools.debugger.forbid-certified-apps</code> to <code>false</code> in your profile. To do this, follow the steps below:</p> + +<ol> + <li> + <p>On your computer, enter the following command in Terminal/console to enter your device's filesystem via the shell:</p> + + <pre class="brush: bash">adb shell</pre> + + <p>Your prompt should change to <code>root@android</code>.</p> + </li> + <li> + <p>Next, stop B2G running using the following command:</p> + + <pre class="brush: bash">stop b2g</pre> + </li> + <li> + <p>Navigate to the following directory:</p> + + <pre>cd /data/b2g/mozilla/*.default/</pre> + </li> + <li> + <p>Here, update the prefs.js file with the following line:</p> + + <pre class="brush: js">echo 'user_pref("devtools.debugger.forbid-certified-apps", false);' >> prefs.js</pre> + </li> + <li> + <p>After you've finished editing and saving the file, start B2G again using the following command:</p> + + <pre class="brush: bash">start b2g</pre> + </li> + <li> + <p>Exit the android filesystem using the <code>exit</code> command; this will return you to your normal terminal prompt.</p> + </li> + <li> + <p>Next, reconnect to the App Manager and you should see certified apps appear for debugging.</p> + </li> +</ol> + +<div class="note"> +<p>Note: If you want to add this preference to your Gaia build you can run <code>make DEVICE_DEBUG=1 reset-gaia</code>.</p> +</div> + +<h2 id="Troubleshooting_2"><a name="Troubleshooting">Troubleshooting</a></h2> + +<p id="My_device_is_not_recognized">If the device is not recognized:</p> + +<ul> + <li>Read the <a href="#Configuring_device">Device and system configuration</a> section thoroughly, and make sure all the steps are followed:</li> + <li>Is your device running at least Firefox OS 1.2?</li> + <li>Did you enable "Remote Debugging" in the settings of your phone?</li> + <li>If you are not using the <a href="#Adb_Helper_Add-on">ADB Helper add-on</a>: + <ul> + <li>Did you successfully run the <code>adb forward</code> command?</li> + </ul> + </li> + <li>If you are using the <a href="#Adb_Helper_Add-on">ADB Helper add-on</a> and your device is not listed in the bottom toolbar: + <ul> + <li>If you use Linux, <a href="http://developer.android.com/tools/device.html#setting-up">make sure to setup udev correctly</a></li> + <li>If you use Windows, <a href="http://developer.android.com/tools/device.html#setting-up">make sure to install the appropriate drivers</a></li> + </ul> + </li> + <li>Is your phone screen unlocked?</li> +</ul> + +<p>Can't connect your device to the App Manager or start the simulator? <a href="https://wiki.mozilla.org/DevTools/GetInvolved#Communication">Let us know</a> or <a href="https://bugzilla.mozilla.org/enter_bug.cgi?alias=&assigned_to=nobody%40mozilla.org&attach_text=&blocked=&bug_file_loc=http%3A%2F%2F&bug_ignored=0&bug_severity=normal&bug_status=NEW&cf_blocking_b2g=---&cf_crash_signature=&cf_status_b2g18=---&cf_status_b2g_1_1_hd=---&cf_status_b2g_1_2=---&cf_status_firefox24=---&cf_status_firefox25=---&cf_status_firefox26=---&cf_status_firefox27=---&cf_status_firefox_esr17=---&cf_status_firefox_esr24=---&cf_tracking_b2g18=---&cf_tracking_firefox24=---&cf_tracking_firefox25=---&cf_tracking_firefox26=---&cf_tracking_firefox27=---&cf_tracking_firefox_esr17=---&cf_tracking_firefox_esr24=---&cf_tracking_firefox_relnote=---&cf_tracking_relnote_b2g=---&comment=&component=Developer%20Tools%3A%20App%20Manager&contenttypeentry=&contenttypemethod=autodetect&contenttypeselection=text%2Fplain&data=&defined_groups=1&dependson=&description=&flag_type-203=X&flag_type-37=X&flag_type-41=X&flag_type-5=X&flag_type-607=X&flag_type-720=X&flag_type-721=X&flag_type-737=X&flag_type-748=X&flag_type-781=X&flag_type-787=X&flag_type-791=X&flag_type-799=X&flag_type-800=X&flag_type-802=X&flag_type-803=X&flag_type-809=X&flag_type-825=X&form_name=enter_bug&keywords=&maketemplate=Remember%20values%20as%20bookmarkable%20template&op_sys=All&priority=--&product=Firefox&qa_contact=developer.tools%40firefox.bugs&rep_platform=x86&requestee_type-203=&requestee_type-41=&requestee_type-5=&requestee_type-607=&requestee_type-748=&requestee_type-781=&requestee_type-787=&requestee_type-791=&requestee_type-800=&short_desc=&status_whiteboard=&target_milestone=---&version=Trunk">file a bug</a>.</p> diff --git a/files/id/archive/css3/index.html b/files/id/archive/css3/index.html new file mode 100644 index 0000000000..0c5eae08d5 --- /dev/null +++ b/files/id/archive/css3/index.html @@ -0,0 +1,972 @@ +--- +title: CSS3 +slug: Archive/CSS3 +translation_of: Archive/CSS3 +--- +<p><span class="seoSummary"><strong>CSS3 merupakan perubahan terakhir</strong> dari bahasa <em>Cascading Style Sheets </em>dan bertujuan untuk perpanjangan dari CSS2.1. Menghadirkan banyak catatan yang lama dinantikan, seperti di seputar lingkaran sudut, bayangan, <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_gradients" title="Using CSS gradients">gradients</a>, <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions" title="CSS transitions">transitions</a> or <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations" title="CSS animations">animations</a>, sama halnya pada layout baru <a href="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts" title="Using CSS multi-column layouts">multi-columns</a> (beberapa kolom), <a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes">flexible box</a> (kemudahan tampilan) atau grid layouts.</span> Bagian bagian pengalaman vendor-prefixed (penyedia-memperbaharui) dan kemungkinan yang lainnya dihilangkan dalam lingkungan pembuatan, atau digunakan dengan berlebihan menyebabkan keduanya syntax (penulisan) and semantics (bentuk penulisan) dapat berubah kemudian.</p> + +<h2 id="Modul_and_Proses_Standarisasi">Modul and Proses Standarisasi</h2> + +<p>CSS Tingkat 2 diperlukan 9 tahun, dari Agustus 2002 sampai Juni 2011 yang kaya status rekomendasi. Ini merupakan tindakan nyata bahwa featur bagian kedua kembali didasarkan pada spesifikasi yang menyeluruh. Dalam melengkapi percepatan featur standarisasi tanpa gangguan, the <a class="external" href="http://www.w3.org/blog/CSS/" title="http://www.w3.org/blog/CSS/">CSS Working Group</a> of the W3C (Pekerjaan Group CSS W3C), dalam sebuah bagian mereferensi pada <a class="external" href="http://fantasai.inkedblade.net/weblog/2011/inside-csswg/modules" title="http://fantasai.inkedblade.net/weblog/2011/inside-csswg/modules">Beijing doctrine</a>, CSS dibagi dalam komponen komponen lebih kecil disebut <em>modules</em> . Masing masing modul sekarang ini merupakan sebuah bagian yang berdiri sendiri dari bahasa dan bergerak pada standarisasi percepatannya sendiri. Selagi beberapa modul telah menjadi rekomendasi W3C, yang lainnya masih merupakan bagian yang baru dalam rancangan atau draft pekerjaan. Modul modul baru juga ditambahkan ketika dibutuhkan pengidentifikasin baru.</p> + +<p><a href="/@api/deki/files/6120/=CSS_Modules_and_Snapshots.png" title="CSS_Modules_and_Snapshots.png"><img alt="CSS Modules and Snapshots as defined since CSS3" class="internal lwrap" src="/files/3623/CSS_Modules_and_Snapshots.png" style="float: left; width: 550px;"> </a> Secara bentukan, tidak ada uraian standar CSS. Masing masing modul dijadikan standar secara independen. Standar CSS terdiri dari CSS2.1 perubahan and diperpanjang dengan modul yang lengkap. Seluruhnya tidak diperlukan pada angka yang sama. Di tiap tiap titik waktu, sebuah snapshot (tampilan) dari standar CSS dapat digambarkan, daftar CSS2.1 dan modul saat ini.</p> + +<p>Konsorsium W3C secara priode dipublikasikan yang menampilkan, seperti dalam tahun <a class="external" href="http://www.w3.org/TR/css-beijing/" title="http://www.w3.org/TR/css-beijing/">2007</a> atau <a class="external" href="http://www.w3.org/TR/css-2010/" title="http://www.w3.org/TR/css-2010/">2010.</a></p> + +<p>Meski hari ini tanpa modul dengan tingkat yang lebih tinggi dari standarisasi CSS3, ini dapat berubah ke depannya. Beberapa modul, seperti Selectors 4 or CSS Borders and Backgrounds Level 4 telah mempunyai sebuah rancangan atau draft editor, meski mereka belum diperkaya dengan publikasi awal status Draft atau Rancangan Pekerjaan.</p> + +<h2 id="Status_Modul_CSS" style="">Status Modul CSS</h2> + +<h3 id="Stabilitas_Modul">Stabilitas Modul</h3> + +<p>Sedikitnya modul CSS telah stabil secara bersamaan dan telah kaya dari satu atau tiga tingkatan rekomensasi dari CSSWG: Rekomendasi Kandidat, Proposal Rekomendasi atau Rekomendasi. Ini dapat digunakan tanpa sebelum perbaikan dan merupakan kestabilan yang baik, meski sedikitnya featur dapat dihilangkan pada Tingkat Kandidat Rekomendasi.</p> + +<p>Perpanjangan modul modul ini dan perubahan CSS2.1 spesifikasi yang mana membangun inti dari spesifikasi. Bersamaan dengan itu, mereka adalah tampilan sekarang dari spesifikasi CSS.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td class="thirdColumn greenBg"><strong>{{ SpecName("CSS3 Colors", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Colors") }} since June 7th, 2011</td> + </tr> + <tr> + <td colspan="2"> + <p>Adds the {{ cssxref("opacity") }} property, and the <code>hsl</code><code>()</code>, <code>hsla()</code>, <code>rgba()</code> and <code>rgb()</code> functions to create {{cssxref("<color>")}} values. It also defines the <code>currentColor</code> keyword as a valid color.</p> + + <p>The <code>transparent</code> color is now a real color (thanks to the support for the alpha channel) and is a now an alias for <code>rgba(0,0,0,0.0)</code> .</p> + + <p>It deprecates the <a href="http://www.w3.org/TR/CSS2/ui.html#system-colors">system-color keywords that shouldn't be used in a production environment anymore</a>.</p> + </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(128,255,128);"><strong>{{ SpecName("CSS3 Selectors", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Selectors") }} since September 29th, 2011</td> + </tr> + <tr> + <td colspan="2"> + <p>Adds:</p> + + <ul> + <li>Substring matching attribute selectors, <code>E[attribute^="value"]</code>, <code>E[attribute$="value"]</code>, <code>E[attribute*="value"]</code> .</li> + <li>New pseudo-classes: {{ cssxref(":target") }}, {{ cssxref(":enabled") }} and {{ cssxref(":disabled") }}, {{ cssxref(":checked") }}, {{ cssxref(":indeterminate") }}, {{ cssxref(":root") }}, {{ cssxref(":nth-child") }} and {{ cssxref(":nth-last-child") }}, {{ cssxref(":nth-of-type") }} and {{ cssxref(":nth-last-of-type") }}, {{ cssxref(":last-child") }}, {{ cssxref(":first-of-type") }} and {{ cssxref(":last-of-type") }}, {{ cssxref(":only-child") }} and {{ cssxref(":only-of-type") }},{{ cssxref(":empty") }}, and {{ cssxref(":not") }}.</li> + <li>Pseudo-elements are now characterized by two colons rather than one: <code>:after</code> becomes {{ cssxref("::after") }}, <code>:before</code> becomes {{ cssxref("::before") }}, <code>:first-letter</code> becomes {{ cssxref("::first-letter") }}, and <code>:first-line</code> becomes {{ cssxref("::first-line") }}.</li> + <li>The new <em>general sibling combinator</em> ( <code>h1~pre</code> ).</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p>The <a class="external" href="http://dev.w3.org/csswg/selectors4/" title="http://dev.w3.org/csswg/selectors4/">next iteration of the Selectors specification</a> is already in progress, though it still hasn't reached the First Public Working Draft stage.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(128,255,128);"><strong>{{ SpecName("CSS3 Namespaces", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Namespaces") }} since September 29th, 2011</td> + </tr> + <tr> + <td colspan="2"> + <p>Adds the support for the XML Namespaces by defining the notion of <em>CSS qualified name</em>, using the ' <code>|</code> ' syntax and adding the {{ cssxref("@namespace") }} CSS at-rule.</p> + </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(128,255,128);"><strong>{{ SpecName("CSS3 Media Queries", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Media Queries") }} since June 19th, 2012</td> + </tr> + <tr> + <td colspan="2"> + <p>Extends the former media type ( <code>print</code>, <code>screen</code>, <code>…</code> ) to a full language allowing <a href="/en/CSS/Media_queries" title="en/CSS/Media_queries">queries on the device media capabilities</a> like <code>only screen and (color)</code> .</p> + + <p>Media queries are not only used in CSS document but also in some attributes of HTML Elements, like the {{ htmlattrxref("media","link") }} attribute of the {{ HTMLElement("link") }} element.</p> + </td> + </tr> + </tbody> +</table> + +<p>The <a href="http://dev.w3.org/csswg/mediaqueries4" title="http://dev.w3.org/csswg/mediaqueries4">next iteration of this specification</a> is in the work, allowing to tailor a Web site regarding the input methods available on the user agent, with new media features like <code>hover</code> or <code>pointer</code>. Detection of EcmaScript support, using the <code>script</code> media features is also proposed.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(128,255,128);"><strong>{{ SpecName("CSS3 Style", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Style") }} since November 7th, 2013</td> + </tr> + <tr> + <td colspan="2">Formally defines the syntax of the content of the HTML <a href="/en/HTML/Global_attributes#attr-style" title="en/HTML/Global_attributes#attr-style"> <code>style</code> </a> global attribute.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Backgrounds", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Backgrounds") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>Adds:</p> + + <ul> + <li>Support, on backgrounds, for any type of {{cssxref("<image>")}}, and not only for <code>uri()</code> defined ones.</li> + <li>Support for multiple background images.</li> + <li>The {{ cssxref("background-repeat") }} <code>space</code> and <code>round</code> values, and for the 2-value syntax of this CSS property.</li> + <li>The {{ cssxref("background-attachment") }} <code>local</code> value.</li> + <li>The CSS {{ cssxref("background-origin") }}, {{ cssxref("background-size") }}, and {{ cssxref("background-clip") }} properties.</li> + <li>Support for curved border corners, with the CSS {{ cssxref("border-radius") }}, {{ cssxref("border-top-left-radius") }}, {{ cssxref("border-top-right-radius") }}, {{ cssxref("border-bottom-left-radius") }}, and {{ cssxref("border-bottom-right-radius") }} properties.</li> + <li>Support for the use of an {{cssxref("<image>")}} as the border with the CSS {{ cssxref("border-image") }}, {{ cssxref("border-image-source") }}, {{ cssxref("border-image-slice") }}, {{ cssxref("border-image-width") }}, {{ cssxref("border-image-outset") }}, and {{ cssxref("border-image-repeat") }} properties.</li> + <li>Support for shadows of the element with the CSS {{ cssxref("box-shadow") }} property.</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p>The <a class="external" href="http://dev.w3.org/csswg/css4-background/" title="http://dev.w3.org/csswg/css4-background/">CSS4 iteration of the Backgrounds and Borders specification</a> is already in progress, though it still hasn't reached the First Public Working Draft stage, it plans to add the ability to clip a border (with the CSS {{ cssxref("border-clip") }}, {{ cssxref("border-clip-top") }}, {{ cssxref("border-clip-right") }}, {{ cssxref("border-clip-bottom") }}, and {{ cssxref("border-clip-left") }} properties) or to control the shape of the border in a corner (using the CSS {{ cssxref("border-corner-shape") }} property).</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Multicol", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Multicol") }}</td> + </tr> + <tr> + <td colspan="2">Adds support for easy multi-column layouts using the CSS {{ cssxref("columns") }}, {{ cssxref("column-count") }}, {{ cssxref("column-fill") }}, {{ cssxref("column-gap") }}, {{ cssxref("column-rule") }}, {{ cssxref("column-rule-color") }}, {{ cssxref("column-rule-style") }}, {{ cssxref("column-rule-width") }}, {{ cssxref("column-span") }}, {{ cssxref("column-width") }}, {{ cssxref("break-after") }}, {{ cssxref("break-before") }}, and {{ cssxref("break-inside") }}.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Speech", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Speech") }}</td> + </tr> + <tr> + <td colspan="2">Defines the <code>speech</code> media type, an aural formatting model and numerous properties specific for speech-rendering user agents.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Images", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Images") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>Defines the {{cssxref("<image>")}} data type.</p> + + <p>Extends the <code>url()</code> syntax to support image slices using media fragments.</p> + + <p>Adds:</p> + + <ul> + <li>The <code>dppx</code> unit to the {{cssxref("<resolution>")}} data type.</li> + <li>The <code>image()</code> function as a more flexible alternative to <code>url()</code> to define an image from an url.<br> + <em><strong>At risk</strong> </em> <strong> <em>:</em> </strong> <em> due to insufficient browser support, standardization of the <code>image()</code> function may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li> + <li>Support for <code>linear-gradient()</code>, <code>repeating-linear-gradient()</code>, <code>radial-gradient()</code> and <code>repeating-radial-gradient()</code>.</li> + <li>The ability to define how a replaced element should fit in its element, using the CSS {{ cssxref("object-fit") }} property.<br> + <em><strong>At risk</strong> </em> <strong> <em>:</em> </strong> <em> due to insufficient browser support, standardization of the {{ cssxref("object-fit") }} and property may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li> + <li>The ability to override the resolution and orientation of an external image using the CSS {{ cssxref("image-resolution") }} and {{ cssxref("image-orientation") }} properties.<br> + <em><strong>At risk</strong> </em> <strong> <em>:</em> </strong> <em> due to insufficient browser support, standardization of the {{ cssxref("image-resolution") }} and {{ cssxref("image-orientation") }} properties may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p>The <a href="#Images_(Level_4)">CSS Image Values and Replaced Content Level 4</a> which will supersede CSS Image Level 3 is in development and is a {{Spec2("CSS4 Images")}}.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220, 255, 220);"><strong>{{ SpecName("CSS3 Values", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Values") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>Makes <code>initial</code> and <code>inherit</code> keywords usable on any CSS property.</p> + + <p>Formally defines the CSS data types of CSS 2.1, that were implicitely defined by their grammar token and some textual precisions.</p> + + <p>Adds:</p> + + <ul> + <li>Definition for new font-relative length units: <code>rem</code> and <code>ch</code> .</li> + <li>Definition for viewport-relative length units: <code>vw</code>, <code>vh</code>, <code>vmax</code>, and <code>vmin</code> .</li> + <li>Precision about the real size of the absolute length units, which are not really absolute, but defined in relation with the <em>reference pixel</em> .</li> + <li>Definition for {{ cssxref("<angle>") }}, {{cssxref("<time>")}}, {{cssxref("<frequency>")}}, {{cssxref("<resolution>")}}.</li> + <li>Normative value to the definition of {{cssxref("<color>")}}, {{cssxref("<image>")}}, and {{ cssxref("<position>") }}.</li> + <li>Definition for the {{ cssxref("calc", "calc()") }}, {{ cssxref("attr", "attr()")}}, and <code>toggle()</code> functional notations.<br> + <em><strong>At risk:</strong> due to insufficient browser support, standardization of the <code>calc()</code>, <code>attr()</code>, and <code>toggle()</code> functional notations may be postponed to </em> <em>the next iteration of this module</em><em>.</em></li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p>Several types definition, like <code><ident></code> and <code><custom-ident></code>, have been deferred to CSS Values and Units Module Level 4.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Flexbox", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Flexbox") }}</td> + </tr> + <tr> + <td colspan="2">Add a flexbox layout to the CSS {{ cssxref("display") }} property and several new CSS properties to control it: {{ cssxref("flex") }}, {{ cssxref("flex-align") }}, {{ cssxref("flex-direction") }}, {{ cssxref("flex-flow") }}, {{ cssxref("flex-item-align") }}, {{ cssxref("flex-line-pack") }}, {{ cssxref("flex-order") }}, {{ cssxref("flex-pack") }}, and {{ cssxref("flex-wrap") }}.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220, 255, 220);"><strong>{{ SpecName("CSS3 Conditional", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Conditional") }}</td> + </tr> + <tr> + <td colspan="2">Adds features for conditional processing of parts of style sheets, conditioned on capabilities of the browser or the document the style sheet is being applied to. It consists mainly in allowing nested at-rules inside {{ cssxref("@media") }} and the adding of a new CSS at-rule, {{ cssxref("@supports") }}, and a new DOM method {{domxref("CSS.supports()")}}.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220, 255, 220);"><strong>{{ SpecName("CSS3 Text Decoration", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Text Decoration") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>Extends:</p> + + <ul> + <li>the CSS {{ cssxref("text-decoration") }} property by making it a shorthand for the CSS {{ cssxref("text-decoration-line") }}, {{ cssxref("text-decoration-color") }}, and {{ cssxref("text-decoration-style") }} properties. And adds the {{ cssxref("text-decoration-skip") }}, and {{ cssxref("text-underline-position") }} properties.</li> + </ul> + + <p>Adds:</p> + + <ul> + <li>Support for East-Asian-script emphasis marks with the CSS {{ cssxref("text-emphasis") }}, {{ cssxref("text-emphasis-style") }}, {{ cssxref("text-emphasis-color") }}, and {{ cssxref("text-emphasis-position") }} properties.</li> + <li>Support for script shadows with the CSS {{ cssxref("text-shadow") }} property.</li> + </ul> + + <p>Clarifies:</p> + + <ul> + <li>The paint order of the decorations.</li> + </ul> + + <p><em><strong>At risk:</strong> due to insufficient browser support, standardization of the <code>text-decoration-skip</code>, line positioning rules and the ability to place both emphasis marks and ruby above the same base text may be postponed to </em> <em>the next iteration of this module</em><em>.</em></p> + </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Fonts", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Fonts") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>Amends the CSS2.1 Font matching algorithm to be closer to what is really implemented.</p> + + <p>Adds:</p> + + <ul> + <li>Support for downloadable fonts via the CSS {{ cssxref("@font-face") }} at-rule.</li> + <li>The control of the contextual inter-glyph spacing via the CSS {{ cssxref("font-kerning") }} property.</li> + <li>The choice of language-specific glyphs via the CSS {{ cssxref("font-language-override") }} property.</li> + <li>The choice of glyphs with specific OpenType features via the CSS {{ cssxref("font-feature-settings") }} property.</li> + <li>The control of the aspect ratio to use when fallback fonts are selected via the CSS {{ cssxref("font-size-adjust") }} property.</li> + <li>The choice of alternative font faces using the CSS {{ cssxref("font-stretch") }}, {{ cssxref("font-variant-alternates") }}, {{ cssxref("font-variant-caps") }}, {{ cssxref("font-variant-east-asian") }}, {{ cssxref("font-variant-ligatures") }}, {{ cssxref("font-variant-numeric") }}, and {{ cssxref("font-variant-position") }} properties. It also extends the related CSS {{ cssxref("font-variant") }} shorthand property and introduces the {{ cssxref("@font-feature-values") }} at-rule.</li> + <li>The control of the automatic generation of an oblique or bold face when none are found via the CSS {{ cssxref("font-synthesis") }} property.</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Cascade", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Cascade") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>Adds:</p> + + <ul> + <li>The <code>initial</code>, <code>unset</code> values for properties.</li> + <li>The CSS {{ cssxref("all") }} property.</li> + <li>The scoping mechanism.</li> + </ul> + + <p>Clarifies:</p> + + <ul> + <li>Interaction of media-dependent @import statements and style sheet loading requirements.</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Writing Modes", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Writing Modes") }}</td> + </tr> + <tr> + <td colspan="2">Defines the writing modes of both horizontal and vertical scripts and clarifies how the CSS {{ cssxref("direction") }} and {{ cssxref("unicode-bidi") }} properties interact with the new CSS {{ cssxref("text-orientation") }} property, and extends them where needed.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS Shapes", "", "") }}</strong></td> + <td>{{ Spec2("CSS Shapes") }}</td> + </tr> + <tr> + <td colspan="2">Defines geometric shapes, which can be applied to floats. These shapes describe areas, around which inline content wraps instead of wrapping around the bounding box.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS Masks", "", "") }}</strong></td> + <td>{{ Spec2("CSS Masks") }}</td> + </tr> + <tr> + <td colspan="2">Defines a way for partially or fully hiding portions of visual elements. It describes how to use another graphical element or image as a luminance or alpha mask.</td> + </tr> + </tbody> +</table> + +<h3 id="Modules_in_the_refining_phase">Modules in the refining phase</h3> + +<p>Specifications that are deemed to be in the <em>refining phase</em> are already fairly stable. Though changes are still expected, they shouldn't create incompatibilities with current implementations; they should mainly define behavior in edge cases.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("Web Animations", "", "") }}</strong></td> + <td>{{ Spec2("Web Animations") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Counter Styles", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Counter Styles") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("Compositing", "", "") }}</strong></td> + <td>{{ Spec2("Compositing") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Syntax", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Syntax") }}</td> + </tr> + <tr> + <td colspan="2">Clarifies how charsets are determined; minor changes in parsing and tokenization algorithms.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS Will Change", "", "") }}</strong></td> + <td>{{ Spec2("CSS Will Change") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Transitions", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Transitions") }}</td> + </tr> + <tr> + <td colspan="2">Allows the definition of transitions effects between two properties values by adding the CSS {{ cssxref("transition") }}, {{ cssxref("transition-delay") }}, {{ cssxref("transition-duration") }}, {{ cssxref("transition-property") }}, and {{ cssxref("transition-timing-function") }} properties.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Animations", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Animations") }}</td> + </tr> + <tr> + <td colspan="2">Allows the definition of animations effects by adding the CSS {{ cssxref("animation") }}, {{ cssxref("animation-delay") }},{{ cssxref("animation-direction") }}, {{ cssxref("animation-duration") }}, {{ cssxref("animation-fill-mode") }}, {{ cssxref("animation-iteration-count") }}, {{ cssxref("animation-name") }}, {{ cssxref("animation-play-state") }}, and {{ cssxref("animation-timing-function") }} properties, as well as the {{ cssxref("@keyframes") }} at-rule.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Transforms", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Transforms") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>Adds:</p> + + <ul> + <li>the support of bi-dimensional transforms to be applied to any element using the CSS {{ cssxref("transform") }} and {{ cssxref("transform-origin") }} properties. The supported transforms are: <code>matrix</code><code>()</code>, <code>translate()</code>, <code>translateX()</code>, <code>translateY()</code>, <code>scale()</code>, <code>scaleX()</code>, <code>scaleY()</code>, <code>rotate()</code>, <code>skewX()</code>, and <code>skewY()</code>.</li> + <li>the support of tri-dimensional transforms to be applied to any element by adding the CSS {{ cssxref("transform-style") }}, {{ cssxref("perspective") }}, {{ cssxref("perspective-origin") }}, and {{ cssxref("backface-visibility") }} properties and extended the {{ cssxref("transform") }} property with the following transforms are: <code>matrix</code> <code>3d()</code>, <code>translate3d()</code>, <code>translateZ()</code>, <code>scale3d()</code>, <code>scaleZ()</code>, <code>rotate3d()</code>, <code>rotateX</code><code>()</code>, <code>rotateY</code><code>()</code>, <code>rotateZ()</code>, and <code>perspective()</code>.</li> + </ul> + + <p><em><strong>Note:</strong> this specification is a merge of CSS 2D-Transforms, CSS 3D-Transforms and SVG transforms. </em></p> + </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255, 255, 220);"><strong>{{ SpecName("CSS3 Fragmentation", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Fragmentation") }}</td> + </tr> + <tr> + <td colspan="2">Defines how partitions of a Web page should happen, that is page, column breaks, and widows and orphans handling. + <p>Adds:</p> + + <ul> + <li>Support for defining the behavior of decorations, that is borders and background colors or images, when a box is breaked (at a page, column or line-break) with the CSS {{ cssxref("box-decoration-break") }} property.</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Text", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Text") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>Extends:</p> + + <ul> + <li>the CSS {{ cssxref("text-transform") }} property with the value <code>full-width</code>.</li> + <li>the CSS {{ cssxref("text-align") }} property with the value <code>start</code>, <code>end</code>, <code>start end</code>, and <code>match-parent</code> for a better support of documents with multiple directionalities of text.</li> + <li>the CSS {{ cssxref("text-align") }} property with a {{cssxref("<string>")}} value to align on that character. This is useful to align number on the decimal point.</li> + <li>the CSS {{ cssxref("word-spacing") }} and {{ cssxref("letter-spacing") }} properties with range constraints to control flexibility in justification.</li> + </ul> + + <p>Adds:</p> + + <ul> + <li>Control on how whitespaces are displayed using the CSS {{ cssxref("text-space-collapse") }} and {{ cssxref("tab-size") }} properties.</li> + <li>Control on line breaks and word boundaries using the CSS {{ cssxref("line-break") }}, {{ cssxref("word-break") }}, {{ cssxref("hyphens") }}, {{ cssxref("text-wrap") }}, {{ cssxref("overflow-wrap") }}, and {{ cssxref("text-align-last") }} properties.</li> + <li>Control on how justification is happening, in order to support more type of scripts, using the CSS {{ cssxref("text-justify") }} property.</li> + <li>Control on edge effect using the CSS {{ cssxref("text-indent") }} and {{ cssxref("hanging-punctuation") }} properties.</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p>A few features present in early CSS Text Level 3 draft have being <a class="external" href="http://dev.w3.org/csswg/css3-text/#recent-changes" title="http://dev.w3.org/csswg/css3-text/#recent-changes">postponed to the next iteration of this module</a> .</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Variables", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Variables") }}</td> + </tr> + <tr> + <td colspan="2">Defines a mechanism allowing to define variables in CSS.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("Compositing", "", "") }}</strong></td> + <td>{{ Spec2("Compositing") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<h3 id="Modules_in_the_revising_phase">Modules in the revising phase</h3> + +<p>Modules that are in the revising phase are much less stable than those in the refining phase. Often the syntax is still under scrutiny and may evolve a lot, in a non-compatible way. Alternative syntaxes are tested and often implemented.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,160,100);"><strong>{{ SpecName("CSS3 Basic UI", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Basic UI") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>Adds:</p> + + <ul> + <li>The ability to tweak the box model using the CSS {{ cssxref("box-sizing") }} property.<br> + <strong><em>At risk:</em> </strong> <em> due to insufficient browser support, standardization of the <code>padding</code><code>-box</code> value may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li> + <li>Allow the styling of forms according their content using the CSS {{ cssxref(":indeterminate") }}, {{ cssxref(":default") }}, {{ cssxref(":valid") }}, {{ cssxref(":invalid") }}, {{ cssxref(":in-range") }}, {{ cssxref(":out-of-range") }}, {{ cssxref(":required") }}, {{ cssxref(":optional") }}, {{ cssxref(":read-only") }}, and {{ cssxref(":read-write") }} pseudo-classes and the {{ cssxref("::value") }}, {{ cssxref("::choices") }}, {{ cssxref("::repeat-item") }}, and {{ cssxref("::repeat-index") }} pseudo-elements.<br> + <em><strong>At risk:</strong> due to insufficient browser support, standardization of the pseudo-elements {{ cssxref("::value") }}, {{ cssxref("::choices") }}, {{ cssxref("::repeat-item") }}, and {{ cssxref("::repeat-index") }} may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li> + <li>Support for icons, defined by the CSS {{ cssxref("icon") }} property simultaneously with the new <code>icon</code> value of the CSS {{ cssxref("content") }} property.<br> + <em><strong>At risk:</strong> due to insufficient browser support, standardization of the {{ cssxref("icon") }} property and the <code>icon</code> value may be postponed to CSS4. </em></li> + <li>Support for the CSS {{ cssxref("outline-offset") }} property giving more control on the position of the outline.</li> + <li>Support for the CSS {{ cssxref("resize") }} property allowing Web authors to control if and how elements should be resized.</li> + <li>Support for the CSS {{ cssxref("text-overflow") }} property defining how text overflows, if needed.<br> + <em><strong>At risk:</strong> due to insufficient browser support, the 2-value syntax of this property as well as the support for {{cssxref("<string>")}} values may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li> + <li>The ability to define the hotspot of a cursor as well as the new <code>none</code>, <code>context-menu</code>, <code>cell</code>, <code>vertical-text</code>, <code>alias</code>, <code>copy</code>, <code>no-drop</code>, <code>not-allowed</code>, <code>nesw-</code><code>resize</code>, <code>nwse-</code><code>resize</code>, <code>col-resize</code>, <code>row-resize</code>, <code>all-scroll</code>, <code>zoom-in</code>, <code>zoom-out</code>, extending the {{ cssxref("cursor") }} property.</li> + <li>The ability to specify the sequential navigation order (that is the <em>tabbing order</em> ) using the CSS {{ cssxref("nav-index") }}, {{ cssxref("nav-up") }}, {{ cssxref("nav-right") }}, {{ cssxref("nav-left") }}, {{ cssxref("nav-down") }} properties.<br> + <em><strong>At risk:</strong> due to insufficient browser support, standardization of the navigation properties may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li> + <li>The ability to control the usage of an IME editor, using the CSS {{ cssxref("ime-mode") }} property.<br> + <em><strong>At risk:</strong> due to insufficient browser support, standardization of the {{ cssxref("ime-mode") }} property may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p>An early list of what could be in the next iteration of the CSS Basic User Interface Module is <a class="external" href="http://wiki.csswg.org/spec/css4-ui" title="http://wiki.csswg.org/spec/css4-ui">available</a>.</p> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,160,100);"><strong>{{ SpecName("CSS3 Grid", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Grid") }}</td> + </tr> + <tr> + <td colspan="2">Add a grid layout to the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display" title=""><code>display</code></a> property and several new CSS properties to control it: {{cssxref("grid")}}, {{cssxref("grid-area")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-flow")}}, {{cssxref("grid-auto-position")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-column")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row")}}, {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-template")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-template-rows")}}, and {{cssxref("grid-template-columns")}}.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,160,100);"><strong>{{ SpecName("CSS3 Box Alignment", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Box Alignment") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,160,100);"><strong>{{ SpecName("CSS3 Paged Media", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Paged Media") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,160,100);"><strong>{{ SpecName("CSSOM View", "", "") }}</strong></td> + <td>{{ Spec2("CSSOM View") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,160,100);"><strong>{{ SpecName("CSS4 Selectors", "", "") }}</strong></td> + <td>{{ Spec2("CSS4 Selectors") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<h3 id="Modules_in_the_exploring_phase">Modules in the exploring phase</h3> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS4 Images", "", "") }}</strong></td> + <td>{{ Spec2("CSS4 Images") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>Extends:</p> + + <ul> + <li>the <code>image()</code> functional notation to describe the directionality of the image (<code>rtl</code> or <code>ltr</code>), allowing for bidi-sensitive images.</li> + <li>the {{ cssxref("image-orientation") }} property by adding the keyword <code>from-image</code>, allowing to follow EXIF data stored into images to be considered.</li> + </ul> + + <p>Adds:</p> + + <ul> + <li>the <code>image-set()</code> functional notation to allow the definition to equivalent images at different resolution allowing for resolution-negotiated selection of images.</li> + <li>the <code>element()</code> functional notation allowing the use of part of the page as image.</li> + <li>the <code>cross-fade()</code> functional notation allowing to refer to intermediate images when transitioning between two images and defines the interpolation between two images.</li> + <li>the <code>conic-gradient()</code> and <code>repeating-conic-gradient()</code> functional notation describing a new type of gradient.</li> + <li>the {{cssxref("image-rendering")}} property that allow to define how resize of the object should be handled.</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Device", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Device") }}</td> + </tr> + <tr> + <td colspan="2">Adds a new at-rule, {{ cssxref("@viewport") }}, allowing to specify the size, zoom factor, and orientation of the viewport that is used as the base for the initial containing block.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 GCPM", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 GCPM") }}</td> + </tr> + <tr> + <td colspan="2">Adds the ability to tailor printed version of a document by allowing to control header, footer but also references tables like indexes or tables of content.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS Exclusions", "", "") }}</strong></td> + <td>{{ Spec2("CSS Exclusions") }}</td> + </tr> + <tr> + <td colspan="2">Extends the floats mechanism to define exclusion regions in any positioning scheme. Adds the notion of shapes, in which content must flows.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Lists", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Lists") }}</td> + </tr> + <tr> + <td colspan="2">Extends the list counter mechanism so that list markers can be styled and Web developers can define new list counter schemes.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Regions", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Regions") }}</td> + </tr> + <tr> + <td colspan="2">Defines a new mechanism allowing content to flow across, eventually non-contiguous, multiple areas called regions.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Device", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Device") }}</td> + </tr> + <tr> + <td colspan="2">Adds a new at-rule, {{ cssxref("@viewport") }}, allowing to specify the size, zoom factor, and orientation of the viewport that is used as the base for the initial containing block.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("Filters 1.0", "", "") }}</strong></td> + <td>{{ Spec2("Filters 1.0") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Template", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Template") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Sizing", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Sizing") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS Line Grid", "", "") }}</strong></td> + <td>{{ Spec2("CSS Line Grid") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Positioning", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Positioning") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Ruby", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Ruby") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSSOM", "", "") }}</strong></td> + <td>{{ Spec2("CSSOM") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Overflow", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Overflow") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Font Loading", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Font Loading") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Display", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Display") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS Scope", "", "") }}</strong></td> + <td>{{ Spec2("CSS Scope") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS4 Media Queries", "", "") }}</strong></td> + <td>{{ Spec2("CSS4 Media Queries") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS Non-element Selectors", "", "") }}</strong></td> + <td>{{ Spec2("CSS Non-element Selectors") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("Geometry Interfaces", "", "") }}</strong></td> + <td>{{ Spec2("Geometry Interfaces") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Inline", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Inline") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<h3 id="Modules_in_the_rewriting_phase">Modules in the rewriting phase</h3> + +<p>Modules that are in the rewriting phase are outdated and require to be rewritten. The syntax is still under scrutiny and may evolve a lot, in a non-compatible way. Alternative syntaxes are tested and often implemented.</p> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F33;"><strong>{{ SpecName("CSS3 Box", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Box") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F33;"><strong>{{ SpecName("CSS3 Content", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Content") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F33;"><strong>{{ SpecName("CSS3 Inline Layout", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Inline Layout") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<p> </p> diff --git a/files/id/archive/index.html b/files/id/archive/index.html new file mode 100644 index 0000000000..6361867424 --- /dev/null +++ b/files/id/archive/index.html @@ -0,0 +1,18 @@ +--- +title: Arsipkan konten usang +slug: Archive +translation_of: Archive +--- +<p>Di sini, di MDN, kami mencoba untuk menghindari penghapusan konten secara langsung yang mungkin berguna bagi orang-orang yang menargetkan platform, sistem operasi, dan browser lawas. Mungkin target pemirsa Anda adalah orang-orang yang menggunakan perangkat keras lama, misalnya, dan tidak dapat melakukan upgrade ke browser terbaru dan terbaik. Atau untuk "alasan", perusahaan Anda diharuskan menggunakan perangkat lunak yang sangat tua dan Anda perlu membangun konten Web yang berjalan pada perangkat lunak itu. Atau mungkin Anda hanya ingin tahu tentang sejarah fitur usang atau API, dan bagaimana cara kerjanya.</p> + +<p>Ada banyak alasan dokumentasi yang lebih tua bisa bermanfaat. Jadi, kami telah menetapkan area ini untuk mengarsipkan dokumentasi yang lebih tua. Materi di zona Konten yang Diarsipkan ini seharusnya tidak digunakan untuk membuat situs Web baru atau aplikasi untuk peramban modern. Itu hanya untuk referensi sejarah saja.</p> + +<div class="note"> +<p><strong>Catatan untuk penulis</strong>: Kita perlu mencoba untuk menjaga bagian halaman di sini diatur bukan semua dibuang ke dalam satu folder besar. Cobalah untuk membuat bagan pohon untuk kategori materi. Selain itu, hanya memindahkan halaman di sini yang <strong>sangat </strong>usang. Jika ada orang yang secara realistis memerlukan informasi dalam produk yang hidup, mungkin tidak tepat untuk memindahkannya ke sini. Secara umum, sebaiknya Anda mendiskusikannya di saluran <a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">MDN Web Docs</a> sebelum memindahkan konten di sini.</p> +</div> + +<p>{{SubpagesWithSummaries}}</p> + +<h2 id="Subnav">Subnav</h2> + +<p>{{ListSubpages("/en-US/docs/Archive", 2, 0, 1)}}</p> diff --git a/files/id/archive/meta_docs/index.html b/files/id/archive/meta_docs/index.html new file mode 100644 index 0000000000..55e2f91374 --- /dev/null +++ b/files/id/archive/meta_docs/index.html @@ -0,0 +1,11 @@ +--- +title: Arsip MDN "meta-documentation" +slug: Archive/Meta_docs +tags: + - Archive + - MDN +translation_of: Archive/Meta_docs +--- +<p>Di sini Anda akan menemukan arsip "meta-documentation"; Yaitu dokumentasi tentang bagaimana menulis dokumentasi tentang MDN. Artikel di sini sudah usang dan seharusnya tidak lagi direferensikan; Kami mempertahankannya di sini untuk referensi sementara kami memigrasikan beberapa konten ke tempat baru, namun sangat sedikit hal ini berguna.</p> + +<p>{{LandingPageListSubpages}}</p> diff --git a/files/id/archive/mozilla/index.html b/files/id/archive/mozilla/index.html new file mode 100644 index 0000000000..132253aacf --- /dev/null +++ b/files/id/archive/mozilla/index.html @@ -0,0 +1,8 @@ +--- +title: Archived Mozilla and build documentation +slug: Archive/Mozilla +translation_of: Archive/Mozilla +--- +<p>In progress. These articles are archived, obsolete documents about Mozilla, Gecko, and the process of building Mozilla projects.</p> + +<p>{{SubpagesWithSummaries}}</p> diff --git a/files/id/archive/mozilla/xul/index.html b/files/id/archive/mozilla/xul/index.html new file mode 100644 index 0000000000..17aa6ed66c --- /dev/null +++ b/files/id/archive/mozilla/xul/index.html @@ -0,0 +1,84 @@ +--- +title: XUL +slug: Archive/Mozilla/XUL +tags: + - NeedsTranslation + - TopicStub + - XUL +translation_of: Archive/Mozilla/XUL +--- +<div class="callout-box"><strong><a href="/en-US/docs/XUL_Tutorial" title="en-US/docs/XUL_Tutorial">XUL Tutorial</a></strong><br> +A guided tutorial that will help you get started with XUL, originally from XULPlanet.</div> + +<div> +<p><strong>XUL</strong> (XML User Interface Language) is Mozilla's <a href="/en-US/docs/XML" title="en-US/docs/XML">XML</a>-based language for building user interfaces of applications like Firefox. The term XUL is sometimes used to refer to the whole <a href="/en-US/docs/The_Mozilla_platform" title="/en-US/docs/The_Mozilla_platform">Mozilla platform</a> (e.g. XUL applications are applications using XUL and other components of the platform).</p> + +<p><a href="/en-US/docs/XUL_controls" title="en-US/docs/XUL_controls">XUL Controls</a> lists some of the common controls provided by XUL.</p> +</div> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Documentation">Documentation</h2> + + <dl> + <dt><strong><a href="/en-US/docs/XUL_Tutorial" title="en-US/docs/XUL_Tutorial">XUL Tutorial</a></strong></dt> + <dd>A guided tutorial that will help you get started with XUL, originally from XULPlanet.</dd> + <dt><a href="/en-US/docs/XUL_Reference" title="en-US/docs/XUL_Reference">XUL Reference</a></dt> + <dd>XUL elements, attributes, properties, methods, and event handlers.</dd> + <dt><a href="/en-US/docs/XUL_controls" title="en-US/docs/XUL_controls">XUL Controls</a></dt> + <dd>A quick list of all of the available XUL controls.</dd> + <dt><a href="/en-US/docs/The_Joy_of_XUL" title="en-US/docs/The_Joy_of_XUL">The Joy of XUL</a></dt> + <dd>Describes the key features and components of XUL.</dd> + <dt><a href="/en-US/docs/XUL/PopupGuide" title="en-US/docs/XUL/PopupGuide">Menus and Popups Guide</a></dt> + <dd>A guide on using menus and popup panels.</dd> + <dt><a href="/en-US/docs/XUL/Template_Guide" title="en-US/docs/XUL/Template_Guide">Template Guide</a></dt> + <dd>A detailed guide on XUL templates, which is a means of generating content from a datasource.</dd> + <dt><a href="/en-US/docs/DragDrop/Drag_and_Drop" title="Drag and Drop">Drag and Drop</a></dt> + <dd>How to perform drag and drop operations.</dd> + </dl> + + <dl> + <dt>XUL Periodic Table</dt> + <dd>This collection of XUL demos was available as a <a href="/en-US/docs/" title="/en-US/docs/">web page</a>, but can no longer be viwed in Firefox since support for <a href="/en-US/docs/Remote_XUL" title="/en-US/docs/Remote_XUL">Remote XUL</a> was disabled. There is a XULRunner application containing the XUL Periodic Table which can be opened with Gecko based browsers. <a href="https://github.com/matthewkastor/XULRunner-Examples" title="https://github.com/matthewkastor/XULRunner-Examples">You can get it here</a>. See: <a href="/en-US/docs/XULRunner_tips#Using_Firefox_3_to_run_XULRunner_applications" title="/en-US/docs/XULRunner_tips#Using_Firefox_3_to_run_XULRunner_applications">XULRunner_tips#Using_Firefox_3_to_run_XULRunner_applications</a> for instructions on running XULRunner apps in Firefox.</dd> + <dt>Changes to XUL</dt> + <dd>New XUL features and changes to existing features are included in the <a href="/en-US/docs/Mozilla/Firefox/Releases" title="/en-US/docs/Mozilla/Firefox/Releases">Firefox developer release notes</a>.</dd> + </dl> + + <p><span class="alllinks"><a href="/en-US/docs/tag/XUL" title="tag/XUL">View All...</a></span></p> + </td> + <td> + <h2 class="Community" id="Community">Community</h2> + + <ul> + <li>View Mozilla forums...{{ DiscussionList("dev-tech-xul", "mozilla.dev.tech.xul") }}</li> + <li><a class="link-irc" href="irc://irc.mozilla.org/xul">#xul on irc.mozilla.org</a></li> + </ul> + + <h2 class="Tools" id="Tools">Tools</h2> + + <ul> + <li><a class="external" href="/en-US/docs/XUL_Explorer" title="en-US/docs/XUL_Explorer">XUL Explorer</a> (a lightweight XUL IDE)</li> + <li><a href="https://github.com/matthewkastor/XULExplorer" title="https://github.com/matthewkastor/XULExplorer">XULExplorer</a> (Patched version of XUL explorer)</li> + <li><a class="external" href="http://ted.mielczarek.org/code/mozilla/extensiondev/">Extension developer's extension</a> (featuring a Live XUL Editor)</li> + <li><a class="external" href="http://forum.addonsmirror.net/index.php?showtopic=751" title="http://forum.addonsmirror.net/index.php?showtopic=751">XULRef sidebar</a></li> + <li><a class="external" href="http://www.getfirebug.com/">Firebug</a></li> + <li><a href="/en-US/docs/DOM_Inspector" title="en-US/docs/DOM_Inspector">DOM Inspector</a></li> + <li><a class="external" href="http://www.spket.com/">Spket IDE</a>, IDE for XUL/XBL</li> + <li><a class="external" href="http://www.amplesdk.com" title="http://www.amplesdk.com/">Ample SDK</a>, (Cross-browser XUL renderer in JavaScript/HTML)</li> + </ul> + + <p><span class="alllinks"><a href="/en-US/docs/tag/tools" title="tag/tools">View All...</a></span></p> + + <h2 class="Related_Topics" id="Related_Topics">Related Topics</h2> + + <ul> + <li><a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a>, <a href="/en-US/docs/XBL" title="en-US/docs/XBL">XBL</a>, <a href="/en-US/docs/CSS" title="en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/RDF" title="en-US/docs/RDF">RDF</a>, <a href="/en-US/docs/Extensions" title="en-US/docs/Extensions">Extensions</a>, <a href="/en-US/docs/XULRunner" title="en-US/docs/XULRunner">XULRunner</a></li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p> </p> diff --git a/files/id/archive/mozilla/xul/international_characters_in_xul_javascript/index.html b/files/id/archive/mozilla/xul/international_characters_in_xul_javascript/index.html new file mode 100644 index 0000000000..d3ddd60359 --- /dev/null +++ b/files/id/archive/mozilla/xul/international_characters_in_xul_javascript/index.html @@ -0,0 +1,23 @@ +--- +title: International characters in XUL JavaScript +slug: Archive/Mozilla/XUL/International_characters_in_XUL_JavaScript +translation_of: Archive/Mozilla/XUL/International_characters_in_XUL_JavaScript +--- +<h3 id="Introduction" name="Introduction">Introduction</h3> +<p><a href="/en-US/docs/Gecko" title="en/Gecko">Gecko</a> 1.8, as used in <a href="/en-US/docs/Firefox_1.5_for_developers" title="en/Firefox_1.5_for_developers">Firefox 1.5</a> and other applications, added support for non-ASCII characters in <a href="/en-US/docs/JavaScript" title="en/JavaScript">JavaScript</a> files loaded from <a href="/en-US/docs/XUL" title="en/XUL">XUL</a> files.</p> +<p>This means that such script files can use any character from virtually any language of the world. For example, they can contain a line:</p> +<pre class="eval">var text = "Ein schönes Beispiel eines mehrsprachigen Textes: 日本語"; +</pre> +<p>This mixes German and Japanese characters.</p> +<p>Earlier versions always interpreted JS files loaded from XUL as <a class="external" href="http://en.wikipedia.org/wiki/ISO_8859-1#Code_table">ISO-8859-1</a> (Latin-1), in both local and remote cases. Unicode escapes, <a href="#Cross-version_compatibility">as discussed below</a>, have always worked.</p> +<h3 id="How_the_character_encoding_is_determined_in_Gecko_1.8_and_later" name="How_the_character_encoding_is_determined_in_Gecko_1.8_and_later">How the character encoding is determined in Gecko 1.8 and later</h3> +<p>When the JavaScript file is loaded from a <code>chrome://</code> URL, a <a href="/en-US/docs/Byte_Order_Mark" title="en/Byte_Order_Mark">Byte Order Mark</a> ({{todo}})({{ interwiki('wikipedia', 'Byte_Order_Mark', 'BOM') }}) is used to determine the character encoding of the script. Otherwise, the character encoding will be the same as the one used by the XUL file (which can be specified using an <code>encoding</code> attribute in the <code><?xml?></code> tag). By default this will use UTF-8, which can represent virtually all characters in the world.</p> +<p>If the script file is loaded via HTTP, the HTTP header can contain a character encoding declaration as part of the <code>Content-Type</code> header, for example:</p> +<pre class="eval">Content-Type: application/javascript; charset=UTF-8 +</pre> +<p>If no charset parameter is specified, the same rules as above apply.</p> +<h3 id="Cross-version_compatibility" name="Cross-version_compatibility">Cross-version compatibility</h3> +<p>If you want the same code to work in both Gecko 1.8 and earlier versions, you must limit yourself to ASCII. However, you can use <a href="/en-US/docs/Core_JavaScript_1.5_Guide/Unicode#Unicode_Escape_Sequences" title="en/Core_JavaScript_1.5_Guide/Unicode#Unicode_Escape_Sequences">unicode escapes</a> – the earlier example rewritten using them would be:</p> +<pre class="eval">var text = "Ein sch\u00F6nes Beispiel eines mehrsprachigen Textes: \u65E5\u672C\u8A9E"; +</pre> +<p>An alternative might be to use property files via {{interface("nsIStringBundle")}} or the <a href="/en-US/docs/XUL_Tutorial/Property_Files" title="en/XUL_Tutorial/Property_Files">XUL <stringbundle> element</a>; this would allow for localization of the XUL. This can not be done in XUL files loaded from the web, only in privileged code, e.g. in <a href="/en-US/docs/Extensions" title="en/Extensions">extensions</a>.</p> diff --git a/files/id/archive/mozilla/xul/school_tutorial/index.html b/files/id/archive/mozilla/xul/school_tutorial/index.html new file mode 100644 index 0000000000..4ae723e85a --- /dev/null +++ b/files/id/archive/mozilla/xul/school_tutorial/index.html @@ -0,0 +1,59 @@ +--- +title: XUL School Tutorial +slug: Archive/Mozilla/XUL/School_tutorial +tags: + - Add-ons + - Extensions + - NeedsTranslation + - References + - TopicStub + - Tutorials + - XUL +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School +--- +<p>XUL School is a comprehensive add-on development tutorial, focusing on Firefox extension development. It is recommended that you read through all of it at least once. While Firefox changes rapidly, the content in this tutorial should be up to date and valid.</p> +<dl> + <dt>Introduction</dt> + <dd><ul> + <li><a href="/en-US/docs/XUL/School_tutorial/Introduction" title="XUL/School_tutorial/Introduction">Introduction</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/Getting_Started_with_Firefox_Extensions" title="XUL/School_tutorial/Getting Started with Firefox Extensions">Getting Started with Firefox Extensions</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/The_Essentials_of_an_Extension" title="XUL/School_tutorial/The Essentials of an Extension">The Essentials of an Extension</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/Setting_Up_a_Development_Environment" title="XUL/School_tutorial/Setting Up a Development Environment">Setting Up a Development Environment</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/JavaScript_Object_Management" title="XUL/School_tutorial/JavaScript Object Management">JavaScript Object Management</a></li> + </ul></dd> + <dt>Basic functionality</dt> + <dd><ul> + <li><a href="/en-US/docs/XUL/School_tutorial/Adding_menus_and_submenus" title="XUL/School_tutorial/Adding menus and submenus">Adding menus and submenus</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/Adding_Toolbars_and_Toolbar_Buttons" title="XUL/School_tutorial/Adding Toolbars and Toolbar Buttons">Adding Toolbars and Toolbar Buttons</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/Adding_Events_and_Commands" title="XUL/School_tutorial/Adding Events and Commands">Adding events and commands</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/Adding_windows_and_dialogs" title="XUL/School_tutorial/Adding windows and dialogs">Adding windows and dialogs</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/Adding_sidebars" title="XUL/School_tutorial/Adding sidebars">Adding sidebars</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/User_Notifications_and_Alerts" title="XUL/School_tutorial/User Notifications and Alerts">User notifications and alerts</a></li> + </ul></dd> + <dt>Intermediate functionality</dt> + <dd><ul> + <li><a href="/en-US/docs/XUL/School_tutorial/Intercepting_Page_Loads" title="XUL/School_tutorial/Intercepting Page Loads">Intercepting page loads</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/Connecting_to_Remote_Content" title="XUL/School_tutorial/Connecting to Remote Content">Connecting to Remote Content</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/Handling_Preferences" title="XUL/School_tutorial/Handling Preferences">Handling preferences</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/Local_Storage" title="XUL/School_tutorial/Local Storage">Local Storage</a></li> + </ul></dd> + <dt>Advanced topics</dt> + <dd><ul> + <li><a href="/en-US/docs/XUL/School_tutorial/The_Box_Model" title="XUL/School_tutorial/The Box Model">The Box Model</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/XPCOM_Objects" title="XUL/School_tutorial/XPCOM Objects">XPCOM Objects</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/Observer_Notifications" title="XUL/School_tutorial/Observer Notifications">Observer Notifications</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/Custom_XUL_Elements_with_XBL" title="XUL/School_tutorial/Custom XUL Elements with XBL">Custom XUL Elements with XBL</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/Mozilla_Documentation_Roadmap" title="XUL/School_tutorial/Mozilla Documentation Roadmap">Mozilla Documentation Roadmap</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/Useful_Mozilla_Community_Sites" title="XUL/School_tutorial/Useful Mozilla Community Sites">Useful Mozilla Community Sites</a></li> + </ul></dd> + <dt>Appendices</dt> + <dd><ul> + <li><a href="/en-US/docs/XUL/School_tutorial/Appendix_A:_Add-on_Performance" title="XUL/School_tutorial/Appendix A: Add-on Performance">Appendix A: Add-on Performance</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/Appendix_B:_Install_and_Uninstall_Scripts" title="XUL/School_tutorial/Appendix B: Install and Uninstall Scripts">Appendix B: Install and Uninstall Scripts</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/Appendix_C:_Avoid_using_eval_in_Add-ons" title="XUL/School_tutorial/Appendix C: Avoid using eval in Add-ons">Appendix C: Avoiding using eval in Add-ons</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/Appendix_D:_Loading_Scripts" title="XUL/School_tutorial/Appendix D: Loading Scripts">Appendix D: Loading Scripts</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/DOM_Building_and_HTML_Insertion" title="XUL/School_tutorial/Appendix E: DOM Building and HTML Insertion">Appendix E: DOM Building and HTML Insertion</a></li> + <li><a href="/en-US/docs/XUL/School_tutorial/Appendix_F:_Monitoring_DOM_changes" title="XUL/School_tutorial/Appendix F: Monitoring DOM changes">Appendix F: Monitoring DOM changes</a></li> + </ul></dd> +</dl> +<p>The XUL School project was developed by <a href="http://appcoast.com/" title="http://appcoast.com/">Appcoast</a> (formerly Glaxstar). The project is now published here following its <a href="/Project:Copyrights" title="https://developer.mozilla.org/Project:Copyrights">sharing licenses</a>. Its contents have been modified from the original source as necessary.</p> diff --git a/files/id/archive/mozilla/xul/school_tutorial/perkenalan/index.html b/files/id/archive/mozilla/xul/school_tutorial/perkenalan/index.html new file mode 100644 index 0000000000..5ce760d1be --- /dev/null +++ b/files/id/archive/mozilla/xul/school_tutorial/perkenalan/index.html @@ -0,0 +1,32 @@ +--- +title: Perkenalan +slug: Archive/Mozilla/XUL/School_tutorial/Perkenalan +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/Introduction +--- +<div> + {{Next("XUL_School/Getting_Started_with_Firefox_Extensions")}}</div> +<p><span id="result_box" lang="id"><span title="Welcome to the XUL School Tutorial!">Selamat datang di Tutorial Sekolah XUL !</span></span></p> +<p><span id="result_box" lang="id"><span title="This tutorial is meant to be the stepping stone that will turn you into a professional Firefox extension developer in no time.">Tutorial ini dimaksudkan untuk menjadi batu loncatan yang akan mengubah Anda menjadi seorang pengembang ekstensi Firefox profesional dalam waktu singkat . </span><span title="We have poured years of XUL experience into it, providing many solutions for problems extension developers commonly run into.">Kami telah dituangkan tahun pengalaman XUL ke dalamnya , menyediakan banyak solusi untuk masalah pengembang ekstensi pada umumnya.</span></span></p> +<p>XUL School was created by <a href="http://appcoast.com/" title="http://appcoast.com/">Appcoast</a> (formerly Glaxstar), one of the few companies dedicated to building high-quality Firefox extensions. A team of over a dozen XUL developers conformed Glaxstar at the time this tutorial was created, and the combined experiences of years creating Firefox extensions are reflected here.</p> +<p>With this tutorial you'll learn how to develop Firefox extensions. You'll learn how to quickly do the most common tasks in extension development, comparing several different approaches to solve them. In most cases we'll provide code samples that you can easily copy and adapt to your needs, as well as some working example extensions. The tutorial aims to be as brief as possible, often falling back on Mozilla documentation for more detailed information. You can think of it as a quick guide to the expansive world that is the Mozilla platform. Most links in this documentation are meant to be clicked and read.</p> +<p>We'll start with a brief introduction to some key concepts, in case you're not familiar with Mozilla and Firefox.</p> +<h2 id="Mozilla_and_Firefox">Mozilla and Firefox</h2> +<p>The term <a href="http://en.wikipedia.org/wiki/Mozilla" title="http://en.wikipedia.org/wiki/Mozilla">Mozilla</a> can be used to refer to several concepts: the Mozilla project, the <a href="http://en.wikipedia.org/wiki/Mozilla_Foundation" title="http://en.wikipedia.org/wiki/Mozilla_Foundation">Mozilla Foundation</a>, the <a href="http://en.wikipedia.org/wiki/Mozilla_Corporation" title="http://en.wikipedia.org/wiki/Mozilla_Corporation">Mozilla Corporation</a> and the old <a href="http://en.wikipedia.org/wiki/Mozilla_Application_Suite" title="http://en.wikipedia.org/wiki/Mozilla_Application_Suite">Mozilla browser</a>. Even Firefox is sometimes referred to as "Mozilla". If you're unfamiliar with these terms, it's good that you take some time and learn a little about Mozilla. This will help you understand the culture that surrounds the Mozilla community.</p> +<p>Mozilla has spawned several <a href="http://www.mozilla.org/projects/" title="http://www.mozilla.org/projects/">products and projects</a>, the most notable being the Mozilla Firefox web browser. Firefox is one of the most successful open source projects in history, combining the openness, standards-compliance and sophistication of open source with the focus on user experience and powerful outreach more commonly seen in less open companies.</p> +<p>Version 1.0 of Firefox was released in November 2004, version 2.0 in October 2006, and version 3.0 in June 2008. This tutorial was written after Firefox 3 was released, and has been updated with time. While most of it should still work for creating extensions Firefox 3 (and even Firefox 2), it is strongly recommended that you aim to support modern Firefox versions, to encourage users to stay up to date with security fixes. A release that is more than 6 months old is likely vulnerable to published security bugs.</p> +<p>Firefox and other Mozilla applications can be seen as composed of two different parts: a user interface layer that is distinct for each project, and a common platform on top of which the interface layer is built. The user interface is built with technology known as <a href="/en-US/docs/XUL" title="XUL">XUL</a>, and the platform is known as <a href="/en-US/docs/XULRunner" title="XULRunner">XULRunner</a>.</p> +<h2 id="XUL">XUL</h2> +<p><a href="/en-US/docs/XUL" title="XUL">XUL</a> (pronounced "zool") is one of many technologies used for creating Mozilla-based products and extensions. It is only one part of the development landscape, but given that it's practically exclusive to Mozilla, it tends to be used to identify all Mozilla-related development. You'll sometimes read terms like "XUL applications" and "XUL extensions", but rarely will they refer to projects that are exclusively built with XUL. It usually means that the projects were built using Mozilla technologies. Even this project, called XUL School, covers several other technologies such as JavaScript, CSS, XBL and XPCOM.</p> +<h2 id="XULRunner">XULRunner</h2> +<p><a href="/en-US/docs/XULRunner" title="XULRunner">XULRunner</a> includes the <a href="/en-US/docs/Gecko" title="Gecko">Gecko rendering engine</a>, the <a href="/en-US/docs/Necko" title="Necko">Necko networking library</a>, and several other components that provide OS-independent file management, accessibility, and localization, among others. It is this very powerful platform that has allowed such a fast growth of the development community surrounding Mozilla and Firefox.</p> +<p>XULRunner is available in binary form at the <a href="/en-US/docs/XULRunner" title="XULRunner">XULRunner</a> page, and it is the base for several projects, such as Songbird, Miro and Eudora. There's a very comprehensive list of XULRunner applications in the <a href="/en-US/docs/XULRunner_Hall_of_Fame" title="XULRunner Hall of Fame">XULRunner Hall of Fame</a>.</p> +<h3 id="Gecko">Gecko</h3> +<p>The <a href="/en-US/docs/Gecko" title="Gecko">Gecko engine</a> is the part of Firefox used to render web pages and its own user interface. You can identify the level of compatibility of web standards in <a href="http://en.wikipedia.org/wiki/List_of_web_browsers#Gecko-based_browsers" title="http://en.wikipedia.org/wiki/List_of_web_browsers#Gecko-based_browsers">Gecko-based browsers</a> looking at their <a href="http://en.wikipedia.org/wiki/User_agent" title="http://en.wikipedia.org/wiki/User_agent">User Agent</a> string, which should include the Gecko version. Gecko versions are somewhat independent from Firefox versions, and you can see a mapping of Firefox versions and Gecko versions at the <a href="/en-US/docs/Gecko" title="Gecko">Gecko page</a>. The User Agent String for Firefox at the time of this writing (in US English, Mac OS X) is:</p> +<p>Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7; rv:<strong>7.0.1</strong>) Gecko/20100101 Firefox/7.0.1</p> +<p>The highlighted section is the Gecko version: 7.0.1. You can read and copy the user agent string of any Firefox window, choosing "Help > Troubleshooting Information" from the main menu.</p> +<h2 id="On_to_the_Tutorial">On to the Tutorial</h2> +<p>With the basic concepts out of the way, we can now get right into extension development. You are probably still wondering what exactly is an extension, what can it do, and how can you make them. Well, this whole tutorial is devoted to explaining that to you.</p> +<p>Welcome to the world of extension development. Now let's get to it.</p> +<div> + {{Next("XUL_School/Getting_Started_with_Firefox_Extensions")}}</div> +<p><small>This tutorial was kindly donated to Mozilla by Appcoast.</small></p> diff --git a/files/id/archive/mozilla/xul/school_tutorial/the_essentials_of_an_extension/index.html b/files/id/archive/mozilla/xul/school_tutorial/the_essentials_of_an_extension/index.html new file mode 100644 index 0000000000..9fa34889f3 --- /dev/null +++ b/files/id/archive/mozilla/xul/school_tutorial/the_essentials_of_an_extension/index.html @@ -0,0 +1,344 @@ +--- +title: The Essentials of an Extension +slug: Archive/Mozilla/XUL/School_tutorial/The_Essentials_of_an_Extension +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/The_Essentials_of_an_Extension +--- +<p>{{ PreviousNext("XUL_School/Getting_Started_with_Firefox_Extensions", "XUL_School/Setting_Up_a_Development_Environment") }}</p> +<h2 id="The_install.rdf_File">The install.rdf File</h2> +<p>In the last section we looked at the contents of the Hello World extension. Now we'll look into its files and code, starting with the <em>install.rdf</em> file. You can open it with any text editor.</p> +<p>The file is formatted in a special flavor of XML called <a class="external" href="http://en.wikipedia.org/wiki/Resource_Description_Framework">RDF</a>. RDF used to be the central storage mechanism for Firefox, but it is now being replaced for a simpler database system. We'll discuss both of these storage systems further ahead in the tutorial.</p> +<p>Now let's look at the important parts of the file.</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java"><em:id>helloworld@xulschool.com</em:id></pre> + </div> +</div> +<p>This is the unique identifier for the extension. Firefox needs this to distinguish your extension from other extensions, so it is required that you have an ID that is unique.</p> +<p>There are two accepted standards for add-on ids. One is the email-like format in the Hello World example, which should be something like <span style="color: #0000ff;"><em><project-name>@<yourdomain></em></span>. The other standard practice is to use a generated <a class="external" href="http://en.wikipedia.org/wiki/Uuid">UUID</a> string, which is extremely unlikely to be duplicated. Unix-based systems have a command line tool called <em>uuidgen</em> that generates UUIDs. There are also downloadable tools for all platforms that generate them. The enclosing brackets are just notation, and they're just common practice. As long as your id has some uniqueness to it, it's OK to use either form.</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java"><em:name>XUL School Hello World</em:name> +<em:description>Welcome to XUL School!</em:description> +<em:version>0.1</em:version> +<em:creator>Appcoast</em:creator> +<span class="code-comment"><em:homepageURL>https://developer.mozilla.org/en/XUL_School</em:homepageURL></span></pre> + </div> +</div> +<p>This is the data that is displayed before and after the extension is installed, that you can see in the Add-ons Manager. There are many other tags that can be added, for contributors and translators. The <a href="/en/Install_Manifests" title="en/Install Manifests">full specification</a> of the install.rdf file has all the details.</p> +<p>Since extensions can be translated to multiple languages, it is often necessary to translate the extension's description, or even its name. A localized description and name can be added with the following code:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java"><em:localized> + <Description> + <em:locale>es-ES</em:locale> + <em:name>XUL School Hola Mundo</em:name> + <em:description>Bienvenido a XUL School!</em:description> + </Description> +</em:localized></pre> + </div> +</div> +<p>The <em>es-ES</em> locale string indicates that this is the Spanish (es) localization for Spain (ES). You can add as many <em><em:localized></em> sections as you need. For Firefox 2, localizing this file is a <a href="/en/Localizing_extension_descriptions#Localizing_before_Gecko_1.9" title="en/Localizing extension descriptions#Localizing before Gecko 1.9">little more complicated</a>. We'll discuss localization further ahead in this section.</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java"><em:type>2</em:type></pre> + </div> +</div> +<p>This specifies that the add-on being installed is an extension. You can read about different possible types in the <a href="/en/Install_Manifests#type" title="en/Install Manifests#type">install.rdf specification</a>.</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java"><em:targetApplication> + <Description> + <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> + <em:minVersion>4.0</em:minVersion> + <em:maxVersion>10.*</em:maxVersion> + </Description> +</em:targetApplication> +</pre> + </div> +</div> +<p>This node specifies the target application and target versions for the extension, specifically Firefox, from version 4 up to version 10. The UUID is Firefox's unique ID. Other Mozilla and Mozilla-based applications such as Thunderbird and Seamonkey have their own. You can have an extension that works on multiple applications and versions. For example, if you create a Firefox extension, it would normally take little effort to port it to SeaMonkey, which has very similar features and UI.</p> +<p>The min and max version specify the version range in which the extension can be installed. Here's more about the <a href="/en/Toolkit_version_format" title="en/Toolkit version format">version format</a>. If the application or version range don't match, you won't be allowed to install the extension, or the extension will be installed in a disabled state. Users can disable version checks through preferences or installing add-ons like the <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/15003" title="https://addons.mozilla.org/en-US/firefox/addon/15003">Add-on Compatibility Reporter</a>. Beginning with Firefox 11, add-ons will default to compatible and Firefox will mostly ignore the version range. Testing your add-ons with every Firefox version is always recommended, though.</p> +<p>This is the information Firefox and other Mozilla applications need to install an add-on. Any errors or missing information will cause the installation process to fail, or the extension to be installed in a disabled state.</p> +<h2 id="The_chrome.manifest_File">The chrome.manifest File</h2> +<blockquote> + <p><span style="color: #0000ff;">Chrome is the set of user interface elements of the application window that are outside of a window's content area.</span> Toolbars, menu bars, progress bars, and window title bars are all examples of elements that are typically part of the chrome.</p> +</blockquote> +<p>Taken from <a href="/en/Chrome_Registration" title="en/Chrome Registration">Chrome Registration</a>.</p> +<p>In other words, the chrome is everything you see in Firefox. All Firefox windows can be seen as having two parts: (1) the chrome and (2) possibly a content area, like the one that displays web pages in a Firefox tab. Windows like the Downloads window are pure chrome. Most of the code for an extension resides in the chrome folder, just like in the Hello World example.</p> +<p>As we saw in the directory structure of the unpacked extension, the chrome is composed of 3 sections: <span style="color: #0000ff;">content</span>, <span style="color: #0000ff;">locale</span> and <span style="color: #0000ff;">skin</span>. The 3 are necessary for most extensions. If we open the <em>chrome.manifest</em> file (again, any text editor will do), we see that the same 3 sections are mentioned:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java">content xulschoolhello content/ +skin xulschoolhello classic/1.0 skin/ +locale xulschoolhello en-US locale/en-US/ +</pre> + </div> +</div> +<p><span style="color: #0000ff;">The <em>chrome.manifest</em> file tells Firefox where to look for chrome files.</span> The text is spaced to look like a table, but that is not necessary. The parser ignores repeated spaces.</p> +<p>The first word in a line tells Firefox what it is that is being declared (content, skin, locale, or others mentioned later on). The second is the package name, which we will explain shortly.</p> +<p>Skin and locale packages have a third value to specify what locale or what skin they are extending. There can be multiple skin and locale entries relating to different skins and locales. The most common case is having one skin entry for the global skin, <em>classic/1.0</em>, and multiple locale entries, one for each translation. Finally, the location is specified.</p> +<p>There are some additional options that can be included in the entries of a <em>chrome.manifest</em> file. They are documented in the <a href="/en/Chrome_Registration" title="en/Chrome Registration">Chrome Registration</a> page. Notably, we can have entries that are OS-specific. This is important because the appearance of the browser is very different for each operating system. If our extension needed to look differently on different systems, we could change the manifest file so that it looks like this:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java">content xulschoolhello content/ +skin xulschoolhello classic/1.0 skin/unix/ +skin xulschoolhello classic/1.0 skin/mac/ os=Darwin +skin xulschoolhello classic/1.0 skin/win/ os=WinNT +locale xulschoolhello en-US locale/en-US/ +</pre> + </div> +</div> +<p>This way we can have separate skins for Windows, Mac OS X, and Linux (plus other unix-like systems), each defined in a separate directory. Since most other systems are Unix-based, the "unix" skin is the default, with no flags.</p> +<h2 id="The_Chrome">The Chrome</h2> +<p>As mentioned earlier, the chrome is composed of 3 sections: content, locale and skin. The content is the most important section, holding user interface (XUL) and script (JS) files. The skin section has the files that define most of the look and feel of the UI (using CSS and images, just like web pages). Finally, the locale section holds all text used in the extension, in DTD and properties files. This division allows other developers to create themes that replace skins, and translators to create localizations in different languages, all of this without having to change your extension or your code. This gives Firefox extensions a great deal of flexibility.</p> +<p>Chrome files are accessed through the chrome protocol. This is what a chrome URI looks like:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java">chrome:<span class="code-comment">//packagename/section/path/to/file</span></pre> + </div> +</div> +<p>So, for instance, if I want to access the file <em>browserOverlay.xul </em>in the extension, the chrome URI would be <em><a class="external" rel="freelink">chrome://xulschoolhello/content/browserOverlay.xul</a></em>.</p> +<p>If you have too many files in the content and you want to organize them in subdirectories, there's nothing you need to change in <em>chrome.manifest</em>, all you need is to add the right path after <em>content</em> in the URI.</p> +<p>Skin and locale files work in the same way, and you don't need to specify skin names or locale names. So, to access the DTD file in the Hello World extension, the chrome path is <em><a class="external" rel="freelink">chrome://xulschoolhello/locale/browserOverlay.dtd</a></em>. Firefox knows what locale to look for.</p> +<p>Here's an interesting experiment. Open a new Firefox tab, type <em><a class="external" rel="freelink">chrome://mozapps/content/downloads/downloads.xul</a></em> on your location bar and press ENTER. Surprised? You just opened the Downloads window in a Firefox tab! You can access any chrome file by just typing its URI in the location bar. This can come in handy if you want to inspect script files that are part of Firefox, other extensions, or your own. Most of these files are opened as text files, with the exception of XUL files, which are executed and displayed like you would normally see them on a window.</p> +<h3 id="Content">Content</h3> +<p>There are 2 files in the content directory. Let's look at the XUL file first.</p> +<p><a href="/en/XUL" title="en/XUL">XUL</a> files are XML files that define the user interface elements in Firefox and Firefox extensions. XUL was inspired by HTML, so you'll see many similarities between the two. However, XUL is also an improvement over HTML, having learned from many of the mistakes made during the evolution of HTML. XUL allows you to create richer and more interactive interfaces than the ones you can create with HTML, or at least XUL makes it easier.</p> +<p>XUL files usually define one of two things: windows or overlays. The file you opened before, <em>downloads.xul</em>, has the code that defines the Downloads window. The XUL file included in the Hello World extension is an overlay. An overlay extends an existing window, adding new elements to it or replacing some of the elements in it. The line that we skipped in the <em>chrome.manifest</em> file states that this XUL file is an overlay for the main browser window:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java">overlay chrome:<span class="code-comment">//browser/content/browser.xul chrome://xulschoolhello/content/browserOverlay.xul</span></pre> + </div> +</div> +<p>With this line, Firefox knows that it needs to take the contents of <em>browserOverlay.xul</em> and overlay it on the main browser window, <em>browser.xul</em>. You can declare overlays for any window or dialog in Firefox, but overlaying the main browser window is the most common case by far.</p> +<p>Now let's look at the contents of our XUL file. We'll skip the first few lines because they relate to skin and locale, and we'll cover them later.</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java"><overlay id="xulschoolhello-browser-overlay" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"></pre> + </div> +</div> +<p>The root element in the file is an <em>overlay</em>. Other XUL documents use the <em>window</em> or <em>dialog</em> tag. The element has a unique id, which you should have on most elements in your XUL. The second attribute is the namespace, which is something you should always define in your XUL root element. It says that this node and all child nodes are XUL. You only need to change namespace declarations when you mix different types of content in the same document, such as XUL with HTML or SVG.</p> +<div class="panel" style="border-width: 1px;"> + <div class="panelContent"> + <div class="note"> + You may have noticed the naming we use on several places, such as the id <em>xulschoolhello-browser-overlay</em>. This is the namespacing standard that we use to avoid conflicts with Firefox and other extensions, as well as making some development tasks easier. We namespace all ids and style classes in overlay elements because they will be mixed with other elements in the main browser window. If we used generic ids like <em>container</em> or <em>input</em>, they will likely conflict with ids used within Firefox, or with ids from other extension overlays. Using namespaces minimizes compatibility problems with other extensions. We use camel casing for file names, and all lower case with dashes for element ids and CSS style class names, but you're free to use your own system.</div> + </div> +</div> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java"><script type=<span class="code-quote">"application/x-javascript"</span> + src=<span class="code-quote">"chrome:<span class="code-comment">//xulschoolhello/content/browserOverlay.js"</span> /></span></pre> + </div> +</div> +<p>Just like in HTML, this includes a JavaScript script file. You can have as many <em>script</em> elements in a XUL document as you need. We'll look into its code later.</p> +<div class="panel" style="border-width: 1px;"> + <div class="panelContent"> + <div class="note"> + You also probably noticed how we format our code, and wonder about the rules we follow. Our general rule on line length is not having lines longer than 80 characters. This feels very restrictive, specially with XML files, but the number was chosen to allow pretty much any text editor to handle these files easily. Even old command line editors work well with files that cut their lines at 80 characters. The tabulation is very straightforward: 2 blank space indents. We never use actual tab characters, with the exception of Makefiles, which will be covered later on. Most of our coding standards are based on Mozilla's or other known and used standards.</div> + </div> +</div> +<p> We'll skip some code that is covered in the locale section, moving on to the most important part of the content:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java"><menubar id="main-menubar"> + <menu id="xulschoolhello-hello-menu" label="&xulschoolhello.hello.label;" + accesskey="&xulschoolhello.helloMenu.accesskey;" insertafter="helpMenu"> + <menupopup> + <menuitem id="xulschoolhello-hello-menu-item" + label="&xulschoolhello.hello.label;" + accesskey="&xulschoolhello.helloItem.accesskey;" + oncommand="XULSchoolChrome.BrowserOverlay.sayHello(event);" /> + </menupopup> + </menu> +</menubar> + +<vbox id="appmenuSecondaryPane"> + <menu id="xulschoolhello-hello-menu-2" label="&xulschoolhello.hello.label;" + accesskey="&xulschoolhello.helloMenu.accesskey;" + insertafter="appmenu_addons"> + <menupopup> + <menuitem id="xulschoolhello-hello-menu-item-2" + label="&xulschoolhello.hello.label;" + accesskey="&xulschoolhello.helloItem.accesskey;" + oncommand="XULSchoolChrome.BrowserOverlay.sayHello(event);" /> + </menupopup> + </menu> +</vbox> +</pre> + </div> +</div> +<p>This is the code that adds the <em>Hello World</em> menu to the browser window.</p> +<p>There are two similar code blocks, because in modern versions of Firefox, particularly on Windows, a single Firefox menu button is presented, with simplified menu options, rather than an extensive menu bar. The second code block covers the common menu button case; the first code block covers all other cases. Check <em>Menu Bar </em>under the <em>Options </em>menu of the menu button to toggle display of the classic menu on Windows and some Linux distributions.</p> +<p>In order to write this code, we needed some knowledge of the XUL code in <em>browser.xul</em>. We needed to know that the id of the right pane in the unified menu is <em>appmenuSecondaryPane</em>. We're adding a menu of our own, and telling Firefox to add it in that pane, right after the Add-ons item. That's the purpose of the attribute:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java">insertafter=<span class="code-quote">"appmenu_addons"</span> +</pre> + </div> +</div> +<p><em>appmenu_addons</em> is the id of the menu element that corresponds to the Add-ons menu item in the main menu. We'll see later how we can find out things like the ids of browser elements, but for now let's look at the elements that compose the Hello World menu.</p> +<p>For the classic menu, we added the Hello World menu right in the "root" of the menu so that it would be very easy for you to spot it, but this is not a recommended practice. Imagine if all extensions added menus to the top menu; having a few extensions would make it look like an airplane dashboard, full of knobs and switches. In the case of the unified menu, things are a little more difficult due to lack of options. If your menu item fits in the Web Developer section, it is recommended that you add it there. Otherwise, the root menu might be your only recourse.</p> +<p>One recommended location for menus in the classic menu vase is under the <em>Tools</em> menu, so the code should really look like this:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java"><menupopup id=<span class="code-quote">"menu_ToolsPopup"</span>> + <menu id=<span class="code-quote">"xulschoolhello-hello-menu"</span> label=<span class="code-quote">"&</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.hello.label;"</span> + accesskey=<span class="code-quote">"&</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.helloMenu.accesskey;"</span> + insertbefore=<span class="code-quote">"</span>devToolsEndSeparator<span class="code-quote">"</span>> + <menupopup> + <menuitem id=<span class="code-quote">"</span><span class="code-quote">xulschoolhello</span><span class="code-quote">-hello-menu-item" + </span> label=<span class="code-quote">"&</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.hello.label;"</span> + accesskey=<span class="code-quote">"&</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.helloItem.accesskey;"</span> + oncommand=<span class="code-quote">"XULSchoolChrome.BrowserOverlay.sayHello(event);"</span> /> + </menupopup> + </menu> +</menupopup> +</pre> + </div> +</div> +<p>We're overlaying the menu that is deeper into the XUL tree, but it doesn't matter because all we need is the id of the element we want to overlay. In this case it is the <a href="/en/XUL/menupopup" title="en/XUL/menupopup">menupopup</a> element that's inside of the Tools <a href="/en/XUL/menu" title="en/XUL/menu">menu</a> element. The <em>insertbefore</em> attribute tells Firefox to add the menu at the bottom of the dev tools section, above its end separator. We'll discuss more about menus later on in the tutorial.</p> +<p>Now let's look at the actual code:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java">oncommand=<span class="code-quote">"XULSchoolChrome.BrowserOverlay.sayHello(event);"</span> +</pre> + </div> +</div> +<p>This attribute defines an event handler. The <em>command</em> event is the most frequently used in Firefox, since it corresponds to the main action for most UI elements. The value of the attribute is JavaScript code that invokes a function. This function is defined in the JS file that was included with the <em>script</em> tag. The JS function will be called once the user clicks on the menu item in the Hello World menu. All event handlers define a special object named <em>event</em>, which is usually good to pass as an argument to the function. Event handlers are explained in greater depth further ahead.</p> +<p>Now let's look at the JavaScript file and see what's going on when the event is fired.</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="brush: js">/** + * XULSchoolChrome namespace. + */ +if ("undefined" == typeof(XULSchoolChrome)) { + var XULSchoolChrome = {}; +};</pre> + </div> +</div> +<p>The <em>XULSchoolChrome</em> namespace is defined. All objects and variables we define in this JavaScript are global, meaning that scripts in Firefox and other extensions can see them and interact with them. This also means that if we define an object called <em>MenuHandler</em> or some other generic name, it's likely going to conflict with an existing object. What we do here is define a single global object: <em>XULSchoolChrome</em>. Now we know that all of our objects are inside this object, which is unlikely to be duplicated or overwritten by other extensions.</p> +<p>You can read more about the <a href="/en/JavaScript/Reference/Operators/typeof" title="en/Core JavaScript 1.5 Reference/Operators/Special Operators/typeof Operator"><span class="external">typeof operator</span></a>. If you're unfamiliar with JavaScript or this particular syntax, initializing an object as <em>{}</em> is the equivalent of initializing it to <em>new Object()</em>.</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="brush: js">/** + * Controls the browser overlay <span class="code-keyword">for</span> the Hello World extension. + */ +XULSchoolChrome.BrowserOverlay = {</pre> + </div> +</div> +<p>Finally, <em>BrowserOverlay</em> is our object. Naming and referencing objects in such a long and verbose manner can feel uncomfortable at first, but it's worth the cost.</p> +<div class="panel" style="border-width: 1px;"> + <div class="panelContent"> + <div class="note"> + We use <a class="external" href="http://java.sun.com/j2se/javadoc/writingdoccomments/index.html">Javadoc</a> style comments on all namespaces, objects and object members. This is a similar standard to the one used in Mozilla code, and some tools can generate documentation automatically from Javadoc.</div> + </div> +</div> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="brush: js">sayHello : function(aEvent) { + let stringBundle = document.getElementById("xulschoolhello-string-bundle"); + let message = stringBundle.getString("xulschoolhello.greeting.label"); + + window.alert(message); +}</pre> + </div> +</div> +<p>And, finally, this is our function declaration. Three lines of code are all we need for it to work. The first line in the body of the function declares a variable that will hold the <a href="/en/XUL/stringbundle" title="en/XUL/stringBundle">stringbundle</a> element defined in the overlay. The variable is declared using <em>let,</em> which is similar to <em>var</em> but with more restricted scope. Here you can read more about <a href="/en/JavaScript/Reference/Statements/let" title="let"><span class="external">let declarations</span>.</a></p> +<p>Just like in regular JS, we can use the <a href="/en/DOM" title="en/DOM"><span class="external">DOM</span></a> (Document Object Model) in order to manipulate the XUL document. First we get a reference of the <a href="/en/XUL/stringbundle" title="en/XUL/stringbundle"><span class="external">stringbundle element</span></a> in the document. This is a special element that allows us to obtain localized strings dynamically, by only providing a "key" that identifies the string. This is what we do on the second line. We call the <a href="/en/XUL/stringbundle#m-getString" title="en/XUL/stringbundle#m-getString">getString method</a> of the bundle element and get the localized message to be displayed. We then call the <a href="/en/DOM/window.alert" title="en/DOM/window.alert">window.alert</a> function with the message, just like we would do in an HTML document.</p> +<h3 id="Locale">Locale</h3> +<p>There are two types of locale files: DTD and properties, and in this example we use them both. DTD is the most efficient way of showing text in XUL, so you should use it whenever possible. It is somewhat inflexible so it can't be used for dynamically generated text, hence the need for an alternate way of getting localized strings.</p> +<p>Looking back at the menu code, you probably noticed some attributes such as this:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java">label=<span class="code-quote">"&xulschoolhello.hello.label;"</span> accesskey=<span class="code-quote">"&xulschoolhello.helloItem.accesskey;"</span></pre> + </div> +</div> +<p>These attributes define the text that you see on the menus, and they are string keys that are defined in our DTD file, <em>browserOverlay.dtd</em>. The DTD file was included in the XUL file with the following code:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java"><!DOCTYPE overlay SYSTEM "chrome://xulschoolhello/locale/browserOverlay.dtd" ></pre> + </div> +</div> +<p>And in the DTD file you can see the association between keys and localized strings:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java"><!ENTITY xulschoolhello.hello.label <span class="code-quote">"Hello World!"</span>> +<!ENTITY xulschoolhello.helloMenu.accesskey <span class="code-quote">"l"</span>> +<!ENTITY xulschoolhello.helloItem.accesskey <span class="code-quote">"H"</span>></pre> + </div> +</div> +<p>Notice that on the XUL file you enclose the string key with <em>&</em> and <em>;</em> while on the DTD file you only specify the key. You may get weird parsing errors or incorrect localization if you don't get this right.</p> +<p>Access keys are the shortcuts that allow you to quickly navigate a menu using only the keyboard. They are also the only way to navigate a menu for people with accessibility problems, such as partial or total blindness, or physical disabilities that make using a mouse very difficult or impossible. You can easily recognize the access keys on Windows because the letter that corresponds to the access key is underlined, as in the following image:</p> +<div> + <p><img alt="" class="internal" src="../../../../@api/deki/files/4226/=accesskeys.png" style="width: 167px; height: 58px;"></p> +</div> +<p>Most user interface controls have the <em>accesskey</em> attribute, and you should use it. The value of the access key is localized because it should match a letter in the label text. You should also be careful to avoid access key repetition. For example, within a menu or submenu, access keys should not be repeated. In a window you have to be more careful picking access keys because there are usually more controls there. You have to be specially careful when picking access keys on an overlay. In our case, we can't use the letter "H" as an accesskey in the Main menu item, because it would be the same as the access key in the Help menu. Same goes with "W" and the Window menu on Mac OS. So we settled on the letter "l".</p> +<p>DTD strings are resolved and set when the document is being loaded. If you request the <em>label</em> attribute value for the Hello World menu using DOM, you get the localized string, not the string key. You cannot dynamically change an attribute value with a new DTD key, you have to set the new value directly:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="brush: js">let helloItem = document.getElementById(<span class="code-quote">"xulschoolhello-hello-menu-item"</span>); + +<span class="code-comment">// The alert will say <span class="code-quote">"Hello World!"</span> +</span>alert(helloItem.getAttribute(<span class="code-quote">"label"</span>)); +<span class="code-comment">// Wrong +</span>helloItem.setAttribute(<span class="code-quote">"label"</span>, <span class="code-quote">"&</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.hello2.label;"</span>); +<span class="code-comment">// Better +</span>helloItem.setAttribute(<span class="code-quote">"label"</span>, <span class="code-quote">"Alternate message"</span>); +<span class="code-comment">// Right! +</span>helloItem.setAttribute(<span class="code-quote">"label"</span>, someStringBundle.getString(<span class="code-quote">"</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.hello2.label"</span>));</pre> + </div> +</div> +<p>This is the reason DTD strings are not a solution for all localization cases, and the reason we often need to include string bundles in XUL files:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java"><stringbundleset id="stringbundleset"> + <stringbundle id="xulschoolhello-string-bundle" + src="chrome://xulschoolhello/locale/browserOverlay.properties" /> +</stringbundleset></pre> + </div> +</div> +<p>The <a href="/en/XUL/stringbundleset" title="en/XUL/stringbundleset">stringbundleset</a> element is just a container for <a href="/en/XUL/stringbundle" title="en/XUL/stringbundle">stringbundle</a> elements. There should only be one per document, which is the reason why we overlay the <em>stringbundleset</em> that is in <em>browser.xul</em>, hence the very generic id. We don't include the <em>insertbefore</em> or <em>insertafter</em> attributes because the ordering of string bundles doesn't make a difference. The element is completely invisible. If you don't include any of those ordering attributes in an overlay element, Firefox will just append your element as the last child of the parent element.</p> +<p>All you need for the string bundle is an id (to be able to fetch the element later) and the chrome path to the properties file. And, of course, you need the properties file:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java">xulshoolhello.greeting.label = Hi! How are you?</pre> + </div> +</div> +<p>The whitespace around the equals sign is ignored. Just like in <em>install.rdf</em>, comments can be added using the # character at the beginning of the line. Empty lines are ignored as well.</p> +<p>You will often want to include dynamic content as part of localized strings, like when you want to inform the user about some stat related to the extension. For example: "Found 5 words matching the search query". Your first idea would probably be to simply concatenate strings, and have one "Found" property and another "words matching..." property. This is not a good idea. It greatly complicates the work of localizers, and grammar rules on different languages may change the ordering of the sentence entirely. For this reason it's better to use parameters in the properties:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java">xulshoolhello.search.label = Found %S words matching the search query!</pre> + </div> +</div> +<p>Then you use <a href="/en/XUL/stringbundle#m-getFormattedString" title="en/XUL/stringbundle#m-getFormattedString">getFormattedString</a> instead of <em>getString</em> in order to get the localized string. Thanks to this we don't need to have multiple properties, and life is easier for translators. You can read more about it on the <a href="/en/XUL_Tutorial/Property_Files#Text_Formatting" title="en/XUL Tutorial/Property Files#Text Formatting">Text Formatting section</a> of the XUL Tutorial. Also have a look at the <a href="/en/Localization_and_Plurals" title="en/Localization and Plurals">Plurals and Localization</a> article, that covers a localization feature in Firefox that allows you to further refine this last example to handle different types of plural forms that are also language-dependent.</p> +<h3 id="Skin">Skin</h3> +<p>Styling XUL is very similar to styling HTML. We'll look into some of the differences when we cover the XUL Box Model, and other more advanced topics. There isn't much styling you can do to a minimal menu and a very simple alert message, so the Hello World extension only includes an empty CSS file and the compulsory global skin file:</p> +<div class="code panel" style="border-width: 1px;"> + <div class="codeContent panelContent"> + <pre class="code-java"><?xml-stylesheet type=<span class="code-quote">"text/css"</span> href=<span class="code-quote">"chrome:<span class="code-comment">//global/skin/"</span> ?> +</span><?xml-stylesheet type=<span class="code-quote">"text/css"</span> + href=<span class="code-quote">"chrome:<span class="code-comment">//xulschoolhello/skin/browserOverlay.css"</span> ?></span></pre> + </div> +</div> +<p>The global skin CSS file holds the default styles for all XUL elements and windows. Forgetting to include this file in a XUL window usually leads to interesting and often unwanted results. In our case we don't really need to include it, since we're overlaying the main browser XUL file, and that file already includes this global CSS. At any rate it's better to always include it. This way it's harder to make the mistake of not including it. You can enter the chrome path in the location bar and inspect the file if you're curious.</p> +<p>This covers all of the files in the Hello World extension. Now you should have an idea of the basics involved in extension development, so now we'll jump right in and set up a development environment. But first, a little exercise.</p> +<h2 id="Exercise">Exercise</h2> +<p>Make the following changes to the example extension:</p> +<ul> + <li>Edit the welcome message that is displayed in the alert window.</li> + <li>Move the Hello World menu to the <em>Tools</em> menu, where it belongs.</li> +</ul> +<p>Repackage the XPI. Issue the following command from within the extension root directory on Linux or Mac OS X:</p> +<pre>zip ../xulschoolhello2.xpi **/* +</pre> +<p>On Windows, use a ZIP tool to compress all files and subdirectories within the extension root directory. Name the file with extension <em>.xpi</em></p> +<p>Re-install the XPI. You can just drag the XPI file to the browser and it will be installed locally.</p> +<p>Test it and verify your changes worked. If you run into problems at installation, it's likely that you didn't reproduce the XPI structure correctly, maybe adding unnecessary folders.</p> +<div class="note"> + <strong>Note:</strong> Packaging an extension is really just creating a ZIP archive of the contents of the main folder, then changing the filename extension to <code>.XPI</code>. Do <strong>not</strong> zip the containing folder, just its contents. The <code>content</code> folder, <code>chrome.manifest</code>, <code>install.rdf</code>, and other files and directories should be at the root level of your archive. If you zip the containing folder, your extension will not load.</div> +<p>Note that the <em>Tools </em>menu is hidden by default on Firefox 4 and above, on Windows and some Linux distributions. Check <em>Menu Bar </em>under the <em>Options </em>menu of the Firefox menu button to enable it.</p> +<p>Once you're done, you can look at this reference solution: <a href="/@api/deki/files/5141/=xulschoolhello2.xpi" title="https://developer.mozilla.org/@api/deki/files/5141/=xulschoolhello2.xpi">Hello World 2</a>.</p> +<p>{{ PreviousNext("XUL_School/Getting_Started_with_Firefox_Extensions", "XUL_School/Setting_Up_a_Development_Environment") }}</p> +<p><span style="font-size: small;">This tutorial was kindly donated to Mozilla by Appcoast.</span></p> diff --git a/files/id/archive/mozilla/xulrunner/index.html b/files/id/archive/mozilla/xulrunner/index.html new file mode 100644 index 0000000000..2bc8fd2c15 --- /dev/null +++ b/files/id/archive/mozilla/xulrunner/index.html @@ -0,0 +1,84 @@ +--- +title: XULRunner +slug: Archive/Mozilla/XULRunner +translation_of: Archive/Mozilla/XULRunner +--- +<div class="callout-box"> + <strong><a href="/en-US/docs/Getting_started_with_XULRunner" title="Getting_started_with_XULRunner">Getting Started with XULRunner</a></strong><br> + A short introduction to XULRunner.</div> +<div> + <span class="seoSummary"><strong>XULRunner</strong> is a Mozilla runtime package that can be used to bootstrap <a href="/en-US/docs/XUL" title="XUL">XUL</a>+<a href="/en-US/docs/XPCOM" title="XPCOM">XPCOM</a> applications that are as rich as Firefox and Thunderbird. It provides mechanisms for installing, upgrading, and uninstalling these applications.</span> XULRunner also provides <code>libxul</code>, a solution which allows the embedding of Mozilla technologies in other projects and products.</div> +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 id="Releases" name="Releases">Releases</h2> + <div class="note"> + <p>XULRunner can be <a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/latest" title="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/">downloaded from ftp.mozilla.org</a>. Please read the <a class="internal" href="/en-US/docs/XULRunner_1.9.2_Release_Notes" title="XULRunner 1.9.2 Release Notes">release notes</a> for installation, uninstallation, and other information.</p> + <p>Firefox 3 and later ships with a private XULRunner package, which can run any compatible XULRunner application using the <code>-app</code> switch.</p> + <p><a href="/en-US/docs/XULRunner/Old_Releases" title="XULRunner/Old_Releases">Older builds</a> are also available.</p> + </div> + <h2 id="Overview" name="Overview">Overview</h2> + <ul> + <li>{{ interwiki('wikimo', 'XULRunner', 'Development Plan') }}</li> + <li><a href="/en-US/docs/XULRunner/What_XULRunner_Provides" title="XULRunner/What_XULRunner_Provides">What XULRunner Provides</a></li> + <li><a href="/en-US/docs/XULRunner_FAQ" title="XULRunner_FAQ">XULRunner FAQ</a></li> + <li>Nightly builds: <a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/nightly/latest-trunk/">unstable-trunk</a></li> + </ul> + <h2 class="Documentation" id="Documentation" name="Documentation">Documentation</h2> + <dl> + <dt> + <a href="/en-US/docs/Getting_started_with_XULRunner" title="Getting_started_with_XULRunner">Getting Started with XULRunner</a></dt> + <dd> + Short tutorial on building desktop applications with XULRunner.</dd> + <dt> + <a href="/en-US/docs/XUL_Tutorial" title="XUL Tutorial">XUL Tutorial</a></dt> + <dd> + Once you have a working XULRunner application, use the XUL tutorial to expand it into a fantastic XUL application.</dd> + <dt> + <a href="/en-US/docs/XULRunner_tips" title="XULRunner_tips">XULRunner tips</a></dt> + <dd> + A collection of tips for working with XULRunner.</dd> + <dt> + <a href="/en-US/docs/XULRunner/Deploying_XULRunner_1.8" title="XULRunner/Deploying_XULRunner_1.8">Deploying XULRunner</a></dt> + <dd> + An introduction on how to package your application with XULRunner.</dd> + <dt> + <a href="/en-US/docs/XULRunner_Hall_of_Fame" title="XULRunner_Hall_of_Fame">XULRunner Hall of Fame</a></dt> + <dd> + Tracks all available applications based on XULRunner.</dd> + <dt> + <a href="/en-US/docs/Developer_Guide/Build_Instructions" title="Build_Documentation">Build Documentation</a></dt> + <dd> + Learn how to get the source and build it.</dd> + <dt> + <a href="/en-US/docs/Debugging_a_XULRunner_Application" title="Debugging_a_XULRunner_Application">Debug Documentation</a></dt> + <dd> + Steps to configure Venkman to debug your App</dd> + <dt> + <a class="external" href="http://zenit.senecac.on.ca/wiki/index.php/XULRunner_Guide">XULRunner Guide</a></dt> + <dd> + A fairly complete, but outdated, introduction and tutorial for XULRunner which collates much of the documentation found here.</dd> + </dl> + <p><span class="alllinks"><a href="/en-US/docs/tag/XULRunner" title="tag/XULRunner">View all...</a></span></p> + </td> + <td> + <h2 class="Community" id="Community" name="Community">Community</h2> + <ul> + <li>View Mozilla forums... {{ DiscussionList("dev-platform", "mozilla.dev.platform") }}</li> + <li><a class="link-irc" href="irc://irc.mozilla.org/#xulrunner">#xulrunner on irc.mozilla.org</a></li> + <li><a href="/en-US/docs/XULRunner/Community" title="XULRunner/Community">Other community links...</a></li> + </ul> + <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related topics</h2> + <ul> + <li><a href="/en-US/docs/XUL" title="XUL">XUL</a></li> + </ul> + <h2 id="See_also" name="See_also">See also</h2> + <ul> + <li><a class="external" href="http://www.kodewerx.org/wiki/A_Brief_Introduction_To_XULRunner:_Part_1" title="http://www.kodewerx.org/wiki/A_Brief_Introduction_To_XULRunner:_Part_1">A brief introduction to XULRunner</a></li> + </ul> + </td> + </tr> + </tbody> +</table> +<p> </p> diff --git a/files/id/archive/web/index.html b/files/id/archive/web/index.html new file mode 100644 index 0000000000..1784816dc4 --- /dev/null +++ b/files/id/archive/web/index.html @@ -0,0 +1,15 @@ +--- +title: Arsip dokumentasi Web terbuka +slug: Archive/Web +tags: + - Archived + - NeedsTranslation + - TopicStub + - Web +translation_of: Archive/Web +--- +<p>{{obsolete_header}}</p> + +<p>Dokumentasi yang tercantum di bawah ini adalah arsip, materi usang tentang topik Web terbuka.</p> + +<p>{{LandingPageListSubpages}}</p> diff --git a/files/id/archive/web/standards-compliant_authoring_tools/index.html b/files/id/archive/web/standards-compliant_authoring_tools/index.html new file mode 100644 index 0000000000..2126ebd25c --- /dev/null +++ b/files/id/archive/web/standards-compliant_authoring_tools/index.html @@ -0,0 +1,25 @@ +--- +title: Standards-Compliant Authoring Tools +slug: Archive/Web/Standards-Compliant_Authoring_Tools +translation_of: Archive/Web/Standards-Compliant_Authoring_Tools +--- +<p>Creating cross-browser code upfront will save you lots of time quality testing your web content. The following authoring tools adhere to the W3 standards. If you're using older versions of tools that rely on old browser bugs or generate browser-specific code, it may be time to upgrade:</p> +<ul> + <li><a class="external" href="http://www.nvu.com/">NVu</a> is a standalone editor created from the remains of Mozilla Composer. Currently the work done on NVu is being ported back to mozilla source code.</li> + <li><a class="external" href="http://www.chami.com/html-kit/">HTML-Kit</a> is a full-featured, low priced editor designed to help HTML, XHTML and XML authors to edit, format, lookup help, validate, preview and publish web pages. Validation is done with HTML Tidy, so you can verify standards compliance.</li> + <li><a class="external" href="http://www.macromedia.com/software/dreamweaver/">Macromedia™ Dreamweaver™ CS6</a></li> + <li><a class="external" href="http://www.westciv.com/style_master/">Style Master</a> and <a class="external" href="http://www.westciv.com/layout_master/">Layout Master</a> by Western Civilisation</li> +</ul> +<p>Some caveats: It appears that tools currently available from Namo generate IE-specific or Netscape 4-specific code that may require extra debugging for compatibility with standards-based browsers. Newer versions of Microsoft FrontPage™ have improved, however be sure not to rely on FrontPage-specific extensions for critical website content or functionality. Some versions of Microsoft Word create invalid HTML code that only works with Internet Explorer. Always be sure to <a href="/en-US/docs/Tools/Validators">validate</a> your web pages.</p> +<div class="originaldocinfo"> + <h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2> + <ul> + <li>Last Updated Date: January 30th, 2003</li> + <li>Copyright © 2001-2003 Netscape. All rights reserved.</li> + </ul> +</div> +<h2 id="Related_links" name="Related_links">Related links</h2> +<ul> + <li><a href="/en-US/docs/Tools/Validators">Validators</a></li> + <li><a href="/en-US/docs/HTML">HTML Central</a></li> +</ul> diff --git a/files/id/developer_guide/index.html b/files/id/developer_guide/index.html new file mode 100644 index 0000000000..f1a8f48168 --- /dev/null +++ b/files/id/developer_guide/index.html @@ -0,0 +1,145 @@ +--- +title: Developer Guide +slug: Developer_Guide +tags: + - Developing Mozilla + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Developer_guide +--- +<p>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.</p> +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Documentation_topics">Documentation topics</h2> + <dl> + <dt> + <a href="/en-US/docs/Introduction" title="Introduction">Getting Started</a></dt> + <dd> + A step-by-step beginner's guide to getting involved with Mozilla.</dd> + </dl> + <dl> + <dt> + <a class="internal" href="/en-US/docs/Developer_Guide/Source_Code" title="en-US/docs/Developer_Guide/Source_Code">Working with Mozilla Source Code</a></dt> + <dd> + A code overview, how to get the code, and the coding style guide.</dd> + <dt> + <a class="internal" href="/en-US/docs/Developer_Guide/Build_Instructions" title="en-US/docs/Developer_Guide/Build_Instructions">Build Instructions</a></dt> + <dd> + How to build Firefox, Thunderbird, SeaMonkey, or other Mozilla applications.</dd> + <dt> + <a href="/en-US/docs/Developer_Guide/Development_process_overview" title="en-US/docs/Developer Guide/Development process overview">Development process overview</a></dt> + <dd> + An overview of the entire Mozilla development process.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Multiple_Firefox_Profiles" title="en-US/docs/Mozilla/Multiple_Firefox_Profiles">Managing multiple profiles</a></dt> + <dd> + 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.</dd> + <dt> + <a class="internal" href="/en-US/docs/Mozilla_automated_testing" title="en-US/docs/Mozilla automated testing">Automated Testing</a></dt> + <dd> + How to run Mozilla's automated tests, and how to write new tests.</dd> + <dt> + <a class="internal" href="/en-US/docs/Developer_Guide/How_to_Submit_a_Patch" title="en-US/docs/Getting your patch in the tree">How to submit a patch</a></dt> + <dd> + 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.</dd> + <dt> + <a href="/en-US/docs/Developer_Guide/Getting_documentation_updated" title="en-US/docs/Developer_Guide/Getting documentation updated">Getting documentation updated</a></dt> + <dd> + How to ensure that documentation is kept up to date as you develop.</dd> + <dt> + <a class="internal" href="/en-US/docs/Mozilla_Modules_and_Module_Ownership" title="en-US/docs/Mozilla Modules and Module Ownership">Mozilla modules and module ownership</a></dt> + <dd> + This article provides information about Mozilla's modules, what the role of a module owner is, and how module owners are selected.</dd> + <dt> + <a class="internal" href="/en-US/docs/Code_snippets" title="en-US/docs/Code_snippets">Code snippets</a></dt> + <dd> + Useful code samples for a wide variety of things you might need to figure out how to do.</dd> + <dt> + <a class="internal" href="/en-US/docs/Mozilla_Development_Strategies" title="en-US/docs/Mozilla Development Strategies">Mozilla development strategies</a></dt> + <dd> + Tips for how to make the most of your time working on the Mozilla project.</dd> + <dt> + <a class="internal" href="/en-US/docs/Debugging" title="en-US/docs/Debugging">Debugging</a></dt> + <dd> + Find helpful tips and guides for debugging Mozilla code.</dd> + <dt> + <a href="/en-US/docs/Performance" title="en-US/docs/Performance">Performance</a></dt> + <dd> + Performance guides and utilities to help you make your code perform well (and to play nicely with others).</dd> + <dt> + <a class="internal" href="/en-US/docs/The_Mozilla_platform" title="en-US/docs/The Mozilla platform">The Mozilla platform</a></dt> + <dd> + Information about the workings of the Mozilla platform.</dd> + <dt> + <a href="/en-US/docs/Developer_Guide/Adding_APIs_to_the_navigator_object" title="en-US/docs/Developer_Guide/Adding_APIs_to_the_navigator_object">Adding APIs to the navigator object</a> {{ gecko_minversion_inline("9.0") }}</dt> + <dd> + How to augment the {{ domxref("window.navigator") }} object with additional APIs.</dd> + <dt> + <a href="/en-US/docs/Developer_Guide/Interface_Compatibility" title="en-US/docs/Developer Guide/Interface Compatibility">Interface Compatibility</a></dt> + <dd> + Guidelines for modifying scriptable and binary APIs in Mozilla.</dd> + <dt> + <a href="/en-US/docs/Developer_Guide/Customizing_Firefox" title="en-US/docs/Developer Guide/Customizing Firefox">Customizing Firefox</a></dt> + <dd> + Information about creating customized versions of Firefox.</dd> + <dt> + <a href="/en-US/docs/Developer_Guide/Virtual_ARM_Linux_environment" title="Virtual ARM Linux environment">Virtual ARM Linux environment</a></dt> + <dd> + How to set up an ARM emulator running Linux for testing ARM-specific, but not necessarily platform-specific, code. Useful for mobile developers.</dd> + <dt> + <a href="/en-US/docs/Introduction/Obsolete_Build_Caveats_and_Tips" title="Obsolete Build Caveats and Tips">Obsolete Build Caveats and Tips</a></dt> + <dd> + 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.</dd> + </dl> + </td> + <td> + <h2 class="Tools" id="Tools">Tools</h2> + <dl> + <dt> + <a class="link-https" href="https://bugzilla.mozilla.org/" title="https://bugzilla.mozilla.org/">Bugzilla</a></dt> + <dd> + The <a class="internal" href="/en-US/docs/Bugzilla" title="en-US/docs/Bugzilla">Bugzilla</a> database used to track issues for Mozilla projects.</dd> + <dt> + <a class="external" href="http://mxr.mozilla.org/" title="http://mxr.mozilla.org/">MXR</a></dt> + <dd> + Browse and search the Mozilla source code repository on the Web.</dd> + <dt> + <a class="external" href="http://bonsai.mozilla.org/cvsqueryform.cgi" title="http://bonsai.mozilla.org/cvsqueryform.cgi">Bonsai</a></dt> + <dd> + The <a class="internal" href="/en-US/docs/Bonsai" title="en-US/docs/Bonsai">Bonsai</a> tool lets you find out who changed what file in the repository, and when they did it.</dd> + <dt> + <a class="internal" href="/en-US/docs/Mercurial" title="en-US/docs/Mercurial">Mercurial</a></dt> + <dd> + The distributed version-control system used to manage Mozilla's source code.</dd> + <dt> + <a class="external" href="http://tinderbox.mozilla.org/showbuilds.cgi" title="http://tinderbox.mozilla.org/showbuilds.cgi">Tinderbox</a></dt> + <dd> + <a class="internal" href="/en-US/docs/Tinderbox" title="en-US/docs/Tinderbox">Tinderbox</a> 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.</dd> + <dt> + <a class="internal" href="/en-US/docs/Crash_reporting" title="en-US/docs/Crash reporting">Crash tracking</a></dt> + <dd> + Information about the <a class="link-https" href="https://crash-reports.mozilla.com/reports" title="https://crash-reports.mozilla.com/reports">Socorro</a> and <a class="external" href="http://talkback-public.mozilla.org/search/start.jsp" title="http://talkback-public.mozilla.org/search/start.jsp">Talkback</a> crash reporting systems.</dd> + <dt> + <a class="external" href="http://graphs.mozilla.org/" title="http://graphs.mozilla.org/">Performance tracking</a></dt> + <dd> + See performance information for Mozilla projects.</dd> + <dt> + <a href="/en-US/docs/Developer_Guide/Callgraph" title="en-US/docs/Developing Mozilla/Callgraph">Callgraph</a></dt> + <dd> + A tool to help perform static analysis of the Mozilla code by generating callgraphs automatically.</dd> + <dt> + <a class="external" href="http://www.mozilla.org/community/developer-forums.html" title="http://www.mozilla.org/community/developer-forums.html">Developer forums</a></dt> + <dd> + A topic-specific list of discussion forums where you can talk about Mozilla development issues.</dd> + <dt> + <a class="external" href="http://www.brianbondy.com/mozilla/cheatsheet/" title="http://www.brianbondy.com/mozilla/cheatsheet/">Mozilla Platform Development Cheat Sheet</a></dt> + <dd> + Brian Bondy's list of frequently referenced information for platform developers.</dd> + </dl> + </td> + </tr> + </tbody> +</table> +<p> </p> 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 new file mode 100644 index 0000000000..8465f45f06 --- /dev/null +++ b/files/id/developer_guide/virtual_arm_di_lingkungan_linux/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 +--- +<h1 id="Pengujian_dengan_Linux_di_arsitektur_ARM_menggunakan_QEMU">Pengujian dengan Linux di arsitektur ARM menggunakan QEMU</h1> +<p>Halaman ini menejelaskan bagaimana cara untuk mendapatkan lingkungan <em>virtual</em> 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.</p> +<h2 id="Prasyarat">Prasyarat</h2> +<p>Petunjuk ini mengasumsikan sistem host yang Anda gunakan adalah Ubuntu Linux juga karena memudahkan kita untuk memasang perangkat lunak yang diperlukan dari repositori luar.</p> +<h2 id="Target_boardCPU">Target board/CPU</h2> +<p>QEMU mendukung beberapa board dan CPU. Dari semua yang Saya uji, saya hanya bisa mendapatkan <em>Versatile Express</em> 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).</p> +<h2 id="Instalasai_perangkat_lunak_yang_dibutuhkan">Instalasai perangkat lunak yang dibutuhkan</h2> +<pre># 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</pre> +<h3 id="Mengunduh_rilis_Linaro_dan_paket_perangkat_keras">Mengunduh rilis Linaro dan paket perangkat keras</h3> +<p>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.</p> +<pre>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 +</pre> +<h3 id="Membuat_image">Membuat image</h3> +<p>''(Langkah-langkah berikut kita pinjam dari <a class="link-https" href="https://wiki.linaro.org/PeterMaydell/QemuVersatileExpress" rel="freelink">https://wiki.linaro.org/PeterMaydell...rsatileExpress</a> dan sedikit dimodifikasi).'' Menggunakan peralatan linaro, Anda dapat dengan mudah membuat SD card image dari paket unduhan (ini akan memakan waktu cukup lama):</p> +<pre>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 +</pre> +<h3 id="Mengekstart_kernel_dan_initrd">Mengekstart kernel dan initrd</h3> +<p>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":</p> +<pre>sudo mount -o loop,offset="$(file vexpress.img | awk 'BEGIN { RS=";"; } /partition 2/ { print $7*512; }')" \ + -t auto vexpress.img /mnt/tmp +</pre> +<p>Sekarang salin kernel dan initrd file ke direktori saat ini (CATATAN: Nama file dapat berbeda disetiap pembuatan!):</p> +<pre>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 +</pre> +<h2 id="Memulai_QEMU">Memulai QEMU</h2> +<p>Anda dapat memulai QEMU sekarang dengan perintah berikut:</p> +<pre>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 +</pre> +<p>Bebrapa penjelasan dari opsi yang tidak jelas pada perintah diatas:</p> +<ul> + <li>''-redir tcp:2200::22'' pengalihan lalu lintas TCP pada port host 2200 ke mesin tamu (QEMU) port 22. Ini akan memungkinkan kita untuk SSH ke mesin dilain waktu dengan menghubungkan ke localhost port 2200.</li> + <li>''-m 512'' menetapkan kita ingin menggunakan 512 MB RAM. Anda dapat menyesuaikan ini, tapi pastikan Anda juga mengubahnya di ''-append'' string.</li> + <li>''-drive file=vexpress.img,if=sd,cache=writeback'' Menempelkan image kita sebagai SD card. Saya diberitahu oleh orang-orang Linaro bahwa cara ini lebih cepat I/Onya dbiandungkan opsi tardisional ''-sd''.</li> +</ul> +<p>Setelah memulai mesin, Anda akan bertemu dengan Linux shell dalam layar QEMU setelah beberapa waktu startup</p> +<h3 id="Menggunakan_SSH">Menggunakan SSH</h3> +<p>Untuk menggunakan SSH, Anda harus terlebih dahulu mengaktifkan jaringan dan memasang paket SSH servere. Mengaktifkan jaringan untuk sementara menggunakan perintah berikut:</p> +<pre>ifconfig eth0 up +dhclient eth0 +</pre> +<p>Sekarang coba pasang SSH:</p> +<pre>apt-get install openssh-server +</pre> +<p>Untuk membuat jaringan berubah menjadi permanen, edit file ''/etc/network/interfaces'' (e.g. dengan ''vi'') dan tambahkan baris berikut:</p> +<pre>auto eth0 +iface eth0 inet dhcp +</pre> +<p>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.</p> diff --git a/files/id/games/index.html b/files/id/games/index.html new file mode 100644 index 0000000000..fd78f805b8 --- /dev/null +++ b/files/id/games/index.html @@ -0,0 +1,95 @@ +--- +title: Pengembangan games +slug: Games +translation_of: Games +--- +<div>{{GamesSidebar}}</div> + +<div class="summary"> +<p><span class="seoSummary">Memainkan <em>games </em>adalah salah satu aktivitas terpopuler yang dilakukan di komputer. Teknologi baru berkembang secara konstan untuk memungkinkan pengembangan <em>games </em>yang lebih baik sekaligus lebih bertenaga sehingga dapat dijalankan di peramban standar manapun.</span></p> +</div> + +<div class="column-container"> +<div class="column-half"> +<h2 id="Kembangkan_web-games">Kembangkan <em>web-games</em></h2> + +<p>Selamat datang di Pusat Pengembangan <em>Game </em>MDN! Disini kami menyediakan sarana-prasarana bagi para pengembang web yang ingin mengembangkan <em>games</em>. Anda akan menemui sejumlah artikel bermanfaat mengenai tutorial dan teknik yang dapat Anda temui di bagian kiri Menu Utama.</p> + +<p>Kami juga menyediakan bagian referensi, sehingga Anda dapat menemukan informasi mengenai semua API yang umum digunakan dalam pengembangan games dengan mudah, ditambah daftar <a href="/en-US/docs/Games/Tools/Engines_and_tools"><em>engine</em> dan <em>tools</em></a>, serta <a href="/en-US/docs/Games/Examples">contoh <em>games</em></a> yang kami sediakan.</p> + +<div class="note"> +<p><strong>Catatan</strong>: Anda sebaiknya telah menguasai setidaknya teknologi web dasar — seperti HTML, CSS dan JavaScript — sebelum mencoba untuk membuat webgames. <a href="/en-US/docs/Learn">Area Belajar</a> adalah tempat yang bagus untuk belajar dan melatih diri jika Anda benar-benar seorang pemula.</p> +</div> + +<dl> +</dl> +</div> + +<div class="column-half"> +<h2 id="Port_native_game_to_the_Web">Port native game to the Web</h2> + +<p><span class="short_text" id="result_box" lang="id"><span>Jika Anda seorang</span> <span>pengembang</span> <span>asli</span></span> (<span class="short_text" id="result_box" lang="id"><span>misalnya</span> <span>menulis</span> <span>game</span> <span>di</span> <span>C</span> <span>++</span></span>), dan kamu are interested in how you can port your games over to the Web, you should learn more about our <a href="http://kripken.github.io/emscripten-site/index.html">Emscripten</a> tool — this is An LLVM to JavaScript compiler, which takes LLVM bytecode (e.g. generated from C/C++ using Clang, or from another language) and compiles that into <a href="/en-US/docs/Games/Tools/asm.js">asm.js</a>, which can be run on the Web.</p> + +<p><span class="short_text" id="result_box" lang="id"><span>Untuk memulai</span><span>, lihat</span></span>:</p> + +<ul> + <li><a href="http://kripken.github.io/emscripten-site/docs/introducing_emscripten/about_emscripten.html">Tentang Emscripten</a> <span class="short_text" id="result_box" lang="id"><span>untuk</span> <span>pengenalan</span> <span>termasuk</span> <span>rincian</span> <span>tingkat tinggi</span><span>.</span></span></li> + <li><a href="http://kripken.github.io/emscripten-site/docs/getting_started/downloads.html">Unduh dan Pasang </a><span class="short_text" id="result_box" lang="id"><span>untuk menginstal</span> <span>toolchain</span><span>.</span></span></li> + <li><a href="http://kripken.github.io/emscripten-site/docs/getting_started/Tutorial.html">Panduan Emscripten </a> <span id="result_box" lang="id"><span>untuk</span> <span>sebuah tutorial</span> <span>mengajarkan Anda</span> <span>bagaimana untuk memulai</span><span>.</span></span></li> +</ul> +</div> +</div> + +<div class="column-container"> +<div class="column-half"> +<h2 id="Contoh">Contoh</h2> + +<p>For a list of web game examples, see our <a href="/en-US/docs/Games/Examples">examples page</a>. Also check out <a href="http://www.openwebgames.com/">openwebgames.com</a> for more useful resources and examples!</p> +</div> +</div> + +<p><a href="http://www.openwebgames.com"><img alt="" src="https://mdn.mozillademos.org/files/12790/owg-logo-dark.svg" style="display: block; margin: 0px auto; width: 400px;"></a></p> + +<h2 id="See_also">See also</h2> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="http://buildnewgames.com/">Build New Games</a></dt> + <dd>A collaborative site featuring a large number of open web game development tutorials. Hasn't been very active recently, but still holds some nice resources.</dd> + <dt><a href="http://creativejs.com/">Creative JS</a></dt> + <dd>A collection of impressive JavaScript techniques and experiments, not specific to games, but helpful nonetheless. Hasn't been very active recently, but still holds some nice resources.</dd> + <dt><a href="http://gameprogrammingpatterns.com/">Game programming patterns</a></dt> + <dd>An online book, written by Bob Nystrom, which discusses programming patterns in the context of game development with the aim of helping game developers produce more effective, efficient code.</dd> + <dt><a href="http://blog.artillery.com/">Artillery blog</a></dt> + <dd>HTML5 games company Artillery have some useful articles on their blog.</dd> + <dt><a href="https://leanpub.com/buildinggamesforfirefoxos/">Building games for Firefox OS</a></dt> + <dd>A quick guide to creating 2D games with HTML5, for distribution on Firefox OS and other mobile platforms.</dd> + <dt><a href="http://gamedevjsweekly.com/">Gamedev.js Weekly</a></dt> + <dd>Weekly newsletter about HTML5 game development, sent every Friday. Contains the latest articles, tutorials, tools, and resources.</dd> + <dt><a href="http://www.html5gamedevs.com/">HTML5 Game Devs Forum</a></dt> + <dd>Forums for developers, framework creators and publishers. Ask questions, get feedback, help others.</dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="http://html5gameengine.com/">HTML5 Game Engine</a></dt> + <dd>List of the most popular HTML5 game frameworks along with their rating, features and samples.</dd> + <dt><a href="http://www.jsbreakouts.org/">JSBreakouts</a></dt> + <dd>Compare JavaScript Breakout clones in different frameworks to help you choose the right one for you.</dd> + <dt><a href="http://gamedevelopment.tutsplus.com/">Tuts+ Game Development</a></dt> + <dd>Tutorials and articles about game development in general.</dd> + <dt><a href="http://webchat.freenode.net/?channels=bbg">#BBG IRC chat</a></dt> + <dd>Talk with the developers directly in real time.</dd> + <dt><a href="http://html5devstarter.enclavegames.com/">HTML5 Gamedev Starter</a></dt> + <dd>Starter for the new game developers, a curated list of links to various, useful resources around the web.</dd> + <dt><a href="http://js13kgames.com/">js13kGames</a></dt> + <dd>JavaScript coding competition for HTML5 game developers with the file size limit set to 13 kilobytes. All the submitted games are available in a readable form on GitHub.</dd> + <dt><a href="https://hacks.mozilla.org/category/games/">Mozilla Hacks blog</a></dt> + <dd>Games category on the Mozilla Hacks blog containing interesting gamedev related articles.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Games/Visual-js_game_engine">Visual-js game engine</a></dt> + <dd>2d/3d/webSocket orientend game engine. Comes with tools for windows only. Hosted on bitbucket projects site. </dd> +</dl> +</div> +</div> diff --git a/files/id/games/publishing_games/game_promotion/index.html b/files/id/games/publishing_games/game_promotion/index.html new file mode 100644 index 0000000000..50cd711e48 --- /dev/null +++ b/files/id/games/publishing_games/game_promotion/index.html @@ -0,0 +1,86 @@ +--- +title: Game promotion +slug: Games/Publishing_games/Game_promotion +translation_of: Games/Publishing_games/Game_promotion +--- +<div>{{GamesSidebar}}</div> + +<p class="summary">Mengembangkan dan menerbitkan game Anda tidak cukup. Anda harus memberi tahu dunia bahwa Anda memiliki sesuatu yang menarik yang dapat dinikmati orang-orang. Ada banyak cara untuk mempromosikan game Anda - kebanyakan dari mereka gratis, jadi meskipun Anda berjuang untuk mencari nafkah sebagai seorang indie dev dengan anggaran nol, Anda masih dapat melakukan banyak hal untuk membuat orang tahu tentang permainan baru Anda yang hebat. Mempromosikan permainan membantu banyak ketika <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/Publishing_games/Game_monetization">mendapatkan penghasilan</a> nanti juga, jadi penting untuk melakukannya dengan benar.</p> + +<h2 id="Kompetisi">Kompetisi</h2> + +<p>Mengambil bagian dalam <a href="http://compohub.net/">kompetisi</a> tidak hanya akan meningkatkan keterampilan gamedev Anda dan membiarkan Anda bertemu pengembang baru untuk berteman dan belajar dari - dan itu juga akan membuat Anda terlibat dalam komunitas. Jika Anda membuat gim yang bagus untuk kompetisi dan memenangkan beberapa hadiah dalam proses gim Anda secara otomatis akan dipromosikan oleh penyelenggara dan peserta lainnya. Anda akan kaya dan terkenal, atau begitulah kata mereka.</p> + +<p>Banyak permainan hebat dimulai sebagai demo yang cepat dan ceroboh yang dikirimkan ke suatu kompetisi. Jika ide dan eksekusi cukup baik, Anda akan berhasil. Kompetisi Plus umumnya membutuhkan permainan untuk mengikuti tema wajib, sehingga Anda bisa berkreasi di sekitar tema jika Anda terjebak untuk ide.</p> + +<h2 id="Situs_web_dan_blog">Situs web dan blog</h2> + +<p>Anda harus membuat situs web sendiri yang berisi semua informasi tentang permainan Anda, sehingga orang dapat melihat apa yang telah Anda kerjakan. Semakin banyak informasi yang dapat Anda sertakan dengan lebih baik - Anda harus menyertakan tangkapan layar, deskripsi, trailer, paket pers, persyaratan, platform yang tersedia, detail dukungan, dan banyak lagi. Anda akan mendapatkan poin bonus karena memungkinkan pengguna Anda untuk langsung memainkan game Anda secara online - setidaknya dalam bentuk demo. Juga, Anda harus melakukan beberapa pekerjaan pada SEO untuk memungkinkan orang menemukan game Anda lebih mudah.</p> + +<p>You should also blog about everything related to your gamedev activities. Write about your development process, nasty bugs you encounter, funny stories, lessons learned, and the ups and downs of being a game developer. Continually publishing information about your games will help educate others, increase your reputation in the community, and further improve SEO. A further option is to publish <a href="http://dev.end3r.com/?s=monthly+report">monthly reports</a> that summarize all your progress — it helps you see what you've accomplished throughout the month and what's still left to do, and it keeps reminding people that your game is coming out soon — building buzz is always good.</p> + +<p>While you can create your website from scratch, there are also tools that can help make the process easier. <a href="https://manakeep.com">ManaKeep</a> is a website builder made for indie game developers and provides a great starting point to create your website. <a href="http://dopresskit.com/">Presskit()</a> is a press kit builder that helps you create a press page to share with the media.</p> + +<h2 id="Social_media">Social media</h2> + +<p>Your social media presence is very important — follow the right <a href="https://twitter.com/hashtag/gamedev">hashtags</a>, make friends, engage in conversations, help other devs in need. Honesty is key and you should be authentic, because nobody likes boring press releases or pushy advertisements. When the time comes your community will help you spread the word about your shiny little game.</p> + +<p>You should use at least Twitter and Facebook and be active on appropriate forums — the most popular one is <a href="http://www.html5gamedevs.com/">HTML5GameDevs.com</a>. Share your gamedev news and answer questions, so people will value what you're doing and will know that you're ok. Remember to not be too pushy on telling everyone about your games — you're not a walking advertisement.</p> + +<p>Grow your fanbase by talking to them, sharing tips, offering discounts, giving away prizes in competitions, or just complaining at the weather or buggy browser you have to deal with. Act cool, be generous, be yourself and be there for others, and you'll get treated with respect.</p> + +<h2 id="Game_portals">Game portals</h2> + +<p>Using game portals is mostly concerned with <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/Publishing_games/Game_monetization">monetization</a>, but if you're not planning to <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/Publishing_games/Game_monetization#Licensing">sell licenses</a> to allow people to purchase your game and are intending to <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/Publishing_games/Game_monetization#Advertisements">implement adverts</a> or in-app purchases instead, promoting your game across free portals can be effective.</p> + +<p>You can send your games for publication on portals like <a href="https://crazygames.com">CrazyGames.com</a>, <a href="https://gamedistribution.com/">GameDistribution.com</a>, <a href="https://lagged.com">Lagged.com</a>, <a href="https://www.pacogames.com">PacoGames.com</a> ,<a href="https://www.games4html5.com/">games4html5.com </a>or <a href="http://html5games.com/">HTML5Games.com</a>, and there are about 20-30 other notable game portals with and without API. </p> + +<p>Those portals that have their own API will allow you to authorize users, save their progress and process in-app purchases. You can also sell a full version of the game from inside your browser demo version, which will be a great move considering high competition, some developers even manage to make full browser versions. Most portals offer revenue share deals or will buy non exclusive license.</p> + +<p>Free portals offer traffic, but only the best ones are popular enough to generate revenues from advertisements on in-app purchases. On the other hand they are a perfect tool to make games visible to a broader audience if you have no budget and limited time.</p> + +<h2 id="Press">Press</h2> + +<p>You can try and reach the <a href="http://indiegames.com/">press</a> about your game, but bear in mind that they get a tonne of requests like this every single day, so be humble and patient if they don't answer right away, and be polite when talking to them. Be sure to check first if they are dealing with specific genres of games or platforms, so you don't send them something that is not relevant to them in the first place. If you're honest with your approach and your game is good, then you've got more of a chance of success.</p> + +<p>If you want to learn more about the etiquette of contacting the press you should definitely check out <a href="http://www.pixelprospector.com/how-to-contact-press/">How To Contact Press</a> - a great guide from Pixel Prospector, and the <a href="http://videogamejournaliser.com/">Video Game Journaliser</a> site curated by them for the list of sites to contact.</p> + +<h2 id="Tutorials">Tutorials</h2> + +<p>It's good to share your knowledge with other devs — after all you probably learned a thing or two from online articles, so you take the time to pay that knowledge forward. Talking or writing about something you achieved or problems you overcame is something people would be interested it. And you can use your own game as an example, especially in a tutorial when you're <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/Controls_Gamepad_API">showing how to do something you've implemented already</a>. That way everyone benefits — people learn new skills, your game gets promoted, and if you're lucky you can even get paid for writing a tutorial if it's good enough.</p> + +<p>There are portals like <a href="http://gamedevelopment.tutsplus.com/">Tuts+ Game Development</a> which will be more than happy if you write for them - they pay for the content, but not all topic ideas will be accepted. When writing a tutorial remember to focus on delivering something valuable to the reader. They want to learn something - offer your expertise and use your game as a case study. Focus on one aspect and try to explain it throughout and in detail. Also remember to follow up discussion in comments if people have any questions.</p> + +<p>If portals you contact are not interested in your content because you don't have any experience yet, try writing tutorials and publish them on <a href="/en-US/docs/Games/Publishing_games/Game_promotion#Website_and_blog">your own blog</a> first. It's the easiest way to train your writing skills on your own.</p> + +<h2 id="YouTubers">YouTubers</h2> + +<p>It's a rising trend — don't underestimate the power of YouTubers playing your game, talking about it and streaming their experience to give you lots of promotion. You should also be realistic however — don't think this alone will skyrocket your downloads or visits, and be prepared to deal with bad reviews as well as good ones.</p> + +<p>There are two options to get coverage from the YouTubers: first is you contact them directly and send a link to your game via email or private message. The second is earned in time - if you're known enough the YouTubers will contact you and ask for the link or build of your game. This <a href="http://videogamecaster.com/big-list-of-youtubers">Big List of YouTubers</a> is a great place to start. You can find YouTube and Twitch.tv influencers at <a href="https://gameinfluencer.com/">gameInfluencer.com</a> to help promote your game.</p> + +<h2 id="Events">Events</h2> + +<p>If you've gone through all the options listed above you can still find new, creative ways to promote your game — events are another good example. Attending events, both local and global, gives you the ability to meet your fans face to face, as well as other members of the development community. Value the fact that they spent their time seeing you.</p> + +<h3 id="Conferences">Conferences</h3> + +<p>There are many conferences where you can give a talk explaining some technical difficulties you overcame, or how you implemented specific APIs; again — use your games as examples for that. It's important to focus on the knowledge part and tone down the marketing — devs are sensitive on this matter and you may end up with an angry crowd if you just try to sell them something.</p> + +<h3 id="Fairs">Fairs</h3> + +<p>The other event-related option is fairs (or expos) — at such an event you can get a booth among other devs and promote your game to all the attendees passing by. If you do so, try to be unique and original, so you easily stand from the crowd. Do it the right way and everybody will be talking about you and your game. Having a booth gives you the possibility to interact with your fans directly — besides the promotion part you can also test new builds of your game on regular people and fix any bugs (or incorporate any feedback) they uncover. You can't imagine what people may come up with when playing your game, and what obvious issues you've missed while spending hours polishing it.</p> + +<h2 id="Promo_codes">Promo codes</h2> + +<p>If you're selling the game, then create the ability to distribute promo codes allowing people to access your game for free (or at least a demo or time-limited version), and send them all over the place — to press, youtubers, as competition prizes, etc. If the game reaches certain people you'll get a free advert to thousands of players. It can boost interest in your game more than anything else if you get lucky.</p> + +<h2 id="Fostering_the_community">Fostering the community</h2> + +<p>You can help community grow and promote yourself and your games at the same time. Sending out <a href="http://gamedevjsweekly.com/">weekly newsletters</a> and organizing <a href="http://js13kgames.com/">online competitions</a> or <a href="http://gamedevjs.com/">local meetups</a> will show others that you're passionate about what you do and that they can rely on you. Then when you need any help they will be there for you.</p> + +<h2 id="Summary">Summary</h2> + +<p>Cara apa pun untuk mempromosikan permainan Anda adalah baik. Anda memiliki banyak opsi untuk dipilih dan sebagian besar di antaranya gratis, jadi ini hanya soal antusiasme dan waktu yang tersedia. Terkadang Anda harus menghabiskan lebih banyak waktu untuk mempromosikan game daripada benar-benar mengembangkannya. Ingatlah bahwa tidak ada gunanya memiliki permainan terbaik di dunia jika tidak ada yang tahu itu ada.</p> + +<p>Sekarang mari kita <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/Publishing_games/Game_monetization">lanjutkan dengan</a> bagian <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/Publishing_games/Game_monetization">monetisasi itu</a> , dan dapatkan penghasilan untuk hidup.</p> diff --git a/files/id/games/publishing_games/index.html b/files/id/games/publishing_games/index.html new file mode 100644 index 0000000000..5559db1bbe --- /dev/null +++ b/files/id/games/publishing_games/index.html @@ -0,0 +1,28 @@ +--- +title: Publishing games +slug: Games/Publishing_games +tags: + - Games + - HTML5 + - JavaScript + - Monetization + - NeedsTranslation + - Promotion + - TopicStub + - distribution + - publishing +translation_of: Games/Publishing_games +--- +<div>{{GamesSidebar}}</div><p class="summary">HTML5 games have a huge advantage over native in terms of publishing and distribution — you have the freedom of distribution, promotion and monetization of your game on the Web, rather than each version being locked into a single store controlled by one company. You can benefit from the web being truly multiplatform. <span class="seoSummary">This series of articles looks at the options you have when you want to publish and distribute your game, and earn something out of it while you wait for it to become famous.</span></p> + +<h2 id="Game_distribution">Game distribution</h2> + +<p>So you've followed a <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript">tutorial</a> or <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser">two</a> and created an HTML5 game — that's great! <a href="/en-US/docs/Games/Publishing_games/Game_distribution">Game distribution</a> provides all you need to know about the ways you can distribute your newly created game into the wild — including hosting it yourself online, submitting it to open marketplaces, and submitting it to closed ones like Google Play or the iOS App Store.</p> + +<h2 id="Game_promotion">Game promotion</h2> + +<p>Developing and finishing the game is not enough. You have to let the world know that you have made something interesting available, which people will enjoy playing. There are many <a href="/en-US/docs/Games/Publishing_games/Game_promotion">Game promotion</a> techniques — many of them free — so even if you're struggling to make a living as an indie dev with zero budget you can still do a lot to let people know about your great new game. Promoting the game helps a lot in monetizing it later on too, so it's important to do it effectively.</p> + +<h2 id="Game_monetization">Game monetization</h2> + +<p>When you spend your time building, publishing and promoting your game, you will at some point consider earning money out of it. <a href="/en-US/docs/Games/Publishing_games/Game_monetization">Game monetization</a> is essential to anyone who considers their game development work a serious endeavour on the path to becoming an independent game developer able to make a living, so read on and see what your options are. The technology is mature enough; it's just a matter of chosing the right approach.</p> diff --git a/files/id/games/techniques/index.html b/files/id/games/techniques/index.html new file mode 100644 index 0000000000..66edeebd82 --- /dev/null +++ b/files/id/games/techniques/index.html @@ -0,0 +1,32 @@ +--- +title: Techniques for game development +slug: Games/Techniques +tags: + - Games + - Guide + - NeedsTranslation + - TopicStub +translation_of: Games/Techniques +--- +<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/Games")}}</div> + +<div class="summary"> +<p><span class="seoSummary">This page lists essential core techniques for anyone wanting to develop games using open web technologies.</span></p> +</div> + +<dl> + <dt><a href="/en-US/docs/Games/Techniques/Async_scripts">Using async scripts for asm.js</a></dt> + <dd>Especially when creating medium to large-sized games, async scripts are an essential technique to take advantage of, so that your game's JavaScript can be compiled off the main thread and be cached for future game running, resulting in a significant performance improvement for your users. This article explains how.</dd> + <dt><a href="/en-US/docs/Apps/Developing/Optimizing_startup_performance" title="/en-US/docs/Apps/Developing/Optimizing_startup_performance">Optimizing startup performance</a></dt> + <dd>How to make sure your game starts up quickly, smoothly, and without appearing to lock up the user's browser or device.</dd> + <dt><a href="/en-US/docs/Games/WebRTC_data_channels" title="/en-US/docs/Games/WebRTC_data_channels">Using WebRTC peer-to-peer data channels</a></dt> + <dd>In addition to providing support for audio and video communication, WebRTC lets you set up peer-to-peer data channels to exchange text or binary data actively between your players. This article explains what this can do for you, and shows how to use libraries that make this easy.</dd> + <dt><a href="/en-US/docs/Games/Techniques/Efficient_animation_for_web_games">Efficient animation for web games</a></dt> + <dd>This article covers techniques and advice for creating efficient animation for web games, with a slant towards supporting lower end devices such as mobile phones. We touch on CSS transitions and CSS animations, and JavaScript loops involving {{ domxref("window.requestAnimationFrame") }}.</dd> + <dt><a href="/en-US/docs/Games/Techniques/Audio_for_Web_Games">Audio for Web Games</a></dt> + <dd>Audio is an important part of any game — it adds feedback and atmosphere. Web-based audio is maturing fast, but there are still many browser differences to negotiate. This article provides a detailed guide to implementing audio for web games, looking at what works currently across as wide a range of platforms as possible.</dd> + <dt><a href="/en-US/docs/Games/Techniques/2D_collision_detection">2D collision detection</a></dt> + <dd>A concise introduction to collision detection in 2D games.</dd> + <dt><a href="/en-US/docs/Games/Techniques/Tilemaps">Tilemaps</a></dt> + <dd>Tiles are a very popular technique in 2D games for building the game world. These articles provide an introduction to tilemaps and how to implement them with the Canvas API.</dd> +</dl> diff --git a/files/id/glossary/404/index.html b/files/id/glossary/404/index.html new file mode 100644 index 0000000000..9c8065b3e3 --- /dev/null +++ b/files/id/glossary/404/index.html @@ -0,0 +1,17 @@ +--- +title: '404' +slug: Glossary/404 +tags: + - Glossary + - HTTP Error + - Infrastructure +translation_of: Glossary/404 +--- +<p>404 merupakan Standard Kode Respon yang berarti bahwa {{Glossary("Server", "server")}} tidak dapat menemukan resource yang diminta.</p> + +<h2 id="Belajar_lebih_lanjut">Belajar lebih lanjut</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Response_codes">list of HTTP response codes</a></li> + <li><a href="https://developer.mozilla.org/en-US/Learn/Checking_that_your_web_site_is_working_properly">advice for beginners on avoiding 404 errors</a></li> +</ul> diff --git a/files/id/glossary/ajax/index.html b/files/id/glossary/ajax/index.html new file mode 100644 index 0000000000..2b4e187722 --- /dev/null +++ b/files/id/glossary/ajax/index.html @@ -0,0 +1,22 @@ +--- +title: AJAX +slug: Glossary/AJAX +translation_of: Glossary/AJAX +--- +<p>AJAX (Asynchronous {{glossary("JavaScript")}} dan {{glossary("XML")}}) merupakan praktik pemrograman yang menggabungkan {{glossary("HTML")}}, {{glossary("CSS")}}, JavaScript, {{glossary("DOM")}}, dan <code>XMLHttpRequest</code> {{glossary("object")}} untuk membangun halaman web yang lebih kompleks. Yang bisa Anda lakukan dengan AJAX yaitu memungkinkan Anda untuk memperbarui bagian dari halaman tanpa harus me-<em>reload</em> keseluruhan halaman. AJAX juga dapat bekerja secara <em>asynchronous</em>, yang berarti kode anda terus berjalan ketika bagian halaman tersebut mencoba untuk memuat kembali konten (dibandingkan secara cara kerja <em>synchronous,</em> di mana kode akan diblokir dari saat berjalan hingga halaman telah selesai dimuat).</p> + +<h2 id="Pelajari_juga">Pelajari juga</h2> + +<h3 id="Pengetahuan_Umum">Pengetahuan Umum</h3> + +<ul> + <li>{{interwiki("wikipedia", "AJAX")}} di Wikipedia</li> + <li><a href="http://peoplesofttutorial.com/difference-between-synchronous-and-asynchronous-messaging/">Komunikasi Synchronous vs. Asynchronous </a></li> +</ul> + +<h3 id="Informasi_Teknikal">Informasi Teknikal</h3> + +<ul> + <li>Objek {{domxref("XMLHttpRequest")}}.</li> + <li><a href="/en-US/docs/AJAX">Dokumentasi AJAX di MDN</a></li> +</ul> diff --git a/files/id/glossary/algoritma/index.html b/files/id/glossary/algoritma/index.html new file mode 100644 index 0000000000..d43365aeb8 --- /dev/null +++ b/files/id/glossary/algoritma/index.html @@ -0,0 +1,8 @@ +--- +title: Algoritma +slug: Glossary/Algoritma +tags: + - Glosarium +translation_of: Glossary/Algorithm +--- +<p><span class="seoSummary">Algoritma adalah serangkaian instruksi untuk menyelesaikan suatu masalah</span></p> diff --git a/files/id/glossary/api/index.html b/files/id/glossary/api/index.html new file mode 100644 index 0000000000..b0e8c7a52e --- /dev/null +++ b/files/id/glossary/api/index.html @@ -0,0 +1,24 @@ +--- +title: API +slug: Glossary/API +tags: + - CodingScripting + - Glossary + - Infrastructure +translation_of: Glossary/API +--- +<p>Sebuah API (Application Programming Interface) merupakan set dari fitur dan aturan yang memungkinkan interaksi antar software yang menyediakan API dan komponen software lain. DI pengembangan Web, API umumnya disebut standard set {{glossary("method","methods")}}, {{Glossary("property","properties")}}, event, dan {{Glossary("URL","URLs")}} untuk berinteraksi dengan Konten Web.</p> + +<h2 id="Pelajari_Lebih_Lanjut">Pelajari Lebih Lanjut</h2> + +<h3 id="Pemahaman_Umum">Pemahaman Umum</h3> + +<ul> + <li>{{Interwiki("wikipedia", "Application_programming_interface", "API")}} di Wikipedia</li> +</ul> + +<h3 id="Referensi_teknikal">Referensi teknikal</h3> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API">Web API reference</a></li> +</ul> diff --git a/files/id/glossary/asynchronous/index.html b/files/id/glossary/asynchronous/index.html new file mode 100644 index 0000000000..8f2c96568d --- /dev/null +++ b/files/id/glossary/asynchronous/index.html @@ -0,0 +1,14 @@ +--- +title: Asynchronous +slug: Glossary/Asynchronous +translation_of: Glossary/Asynchronous +--- +<p><em>Asynchronous </em>arti-nya mengacu pada sebuah <em>communication environment </em>(seperti email) di mana setiap bagian/ <em>block </em> menerima dan memproses pesan - pesan dengan baik sekali, dan memungkinkan dapat menerima 'pesan' lebih dari sekali dan di olah dengan baik sekali dalam proses komunikasi cara ini.</p> + +<h2 id="Pelajari_Lebih_Dalam">Pelajari Lebih Dalam</h2> + +<h3 id="Technical_reference">Technical reference</h3> + +<ul> + <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests">Synchronous and asynchronous requests</a> using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest()</a> {{glossary("API")}}</li> +</ul> diff --git a/files/id/glossary/css/index.html b/files/id/glossary/css/index.html new file mode 100644 index 0000000000..c318ba2c3e --- /dev/null +++ b/files/id/glossary/css/index.html @@ -0,0 +1,48 @@ +--- +title: CSS +slug: Glossary/CSS +tags: + - CSS + - Glossary + - Web +translation_of: Glossary/CSS +--- +<p><span class="seoSummary"><strong>CSS</strong> <em>(Cascading Style Sheets) </em>merupakan bahasa deklaratif yang mengontrol tampilan halaman web di <em>{{glossary("browser")}}</em>.</span> <em>Browser</em> menerapkan deklarasi CSS pada elemen untuk menampilkannya dengan benar. Sebuah deklarasi <em>style</em>/gaya terdiri dari properti dan nilainya, yang menentukan bagaimana halaman web ditampilkan.</p> + +<p>CSS merupakan salah satu dari tiga inti teknologi web, bersama dengan {{Glossary("HTML")}} dan {{Glossary("JavaScript")}}. CSS umumnya memberi <em>style</em> pada {{Glossary("Element","HTML elements")}}, namun juga dapat digunakan dengan bahasa <em>markup</em> lain seperti {{Glossary("SVG")}} atau {{Glossary("XML")}}.</p> + +<p>Aturan CSS merupakan suatu himpunan {{Glossary("CSS Property","properties")}} yang terkait dengan {{Glossary("selector")}}. Berikut adalah sebuah contoh yang membuat setiap paragraf HTML berwarna kuning dengan warna latar hitam:</p> + +<pre class="brush: css">/* Selector "p" menunjukan bahwa semua paragraf pada dokumen akan dipengaruhi aturan ini */ +p { + /* Properti "color" mendefinisikan warna teks, pada contoh ini kuning - "yellow". */ + color: yellow; + + /* Properti "background-color" mendefinisikan warna latar, pada contoh ini hitam - "black". */ + background-color: black +}</pre> + +<p>Istilah <em>"cascading"</em> mengacu pada aturan-aturan yang mengatur bagaimana <em>selector </em>diprioritaskan untuk mengubah tampilan halaman. Ini merupakan fitur penting, karena sebuah situs yang kompleks dapat memiliki ribuan aturan CSS.</p> + +<h2 id="Pelajari_Juga">Pelajari Juga</h2> + +<h3 id="Pengetahuan_Umum">Pengetahuan Umum</h3> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/Learn/CSS">Belajar CSS</a></li> + <li>{{interwiki("wikipedia", "CSS")}} di Wikipedia</li> +</ul> + +<h3 id="Referensi_Teknikal">Referensi Teknikal</h3> + +<ul> + <li><a href="/en-US/docs/Web/CSS">Dokumentasi CSS di MDN</a></li> + <li><a href="http://www.w3.org/Style/CSS/current-work" rel="external">The CSS Working Group current work</a></li> +</ul> + +<h3 id="Belajar_tentang_CSS">Belajar tentang CSS</h3> + +<ul> + <li><a href="http://www.codecademy.com/en/tracks/web" rel="external">Kursus web di codecademy.com</a></li> + <li><a href="http://www.expression-web-tutorial.com/Types_CSS_Styles.html">Three Types of CSS</a></li> +</ul> diff --git a/files/id/glossary/html/index.html b/files/id/glossary/html/index.html new file mode 100644 index 0000000000..3b2eb3d305 --- /dev/null +++ b/files/id/glossary/html/index.html @@ -0,0 +1,44 @@ +--- +title: HTML +slug: Glossary/HTML +translation_of: Glossary/HTML +--- +<p>HTML <em>(HyperText Markup Language)</em> merupakan sebuah bahasa deskriptif yang menentukan struktur halaman web.</p> + +<h2 id="Sejarah_singkat">Sejarah singkat</h2> + +<p>Pada tahun 1990, sebagai bagian dari visinya tentang {{glossary("World Wide Web","Web")}}, Tim Berners-Lee mendefinisikan konsep {{glossary("hypertext")}}, yang Berners-Lee buat secara resmi pada tahun selanjutnya melalui sebuah <em>markup </em>yang secara umum berbasis pada {{glossary("SGML")}}. {{glossary("IETF")}} mulai menetapkan HTML secara resmi pada tahun 1993, dan setelah beberapa draf mereka merilis versi 2.0 di tahun 1995. Pada tahun 1994 Berners-Lee mendirikan {{glossary("W3C")}} untuk mengembangkan Web. Di tahun 1996, W3C mengambil alih HTML dan mempublikasikan rekomendasi HTML 3.2 setahun kemudian. HTML 4.0 dirilis pada tahun 1999 dan menjadi standar ISO di tahun 2000.</p> + +<p>Pada saat itu, W3C hampir meninggalkan HTML untuk mendukung {{glossary("XHTML")}}, sehingga memicu pendirian kelompok independen yang disebut {{glossary("WHATWG")}} di tahun 2004. Karena WHATWG, pekerjaan {{glossary("HTML5")}} diteruskan: kedua organisasi tersebut mempublikasikan draf pertama di tahun 2008 dan standar akhir di tahun 2014.</p> + +<h2 id="Konsep_dan_sintaks">Konsep dan sintaks</h2> + +<p>Sebuah dokumen HTML merupakan sebuah dokumen <em>plaintext </em>yang terstruktur dengan {{glossary("element","elements")}}. Elemen dikelilingi oleh {{Glossary("tag","tags")}} pembuka dan penutup yang sesuai. Masing-masing <em>tag </em>dimulai dan diakhiri oleh sebuah <em>angle bracket</em> (<code><></code>). Ada beberapa <em>tag </em>kosong atau <em>void </em>yang tidak dapat disertakan oleh teks apapun, seperti {{htmlelement("img")}}.</p> + +<p>Anda dapat memperpanjang <em>tag </em>HTML dengan {{Glossary("attribute","attributes")}}, yang menyediakan informasi tambahan yang akan mempengaruhi bagaimana perambah mengimplementasikan elemen:</p> + +<p><img alt="Detail of the structure of an HTML element" src="https://mdn.mozillademos.org/files/7659/anatomy-of-an-html-element.png" style="height: 181px; width: 609px;"></p> + +<p>Sebuah <em>file </em>HTML biasanya disimpan dengan sebuah ekstensi <code>.htm</code> atau <code>.html</code>, yang dijalani oleh sebuah {{Glossary("Server","web server")}}, dan dapat ditampilkan oleh {{Glossary("Browser","Web browser")}} apapun.</p> + +<h2 id="Pelajari_juga">Pelajari juga</h2> + +<h3 id="Pengetahuan_umum">Pengetahuan umum</h3> + +<ul> + <li>{{interwiki("wikipedia", "HTML", "HTML")}} di Wikipedia</li> +</ul> + +<h3 id="Belajar_HTML">Belajar HTML</h3> + +<ul> + <li><a href="http://developer.mozilla.org/en-US/Learn/HTML">Tutorial HTML kami</a></li> + <li><a href="http://www.codecademy.com/en/tracks/web" rel="external">Kursus web di codecademy.com</a></li> +</ul> + +<h3 id="Referensi_teknis">Referensi teknis</h3> + +<ul> + <li><a href="/en-US/docs/Web/HTML">Dokumentasi HTML di MDN</a></li> + <li><a href="http://www.w3.org/TR/html5/" rel="external">Spesifikasi HTML</a></li> +</ul> diff --git a/files/id/glossary/http/index.html b/files/id/glossary/http/index.html new file mode 100644 index 0000000000..24a606d4d6 --- /dev/null +++ b/files/id/glossary/http/index.html @@ -0,0 +1,22 @@ +--- +title: HTTP +slug: Glossary/HTTP +tags: + - Beginner + - Glossary + - HTTP + - Infrastructure +translation_of: Glossary/HTTP +--- +<p>HTTP (HyperText Transfer Protocol) adalah {{glossary("protocol", "protokol")}} sederhana yang memunginkan transfer <em>file</em> di {{glossary("World Wide Web","Web")}}. HTTP bersifat tekstual (semua komunikasi dilakukan dengan teks biasa) dan <em>stateless</em> (tidak ada komunikasi yang menyadari komunikasi sebelumnya).</p> + +<div> +<h2 id="Pelajari_juga">Pelajari juga</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTTP">HTTP di MDN</a></li> + <li>{{interwiki("wikipedia", "Hypertext Transfer Protocol", "HTTP")}} di Wikipedia</li> +</ul> +</div> + +<p> </p> diff --git a/files/id/glossary/identifier/index.html b/files/id/glossary/identifier/index.html new file mode 100644 index 0000000000..370c97cbb9 --- /dev/null +++ b/files/id/glossary/identifier/index.html @@ -0,0 +1,16 @@ +--- +title: Identifier +slug: Glossary/Identifier +translation_of: Glossary/Identifier +--- +<p>Rangkaian karakter dalam kode yang mengidentifikasikan sebuah <strong>{{glossary("variable")}}, {{glossary("function")}}, atau {{glossary("property")}}</strong>.</p> + +<p>In {{glossary("JavaScript")}}, Pengidentifikasi dapat berisi hanya karakter alpanumerik (atau "$" atau "_"), dan tidak boleh dimulai dengan angka. Pengenal berbeda dari <strong>string</strong> yang berupa string adalah data, sementara pengenal adalah bagian dari kode. Dalam JavaScript, tidak ada cara untuk mengonversi pengenal ke string, namun terkadang memungkinkan untuk <strong>mengurai</strong> string menjadi pengidentifikasi.</p> + +<h2 id="Belajar_lebih_lagi">Belajar lebih lagi</h2> + +<h3 id="Pengetahuan_umum">Pengetahuan umum</h3> + +<ul> + <li>{{interwiki("wikipedia", "Identifier#In_computer_science", "Identifier")}} on Wikipedia</li> +</ul> diff --git a/files/id/glossary/index.html b/files/id/glossary/index.html new file mode 100644 index 0000000000..59631f62ab --- /dev/null +++ b/files/id/glossary/index.html @@ -0,0 +1,27 @@ +--- +title: Glossary +slug: Glossary +tags: + - Beginner + - Glossary + - Index + - Landing + - NeedsTranslation + - TopicStub +translation_of: Glossary +--- +<div style="max-width: 300px; float: right; margin: 0 0 .5em 1em;">{{LearnBox({"title":"Belajar Istilah baru:"})}}</div> + +<p>Teknologi Web terdiri dari daftar panjang and singkatan yang digunakan di setiap dokumentasi dan coding. Glossary ini memberikan definisi dari kata - kata dan singkatan yang perlu anda ketahui untuk berhasil memahami dan membangun web.</p> + +<p>{{GlossaryList({"split":"h3", "css":"multiColumnList"})}}</p> + +<h2 id="Kontribusi_ke_glossary">Kontribusi ke glossary</h2> + +<p>Glossary ini tidak pernah berakhir dalam pengerjaan. Anda bisa membantu membaharuinya dengan <a href="/en-US/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">menulis entry baru</a> atau memperbaikinya. Cara termudah untuk memulai dengan menekan tombol yang disediakan atau pilih salah satu dari istilah berikut.</p> + +<p><strong><a href="/en-US/docs/new?parent=4391">Tambahkan entry baru ke glossary</a></strong></p> + +<p>{{GlossaryList({"terms":["character encoding","DMZ","event","HMAC","condition","modem","OVP","TTL","Unicode"], "filter":"notdefined", "css":"multiColumnList"})}}</p> + +<p>Jika anda ingin mengetahui lebih lanjut untuk berkontribusi ke glossary, kunjungi <a href="/en-US/docs/MDN/Doc_status/Glossary">halaman status dokumentasi glossary</a>.</p> diff --git a/files/id/glossary/javascript/index.html b/files/id/glossary/javascript/index.html new file mode 100644 index 0000000000..7ca928900d --- /dev/null +++ b/files/id/glossary/javascript/index.html @@ -0,0 +1,45 @@ +--- +title: JavaScript +slug: Glossary/JavaScript +tags: + - CodingScripting + - Glossary + - JavaScript +translation_of: Glossary/JavaScript +--- +<p>JavaScript (JS) merupakan bahasa pemrograman yang sering digunakan pada sisi klien <em>(client-side)</em> untuk membuat <em>script</em> pada halaman web secara dinamis, tapi juga sering digunakan pada sisi server (<em>{{Glossary("Server","server")}}-side</em>).</p> + +<p>JavaScript tidak sama dengan {{interwiki("wikipedia", "Java_(programming_language)", "bahasa pemrograman Java")}}. Baik "Java" maupun "JavaScript" merupakan merek dagang atau merek dagang terdaftar Oracle di Amerika Serikat dan negara-negara lainnya. Namun, kedua bahasa pemrograman tersebut mempunyai sintaks, semantik, dan kegunaan yang sangat berbeda.</p> + +<p>Dibuat sebagai bahasa sisi server oleh Brendan Eich (saat itu merupakan perkerja di Netscape Corporation), JavaScript selanjutnya hadir di Netscape Navigator 2.0 pada September 1995. JavaScript menikmati kesuksesan dan {{glossary("Microsoft Internet Explorer", "Internet Explorer 3.0")}} memperkenalkan dukungan JavaScript di bawah nama JScript pada August 1996.</p> + +<p>Di November 1996, Netscape mulai bekerja dengan ECMA International untuk membuat JavaScript sebagai sebuah standar industri. Sejak saat itu, JavaScript yang telah terstandardisasi disebut sebagai ECMAScript dan dispesifikasikan di bawah ECMA-262, di mana edisi terbaru (kedelapan) tersedia pada Juni 2017.</p> + +<p>JavaScript pada umumnya digunakan pada perambah, memungkinkan pengembang untuk memanipulasi halaman web melalui {{Glossary("DOM")}}, memanipulasi data dengan {{Glossary("AJAX")}} dan {{Glossary("IndexedDB")}}, menggambar grafik dengan {{Glossary("canvas")}}, berinteraksi dengan perangkat yang menjalankan perambah melalui bermacam {{Glossary("API","APIs")}}, dan masih banyak lagi. JavaScript adalah salah satu bahasa yang paling sering digunakan di dunia, karena pertumbuhan dan peningkatan performa pada {{Glossary("API","APIs")}} di perambah yang ada baru-baru ini.</p> + +<p>Belakangan ini, JavaScript kembali ke <em>server</em> dengan kesuksesan platform <a href="http://nodejs.org/" rel="external">Node.js</a>, yang merupakan <em>runtime environment </em>bersifat <em>cross-platform </em>JavaScript paling populer di luar perambah. Node.js memungkinkan Anda menggunakan JavaScript sebagai bahasa <em>scripting</em> yang mengotomatisasi banyak hal di PC dan membangun {{Glossary("HTTP")}} dan server {{Glossary("Web Sockets")}} yang fungsional sepenuhnya.</p> + +<h2 id="Pelajari_juga">Pelajari juga</h2> + +<h3 id="Pengetahuan_umum">Pengetahuan umum</h3> + +<ul> + <li>{{interwiki("wikipedia", "JavaScript", "JavaScript")}} di Wikipedia</li> +</ul> + +<h3 id="Belajar_JavaScript">Belajar JavaScript</h3> + +<ul> + <li>{{Link("/en-US/docs/Web/JavaScript/Guide")}} di MDN</li> + <li><a href="http://nodeschool.io/#workshoppers">Workshop "Javascripting" di NodeSchool</a></li> + <li><a href="http://www.codecademy.com/tracks/javascript" rel="external">Kursus JavaScript di codecademy.com</a></li> + <li><em><a href="http://ejohn.org/apps/learn/" rel="external">John Resig's Learning Advanced JavaScript</a></em></li> +</ul> + +<h3 id="Referensi_teknis">Referensi teknis</h3> + +<ul> + <li><a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm" rel="external">Standar terbaru ECMAScript</a></li> + <li>{{Link("/en-US/docs/Web/JavaScript/reference")}} di MDN</li> + <li><a href="http://eloquentjavascript.net/" rel="external">Buku <em>Eloquent JavaScript</em></a></li> +</ul> diff --git a/files/id/glossary/json/index.html b/files/id/glossary/json/index.html new file mode 100644 index 0000000000..fc0d4af364 --- /dev/null +++ b/files/id/glossary/json/index.html @@ -0,0 +1,24 @@ +--- +title: JSON +slug: Glossary/JSON +translation_of: Glossary/JSON +--- +<p><em>JavaScript Object Notation</em> (<strong>JSON</strong>) merupakan sebuah format pertukaran data. Meskipun bukanlah merupakan bagian dari JavaScript, JSON memiliki kemiripan terhadap bagian dari sintaks {{Glossary("JavaScript")}}. Meski banyak bahasa pemrograman yang mendukung JSON, JSON khususnya berguna untuk aplikasi-aplikasi berbasis JavaScript, termasuk situs dan ekstensi <em>browser</em>.</p> + +<p>JSON dapat merepresentasikan angka, <em>boolean</em>, <em>string, </em><code>null</code><em> , </em><em>array </em>(urutan terurut dari nilai-nilai), dan objek (pemetaan <em>string-</em>nilai) yang terdiri dari nilai-nilai tersebut (atau terdiri dari <em>array </em>dan objek lain). JSON tidak merepresentasikan tipe-tipe data yang lebih kompleks seperti fungsi, ekspresi regular, tanggal, dan lain sebagainya. (Objek <em>Date</em> secara standar melakukan serialisasi terhadap sebuah <em>string </em>yang mengandung tanggal dalam format ISO, sehingga informasi yang ada tidak sepenuhnya hilang.) Apabila Anda memerlukan JSON untuk merepresentasikan tipe-tipe data tambahan, transformasikanlah nilai-nilai bersamaan ketika mereka diserialisasikan atau sebelum mereka dideserialisasikan.</p> + +<p>Seperti XML, JSON memiliki kemampuan untuk menyimpan data yang bersifat hirarkis, tidak seperti format CSV tradisional. Banyak alat yang menyediakan translasi antara format-format ini seperti <a href="https://json-csv.com">JSON to CSV Converter</a> ini.</p> + +<h2 id="Pelajari_juga">Pelajari juga</h2> + +<h3 id="Pengetahuan_umum">Pengetahuan umum</h3> + +<ul> + <li>{{interwiki("wikipedia", "JSON", "JSON")}} di Wikipedia</li> +</ul> + +<h3 id="Referensi_teknis">Referensi teknis</h3> + +<ul> + <li>{{Link("/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON")}} di MDN</li> +</ul> diff --git a/files/id/glossary/method/index.html b/files/id/glossary/method/index.html new file mode 100644 index 0000000000..8f10dd9061 --- /dev/null +++ b/files/id/glossary/method/index.html @@ -0,0 +1,29 @@ +--- +title: Method +slug: Glossary/Method +tags: + - CodingScripting + - Glossary + - JavaScript +translation_of: Glossary/Method +--- +<p>Sebuah <strong>method</strong> merupakan {{glossary("function")}} yang berupa {{glossary("property")}} dari {{glossary("object")}}. Ada dua jenis method: <em>Instance Method</em> yang berupa built-in tasks yang di jalankan oleh instansi object, atau <em>Static Methods</em> yang berupa tasks yang dapat dijalankan tanpa membutuhkan instansi object.</p> + +<div class="note"> +<p><strong>Catatan:</strong> Fungsi di JavaScript sendiri merupakan objek, jadi, pada konteks tersebut, sebuah method merupakan {{glossary("object reference")}} dari function.</p> +</div> + +<h2 id="Pelajari_lebih_lanjut">Pelajari lebih lanjut</h2> + +<h3 id="Pelajari_Ini">Pelajari Ini</h3> + +<ul> + <li>{{InterWiki("wikipedia","Method (computer programming)")}} di Wikipedia</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">Defining a method in JavaScript</a> ( perbandingan dari sintaks tradisional dan penulisan singakat yang baru)</li> +</ul> + +<h3 id="Referensi_teknikal">Referensi teknikal</h3> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Methods_Index">List of JavaScript built-in methods</a></li> +</ul> diff --git a/files/id/glossary/null/index.html b/files/id/glossary/null/index.html new file mode 100644 index 0000000000..42d1799b50 --- /dev/null +++ b/files/id/glossary/null/index.html @@ -0,0 +1,27 @@ +--- +title: 'Null' +slug: Glossary/Null +tags: + - CodingScripting + - Glossary + - Pustaka +translation_of: Glossary/Null +--- +<p>Dalam ilmu komputer, nilai <code><strong>null</strong></code> mewakili referensi suatu nilai yang tidak ada, umumnya sengaja untuk meng-tiadakan, hampa, atau <em>Invalid {{glossary("object")}}</em> atau pengalamatan. Banyak arti referensi null pada penerapan bahasa pemrogramman lainnya.</p> + +<p>Dalam {{Glossary("JavaScript")}}, null adalah salahsatu dari {{Glossary("Primitive", "Nilai Primitif")}}.</p> + +<h2 id="Rujukan_Lain">Rujukan Lain</h2> + +<h3 id="Pengetahuan_Umum">Pengetahuan Umum</h3> + +<ul> + <li>{{Interwiki("wikipedia", "Null pointer")}} di Wikipedia</li> +</ul> + +<h3 id="Referensi_Teknik">Referensi Teknik</h3> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Data_structures">JavaScript data types and data structures</a></li> + <li>The JavaScript global object: {{jsxref("null")}}</li> +</ul> diff --git a/files/id/glossary/primitive/index.html b/files/id/glossary/primitive/index.html new file mode 100644 index 0000000000..a79af0b9dd --- /dev/null +++ b/files/id/glossary/primitive/index.html @@ -0,0 +1,32 @@ +--- +title: Primitive +slug: Glossary/Primitive +translation_of: Glossary/Primitive +--- +<p><span class="seoSummary">A <strong>primitif</strong> (nilai primitif, tipe data primitif) adalah data yang bukan suatu {{Glossary("object", "objek")}} dan tidak memiliki {{glossary("method","metode")}}. Dalam {{Glossary("JavaScript")}}, ada 6 tipe data primitif: {{Glossary("string")}}, {{Glossary("number")}}, {{Glossary("boolean")}}, {{Glossary("null")}}, {{Glossary("undefined")}}, {{Glossary("symbol")}} (baru dalam {{Glossary("ECMAScript")}} 2015).</span></p> + +<p>Sebagian besar waktu, nilai primitif diwakili secara langsung pada tingkat terendah dalam implementasi bahasa.</p> + +<p>Semua primitif tidak <strong>immutable</strong> (tidak bisa diubah).</p> + +<h2 id="Objek_pembungkus_primitif_pada_JavaScript">Objek pembungkus primitif pada JavaScript</h2> + +<p>Kecuali untuk null dan undefined, semua nilai primitif memiliki persamaan objek yang membungkus nilai primitif:</p> + +<ul> + <li>{{jsxref("String")}} untuk primitif string.</li> + <li>{{jsxref("Number")}} untuk bilangan primitif.</li> + <li>{{jsxref("Boolean")}} untuk primitif Boolean.</li> + <li>{{jsxref("Symbol")}} untuk primitif Symbol.</li> +</ul> + +<p>Pembungkus metode <a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf"><code>valueOf()</code></a> mengembalikan nilai primitif.</p> + +<h2 id="Belajar_lebih_lagi">Belajar lebih lagi</h2> + +<h3 id="Pengetahuan_umum">Pengetahuan umum</h3> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures">Pengantar tipe data JavaScript</a></li> + <li>{{Interwiki("wikipedia", "Primitive data type")}} on Wikipedia</li> +</ul> diff --git a/files/id/glossary/property/index.html b/files/id/glossary/property/index.html new file mode 100644 index 0000000000..dbe9210178 --- /dev/null +++ b/files/id/glossary/property/index.html @@ -0,0 +1,11 @@ +--- +title: Property +slug: Glossary/property +tags: + - Disambiguation + - Glossary +translation_of: Glossary/property +--- +<p>Pengaertian <strong>property</strong> bisa diartikan lebih dari satu artian berdasarkan konteks. Mungkin dapat ditujukan ke:</p> + +<p>{{GlossaryDisambiguation}}</p> diff --git a/files/id/glossary/python/index.html b/files/id/glossary/python/index.html new file mode 100644 index 0000000000..ff93ff587f --- /dev/null +++ b/files/id/glossary/python/index.html @@ -0,0 +1,19 @@ +--- +title: Python +slug: Glossary/Python +translation_of: Glossary/Python +--- +<p><strong>Python </strong>adalah bahasa pemrograman tujuan umum tingkat tinggi. Ini menggunakan pendekatan multi-paradigma, yang berarti mendukung prosedural, berorientasi objek dan beberapa konstruksi pemrograman fungsional. </p> + +<p>Diciptakan oleh Guido van Rossum sebagai penerus bahasa lain (disebut ABC) antara tahun 1985 dan 1990, dan saat ini digunakan pada sejumlah besar domain, seperti pengembangan web, sebagai bahasa script untuk aplikasi lain dan untuk membangun aplikasi yang sebenarnya.</p> + +<p>Python dikembangkan di bawah lisensi open source yang disetujui OSI, membuatnya dapat digunakan dan didistribusikan secara bebas, bahkan untuk penggunaan komersial. Lisensi Python dikelola oleh <a href="https://www.python.org/psf/">Python Software Foundation</a>. </p> + +<h2 id="Learn_More">Learn More</h2> + +<p> </p> + +<ul> + <li>{{interwiki('wikipedia','Python (programming language)','Python')}} on Wikipedia</li> + <li><a href="http://www.tutorialspoint.com/python/index.htm">A python tutorial</a></li> +</ul> diff --git a/files/id/glossary/seo/index.html b/files/id/glossary/seo/index.html new file mode 100644 index 0000000000..af4c5243be --- /dev/null +++ b/files/id/glossary/seo/index.html @@ -0,0 +1,42 @@ +--- +title: SEO +slug: Glossary/SEO +tags: + - Glossary + - Intro + - SEO + - Search + - WebMechanic + - open +translation_of: Glossary/SEO +--- +<p><strong>SEO </strong>(Search Engine Optimization) adalah proses membuat situs web lebih terlihat dalam hasil pencarian, juga disebut meningkatkan peringkat pencarian.</p> + +<p>Mesin pencari {{Glossary("Crawler", "crawl")}} web, mengikuti tautan dari halaman ke halaman, dan mengindeks konten yang ditemukan. Saat Anda mencari, mesin pencari menampilkan konten yang diindeks. Crawler mengikuti aturan. Jika Anda mengikuti aturan-aturan itu dengan cermat ketika melakukan SEO untuk sebuah situs web, Anda memberikan situs peluang terbaik untuk muncul di antara hasil pertama, meningkatkan lalu lintas dan kemungkinan penghasilan (untuk e-niaga dan iklan).</p> + +<p>Mesin pencari memberikan beberapa pedoman untuk SEO, tetapi mesin pencari besar menjaga peringkat hasil sebagai rahasia dagang. SEO menggabungkan pedoman mesin pencari resmi, pengetahuan empiris, dan pengetahuan teoritis dari karya ilmiah atau paten.</p> + +<p>Metode SEO terbagi dalam tiga kelas besar:</p> + +<dl> + <dt>teknis</dt> + <dd>Tandai konten menggunakan semantik {{Glossary("HTML")}}. Saat menjelajahi situs web, perayap hanya akan menemukan konten yang ingin Anda indeks.</dd> + <dt>penulisan</dt> + <dd>Tulis konten menggunakan kosakata pengunjung Anda. Gunakan teks dan juga gambar sehingga crawler dapat memahami subjek.</dd> + <dt>kepopuleran</dt> + <dd>Anda mendapatkan sebagian besar lalu lintas ketika situs mapan lain menautkan ke situs Anda.</dd> +</dl> + +<h2 id="Belajarlah_lagi">Belajarlah lagi</h2> + +<h3 id="Pengetahuan_umum">Pengetahuan umum</h3> + +<ul> + <li>{{Interwiki("wikipedia", "SEO")}} di Wikipedia</li> +</ul> + +<h3 id="Pelajari_SEO">Pelajari SEO</h3> + +<ul> + <li><a href="https://www.google.com/webmasters/">Google Webmaster Central</a></li> +</ul> diff --git a/files/id/glossary/statement/index.html b/files/id/glossary/statement/index.html new file mode 100644 index 0000000000..d13f2c7c30 --- /dev/null +++ b/files/id/glossary/statement/index.html @@ -0,0 +1,21 @@ +--- +title: Statement +slug: Glossary/Statement +translation_of: Glossary/Statement +--- +<p><span style="line-height: 1.5;">Dalam bahasa pemrograman komputer, sebuah <strong>statemen/pernyataan</strong> adalah sebuah baris kode yang memerintahkan sebuah tugas. Setiap program terdiri dari serangkaian pernyataan.</span></p> + +<h3 id="Pengetahuan_umum">Pengetahuan umum</h3> + +<ul> + <li>{{Interwiki("wikipedia", "Statement (computer science)")}} on Wikipedia</li> +</ul> + +<h3 id="Referensi_teknis">Referensi teknis</h3> + +<ul> + <li><a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference/Statements">Deklarasi dan pernyataan JavaScript</a></li> +</ul> + +<ul> +</ul> diff --git a/files/id/glossary/svg/index.html b/files/id/glossary/svg/index.html new file mode 100644 index 0000000000..6a25d78c8b --- /dev/null +++ b/files/id/glossary/svg/index.html @@ -0,0 +1,37 @@ +--- +title: SVG +slug: Glossary/SVG +tags: + - Glossary + - Graphics + - SVG +translation_of: Glossary/SVG +--- +<p><em>Scalable Vector Graphics</em> (<strong>SVG</strong>) merupakan format gambar vektor 2D berbasis sintaks {{Glossary("XML")}}.</p> + +<p>{{Glossary("W3C")}} mulai mengerjakan SVG pada akhir 1990s, namun SVG baru menjadi populer ketika {{Glossary("Microsoft Internet Explorer", "Internet Explorer")}} 9 keluar dengan dukungan SVG. Semua {{Glossary("browser","browsers")}} sekarang mendukung SVG.</p> + +<p>Berbasis pada sintaks {{Glossary("XML")}}, SVG dapat diberikan gaya dengan menggunakan {{Glossary("CSS")}} dan dibuat semakin interaktif dengan menggunakan {{Glossary("JavaScript")}}. HTML5 saat ini memungkinkan <em>direct embedding</em> pada <em>{{Glossary("Tag","tags")}}</em> SVG pada dokumen {{Glossary("HTML")}}.</p> + +<p>Sebagai sebuah <a href="http://en.wikipedia.org/wiki/Vector_graphics" rel="external">format gambar vektor</a>, grafis SVG dapat dirubah skalanya tanpa batas, sehingga membuat SVG sangat berharga dalam <em>{{Glossary("responsive design")}}</em>, karena Anda dapat membuat antarmuka elemen dan grafis yang dapat menyesuaikan pada segala ukuran layar. SVG juga menyediakan banyak alat-alat yang berguna, seperti <em>clipping</em>, <em>masking</em>, <em>filter</em>, dan animasi.</p> + +<h2 id="Pelajari_juga">Pelajari juga</h2> + +<h3 id="Pengetahuan_umum">Pengetahuan umum</h3> + +<ul> + <li>{{Interwiki("wikipedia", "SVG")}} di Wikipedia</li> +</ul> + +<h3 id="Belajar_SVG">Belajar SVG</h3> + +<ul> + <li><a href="http://learnsvg.com/" rel="external">http://learnsvg.com</a></li> +</ul> + +<h3 id="Informasi_teknis">Informasi teknis</h3> + +<ul> + <li><a href="/id/docs/Web/SVG">Dokumentasi SVG di MDN</a></li> + <li><a href="http://www.w3.org/TR/SVG/" rel="external">Spesifikasi terakhir SVG</a></li> +</ul> diff --git a/files/id/glossary/url/index.html b/files/id/glossary/url/index.html new file mode 100644 index 0000000000..0a7c62889a --- /dev/null +++ b/files/id/glossary/url/index.html @@ -0,0 +1,27 @@ +--- +title: URL +slug: Glossary/URL +tags: + - Glossary + - Infrastructure +translation_of: Glossary/URL +--- +<p><em>Uniform Resource Locator</em> (<strong>URL</strong>) adalah sebuah teks <em>string </em>yang menentukan dimana sebuah sumber daya dapat ditemukan di internet.</p> + +<p>Dalam konteks {{Glossary("HTTP")}}, URL disebut sebagai "alamat Web" atau "tautan". Browser Anda menampilkan URL pada <em>address bar</em>, seperti <code>https://developer.mozilla.org</code></p> + +<p>URL juga dapat digunakan untuk mentransfer <em>file</em> ({{Glossary("FTP")}}) , <em>email</em> ({{Glossary("SMTP")}}), dan aplikasi lainnya.</p> + +<h2 id="Pelajari_juga">Pelajari juga</h2> + +<h3 id="Pengetahuan_umum"><strong>Pengetahuan umum</strong></h3> + +<ul> + <li>{{Interwiki("wikipedia", "URL")}} di Wikipedia</li> +</ul> + +<h3 id="Pelajari_ini">Pelajari ini</h3> + +<ul> + <li><a href="/id/Learn/Understanding_URLs">Memahami URL dan strukturnya</a></li> +</ul> diff --git a/files/id/glossary/variable/index.html b/files/id/glossary/variable/index.html new file mode 100644 index 0000000000..1e1e3c4392 --- /dev/null +++ b/files/id/glossary/variable/index.html @@ -0,0 +1,21 @@ +--- +title: Variable +slug: Glossary/Variable +translation_of: Glossary/Variable +--- +<p>Variabel merupakan nama lokasi untuk menyimpan {{Glossary("Value", "value")}}. Dengan begitu nilai tertentu dapat di akses melalui nama variabel yang telah ditentukan.</p> + +<h2 id="Lainnya">Lainnya</h2> + +<h3 id="Pengetahuan_Umum">Pengetahuan Umum</h3> + +<ul> + <li>{{Interwiki("wikipedia", "Variable (computer science)")}} on Wikipedia</li> +</ul> + +<h3 id="Referensi_Teknis">Referensi Teknis</h3> + +<ul> + <li><a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Guide/Grammar_and_types#Declarations">Mendeklarsikan variabel pada Javascript</a></li> + <li><a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference/Statements/var"><code>var</code> statement di JavaScript</a></li> +</ul> diff --git a/files/id/glossary/xml/index.html b/files/id/glossary/xml/index.html new file mode 100644 index 0000000000..b233a5fba7 --- /dev/null +++ b/files/id/glossary/xml/index.html @@ -0,0 +1,11 @@ +--- +title: XML +slug: Glossary/XML +tags: + - Glossary + - XML +translation_of: Glossary/XML +--- +<p><em>eXtensible Markup Language</em> (XML) adalah bahasa <em>markup</em> generik yang dispesifikasi oleh W3C. Industri teknologi informasi (IT) menggunakan banyak bahasa yang berdasarkan pada XML sebagai bahasa yang bersifat <em>data-description</em>.</p> + +<p><em>Tag</em> XML menyerupai<em> tag </em>HTML, tapi XML lebih fleksibel karena memungkinkan pengguna mendefinisikan tagnya sendiri. Cara bertindak XML ini seperti sebuah <em>meta-language</em>, di mana XML dapat digunakan untuk mendefinisikan bahasa lain, seperti {{Glossary("RSS")}}. Selain itu, HTML merupakan bahasa representasi, yang berarti XML adalah bahasa <em>data-description</em>. Ini berarti bahwa XML memiliki jangkauan aplikasi yang lebih luas dari sekedar Web. Misalnya, <em>Web services</em> dapat menggunakan XML untuk pertukaran permintaan dan tanggapan.</p> diff --git a/files/id/learn/accessibility/index.html b/files/id/learn/accessibility/index.html new file mode 100644 index 0000000000..7206a2393b --- /dev/null +++ b/files/id/learn/accessibility/index.html @@ -0,0 +1,63 @@ +--- +title: Accessibility +slug: Learn/Accessibility +translation_of: Learn/Accessibility +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Learning some HTML, CSS, and JavaScript is useful if you want to become a web developer. Beyond mechanical use, it's important to learn how to use these technologies <strong>responsibly</strong> so that all readers might use your creations on the web. To help you achieve this, this module will cover general best practices (which are demonstrated throughout the <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> topics), <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">cross browser testing</a>, and some tips on enforcing accessibility from the start. We'll cover accessibility in special detail.</p> + +<h2 id="Overview">Overview</h2> + +<p>When someone describes a site as "accessible," they mean that any user can use all its features and content, regardless of how the user accesses the web — even and especially users with physical or mental impairments.</p> + +<ul> + <li>Sites should be accessible to keyboard, mouse, and touch screen users, and any other way users access the web, including screen readers and voice assistants like Alexa and Google Home.</li> + <li>Applications should be understandable and usable by people regardless of auditory, visual, physical, or cognitive abilities.</li> + <li>Sites should also not cause harm: web features like motion can cause migraines or epileptic seizures.</li> +</ul> + +<p><strong>By default, HTML is accessible, if used correctly.</strong> Web accessibility involves ensuring that content remains accessible, regardless of who and how the web is accessed.</p> + +<h2 id="Prerequisites">Prerequisites</h2> + +<p>To get the most out of this module, it would be a good idea to either work through at least the first two modules of the <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> topics, or perhaps even better, work through the relevant parts of the accessibility module as you work through the related technology topics.</p> + +<div class="note"> +<p><strong>Note</strong>: If you are working on a computer/tablet/other devices where you don't have the ability to create your own files, you can try out most of the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://glitch.com/">Glitch</a>.</p> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a></dt> + <dd>This article starts off the module with a good look at what accessibility is — this includes what groups of people we need to consider and why, what tools different people use to interact with the web, and how we can make accessibility part of our web development workflow.</dd> + <dt><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></dt> + <dd>A great deal of web content can be made accessible just by making sure the correct HTML elements are always used for the correct purpose . This article looks in detail at how HTML can be used to ensure maximum accessibility.</dd> + <dt><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></dt> + <dd>CSS and JavaScript, when used properly, also have the potential to allow for accessible web experiences, but if misused they can significantly harm accessibility. This article outlines some CSS and JavaScript best practices that should be considered to ensure that even complex content is as accessible as possible.</dd> + <dt><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></dt> + <dd>Following on from the previous article, sometimes making complex UI controls that involve unsemantic HTML and dynamic JavaScript-updated content can be difficult. WAI-ARIA is a technology that can help with such problems by adding in further semantics that browsers and assistive technologies can recognize and use to let users know what is going on. Here we'll show how to use it at a basic level to improve accessibility.</dd> + <dt><a href="/en-US/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a></dt> + <dd>Another category of content that can create accessibility problems is multimedia — video, audio, and image content need to be given proper textual alternatives, so they can be understood by assistive technologies and their users. This article shows how.</dd> + <dt><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></dt> + <dd>With web access on mobile devices being so popular, and popular platforms such as iOS and Android having fully-fledged accessibility tools, it is important to consider the accessibility of your web content on these platforms. This article looks at mobile-specific accessibility considerations.</dd> +</dl> + +<h2 id="Assessments">Assessments</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Accessibility troubleshooting</a></dt> + <dd> + <p>In the assessment for this module, we present to you a simple site with several accessibility issues that you need to diagnose and fix.</p> + </dd> +</dl> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://egghead.io/courses/start-building-accessible-web-applications-today"><font><font>Mulai Bangun Aplikasi Web yang Dapat Diakses Hari Ini</font></font></a><font><font> - serangkaian tutorial video yang luar biasa oleh Marcy Sutton.</font></font></li> + <li><a href="https://dequeuniversity.com/resources/"><font><font>Sumber daya Universitas Deque</font></font></a><font><font> - termasuk contoh kode, referensi pembaca layar, dan sumber daya bermanfaat lainnya.</font></font></li> + <li><a href="http://webaim.org/resources/"><font><font>Sumber daya WebAIM</font></font></a><font><font> - termasuk panduan, daftar periksa, alat, dan lainnya.</font></font></li> + <li><a href="https://www.w3.org/WAI/ER/tools/"><font><font>Daftar Alat Evaluasi Aksesibilitas Web</font></font></a><font><font> - termasuk daftar alat evaluasi aksesibilitas web.</font></font></li> +</ul> 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 new file mode 100644 index 0000000000..b4431bfc93 --- /dev/null +++ b/files/id/learn/common_questions/bagaimana_cara_kerja_internet/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 +--- +<div class="summary"> +<p>Artikel ini membahas apa itu Internet dan bagaimana ia bekerja.</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prasyarat:</th> + <td>Tidak ada, namun kami mendorong Anda untuk membaca <a href="/id/docs/Learn/Thinking_before_coding">Artikel tentang menetapkan tujuan proyek</a> terlebih dahulu</td> + </tr> + <tr> + <th scope="row">Tujuan:</th> + <td>Anda akan mempelajari dasar-dasar infrastruktur teknis Web dan perbedaan antara Internet dan Web.</td> + </tr> + </tbody> +</table> + +<h2 id="Ikhtisar">Ikhtisar</h2> + +<p><strong>Internet</strong> merupakan tulang punggung dari Web, infrastruktur teknis yang memungkinkan Web tersedia. Pada dasarnya, Internet adalah jaringan besar komputer yang berkomunikasi bersama-sama.</p> + +<p><a href="http://en.wikipedia.org/wiki/Internet#History" rel="external">Sejarah Internet agak tidak jelas</a>. 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.</p> + +<h2 id="Active_Learning">Active Learning</h2> + +<ul> + <li><a href="https://www.youtube.com/watch?v=7_LPdttKXPc" rel="external">How the internet Works in 5 minutes</a>: A 5 minute video to understand the very basics of Internet by Aaron Titus.</li> +</ul> + +<h2 id="Menyelam_lebih_dalam">Menyelam lebih dalam</h2> + +<h3 id="Sebuah_jaringan_sederhana">Sebuah jaringan sederhana</h3> + +<p>Ketika dua komputer perlu berkomunikasi, Anda harus menghubungkannya, baik secara fisik (biasanya dengan menggunakan <a href="http://en.wikipedia.org/wiki/Ethernet_crossover_cable" rel="external">Kabel Ethernet</a>) atau nirkabel (seperti sistem <a href="http://en.wikipedia.org/wiki/WiFi" rel="external">WiFi</a> atau <a href="http://en.wikipedia.org/wiki/Bluetooth" rel="external">Bluetooth</a>). Semua komputer modern dapat memungkinkan koneksi tersebut.</p> + +<div class="note"> +<p><strong>Catatan:</strong> Untuk sisa artikel ini, kita hanya akan berbicara tentang kabel fisik, tetapi jaringan nirkabel bekerja dengan cara yang sama.</p> +</div> + +<p><img alt="Two computers linked together" src="https://mdn.mozillademos.org/files/8441/internet-schema-1.png" style="height: 152px; width: 600px;"></p> + +<p>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!</p> + +<p><img alt="Ten computers all together" src="https://mdn.mozillademos.org/files/8443/internet-schema-2.png" style="height: 576px; width: 600px;"></p> + +<p>Untuk mengatasi masalah ini, setiap komputer di jaringan terhubung ke komputer kecil khusus yang disebut router. <em>Router</em> 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 <em>router</em>, yang pada gilirannya meneruskan pesan ke komputer B dan memastikan pesan tidak dikirim ke komputer C.</p> + +<p>Setelah kita menambahkan <em>router</em> ke sistem, jaringan dari 10 komputer kita membutuhkan 10 kabel: satu pasang untuk setiap komputer dan <em>router</em> dengan 10 colokan.</p> + +<p><img alt="Ten computers with a router" src="https://mdn.mozillademos.org/files/8445/internet-schema-3.png" style="height: 576px; width: 600px;"></p> + +<h3 id="Jaringan_dalam_jaringan">Jaringan dalam jaringan</h3> + +<p>Sejauh ini bagus. Tapi bagaimana dengan menghubungkan ratusan, ribuan, miliaran komputer? Tentu saja satu <em>router</em> tidak dapat menskalakan sejauh itu, tetapi, jika Anda membaca dengan seksama, kami mengatakan bahwa <em>router</em> adalah komputer seperti yang lain, jadi apa yang membuat kita tidak bisa menghubungkan dua <em>router</em> bersama? Tidak ada, jadi ayo lakukan itu.</p> + +<p><img alt="Two routers linked together" src="https://mdn.mozillademos.org/files/8447/internet-schema-4.png"></p> + +<p>Dengan menghubungkan tiap komputer ke <em>router</em>, kemudian tiap <em>router</em> ke <em>router</em>, kita dapat menskalakan tanpa batas.</p> + +<p><img alt="Routers linked to routers" src="https://mdn.mozillademos.org/files/8449/internet-schema-5.png" style="height: 563px; width: 600px;"></p> + +<p>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 <em>modem</em>. <em>Modem</em> ini mengubah informasi dari jaringan kita menjadi informasi yang dapat dikelola oleh infrastruktur telepon dan sebaliknya.</p> + +<p><img alt="A router linked to a modem" src="https://mdn.mozillademos.org/files/8451/internet-schema-6.png" style="height: 340px; width: 600px;"></p> + +<p>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 <em>router</em> 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.</p> + +<p><img alt="Full Internet stack" src="https://mdn.mozillademos.org/files/8453/internet-schema-7.png" style="height: 1293px; width: 340px;"></p> + +<h3 id="Mencari_komputer">Mencari komputer</h3> + +<p>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: <code>192.168.2.10</code>.</p> + +<p>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 <em>nama domain</em>. Misal, <code>google.com</code> adalah <em>nama domain</em> yang digunakan di atas alamat IP <code>173.194.121.32</code>. Jadi menggunakan nama domain adalah cara termudah bagi kita untuk mencapai komputer melalui Internet.</p> + +<p><img alt="Show how a domain name can alias an IP address" src="https://mdn.mozillademos.org/files/8405/dns-ip.png" style="height: 160px; width: 330px;"></p> + +<h3 id="Internet_dan_Web">Internet dan Web</h3> + +<p>Seperti yang Anda lihat, ketika kita menjelajah Web dengan browser Web, kita biasanya menggunakan <em>nama domain</em> 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.</p> + +<h2 id="Langkah_selanjutnya">Langkah selanjutnya</h2> + +<ul> + <li><a href="/id/Learn/Getting_started_with_the_web/How_the_Web_works">Cara web bekerja</a></li> + <li><a href="/id/docs/Learn/page_vs_site_vs_server_vs_search_engine">Memahami perbedaan antara halaman web, web site, web server dan search engine</a></li> + <li><a href="/id/docs/Learn/Understanding_domain_names">Memahami nama domain</a></li> +</ul> 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 new file mode 100644 index 0000000000..c50aeff182 --- /dev/null +++ b/files/id/learn/common_questions/berfikir_sebelum_membuat_kode/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 +--- +<p class="summary">Artikel ini mencakup langkah pertama yang sangat penting dari setiap proyek: tentukan apa yang ingin Anda capai dengannya.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prasyarat:</th> + <td>None</td> + </tr> + <tr> + <th scope="row">Tujuan:</th> + <td>Belajar untuk menentukan tujuan untuk memberikan arahan untuk proyek website Anda.</td> + </tr> + </tbody> +</table> + +<h2 id="Ikhtisar">Ikhtisar</h2> + +<p><span class="seoSummary">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.</span></p> + +<p>Jadi, ketika Anda mendapatkan ide dan ingin mengubahnya menjadi sebuah situs web, ada beberapa pertanyaan yang harus Anda jawab sebelum yang lain:</p> + +<ul> + <li>Apa yang sebenarnya ingin saya capai?</li> + <li>Bagaimana situs web akan membantu saya mencapai tujuan saya?</li> + <li>Apa yang perlu dilakukan, dan dalam urutan apa, untuk mencapai tujuan saya?</li> +</ul> + +<p>Semua ini disebut <em>ide proyek</em> dan merupakan langkah pertama yang diperlukan untuk mencapai tujuan Anda, apakah Anda seorang pemula atau pengembang yang berpengalaman.</p> + +<h2 id="Active_Learning">Active Learning</h2> + +<p><em>Belum ada pembelajaran aktif yang tersedia. <a href="https://developer.mozilla.org/en-US/docs/MDN/Getting_started">Tolong, pertimbangkan untuk berkontribusi.</a></em></p> + +<h2 id="Menyelam_lebih_dalam">Menyelam lebih dalam</h2> + +<p>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.</p> + +<p>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.</p> + +<p>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.</p> + +<div class="note"> +<p><strong>Catatan:</strong> 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 <a href="http://en.wikipedia.org/wiki/Ideation_(idea_generation)">Project Ideation</a>, <a href="http://en.wikipedia.org/wiki/Project_planning">Project Planning</a>, dan<a href="http://en.wikipedia.org/wiki/Project_management">Project Management</a>.</p> +</div> + +<h3 id="Apa_yang_sebenarnya_ingin_saya_capai">Apa yang sebenarnya ingin saya capai?</h3> + +<p>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.</p> + +<p>Misalkan Anda seorang musisi. Anda bisa berharap demikian:</p> + +<ul> + <li>Biarkan orang lain mendengarkan musik Anda.</li> + <li>Jual barang.</li> + <li>Temui musisi lain.</li> + <li>Bicara tentang musik Anda.</li> + <li>Ajarkan musik melalui video.</li> + <li>Publikasikan foto kucing Anda.</li> + <li>Temukan gadis / pacar baru.</li> +</ul> + +<p>Setelah Anda memiliki daftar seperti itu, Anda perlu memprioritaskan. Pesanlah tujuan dari yang paling penting hingga yang tidak penting:</p> + +<ol> + <li>Mencari teman laki-laki/perempuan.</li> + <li>Biarkan orang lain mendengarkan musik Anda.</li> + <li>Bicara tentang musik Anda.</li> + <li>Temui musisi lain.</li> + <li>Jual barang.</li> + <li>Ajarkan musik melalui video.</li> + <li>Publikasikan foto kucing Anda.</li> +</ol> + +<p>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?)</p> + +<p>Jadi sekarang Anda memiliki daftar tujuan yang diprioritaskan, mari beralih ke pertanyaan berikutnya.</p> + +<h3 id="Bagaimana_sebuah_situs_web_dapat_membawa_saya_ke_tujuan_saya">Bagaimana sebuah situs web dapat membawa saya ke tujuan saya?</h3> + +<p>Jadi Anda memiliki daftar sasaran dan Anda merasa perlu situs web untuk mencapai sasaran itu. Apakah kamu yakin?</p> + +<p>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.</p> + +<p>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.</p> + +<p>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 <em>mengumpulkan </em>semua hal yang ingin kami terbitkan di satu tempat (baik untuk tujuan 3, 5, dan 6) dan mempromosikan <em>interaksi</em> 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.</p> + +<p>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.</p> + +<h3 id="Apa_yang_perlu_dilakukan_dan_dalam_urutan_apa_untuk_mencapai_tujuan_saya">Apa yang perlu dilakukan, dan dalam urutan apa, untuk mencapai tujuan saya?</h3> + +<p>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.</p> + +<p>Daripada melalui penjelasan panjang, mari kita kembali ke contoh kita dengan tabel ini:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Tujuan</th> + <th scope="col">Hal yang harus dilakukan</th> + </tr> + </thead> + <tbody> + <tr> + <td style="vertical-align: top;"> + <p>Biarkan orang lain mendengarkan musik Anda</p> + </td> + <td> + <ol> + <li>Rekam musik</li> + <li>Siapkan beberapa file audio yang dapat digunakan online (Bisakah Anda melakukan ini dengan layanan web yang ada?)</li> + <li>Berikan orang akses ke musik Anda di beberapa bagian situs web Anda</li> + </ol> + </td> + </tr> + <tr> + <td style="vertical-align: top;">Bicara tentang musik Anda</td> + <td> + <ol> + <li>Tulis beberapa artikel untuk memulai diskusi</li> + <li>Tentukan bagaimana tampilan artikel</li> + <li>Publikasikan artikel-artikel di situs web (Bagaimana melakukan ini?)</li> + </ol> + </td> + </tr> + <tr> + <td style="vertical-align: top;">Bertemu musisi lain</td> + <td> + <ol> + <li>Berikan cara agar orang lain menghubungi Anda (Email? Facebook? Telepon? Mail?)</li> + <li>Tetapkan bagaimana orang akan menemukan saluran kontak itu dari situs web Anda</li> + </ol> + </td> + </tr> + <tr> + <td style="vertical-align: top;">Jual barang</td> + <td> + <ol> + <li>Buat barangnya </li> + <li>Simpan barangnya</li> + <li>Temukan cara untuk menangani pengiriman</li> + <li>Temukan cara untuk menangani pembayaran</li> + <li>Buat mekanisme di situs Anda agar orang memesan</li> + </ol> + </td> + </tr> + <tr> + <td style="vertical-align: top;">Ajarkan musik melalui video</td> + <td> + <ol> + <li>Rekam pelajaran video </li> + <li>Siapkan file video yang dapat dilihat secara online (Sekali lagi, dapatkah Anda melakukan ini dengan layanan web yang ada?)</li> + <li>Berikan orang akses ke video Anda di beberapa bagian situs web Anda</li> + </ol> + </td> + </tr> + </tbody> +</table> + +<p>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.</p> + +<p>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?)</p> + +<h2 id="Kesimpulan">Kesimpulan</h2> + +<p>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.</p> + +<p>Dari artikel ini, Anda sekarang dapat membuat rencana kasar untuk membuat situs web. Langkah selanjutnya mungkin membaca <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work">how the Internet works</a>.</p> diff --git a/files/id/learn/common_questions/index.html b/files/id/learn/common_questions/index.html new file mode 100644 index 0000000000..b63f533a9a --- /dev/null +++ b/files/id/learn/common_questions/index.html @@ -0,0 +1,135 @@ +--- +title: Pertanyaan Umum +slug: Learn/Common_questions +tags: + - CodingScripting + - Infrastructure + - Learn + - NeedsTranslation + - TopicStub + - Web + - WebMechanics +translation_of: Learn/Common_questions +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Bagian Area Pembelajaran ini dirancang untuk memberikan jawaban atas pertanyaan umum yang mungkin muncul, yang bukan merupakan bagian dari jalur pembelajaran inti terstruktur (misal artikel pembelajaran <a href="/id/docs/Learn/HTML">HTML</a> atau <a href="/id/docs/Learn/HTML">CSS</a>). Artikel ini dirancang untuk bekerja sendiri.</p> + +<h2 id="Bagaimana_Web_bekerja">Bagaimana Web bekerja</h2> + +<p>Bagian ini mencakup mekanika web —pertanyaan yang berkaitan dengan pengetahuan umum tentang ekosistem Web dan bagaimana cara kerjanya.</p> + +<dl> + <dt> + <h3 id="Bagaimana_cara_kerja_Internet"><a href="/id/docs/Learn/Common_questions/Bagaimana_cara_kerja_Internet">Bagaimana cara kerja Internet?</a></h3> + </dt> + <dd><strong>Internet</strong> merupakan tulang punggung dari Web, infrastruktur teknis yang memungkinkan Web. Pada dasarnya, Internet adalah jaringan besar komputer yang berkomunikasi bersama-sama. Artikel ini membahas bagaimana internet bekerja, pada tingkat dasar.</dd> + <dt> + <h3 id="Apa_perbedaan_antara_webpage_website_web_server_dan_search_engine"> <a href="/en-US/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines">Apa perbedaan antara webpage, website, web server, dan search engine?</a></h3> + </dt> + <dd>Pada artikel ini kami akan menjelaskan beragam konsep yang berhubungan dengan: webpage, website, web server, dan search engine. Konsep ini akan membingungkan bagi pemula yang baru mempelajari tentang Web, atau (pernah) melakukan kesalahan. Yuk, kita pelajari satu persatu konsep tersebut.</dd> + <dt> + <h3 id="Apa_yang_dimaksud_URL"><a href="/en-US/docs/Learn/Common_questions/What_is_a_URL">Apa yang dimaksud URL?</a></h3> + </dt> + <dd>Dengan {{Glossary("Hypertext")}} dan {{Glossary("HTTP")}}, URL sebuah konsep utama dari Web. Mekanisme ini digunakan oleh {{Glossary("Browser","browsers")}} untuk memperoleh sumber publikasi pada web.</dd> + <dt> + <h3 id="Apa_yang_dimaksud_nama_domain"><a href="/en-US/docs/Learn/Common_questions/What_is_a_domain_name">Apa yang dimaksud nama domain?</a></h3> + </dt> + <dd>Nama domain adalah bagian dari infrastruktur Internet. Nama domain ini merupakan alamat sebuah web yang dapat dibaca oleh manusia yang berasal dari web server yang tersedia di Internet.</dd> + <dt> + <h3 id="Apa_yang_dimaksud_dengan_web_server"><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">Apa yang dimaksud dengan web server?</a></h3> + </dt> + <dd>Kata "Web server" dapat diartikan sebagai sebuah perangkat keras (hardware) atau perangkat lunak (software) yang melayani website kepada klien diseluruh dunia, atau keduanya dapat bekerja sekaligus. Pada artikel ini kita akan mempelajari bagaimana web server bekerja, dan mengapa hal ini sangat penting.</dd> + <dt> + <h3 id="Apa_yang_dimaksud_dengan_hyperlinks"><a href="/en-US/docs/Learn/Common_questions/What_are_hyperlinks">Apa yang dimaksud dengan hyperlinks?</a></h3> + </dt> + <dd>Di artikel ini, kita akan mempelajari apa yang dimaksud dengan hyperlink dan kenapa hal ini begitu penting.</dd> +</dl> + +<h2 id="Peralatan_dan_pengaturan">Peralatan dan pengaturan</h2> + +<p>Pertanyaan yang berhubungan dengan peralatan/software yang dapat anda gunakan untuk membangun website.</p> + +<dl> + <dt> + <h3 id="Berapa_banyak_biaya_yang_dibutuhkan_untuk_membuat_website"><a href="/en-US/docs/Learn/Common_questions/How_much_does_it_cost">Berapa banyak biaya yang dibutuhkan untuk membuat website?</a></h3> + </dt> + <dd>Ketika anda akan launching sebuah website, anda (mungkin) biasa saja tidak akan mengeluarkan biaya apapun. Di artikel ini, kita akan berdiskusi berapa banyak biaya yang dibutuhkan dan apa saja yang anda dapatkan dari yang anda bayar (atau yang anda dapat secara gratis).</dd> + <dt> + <h3 id="Software_yang_Saya_butuhkan_untuk_membuat_sebuah_website"><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">Software yang Saya butuhkan untuk membuat sebuah website?</a></h3> + </dt> + <dd>Di artikel ini kami akan menjelaskan komponen software apa saja yang anda butuhkan untuk mengedit, upload, atau menampilkan sebuah website.</dd> + <dt> + <h3 id="Text_editor_apa_saja_yang_tersedia"><a href="/en-US/docs/Learn/Common_questions/Available_text_editors">Text editor apa saja yang tersedia?</a></h3> + </dt> + <dd>Di artikel ini kami menjelaskan hal utama tentang pemilihan dan instalasi text editor untuk pengembangan web.</dd> + <dt> + <h3 id="What_are_browser_developer_tools"><a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools?</a></h3> + </dt> + <dd>Every browser features a set of devtools for debugging HTML, CSS, and other web code. This article explains how to use the basic functions of your browser's devtools.</dd> + <dt> + <h3 id="How_do_you_make_sure_your_website_works_properly"><a href="/en-US/docs/Learn/Common_questions/Checking_that_your_web_site_is_working_properly">How do you make sure your website works properly?</a></h3> + </dt> + <dd>So you've published your website online — very good! But are you sure it works properly? This article provides some basic troubleshooting steps.</dd> + <dt> + <h3 id="How_do_you_set_up_a_local_testing_server"><a href="/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server">How do you set up a local testing server?</a></h3> + </dt> + <dd> + <div> + <p>This article explains how to set up a simple local testing server on your machine, and the basics of how to use it.</p> + </div> + </dd> + <dt> + <h3 id="How_do_you_upload_files_to_a_web_server"><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">How do you upload files to a web server?</a></h3> + </dt> + <dd>This article shows how to publish your site online with <a class="glossaryLink" href="https://developer.mozilla.org/en-US/docs/Glossary/FTP" title="FTP: FTP (File Transfer Protocol) is the standard network protocol for transferring files from one host to another over the Internet through TCP.">FTP</a> tools — one of the most common ways to get a website online so others can access it from their computers.</dd> + <dt> + <h3 id="How_do_I_use_GitHub_Pages"><a href="/en-US/docs/Learn/Common_questions/Using_GitHub_Pages">How do I use GitHub Pages?</a></h3> + </dt> + <dd>This article provides a basic guide to publishing content using GitHub's gh-pages feature.</dd> + <dt> + <h3 id="How_do_you_host_your_website_on_Google_App_Engine"><a href="/en-US/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">How do you host your website on Google App Engine?</a></h3> + </dt> + <dd>Looking for a place to host your website? Here's a step-by-step guide to hosting your website on Google App Engine.</dd> + <dt> + <h3 id="What_tools_are_available_to_debug_and_improve_website_performance"><a href="/en-US/docs/Tools/Performance">What tools are available to debug and improve website performance?</a></h3> + </dt> + <dd>This set of articles shows you how to use the Developer Tools in Firefox to debug and improve performance of your website, using the tools to check the memory usage, the JavaScript call tree, the amount of DOM nodes being rendered, and more.</dd> +</dl> + +<h2 id="Design_and_accessibility">Design and accessibility</h2> + +<p>This section lists questions related to aesthetics, page structure, accessibility techniques, etc.</p> + +<dl> + <dt> + <h3 id="How_do_I_start_to_design_my_website"><a href="/en-US/docs/Learn/Common_questions/Thinking_before_coding">How do I start to design my website?</a></h3> + </dt> + <dd>This article covers the all-important first step of every project: define what you want to accomplish with it.</dd> + <dt> + <h3 id="What_do_common_web_layouts_contain"><a href="/en-US/docs/Learn/Common_questions/Common_web_layouts">What do common web layouts contain?</a></h3> + </dt> + <dd>When designing pages for your website, it's good to have an idea of the most common layouts. This article runs thorugh some typical web layouts, looking at the parts that make up each one.</dd> + <dt> + <h3 id="What_is_accessibility"><a href="/en-US/docs/Learn/Common_questions/What_is_accessibility">What is accessibility?</a></h3> + </dt> + <dd>This article introduces the basic concepts behind web accessibility.</dd> + <dt> + <h3 id="How_can_we_design_for_all_types_of_users"><a href="/en-US/docs/Learn/Common_questions/Design_for_all_types_of_users">How can we design for all types of users?</a></h3> + </dt> + <dd>This article provides basic techniques to help you design websites for any kind of user — quick accessibility wins, and other such things.</dd> + <dt> + <h3 id="What_HTML_features_promote_accessibility"><a href="/en-US/docs/Learn/Common_questions/HTML_features_for_accessibility">What HTML features promote accessibility?</a></h3> + </dt> + <dd>This article describes specific features of HTML that can be used to make a web page more accessible to people with different disabilities.</dd> +</dl> + +<h2 id="HTML_CSS_and_JavaScript_questions">HTML, CSS and JavaScript questions</h2> + +<p>For common solutions to HTML/CSS/JavaScript problems, try the following articles:</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto">Use HTML to solve common problems</a></li> + <li><a href="/en-US/docs/Learn/CSS/Howto">Use CSS to solve common problems</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Howto">Use JavaScript to solve common problems</a></li> +</ul> diff --git a/files/id/learn/common_questions/pages_sites_servers_and_search_engines/index.html b/files/id/learn/common_questions/pages_sites_servers_and_search_engines/index.html new file mode 100644 index 0000000000..622e047b09 --- /dev/null +++ b/files/id/learn/common_questions/pages_sites_servers_and_search_engines/index.html @@ -0,0 +1,118 @@ +--- +title: >- + What is the difference between webpage, website, web server, and search + engine? +slug: Learn/Common_questions/Pages_sites_servers_and_search_engines +translation_of: Learn/Common_questions/Pages_sites_servers_and_search_engines +--- +<div class="summary"> +<p><span class="seoSummary">In this article, we describe various web-related concepts: web pages, websites, web servers, and search engines. These terms are often confused by newcomers to the web or are incorrectly used. Let's learn what they each mean!</span></p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <td>You should know <a href="/en-US/docs/Learn/Common_questions/How_does_the_Internet_work">how the Internet works</a>.</td> + </tr> + <tr> + <th scope="row">Objective:</th> + <td>Be able to describe the differences between a web page, a website, a web server, and a search engine.</td> + </tr> + </tbody> +</table> + +<h2 id="Summary">Summary</h2> + +<p>As with any area of knowledge, the web comes with a lot of jargon. Don't worry, we won't overwhelm you with all of it (we have a <a href="/en-US/docs/Glossary">glossary</a> if you're curious). However, there are a few basic terms you need to understand at the outset, since you'll hear these expressions all the time as you read on. It's easy to confuse these terms sometimes since they refer to related but different functionalities. In fact, you'll sometimes see these terms misused in news reports and elsewhere, so getting them mixed up is understandable!</p> + +<p>We'll cover these terms and technologies in more detail as we explore further, but these quick definitions will be a great start for you:</p> + +<dl> + <dt>web page</dt> + <dd>A document which can be displayed in a web browser such as Firefox, Google Chrome, Opera, Microsoft Internet Explorer or Edge, or Apple's Safari. These are also often called just "pages."</dd> + <dt>website</dt> + <dd>A collection of web pages which are grouped together and usually connected together in various ways. Often called a "web site" or simply a "site."</dd> + <dt>web server</dt> + <dd>A computer that hosts a website on the Internet.</dd> + <dt>search engine</dt> + <dd>A web service that helps you find other web pages, such as Google, Bing, Yahoo, or DuckDuckGo. Search engines are normally accessed through a web browser (e.g. you can perform search engine searches directly in the address bar of Firefox, Chrome, etc.) or through a web page (e.g. <a href="https://www.bing.com/">bing.com</a> or <a href="https://duckduckgo.com/">duckduckgo.com</a>).</dd> +</dl> + +<p>Let's look at a simple analogy — a public library. This is what you would generally do when visiting a library:</p> + +<ol> + <li>Find a search index and look for the title of the book you want.</li> + <li>Make a note of the catalog number of the book.</li> + <li>Go to the particular section containing the book, find the right catalog number, and get the book.</li> +</ol> + +<p>Let's compare the library with a web server:</p> + +<ul> + <li>The library is like a web server. It has several sections, which is similar to a web server hosting multiple websites.</li> + <li>The different sections (science, math, history, etc.) in the library are like websites. Each section is like a unique website (two sections do not contain same books).</li> + <li>The books in each section are like webpages. One website may have several webpages, e.g., the Science section (the website) will have books on heat, sound, thermodynamics, statics, etc. (the webpages). Webpages can each be found at a unique location (URL).</li> + <li>The search index is like the search engine. Each book has its own unique location in the library (two books cannot be kept at the same place) which is specified by the catalog number.</li> +</ul> + +<h2 id="Active_learning">Active learning</h2> + +<p><em>There is no active learning available yet. <a href="/en-US/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p> + +<h2 id="Deeper_dive">Deeper dive</h2> + +<p>So, let's dig deeper into how those four terms are related and why they are sometimes confused with each other.</p> + +<h3 id="Web_page">Web page</h3> + +<p>A <strong>web page</strong> is a simple document displayable by a {{Glossary("browser")}}. Such documents are written in the {{Glossary("HTML")}} language (which we look into in more detail in <a href="/en-US/docs/Web/HTML">other articles</a>). A web page can embed a variety of different types of resources such as:</p> + +<ul> + <li><em>style information</em> — controlling a page's look-and-feel</li> + <li><em>scripts</em> — which add interactivity to the page</li> + <li><em>media</em> — images, sounds, and videos.</li> +</ul> + +<div class="note"> +<p><strong>Note: </strong>Browsers can also display other documents such as {{Glossary("PDF")}} files or images, but the term <strong>web page</strong> specifically refers to HTML documents. Otherwise, we only use the term <strong>document</strong>.</p> +</div> + +<p>All web pages available on the web are reachable through a unique address. To access a page, just type its address in your browser address bar:</p> + +<p style="text-align: center;"><img alt="Example of a web page address in the browser address bar" src="https://mdn.mozillademos.org/files/8529/web-page.jpg" style="height: 239px; width: 650px;"></p> + +<h3 id="Web_site">Web site</h3> + +<p>A <em>website</em> is a collection of linked web pages (plus their associated resources) that share a unique domain name. Each web page of a given website provides explicit links—most of the time in the form of clickable portion of text—that allow the user to move from one page of the website to another.</p> + +<p>To access a website, type its domain name in your browser address bar, and the browser will display the website's main web page, or <em>homepage </em>(casually referred as "the home"):</p> + +<p><img alt="Example of a web site domain name in the browser address bar" src="https://mdn.mozillademos.org/files/8531/web-site.jpg" style="display: block; height: 365px; margin: 0px auto; width: 650px;"></p> + +<p>The ideas of a <em>web page</em> and a <em>website</em> are especially easy to confuse for a <em>website</em> that contains only one <em>web page.</em> Such a website is sometimes called a <em>single-page website.</em></p> + +<h3 id="Web_server">Web server</h3> + +<p>A <em>web server</em> is a computer hosting one or more <em>websites</em>. "Hosting" means that all the <em>web pages </em> and their supporting files are available on that computer. The <em>web server</em> will send any <em>web page</em> from the <em>website</em> it is hosting to any user's browser, per user request.</p> + +<p>Don't confuse <em>websites</em> and <em>web servers</em>. For example, if you hear someone say, "My website is not responding", it actually means that the <em>web server</em> is not responding and therefore the <em>website</em> is not available. More importantly, since a web server can host multiple websites, the term <em>web server</em> is never used to designate a website, as it could cause great confusion. In our previous example, if we said, "My web server is not responding", it means that multiple websites on that web server are not available.</p> + +<h3 id="Search_engine">Search engine</h3> + +<p>Search engines are a common source of confusion on the web. A search engine is a special kind of website that helps users find web pages from <em>other</em> websites.</p> + +<p>There are plenty out there: <a href="https://www.google.com/">Google</a>, <a href="https://www.bing.com/">Bing</a>, <a href="https://www.yandex.com/">Yandex</a>, <a href="https://duckduckgo.com/">DuckDuckGo</a>, and many more. Some are generic, some are specialized about certain topics. Use whichever you prefer.</p> + +<p>Many beginners on the web confuse search engines and browsers. Let's make it clear: A <em><strong>browser</strong></em> is a piece of software that retrieves and displays web pages; a <strong><em>search engine</em></strong> is a website that helps people find web pages from other websites. The confusion arises because, the first time someone launches a browser, the browser displays a search engine's homepage. This makes sense, because, obviously, the first thing you want to do with a browser is to find a web page to display. Don't confuse the infrastructure (e.g., the browser) with the service (e.g., the search engine). The distinction will help you quite a bit, but even some professionals speak loosely, so don't feel anxious about it.</p> + +<p>Here is an instance of Firefox showing a Google search box as its default startup page:</p> + +<p><img alt="Example of Firefox nightly displaying a custom Google page as default" src="https://mdn.mozillademos.org/files/8533/search-engine.jpg" style="display: block; height: 399px; margin: 0px auto; width: 650px;"></p> + +<h2 id="Next_steps">Next steps</h2> + +<ul> + <li>Dig deeper: <a href="/en-US/docs/Learn/What_is_a_web_server">What is a web server</a></li> + <li>See how web pages are linked into a web site: <a href="/en-US/docs/Learn/Understanding_links_on_the_web">Understanding links on the web</a></li> +</ul> diff --git a/files/id/learn/common_questions/set_up_a_local_testing_server/index.html b/files/id/learn/common_questions/set_up_a_local_testing_server/index.html new file mode 100644 index 0000000000..0bc57c45d2 --- /dev/null +++ b/files/id/learn/common_questions/set_up_a_local_testing_server/index.html @@ -0,0 +1,108 @@ +--- +title: Bagaimana Anda menyiapkan server pengujian lokal? +slug: Learn/Common_questions/set_up_a_local_testing_server +tags: + - Express + - Flask + - Node + - Pemula + - Python + - django + - server-side + - servers + - sisi-server +translation_of: Learn/Common_questions/set_up_a_local_testing_server +--- +<div class="summary"> +<p>Artikel ini menjelaskan cara menyiapkan server pengujian lokal sederhana di komputer Anda, dan dasar-dasar penggunaannya.</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prasyarat:</th> + <td>Anda harus terlebih dahulu mengetahui <a href="/id/docs/Learn/Common_questions/Bagaimana_cara_kerja_Internet">bagaimana cara kerja Internet</a>, dan <a href="/id/docs/Learn/What_is_a_Web_server">apa itu server Web.</a></td> + </tr> + <tr> + <th scope="row">Tujuan:</th> + <td>Anda akan belajar cara mengatur server pengujian lokal.</td> + </tr> + </tbody> +</table> + +<h2 id="Berkas_lokal_vs._berkas_remote">Berkas lokal vs. berkas remote</h2> + +<p>Di sebagian besar area pembelajaran, kami memberi tahu Anda untuk hanya membuka contoh Anda secara langsung di browser — ini dapat dilakukan dengan mengklik ganda file HTML, <em>drag and drop</em> ke jendela browser, ataupun memilih <em>File</em> > <em>Open...</em> dan menavigasi ke file HTML. Ada banyak cara untuk mencapai ini.</p> + +<p>Jika alamat web diawali dengan <code>file://</code> diikuti oleh path menuju file di hard drive lokal anda, maka berkas lokal digunakan. Sebaliknya, jika Anda melihat salah satu contoh kami dihosting di GitHub (atau contoh di beberapa remote server lain), alamat web diawali dengan <code>http://</code> atau <code>https://</code>, untuk menunjukkan berkas tersebut diterima melalui HTTP.</p> + +<h2 id="Masalah_dengan_menguji_file_lokal">Masalah dengan menguji file lokal</h2> + +<p>Beberapa contoh tidak akan berjalan jika Anda membukanya sebagai file lokal. Hal ini dapat disebabkan oleh berbagai alasan, yang paling mungkin adalah:</p> + +<ul> + <li><strong>Mereka menampilkan permintaan <span lang="en-US">asynchronous</span>.</strong> Beberapa <span lang="en-US">browser</span> (termasuk Chrome) tidak akan menjalankan permintaan <span lang="en-US">async</span> (lihat <a href="/id/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Mengambil data dari server</a>) jika anda langsung menjalankan contoh dari berkas lokal. Ini karena pembatasan keamanan (untuk lebih lanjut tentang keamanan web, baca <a href="/id/docs/Learn/Server-side/First_steps/Website_security">Keamanan situs web</a>).</li> + <li><strong>Mereka menampilkan bahasa <span lang="en-US">server side</span>.</strong> Bahasa Server-side (seperti PHP maupun Python) memerlukan server khusus untuk menginerpretasi kode dan menyerahkan hasil.</li> +</ul> + +<h2 id="Menjalankan_server_HTTP_lokal_sederhana">Menjalankan server HTTP lokal sederhana</h2> + +<p>Untuk mengatasi masalah async request, kita perlu menguji contoh-contoh tersebut dengan menjalankannya melalui server web lokal. OCara paling mudah untuk melakukan ini untuk tujuan kita adalah menggunakan <code>SimpleHTTPServer</code> module pada Python.</p> + +<p>Untuk melakukannya:</p> + +<ol> + <li> + <p>Install Python. Jika anda menggunakan Linux atau Mac OS X, seharusnya sudah tersedia di sistem Anda. Jika anda pengguna Windows, Anda bisa mendapatkan installer dari situs Python dan ikuti instruksi untuk menginstalnya:</p> + + <ul> + <li>Pergi ke <a href="https://www.python.org/">python.org</a></li> + <li>Di bawah bagian Unduh, klik tautan untuk Python "3.xxx".</li> + <li>Pada bagian bawah halaman, pilih <em>Windows x86 executable installer</em> lalu download.</li> + <li>Setelah download selesai, jalankan file tersebut.</li> + <li>Pada halaman awal installer, pastikan anda menceklis "Add Python 3.xxx to PATH" pada checkbox.</li> + <li>Klik <em>Install</em>, kemudian klik <em>Close</em> ketika instalasi selesai.</li> + </ul> + </li> + <li> + <p>Bka command prompt (Windows) / terminal (OS X/Linux) anda. tuk mengecek apakah Python telah terinstal, ketikkan perintah berikut:</p> + + <pre class="brush: bash">python -V</pre> + </li> + <li> + <p>Ini seharusnya mengembalikan nilai versi. Jika ini OK, arahkan ke direktori yang ada di dalam contoh Anda, menggunakan perintah <code>cd</code>.</p> + + <pre class="brush: bash"># masukkan nama direktori untuk memasukkannya, misalnya +cd Desktop +# gunakan dua titik untuk melompat satu tingkat direktori jika perlu +cd ..</pre> + </li> + <li> + <p>Ketikkan perintah berikut untuk menjalankan server di direktori tersebut:</p> + + <pre class="brush: bash"># Jika versi Python yang dikembalikan di atas adalah 3.X +python -m http.server +# Jika versi Python yang dikembalikan di atas adalah 2.X +python -m <code>SimpleHTTPServer</code></pre> + </li> + <li> + <p>Secara default, ini akan menjalankan konten-konten dalam direktori pada web server local, di port 8000. Anda dapat pergi ke server ini dengan pergi ke url <code>localhost:8000</code> di web browser anda. Disini anda akan melihat daftar isi dari direktori — klik pada berkas HTML yang akan anda jalankan.</p> + </li> +</ol> + +<div class="note"> +<p><strong>Catatan</strong>: Jika anda sudah menjalankan sesuatu di port 8000, anda dapat memilih port lain dengan menjalankan perintah server diikuti dengan nilai port alternatif, misal <code>python -m http.server 7800</code> (Python 3.x) atau <code>python -m SimpleHTTPServer 7800</code> (Python 2.x). Anda kemudian dapat mengakses konten Anda di <code>localhost:7800</code>.</p> +</div> + +<h2 id="Menjalankan_bahasa_sisi_server_secara_lokal">Menjalankan bahasa sisi server secara lokal</h2> + +<p>Modul <code>SimpleHTTPServer (python 2.0) http.server (python 3.0)</code> pada Python sangat berguna, tetapi tidak tahu cara menjalankan kode yang ditulis dalam bahasa seperti Python, PHP atau JavaScript. Untuk mengatasinya Anda akan butuh sesuatu yang lebih — apa yang Anda perlukan tergantung pada bahasa sisi server yang Anda coba jalankan. Beberapa contoh antara lain:</p> + +<ul> + <li>Untuk menjalankan kode Python server-side, anda butuh web framework Python. Anda dapat mengetahui cara menggunakan framework Django dengan membaca <a href="/id/docs/Learn/Server-side/Django">Django Web Framework (Python)</a>. <a href="http://flask.pocoo.org/">Flask</a> juga merupakan alternatif yang baik (sedikit lebih berat) dibandingkan dengan Django. Untuk menjalankannya anda perlu <a href="/id/docs/Learn/Server-side/Django/development_environment#Installing_Python_3">menginstall Python/PIP</a>, kemudian menginstall Flask menggunakan perintah <code>pip3 install flask</code>. Pada titik ini Anda seharusnya dapat menjalankan contoh-contoh Python Flask menggunakan misalnya <code>python3 python-example.py</code>, lalu menavigasi ke <code>localhost:5000</code> di browser anda.</li> + <li>Tuk menjalankan kode server-side Node.js (JavaScript), Anda harus menggunakan raw node maupun framework yang dibangun di atasnya. Express adalah pilihan yang bagus — lihat juga <a href="/id/docs/Learn/Server-side/Express_Nodejs">Express Web Framework (Node.js/JavaScript)</a>.</li> + <li>Untuk menjalankan kode server-side PHP, jalankan <a href="http://php.net/manual/en/features.commandline.webserver.php">PHP's built-in development server</a>:</li> +</ul> + +<pre class="shellcode">$ cd jalan/ke/kode/php/anda +$ php -S localhost:8000</pre> diff --git a/files/id/learn/css/index.html b/files/id/learn/css/index.html new file mode 100644 index 0000000000..b20c1b0586 --- /dev/null +++ b/files/id/learn/css/index.html @@ -0,0 +1,67 @@ +--- +title: Learn to style HTML using CSS +slug: Learn/CSS +tags: + - Beginner + - CSS + - CodingScripting + - Debugging + - Landing + - NeedsContent + - NeedsTranslation + - Style + - Topic + - TopicStub + - length + - specificity +translation_of: Learn/CSS +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Cascading Stylesheets — or {{glossary("CSS")}} — is the first technology you should start learning after {{glossary("HTML")}}. While HTML is used to define the structure and semantics of your content, CSS is used to style it and lay it out. So for example, you can use CSS to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.</p> + +<h2 id="Learning_pathway">Learning pathway</h2> + +<p>You should really learn the basics of HTML before attempting any CSS. We'd recommend that you work through our <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module first — you can then learn about:</p> + +<ul> + <li>CSS, starting with the <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a> module</li> + <li>More advanced <a href="/en-US/Learn/HTML#Modules">HTML modules</a></li> + <li><a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, and how to use it to add dynamic functionality to web pages</li> +</ul> + +<p>Once you understand the very fundamentals of HTML, we recommend that you learn HTML and CSS at the same time, moving back and forth between the two topics. This is because HTML is far more interesting and much more fun to learn when you apply CSS, and you can't really learn CSS without knowing HTML.</p> + +<p>Before starting this topic, you should also have at least basic familiarity with using computers and using the Web passively (i.e. just looking at it, consuming the content). You should have a basic work environment set up as detailed in <a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a>, and understand how to create and manage files, as detailed in <a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a> — both are parts of our <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a> complete beginner's module.</p> + +<p>It is recommended that you work through <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a> before attempting this topic, however, it isn't absolutely necessary; much of what is covered in the CSS basics article is also covered in our Introduction to CSS module, albeit in a lot more detail.</p> + +<h2 id="Modules">Modules</h2> + +<p>This topic contains the following modules, in a suggested order for working through them. You should definitely start with the first one.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a></dt> + <dd>This module gets you started with the basics of how CSS works, including selectors and properties, writing CSS rules, applying CSS to HTML, how to specify length, color, and other units in CSS, cascade and inheritance, box model basics, and debugging CSS.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text">Styling text</a></dt> + <dd>Here we look at text styling fundamentals, including setting font, boldness, and italics, line and letter spacing, and drop shadows and other text features. We round off the module by looking at applying custom fonts to your page, and styling lists and links.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a></dt> + <dd>Next up, we look at styling boxes, one of the fundamental steps towards laying out a web page. In this module we recap the box model then look at controlling box layouts by setting padding, borders and margins, setting custom background colors, images and other features, and fancy features such as drop shadows and filters on boxes.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a></dt> + <dd>At this point we've already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now it's time to look at how to place your boxes in the right place in relation to the viewport, and one another. We have covered the necessary prerequisites so you can now dive deep into CSS layout, looking at different display settings, traditional layout methods involving float and positioning, and new, fangled layout tools like flexbox.</dd> + <dt>Responsive design (TBD)</dt> + <dd>With so many different types of devices able to browse the Web these days, <a href="/en-US/docs/Web/Guide/Responsive_design">responsive web design</a> (RWD) has become a core web development skill. This module will cover the basic principles and tools of RWD, explain how to apply different CSS to a document depending on device features like screen width, orientation, and resolution, and explore the technologies available for serving different videos and images depending on such features.</dd> +</dl> + +<h2 id="Solving_common_CSS_problems">Solving common CSS problems</h2> + +<p><a href="/en-US/docs/Learn/CSS/Howto">Use CSS to solve common problems</a> provides links to sections of content explaining how to use CSS to solve very common problems when creating a webpage.</p> + +<p>From the beginning, the things you'll do most are to apply colors to HTML elements and their backgrounds, change the size, shape, and position of elements, and add and define borders on elements. But there's not much you can't do once you have a solid understanding of even the basics of CSS. One of the best things about learning CSS is that once you know the fundamentals, usually you have a pretty good feel for what can and can't be done, even if you don't actually know how to do it yet!</p> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS">CSS on MDN</a></dt> + <dd>The main entry point for CSS documentation on MDN, where you'll find detailed reference documentation for all features of the CSS language. Want to know all the values a property can take? This is a good place to go.</dd> +</dl> 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 new file mode 100644 index 0000000000..76600c89ea --- /dev/null +++ b/files/id/learn/getting_started_with_the_web/akan_terlihat_seperti_apa_website_anda/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 +--- +<div>{{LearnSidebar}}<br> +{{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")}}</div> + +<div class="summary"> +<p><em>Akan terlihat seperti apa website kamu?</em> 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?"</p> +</div> + +<h2 id="Hal_penting_yang_pertama_Perencanaan">Hal penting yang pertama: Perencanaan</h2> + +<p>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. <span id="result_box" lang="id"><span>Kita akan mulai</span> <span>dengan membuat</span> <span>halaman web</span> <span>sederhana dengan</span> <span>judul</span><span>,</span> <span>gambar</span><span>,</span> <span>dan</span> <span>beberapa paragraf</span></span>.</p> + +<p>Untuk memulai, kamu harus menjawab beberapa pertanyaan berikut ini:</p> + +<ol> + <li><strong>Tentang apa websitemu? </strong>Apakah kamu suka anjing, New York, atau Pacman?</li> + <li><strong>Informasi apa yang akan kamu sajikan? </strong>Tulis sebuah judul dan beberapa paragraf, dan pikirkan gambar yang ingin kamu tampilkan di halaman website.</li> + <li><strong>Akan terlihat seperti apa websitemu, </strong>dalam kondisi paling sederhana. Apa warna latar belakang? Apa jenis huruf yang tepat: formal, kartun, bold and loud, halus?</li> +</ol> + +<div class="note"> +<p><strong>Catatan</strong>: 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 <a href="https://www.mozilla.org/en-US/styleguide/products/firefox-os/">Pedoman Firefox OS</a>.</p> +</div> + +<h2 id="Gambar_desainnya">Gambar desainnya</h2> + +<p>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!</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9239/website-drawing-scan.png" style="display: block; height: 460px; margin: 0px auto; width: 640px;"></p> + +<div class="note"> +<p><strong>Catatan</strong>: 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.</p> + +<p>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.</p> +</div> + +<h2 id="Memilih_aset">Memilih aset</h2> + +<p>Sampai disini, lebih baik mulai memilih konten apa yang akan kamu tampilan dalam halaman webmu.</p> + +<h3 id="Teks">Teks</h3> + +<p>Kamu harus menulis paragraf dan judul di awal. Jangan sampai lupa.</p> + +<h3 id="Warna_tema">Warna tema</h3> + +<p>Untuk memilih warna, lihat <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool">Color Picker</a> dan pilih warna kesukaanmu. Saat kamu mengklik sebuah warna, kamu akan melihat 6-karakter kode yang aneh seperti <code>#660066</code>. Itulah yang disebut kode hex <em>(</em>kependekan dari hexadecimal<em>)</em>. Kopi kodenya ke tempat aman supaya bisa dipakai nanti.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8975/Screenshot%20from%202014-11-03%2017:40:49.png" style="height: 262px; width: 448px;"></p> + +<h3 id="Gambar">Gambar</h3> + +<p>Untuk memilih gambar, lihat <a href="https://www.google.com/imghp?gws_rd=ssl">Google Images</a> dan cari sesuatu yang cocok.</p> + +<ol> + <li>Ketika kamu sudah menemukan yang kamu inginkan, klik gambarnya.</li> + <li>Pilih <em>View image</em>.</li> + <li>Di halaman selanjutnya, klik kanan pada gambar (Ctrl + klik di Mac), pilih <em>Save Image As...</em>, dan pilih tempat untuk menyimpan gambarnya. Bisa juga dikopi alamat webnya dari bar alamat perambanmu supaya bisa dipakai nanti.</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8985/Screenshot%20from%202014-11-04%2015:09:21.png" style="height: 293px; width: 420px;"></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8989/Screenshot%20from%202014-11-04%2015:20:48.png" style="height: 292px; width: 340px;"></p> + +<p>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 <em>Tool</em>, lalu pilih opsi <em>Usage rights</em> yang muncul di situ. Kamu sebaiknya pilih opsi semacam <em>Labeled for reuse</em>.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16598/updated-google-images-licensing.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<h3 id="Font">Font</h3> + +<p>Untuk memilih font:</p> + +<ol> + <li>Pergi ke <a href="http://www.google.com/fonts">Google Fonts</a> dan cari di situ sampai kamu menemukan yang pas. kamu juga bisa menyaring yang berada di kanan layar supaya pencarian lebih mudah</li> + <li>Klik <em>Add to collection</em> tepat di sebelah nama font.</li> + <li>Klik <em>Use</em> di panel bagian bawah.</li> + <li>Di halaman selanjutnya, gulung ke bawah ke seksi 3 dan 4, dan kopi baris kode yang diberi Google ke teks editor untuk dipakai nantinya.</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13871/font1.png" style="height: 359px; width: 600px;"></p> + +<p> </p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13873/font2.png" style="height: 608px; width: 600px;"></p> + +<p>{{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")}}</p> + +<p> </p> + +<h2 id="Dalam_modul_ini">Dalam modul ini</h2> + +<ul> + <li id="Installing_basic_software"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Menginstal perangkat lunak dasar</a></li> + <li id="What_will_your_website_look_like"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/Akan_terlihat_seperti_apa_website_anda">Akan seperti apa website kamu?</a></li> + <li id="Dealing_with_files"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/Mengelola_file">Berurusan dengan file</a></li> + <li id="HTML_basics"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML dasar</a></li> + <li id="CSS_basics"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS dasar</a></li> + <li id="JavaScript_basics"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript dasar</a></li> + <li id="Publishing_your_website"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Mempublish website kamu</a></li> + <li id="How_the_web_works"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Bagaimana web bekerja</a></li> +</ul> diff --git a/files/id/learn/getting_started_with_the_web/css_basics/index.html b/files/id/learn/getting_started_with_the_web/css_basics/index.html new file mode 100644 index 0000000000..110abc26fe --- /dev/null +++ b/files/id/learn/getting_started_with_the_web/css_basics/index.html @@ -0,0 +1,291 @@ +--- +title: CSS dasar +slug: Learn/Getting_started_with_the_web/CSS_basics +tags: + - CSS + - CodingScripting + - 'I10n:priority' + - Pemula + - Styling + - Web + - belajar +translation_of: Learn/Getting_started_with_the_web/CSS_basics +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p>CSS <em>(Cascading Style Sheets) </em>adalah kode yang kamu gunakan untuk memberikan gaya pada halaman web kamu. <em>Dasar-dasar CSS </em>akan menjelaskan apa sajakah yang kamu butuhkan untuk memulai. Kami akan menjawab pertanyaan-pertanyaan seperti: Bagaimana saya dapat membuat teks saya menjadi berwarna hitam atau merah? Bagaimana saya dapat membuat konten saya tampil sedemikian rupa pada layar? Bagaimana saya dapat mendekor halaman web saya dengan latar belakang gambar atau warna-warna?</p> +</div> + +<h2 id="Apakah_CSS_itu">Apakah CSS itu?</h2> + +<p>Seperti HTML, CSS bukanlah sebuah bahasa pemrograman. CSS juga bukanlah sebuah bahasa <em>markup </em>— ia adalah suatu bahasa <em>style sheet</em>. Artinya, dengan CSS kamu dapat mengaplikasikan gaya pada elemen-elemen yang ada dalam dokumen HTML. Sebagai contoh, untuk membuat teks pada seluruh elemen paragraf dalam satu halaman HTML menjadi berwarna merah, kamu akan menulis CSS sebagai berikut:</p> + +<pre class="brush: css">p { + color: red; +}</pre> + +<p>Salin ketiga baris dari kode CSS tersebut ke dalam suatu <em>file </em>baru di teks editor kamu, lalu simpan <em>file </em>tersebut sebagai <code>style.css</code> di direktori <code>styles</code> kamu.</p> + +<p>Namun kita masih perlu untuk mengaplikasikan CSS tersebut ke dokumen HTML kamu. Jika tidak, CSS tersebut tidak akan berpengaruh pada bagaimana <em>browser </em>akan menampilkan dokumen HTML tersebut. (Kalau kamu belum mengikuti proyek kami, bacalah <a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a> dan <a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a> untuk mencari tahu apa saja yang perlu kamu lakukan sebelumnya.)</p> + +<ol> + <li>Buka <em>file</em> <code>index.html</code> kamu dan letakkan baris berikut di suatu tempat di bagian <em>head</em> (di antara <em>tag</em> <code><head></code> dan <code></head></code>): + + <pre class="brush: html"><link href="styles/style.css" rel="stylesheet" type="text/css"></pre> + </li> + <li>Simpan <code>index.html</code> dan buka halaman tersebut di <em>browser</em> kamu. Seharusnya muncul tampilan seperti ini:</li> +</ol> + +<p><img alt="A mozilla logo and some paragraphs. The paragraph text has been styled red by our css." src="https://mdn.mozillademos.org/files/9435/website-screenshot-styled.png" style="display: block; height: 832px; margin: 0px auto; width: 711px;">Jika teks paragraf kamu sekarang berwarna merah, selamat! Kamu berhasil menulis CSS pertama kamu.</p> + +<h3 id="Bagian-bagian_dari_sebuah_CSS_ruleset">Bagian-bagian dari sebuah CSS <em>ruleset</em></h3> + +<p>Mari kita lihat CSS di atas dengan sedikit lebih detil:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9461/css-declaration-small.png" style="display: block; height: 480px; margin: 0px auto; width: 850px;"></p> + +<p>Struktur di atas merupakan sebuah <strong><em>rule set</em></strong> (atau sering disebut <em>"rule"</em> supaya lebih singkat). Perhatikan nama dari masing-masing bagian di atas:</p> + +<dl> + <dt><em>Selector</em></dt> + <dd>Nama elemen HTML di awal <em>rule set</em>. <em>Selector</em> menandai satu atau lebih elemen yang akan diberikan gaya (contoh di sini menggunakan elemen <code>p</code>). Untuk memberikan gaya pada elemen lain, kamu bisa mengubah <em>selector</em> sesuai elemen yang kamu inginkan.</dd> + <dt><em>Declaration</em></dt> + <dd>Suatu peraturan seperti <code>color: red;</code> yang menentukan properti mana dari elemen yang ingin kamu beri gaya.</dd> + <dt><em>Properties</em></dt> + <dd>Cara kamu memberikan gaya terhadap elemen HTML (contoh di sini, <code>color</code> adalah properti dari {elemen {htmlelement("p")}}.) Di dalam CSS, kamu memilih properti mana saja yang ingin kamu berikan gaya di peraturan kamu.</dd> + <dt><em>Property value</em></dt> + <dd>Sebelah sisi kanan properti setelah tanda titik dua, kita memiliki nilai properti, yang memilih satu dari banyak kemungkinan penampilan untuk properti yang diberikan (ada banyak sekali nilai-nilai <code>color</code> selain <code>red</code>).</dd> +</dl> + +<p>Perhatikan juga bagian-bagian lain dari sintaks di atas:</p> + +<ul> + <li>Masing-masing <em>rule set </em>(selain <em>selector</em>) harus dibungkus dengan sepasang kurung kurawal (<code>{}</code>).</li> + <li>Dalam masing-masing deklarasi, kamu harus menggunakan tanda titik dua (<code>:</code>) untuk memisahkan properti dari nilai-nilainya.</li> + <li>Dalam masing-masing <em>rule set,</em> kamu harus menggunakan tanda titik-koma (<code>;</code>) untuk memisahkan satu deklarasi dengan deklarasi berikutnya.</li> +</ul> + +<p>Untuk memodifikasi banyak nilai properti sekaligus, kamu hanya perlu menggunakan tanda titik-koma sebagai pemisah, seperti ini:</p> + +<pre class="brush: css">p { + color: red; + width: 500px; + border: 1px solid black; +}</pre> + +<h3 id="Memilih_banyak_elemen">Memilih banyak elemen</h3> + +<p>Kamu juga dapat memilih lebih dari satu tipe elemen dan mengaplikasikan sebuah <em>rule set </em>untuk semua tipe elemen. Untuk melakukannya, kamu dapat menuliskan lebih dari satu <em>selector </em>dipisahkan dengan tanda koma. Sebagai contoh:</p> + +<pre class="brush: css">p,li,h1 { + color: red; +}</pre> + +<h3 id="Beragam_tipe_selector">Beragam tipe <em>selector</em></h3> + +<p>Ada banyak sekali tipe <em>selector </em>yang berbeda. Di atas, kita hanya mempelajari <em><strong>element selectors</strong></em>, yang memilih seluruh elemen dari tipe yang diberikan di dokumen HTML yang diberikan. Namun kita dapat membuat pilihan yang lebih spesifik daripada itu. Berikut adalah beberapa tipe <em>selector </em>lain yang sering dijumpai:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Nama <em>selector</em></th> + <th scope="col">Apa yang dipilih</th> + <th scope="col">Contoh</th> + </tr> + </thead> + <tbody> + <tr> + <td><em>Element selector </em>(kadang-kadang juga disebut sebagai <em>tag </em>atau <em>type selector</em>)</td> + <td>Seluruh elemen HTML dari tipe yang diberikan.</td> + <td><code>p</code><br> + Memilih <code><p></code></td> + </tr> + <tr> + <td><em>ID selector</em></td> + <td>Elemen pada halaman dengan ID yang diberikan (pada halaman HTML yang diberikan, kamu hanya boleh memiliki satu elemen per ID).</td> + <td><code>#my-id</code><br> + Memilih <code><p id="my-id"></code> atau <code><a id="my-id"></code></td> + </tr> + <tr> + <td><em>Class selector</em></td> + <td>Satu atau lebih elemen pada halaman dengan kelas yang ditentukan (banyak <em>class instances </em>yang dapat muncul di sebuah halaman).</td> + <td><code>.my-class</code><br> + Memilih<code><p class="my-class"></code> dan <code><a class="my-class"></code></td> + </tr> + <tr> + <td><em>Attribute selector</em></td> + <td>Satu atau lebih elemen pada halaman dengan atribut yang ditentukan.</td> + <td><code>img[src]</code><br> + Memilih <code><img src="myimage.png"></code> namun tidak memilih <code><img></code></td> + </tr> + <tr> + <td><em>Pseudo-class selector</em></td> + <td>Satu atau lebih elemen yang ditentukan, namun hanya ketika elemen tersebut sedang berada pada <em>state </em>tertentu, seperti sedang di-<em>hover</em>.</td> + <td><code>a:hover</code><br> + Memilih <code><a></code>, namun hanya ketika <em>mouse pointer </em>sedang meng-<em>hover </em><em>link</em>.</td> + </tr> + </tbody> +</table> + +<p>Ada banyak sekali <em>selector </em>lain yang dapat dieksplor, dan kamu dapat menemukan daftar yang lebih detil di <em><a href="/en-US/docs/Web/Guide/CSS/Getting_started/Selectors">Selectors guide</a></em> kami.</p> + +<h2 id="Fonts_dan_teks"><strong><em>Fonts</em></strong> dan teks</h2> + +<p>Setelah mengeksplor dasar-dasar CSS, mari kita tambahkan aturan-aturan lain dan informasi pada <em>file</em> <code>style.css</code> kita agar contoh yang kita buat memiliki tampilan yang lebih baik. Kita dapat memulai dengan membuat <em>fonts </em>dan teks kita untuk terlihat sedikit lebih baik.</p> + +<ol> + <li>Pertama-tama, kembalilah dan temukan <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like#Font">keluaran dari Google Fonts</a> yang kamu simpan di tempat yang aman. Tambahkan elemen {{htmlelement("link")}} di suatu tempat pada bagian <em>head </em>dari <code>index.html</code> kamu (di manapun di antara <em>tag </em><code><head></code> dan <code></head></code>). Elemen <em>link</em> tersebut akan terlihat seperti ini: + + <pre class="brush: html"><link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'></pre> + </li> + <li>Selanjutnya, hapus aturan yang sudah ada yang kamu miliki di <em>file </em><code>style.css</code>.</li> + <li>Tambahkan baris berikut, dan ubah baris <em>placeholder </em>dengan <code>font-family</code> sungguhan yang kamu dapatkan dari Google Fonts. (<code>font-family</code> berarti jenis <em>font </em>yang ingin kamu gunakan untuk teks.) Aturan ini mengatur jenis <em>font </em>dan ukuran <em>font </em>dasar secara global untuk seluruh halaman (karena <code><html></code> merupakan <em>parent element </em>dari seluruh halaman, dan semua elemen di dalam halaman tersebut mewarisi <code>font-size</code> dan <code>font-family</code> yang sama): + <pre class="brush: css">html { + font-size: 10px; /* px means 'pixels': the base font size is now 10 pixels high */ + font-family: placeholder: this should be the rest of the output you got from Google fonts +}</pre> + + <div class="note"> + <p><strong>Catatan</strong>: Apapun yang ada di dalam sebuah dokumen CSS antara <code>/*</code> dan <code>*/</code> adalah <strong>komentar CSS</strong>, yang akan diabaikan oleh <em>browser </em>ketika <em>browser </em>sedang mengolah kode untuk ditampilkan. Komentar berguna bagi kamu untuk menulis catatan-catatan yang membantu terkait apa yang sedang kamu lakukan.</p> + </div> + </li> + <li>Sekarang kita akan menentukan <em>font size </em>untuk elemen-elemen berisi teks yang ada di dalam <em>body </em>HTML ({{htmlelement("h1")}}, {{htmlelement("li")}}, dan {{htmlelement("p")}}). Kita juga akan menengahkan posisi teks pada <em>heading </em>dan menentukan <em>line height </em>serta <em>letter spacing </em>pada konten bagian <em>body </em>agar dapat lebih mudah dibaca: + <pre class="brush: css">h1 { + font-size: 60px; + text-align: center; +} + +p, li { + font-size: 16px; + line-height: 2; + letter-spacing: 1px; +}</pre> + </li> +</ol> + +<p>Kamu dapat menyesuaikan nilai-nilai <code>px</code> tersebut untuk mendapatkan desain yang kamu inginkan, namun secara umum desain kamu seharusnya akan terlihat seperti ini:</p> + +<p><img alt="a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered" src="https://mdn.mozillademos.org/files/9447/website-screenshot-font-small.png" style="display: block; height: 1020px; margin: 0px auto; width: 921px;"></p> + +<h2 id="Semua_tentang_boks">Semua tentang boks</h2> + +<p>Satu hal yang akan kamu sadari tentang menulis CSS adalah banyak hal dalam CSS sebenarnya terkait dengan boks — mengatur ukuran, warna, posisi, dan lain-lain. Kebanyakan dari elemen-elemen HTML yang ada di halaman kamu dapat dilihat sebagai banyak boks yang saling bertumpuk di atas satu sama lain.</p> + +<p><img alt="a big stack of boxes or crates sat on top of one another" src="https://mdn.mozillademos.org/files/9441/boxes.jpg" style="display: block; height: 463px; margin: 0px auto; width: 640px;"></p> + +<p>Pada prinsipnya, susunan CSS didasari oleh <em>box model. </em>Masing-masing blok akan menempati tempat di halaman kamu dengan properti sebagai berikut:</p> + +<ul> + <li><code>padding</code>, ruang di sekitar konten (e.g., di sekitar teks paragraf)</li> + <li><code>border</code>, garis solid yang ada di luar <em>padding</em></li> + <li><code>margin</code>, ruang di luar elemen</li> +</ul> + +<p><img alt="three boxes sat inside one another. From outside to in they are labelled margin, border and padding" src="https://mdn.mozillademos.org/files/9443/box-model.png" style="display: block; height: 450px; margin: 0px auto; width: 574px;"></p> + +<p>Pada bagian ini kita juga menggunakan:</p> + +<ul> + <li><code>width</code> (lebar dari sebuah elemen)</li> + <li><code>background-color</code>, warna di belakang konten dan <em>padding </em>sebuah elemen</li> + <li><code>color</code>, warna dari konten elemen (biasanya berupa teks)</li> + <li><code>text-shadow</code>: mengatur <em>drop shadow </em>pada teks di dalam elemen</li> + <li><code>display</code>: mengatur tampilan sebuah elemen (untuk sekarang, abaikan hal ini)</li> +</ul> + +<p>Ayo kita mulai menambahkan lebih banyak CSS pada halaman kita! Terus tambahkan aturan-aturan baru sampai ke bagian bawah halaman, dan jangan takut untuk bereksperimen dengan menggonta-ganti nilai-nilai untuk melihat bagaimana hasilnya.</p> + +<h3 id="Mengganti_warna_halaman">Mengganti warna halaman</h3> + +<pre class="brush: css">html { + background-color: #00539F; +}</pre> + +<p>Aturan ini mengatur warna latar belakang seluruh halaman. Gantilah kode warna di atas menjadi warna apapun <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like#Theme_color">yang Anda pilih ketika Anda merencanakan situs Anda</a>.</p> + +<h3 id="Mengatur_body">Mengatur <em>body</em></h3> + +<pre class="brush: css">body { + width: 600px; + margin: 0 auto; + background-color: #FF9500; + padding: 0 20px 20px 20px; + border: 5px solid black; +}</pre> + +<p>Sekarang kita akan mengatur elemen {{htmlelement("body")}}. Ada beberapa deklarasi di sini, jadi mari kita bahas semuanya satu per satu:</p> + +<ul> + <li><code>width: 600px;</code> — aturan ini memaksa <em>body </em>untuk selalu memiliki lebar sepanjang 600 piksel.</li> + <li><code>margin: 0 auto;</code> — ketika kamu mengatur dua nilai pada dua properti seperti<code> margin</code> atau <code>padding</code>, nilai pertama akan memengaruhi sisi atas dan bawah dari elemen (pada contoh ini, buatlah <code>0</code>), dan nilai kedua akan memengaruhi sisi kiri dan kanan (di sini, <code>auto</code> adalah sebuah nilai khusus yang dapat membagi ruang horizontal yang ada secara adil antara kiri dan kanan). Kamu juga dapat menggunakan satu, tiga, atau empat nilai seperti yang didokumentasikan <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin#Values">di sini</a>.</li> + <li><code>background-color: #FF9500;</code> — sama seperti sebelumya, aturan ini menentukan warna latar belakang elemen. Kita sudah menggunakan warna merah kejinggaan untuk bagian <em>body</em>, namun teruslah bereksperimen.</li> + <li><code>padding: 0 20px 20px 20px;</code> — kita memiliki empat nilai yang mengatur <em>padding </em>untuk membuat sedikit ruang di sekitar konten kita. Saat ini, kita menentukan tidak ada <em>padding </em>pada sisi atas dari <em>body, </em>dan ada <em>padding </em>sepanjang 20 piksel di sisi kiri, bawah, dan kanan. Nilai-nilai di atas mengatur bagian atas, kanan, bawah, dan kiri secara berurutan.</li> + <li><code>border: 5px solid black;</code> — aturan ini mengatur <em>border </em>setebal 5 piksel berwarna hitam di seluruh sisi <em>body</em>.</li> +</ul> + +<h3 id="Mengatur_posisi_dan_memberikan_gaya_pada_judul_halaman_utama_kita">Mengatur posisi dan memberikan gaya pada judul halaman utama kita</h3> + +<pre class="brush: css">h1 { + margin: 0; + padding: 20px 0; + color: #00539F; + text-shadow: 3px 3px 1px black; +}</pre> + +<p>Kamu mungkin sudah menyadari bahwa ada jarak yang cukup jelek di bagian atas <em>body</em>. Hal tersebut terjadi karena beberapa <em>browser </em>mengaplikasikan gaya yang bersifat <em>default </em>ke elemen {{htmlelement("h1")}} element (salah satunya), meski kamu belum memberikan CSS apapun sama sekali! Kedengarannya buruk, namun kita juga menginginkan halaman web yang belum diberikan gaya juga memiliki keterbacaan yang mendasar. Untuk menghilangkan jarak tersebut, kita dapat merubah gaya <em>default </em>tersebut dengan mengatur <code>margin: 0;</code>.</p> + +<p>Selanjutnya, kita mengatur bagian atas dan bawah <em>padding </em>menjadi 20 piksel, dan membuat warna dari teks <em>heading </em>agar sama dengan warna latar belakang HTML.</p> + +<p>Sebuah properti menarik yang kita gunakan adalah <code>text-shadow</code>, di mana properti ini akan mengaplikasikan bayangan teks ke konten teks dari sebuah elemen. Empat nilai dari properti tersebut adalah sebagai berikut:</p> + +<ul> + <li>Nilai piksel pertama mengatur <em><strong>horizontal offset</strong></em> bayangan dari teks — seberapa jauh bayangan tersebut berada (secara horizontal): sebuah nilai negatif seharusnya akan memindahkan bayangan tersebut ke sisi kiri.</li> + <li>Nilai piksel kedua mengatur <em><strong>vertical offset</strong></em> bayangan dari teks — seberapa jauh bayangan tersebut berada (secara vertikal), pada contoh ini, sebuah nilai negatif akan memindahkannya ke atas.</li> + <li>Nilai piksel ketiga mengatur <em><strong>blur radius </strong></em>dari bayangan — nilai yang lebih besar akan membuat bayangan yang lebih kabur.</li> + <li>Nilai keempat mengatur warna dasar dari bayangan.</li> +</ul> + +<p>Cobalah untuk bereksperimen dengan berbagai nilai berbeda dan lihat hasilnya!</p> + +<h3 id="Memposisikan_gambar_ke_tengah">Memposisikan gambar ke tengah</h3> + +<pre class="brush: css">img { + display: block; + margin: 0 auto; +}</pre> + +<p>Akhirnya, kita akan memposisikan gambar ke tengah untuk membuatnya terlihat lebih baik. Kita dapat menggunakan trik <code>margin: 0 auto</code> lagi seperti yang telah kita lakukan pada bagian <em>body</em>, namun ada satu hal lagi yang perlu dilakukan. Elemen {{htmlelement("body")}} adalah <em><strong>block level</strong></em>, di mana elemen tersebut menempati ruang di halaman dan kita juga dapat mengaplikasikan margin dan nilai-nilai <em>spacing </em>lain pada elemen tersebut. Di sisi lain, gambar adalah contoh dari <em>inline element, </em>yang berarti kita tidak dapat melakukan hal yang sama. Sehingga untuk mengaplikasikan <em>margin </em>pada gambar, kita harus memberikan gambar tersebut perlakuan seperti <em>block level</em> menggunakan <code>display: block;</code>.</p> + +<div class="note"> +<p><strong>Catatan</strong>: Jangan khawatir jika kamu belum memahami <code>display: block;</code>dan perbedaan antara <em>block-level </em>dan <em>inline</em>. Kamu akan memahaminya seiring dengan waktu kamu mempelajari CSS lebih dalam. Kamu dapat menemukan lebih lanjut tentang nilai-nilai <em>display </em>yang tersedia di <a href="/en-US/docs/Web/CSS/display">halaman referensi <em>display</em></a> kami.</p> +</div> + +<h2 id="Kesimpulan">Kesimpulan</h2> + +<p>Jika kamu sudah mengikuti seluruh instruksi di artikel ini, seharusnya kamu memiliki sebuah halaman yang tampak seperti ini (kamu juga dapat <a href="http://mdn.github.io/beginner-html-site-styled/">melihat versi kami di sini</a>):</p> + +<p><img alt="a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip." src="https://mdn.mozillademos.org/files/9455/website-screenshot-final.png" style="display: block; height: 1084px; margin: 0px auto; width: 940px;"></p> + +<p>Jika Kamu mengalami kebingungan, kamu bisa membandingkan hasilmu dengan <a href="https://github.com/mdn/beginner-html-site-styled/blob/gh-pages/styles/style.css">contoh sampel kode kami di Github</a>.</p> + +<p>Di sini, kita hanya baru saja membahas sedikit tentang CSS. Untuk mempelajari lebih lanjut, kunjungi halaman <em><a href="https://developer.mozilla.org/en-US/Learn/CSS">CSS Learning topic </a></em><a href="https://developer.mozilla.org/en-US/Learn/CSS">milik kami</a>.</p> + +<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</p> + +<p> </p> + +<h2 id="Dalam_modul_ini">Dalam modul ini</h2> + +<ul> + <li id="Installing_basic_software"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Menginstal perangkat lunak dasar</a></li> + <li id="What_will_your_website_look_like"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/Akan_terlihat_seperti_apa_website_anda">Akan seperti apa website kamu?</a></li> + <li id="Dealing_with_files"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/Mengelola_file">Berurusan dengan file</a></li> + <li id="HTML_basics"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML dasar</a></li> + <li id="CSS_basics"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS dasar</a></li> + <li id="JavaScript_basics"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript dasar</a></li> + <li id="Publishing_your_website"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Mempublish website kamu</a></li> + <li id="How_the_web_works"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Bagaimana web bekerja</a></li> +</ul> diff --git a/files/id/learn/getting_started_with_the_web/how_the_web_works/index.html b/files/id/learn/getting_started_with_the_web/how_the_web_works/index.html new file mode 100644 index 0000000000..e59c3083bb --- /dev/null +++ b/files/id/learn/getting_started_with_the_web/how_the_web_works/index.html @@ -0,0 +1,96 @@ +--- +title: Bagaimana Web Bekerja +slug: Learn/Getting_started_with_the_web/How_the_Web_works +tags: + - DNS + - HTTP + - IP + - Klien + - Pemula + - Server + - TCP +translation_of: Learn/Getting_started_with_the_web/How_the_Web_works +--- +<div>{{LearnSidebar}}</div> + +<p>{{Previous("Learn/Getting_started_with_the_web/Publishing_your_website")}}</p> + +<div class="summary"> +<p><em>Bagaimana cara web bekerja </em>menyediakan pandangan sederhana apa yang terjadi ketika anda melihat halaman web di browser komputer atau handphone.</p> +</div> + +<p>Teori ini bukan dasar menulis kode web dalam jangka pendek, namun sebelum anda memulai anda akan mendapatkan keuntungan dari memahami apa yang terjadi di belakang.</p> + +<h2 id="Klien_dan_server">Klien dan server</h2> + +<p>Komputer yang terhubung ke web dinamakan <strong>client </strong>dan <strong>servers</strong>. Diagram sederhana dari cara mereka berinteraksi seperti berikut:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8973/Client-server.jpg" style="height: 123px; width: 336px;"></p> + +<ul> + <li>Klien merupakan pengguna web yang terhubung dengan internet di perangkat mereka (contohnya, komputer anda terhubung dengan Wi-Fi, atau handphone terhubung dengan jaringan mobile) dan software untuk mengakses web tersedia di perangkat tersebut (biasanya web browser seperti Firefox atau Chrome).</li> + <li>Server adalah komputer yang menyimpan halaman web, situs, atau aplikasi web. Ketika perangkat klien ingin mengakses halaman web, salinan dari halaman web diunduh dari server ke mesin klien untuk ditempilkan di browser pengguna.</li> +</ul> + +<h2 id="Bagian_lain_dari_toolbox">Bagian lain dari toolbox</h2> + +<p>Klien dan server yang di jabarkan di atas tidak menceritakan semuanya. Banyak sekali bagian lain yang terlibat, dan kita akan membahasnya.</p> + +<p>Saat ini, mari kita bayangkan bahwa web adalah sebuah jalan. Pada ujung jalan adalah klien, seperti halnya rumah anda. Di ujung jalan yang lain adalah server, seperti halnya pasar atau swalayan dimana anda membeli sesuatu.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9749/road.jpg" style="display: block; height: 427px; margin: 0px auto; width: 640px;"></p> + +<p>Sebagai tambahan dari klien dan server, kita juga membutuhkan:</p> + +<ul> + <li><strong>Koneksi internet</strong>: Memungkinkan anda mengirim dan menerima data dari web. Pada dasarnya seperti jalan antara rumah anda dan pasar.</li> + <li><strong>TCP/IP</strong>: Transmission Control Protocol dan Internet Protocol merupakan protokol komunikasi yang menjelaskan bagaiman data harus berjalan di web. Seperti halnya mekanisme transportasi yang memungkinkan anda berada ditempat untuk memesan, pergi ke pasar, dan membeli yang anda butuhkan. Contohnya seperti sepeda motor atau mobil (atau dengan jalan kaki).</li> + <li><strong>DNS</strong>: Domain Name System seperti halnya buku alamat untuk website. Ketika anda menuliskan alamat web di browser, browser melihat DNS sebelum mengambil halaman web di website. Browser perlu mencari tahu di server mana website berada, sehingga bisa mengirimkan pesan HTTP ke tempat yang benar. Seperti saat anda mencari alamat pasar dimana barang yang anda cari tersedia.</li> + <li><strong>HTTP</strong>: Hypertext Transfer Protocol merupakan {{Glossary("Protocol" , "protocol")}} aplikasi yang menjelaskan bahasa untuk klien dan server untuk saling berkomunikasi. Seperti bahasa yang anda gunakan untuk memesan barang.</li> + <li><strong>Komponen file</strong>: Seuah website dibuat dari banyak file, seperti bagian atau resep produk yang anda beli di pasar. File ini di bagi menjadi dua jenis: + <ul> + <li><strong>Berkas kode</strong>: Website dibuat dari HTML, CSS, dan JavaScript, nanti anda juga akan megenal teknologi lainnya.</li> + <li><strong>Aset</strong>: Merupakan sekumpulan nama untuk bahan pembuat website, seperti gambar, musik, video, Word document, dan PDF.</li> + </ul> + </li> +</ul> + +<h2 id="Lalu_apa_yang_terjadi_sebenarnya">Lalu apa yang terjadi sebenarnya?</h2> + +<p>Ketika anda menuliskan alamat web di browser (dianalogikan seperti berjalan ke pasar):</p> + +<ol> + <li>Browser menuju ke DNS server dan mencari alamat server yang sebenarnya dimana website berada (anda mencari alamat pasar).</li> + <li>Browser mengirim pesan HTTP request ke server meminta salinan dari website untuk di kirim ke klien (anda pergi ke pasar dan memesan barang). Pesan ini, dan semua data dikirim diantara klien dan server, di kirim melalui koneksi internet menggunakan TCP/IP.</li> + <li>Server menyetujui permintaan klien, server mengirip pesan "200 OK", yang maksudnya "Tentu anda bisa melihat website tersebut! ini dia", dan kemudian mulai mengirim file website ke browser sebagai bagian - bagian kecil yang disebut data paket (pelayan memberikan barang anda, dan anda membawanya ke rumah anda).</li> + <li>Browser menggabungkan bagian - bagian halaman web menjadi sebuah halaman web sempurna dan menampilkannya untuk anda (barang sampai dirumah — barang baru, keren!).</li> +</ol> + +<h2 id="Penjelasan_DNS">Penjelasan DNS</h2> + +<p>Alamat web sebenarnya tidak seperti yang kita tuliskan di browser, untaian yang kamu tuliskan di address bar merupakan untaian dari angka seperti ini: 63.245.217.105.</p> + +<p>Ini disebut alamat IP, dan ini mewakili lokasi dari web. Akan tetapi, akan sulit untuk mengingat, itulah mengapa Domain Name System server dibuat. Ini adalah server spesial yang mencocokkan alamat yang kamu tulis di web browser (seperti "mozilla.org") ke alamat (IP) address website yang sebenarnya.</p> + +<p>Website dapat di jangkau secara langsung melalui IP addresses. Coba buka website Mozilla website dengan menuliskan <code>63.245.217.105</code> ke address bar.</p> + +<p><img alt="A domain name is just another form of an IP address" src="https://mdn.mozillademos.org/files/8405/dns-ip.png" style="height: 160px; width: 330px;"></p> + +<h2 id="Penjelasan_Packet">Penjelasan Packet</h2> + +<p>Sebelumnya kita menggunakan istilah "packet" untuk menjelaskan format dimana data yang dikirim dari server ke klien. Pada dasarnya data dikirim melalui web, dikirim sebagai ribuan bagian kecil, sehingga pengguna web yang berbeda dapat mengunduh website yang sama dalam waktu yang sama. Jika situs web mengirim sebuah bagian yang besar, hanya satu pengguna yang dapat mengunduh dalam waktu tertentu, dimana akan membuat web sangat tidak efisien dan tidak menyenangkan untuk digunakan.</p> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li><a href="/id/Learn/How_the_Internet_works">Bagaimana Internet Bekerja</a></li> + <li><a href="https://dev.opera.com/articles/http-basic-introduction/">HTTP — an Application-Level Protocol</a></li> + <li><a href="https://dev.opera.com/articles/http-lets-get-it-on/">HTTP: Let’s GET It On!</a></li> + <li><a href="https://dev.opera.com/articles/http-response-codes/">HTTP: Response Codes</a></li> +</ul> + +<h2 id="Kredit">Kredit</h2> + +<p>Street photo: <a href="https://www.flickr.com/photos/kdigga/9110990882/in/photolist-cXrKFs-c1j6hQ-mKrPUT-oRTUK4-7jSQQq-eT7daG-cZEZrh-5xT9L6-bUnkip-9jAbvr-5hVkHn-pMfobT-dm8JuZ-gjwYYM-pREaSM-822JRW-5hhMf9-9RVQNn-bnDMSZ-pL2z3y-k7FRM4-pzd8Y7-822upY-8bFN4Y-kedD87-pzaATg-nrF8ft-5anP2x-mpVky9-ceKc9W-dG75mD-pY62sp-gZmXVZ-7vVJL9-h7r9AQ-gagPYh-jvo5aM-J32rC-ibP2zY-a4JBcH-ndxM5Y-iFHsde-dtJ15p-8nYRgp-93uCB1-o6N5Bh-nBPUny-dNJ66P-9XWmVP-efXhxJ">Street composing</a>, oleh <a href="https://www.flickr.com/photos/kdigga/">Kevin D</a>.</p> + +<p>{{Previous("Learn/Getting_started_with_the_web/Publishing_your_website")}}</p> diff --git a/files/id/learn/getting_started_with_the_web/html_basics/index.html b/files/id/learn/getting_started_with_the_web/html_basics/index.html new file mode 100644 index 0000000000..a2bac009f6 --- /dev/null +++ b/files/id/learn/getting_started_with_the_web/html_basics/index.html @@ -0,0 +1,233 @@ +--- +title: HTML dasar +slug: Learn/Getting_started_with_the_web/HTML_basics +tags: + - CodingScripting + - HTML + - 'I10n:prioritas' + - Pemula + - Web + - belajar +translation_of: Learn/Getting_started_with_the_web/HTML_basics +--- +<div>hyperlink{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p>HTML (<strong>H</strong>yper<strong>t</strong>ext <strong>M</strong>arkup <strong>L</strong>anguage) adalah kode yang digunakan untuk mengatur tata letak tampilan halaman web dan isinya. Contohnya, konten dapat disusun dalam bentuk sebuah paragraf, penomoran berbentuk titik, atau menampilkan gambar dan tabel. Seperti judulnya, artikel ini akan memberi kamu pemahaman mendasar tentang HTML dan fungsinya.</p> +</div> + +<h2 id="Jadi_sebenarnya_apa_itu_HTML">Jadi sebenarnya apa itu HTML?</h2> + +<p>HTML bukan sebuah bahasa pemrograman; HTML adalah bahasa <em>markup</em> yang mendefinisikan struktur konten kamu. HTML terdiri atas serangkaian <strong>{{Glossary("element", "elements")}}</strong>, yang dapat kamu gunakan untuk menyisipkan atau membungkus konten di dalamnya sehingga mempunyai tampilan tertentu sesuai fungsi elemennya. {{Glossary("Tag", "tags")}} penyisip dapat membuat sebuah kata atau gambar <em>hyperlink</em> ke konten lainnya, memiringkan tulisan, memperbesar atau memperkecil font, dan lain-lain. Lihat contoh konten dibawah ini:</p> + +<pre>My cat is very grumpy</pre> + +<p>Kalau kita ingin baris ini berdiri sendiri, kita bisa bilang bahwa ini adalah satu paragraf dengan menaruhnya di antara tag paragraf:</p> + +<pre class="brush: html"><p>My cat is very grumpy</p></pre> + +<h3 id="Anatomi_elemen_HTML">Anatomi elemen HTML</h3> + +<p>Mari kita jelajahi elemen paragraf ini lebih jauh.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p> + +<p>Bagian utama dari elemen kita adalah:</p> + +<ol> + <li><strong>Tag pembuka:</strong> Terdiri dari nama elemen (contoh di sini menggunakan p), yang ada di antara <strong>kurung sudut</strong> pembuka dan penutup. Ini menandakan awal elemen atau di mana elemen mulai bekerja — dalam hal ini dimana paragraf dimulai.</li> + <li><strong>Tag penutup:</strong> Mirip dengan tag pembuka, bedanya di tag penutup ada garis miring di depan nama elemen. Ini meandakan di mana akhir elemen — dalam hal ini di mana paragraf berakhir. Kebiasaan lupa menulis tag penutup meruapakan suatu kesalahan yang biasa dilakukan pemula yang bisa menyebabkan hasil menjadi ngawur.</li> + <li><strong>Konten:</strong> Konten elemen yang dalam hal ini hanya teks.</li> + <li><strong>Elemen:</strong> Tag pembuka dan tag penutup serta konten.</li> +</ol> + +<p>Elemen juga boleh memiliki atribut, yang terlihat seperti berikut:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p> + +<p>Atribut mengandung informasi ekstra tentang elemen. Atribut tidak tampil di konten aktual. Disini, <code>class</code> adalah nama atribut, dan <code>editor-note</code> adalah nilainya. Atribut <code>class</code> berfungsi memberikan penanda (<em>identifier</em>) pada elemen yang nantinya bisa kamu gunakan untuk diberikan informasi gaya dan lain-lain.</p> + +<p>Sebuah atribut harus mempunyai:</p> + +<ol> + <li>Jarak antara atribut dan nama elemen (atau atribut sebelumnya, kalau elemen sudah mempunyai atribut).</li> + <li>Nama atribut, diikuti tanda sama dengan.</li> + <li>Petik pembuka dan penutup diantara nilai atribut. </li> +</ol> + +<h3 id="Elemen_Bersarang">Elemen Bersarang</h3> + +<p>Kamu bisa menempatkan satu elemen ke dalam elemen lain — istilah ini disebut <strong>nesting (persarangan)</strong>. Kalau kita ingin buat penekanan bahwa kucing kita "<strong>very</strong> grumpy", kita bisa membungkus kata "very" ke dalam elemen {{htmlelement("strong")}} untuk penekanan.</p> + +<pre class="brush: html"><p>My cat is <strong>very</strong> grumpy.</p></pre> + +<p>Tapi kamu harus yakin bahwa elemen kamu benar-benar bersarang: contoh di atas kita buka elemen {{htmlelement("p")}} dulu, lalu elemen {{htmlelement("strong")}}, lalu kita tutup elemen {{htmlelement("strong")}}, lalu elemen {{htmlelement("p")}}. Contoh berikut ini tidak benar:</p> + +<pre class="example-bad brush: html"><p>My cat is <strong>very grumpy.</p></strong></pre> + +<p>Elemen harus terbuka dan tertutup dengan benar sehingga mereka jelas berada di mana dari elemen lain. Kalau mereka tumpang-tindih seperti di atas, maka web browser kamu akan membuat tebakan terbaiknya pada apa yang ingin kamu utarakan, yang menyebabkan hasil ngawur. Jadi jangan begitu!</p> + +<h3 id="Elemen_kosong">Elemen kosong</h3> + +<p>Beberapa elemen tidak punya konten, dan disebut <strong>elemen kosong</strong>. Ambil elemen {{htmlelement("img")}} yang sudah kita punya di HTML kita:</p> + +<pre class="brush: html"><img src="images/firefox-icon.png" alt="My test image"></pre> + +<p>Elemen ini mengandung 2 attribut, tapi tidak punya tag <code></img></code>, dan tidak punya konten. Ini karena elemen image tidak membungkus konten apapun. Tujuannya adalah mengembed image ke dalam halaman HTML di tempat di berada.</p> + +<h3 id="Anatomi_dari_dokumen_HTML">Anatomi dari dokumen HTML</h3> + +<p>Sekarang kita akan lihat bagaimana elemen individu digabung membentuk satu halaman HTML utuh. Ayo kunjungi lagi kode di mana kita menaruh contoh <code>index.html</code> kita (yang kita temui dalam artikel <a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a>):</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>My test page</title> + </head> + <body> + <img src="images/firefox-icon.png" alt="My test image"> + </body> +</html></pre> + +<p>Di sini kita punya:</p> + +<ul> + <li><code><!DOCTYPE html></code> — doctype. Zaman dulu, ketika HTML masih muda (sekitar 1991/2), doctypes berfungsi sebagai penghubung ke satu set aturan yang wajib diikuti halaman HTML supaya disebut halaman HTML yang baik, yang berarti error checking otomatis dan hal berfaedah lainnya. Tapi sekarang ini mereka sudah tidak terlau berguna dan hanya berfungsi sebagai penanda bahwa dokumen kamu bekerja dengan baik.</li> + <li><code><html></html></code> — elemen {{htmlelement("html")}}. Membungkus semua konten pada satu halaman utuh dan kadang disebut sebagai elemen root.</li> + <li><code><head></head></code> — elemen {{htmlelement("head")}}. Berguna sebagai wadah bagi semua hal yang kamu inginkan ke dalam halaman HTML yang bukan konten yang ditampilkan ke pengguna. Ini termasuk hal-hal semacam {{Glossary("keyword", "keywords")}} dan deskripsi halaman yang akan kamu tampilkan dalam hasil pencarian, CSS untuk menggayakan konten kamu, deklarasi karakter set, dan lain sebagainya.</li> + <li><code><meta charset="utf-8"></code> — elemen ini mengeset karakter set. Dokumen kamu sebaiknya mengguakan UTF-8 karena berisi karakter paling banyak dari seluruh bahasa di dunia. Prinsipnya dia bisa mengatasi konten tekstual apa saja di dalamnya. Tidak ada alasan untuk tidak menggunakan ini, dan dia bisa mencegah masalah lain yang timbul kemudian.</li> + <li><code><title></title></code> — elemen {{htmlelement("title")}}. Mengeset judul halaman kamu, yang tampil di browser tab di mana halaman ini diload. Juga digunakan untuk mendeskripsikan halaman ketika kamu membookmark/memfavoritkan halaman.</li> + <li><code><body></body></code> — elemen {{htmlelement("body")}}. Mengandung semua konten yang ingin kamu tunjukkan ke user, berupa teks, image, video, games, audio track, atau apapunlah.</li> +</ul> + +<h2 id="Image">Image</h2> + +<p>Coba lihat elemen {{htmlelement("img")}} ini lagi:</p> + +<pre class="brush: html"><img src="images/firefox-icon.png" alt="My test image"></pre> + +<p>Seperti dikatakan sebelumnya, dia mengembed image ke dalam halaman sesuai posisinya via artibut <code>src</code>, yang berisi path ke file image kita.</p> + +<p>Kita juga telah memasukkan artibut <code>alt</code> (alternative). Dalam atribut ini, kamu menentukan teks deskriptif bagi user yang tidak bisa melihat image, yang mungkin karena:</p> + +<ol> + <li>User tunanetra. Mereka sering menggunakan tools pembaca screen untuk membaca semua semua alt text.</li> + <li>Sesuatu terjadi yang mengakibatkan image tidak tampil. Contohnya, coba sengaja ganti path di dalam atribut <code>src</code> menjadi salah. Kalau kamu simpan dan reload halaman, kamu akan melihat sesuatu seperti ini:</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9349/alt-text-example.png" style="display: block; height: 36px; margin: 0px auto; width: 108px;"></p> + +<p>Kata kunci ini mengandung semua "teks deskriptif". Teks alternatif yang kamu tulis sebaiknya menyediakan cukup informasi kepada pembaca tentang image tersebut. Di contoh ini, teks kita "My test image" tidak bagus. Alternatif lain yang jauh lebih baik untuk logo Firefox kita adalah "The Firefox logo: a flaming fox surrounding the Earth."</p> + +<p>Coba gunakan teks alternatif yang lebih baik untuk image kamu.</p> + +<div class="note"> +<p><strong>Catatan</strong>: Cari tahu lebih tentang aksesbilitas di <a href="/en-US/docs/Web/Accessibility">Aksesbilitas landing page MDN</a>.</p> +</div> + +<h2 id="Menandai_teks">Menandai teks</h2> + +<p>Bagian ini mengkover elemen HTML penting yang kamu gunakan untuk menandai teks.</p> + +<h3 id="Headings">Headings</h3> + +<p>Elemen heading berfungsi menentukan bahwa bagian tertentu konten kamu berupa heading — atau subheading — dari konten kamu. Sama seperti buku yang punya judul utama, judul bab, dan subjudul, dokumen HTML juga begitu. HTML berisi 6 heading level, {{htmlelement("h1")}}–{{htmlelement("h6")}} meskipun kamu hanya menggunakan paling banyak 3–4:</p> + +<pre class="brush: html"><h1>My main title</h1> +<h2>My top level heading</h2> +<h3>My subheading</h3> +<h4>My sub-subheading</h4></pre> + +<p>Sekarang coba tambahkan judul yang pas ke halaman HTML di atas elemen {{htmlelement("img")}} kamu.</p> + +<h3 id="Paragraf">Paragraf</h3> + +<p>Seperti dijelaskan sebelumnya, elemen {{htmlelement("p")}} berguna untuk wadah paragraf teks; kamu akan sering menggunakan ini ketika menandai konten teks reguler:</p> + +<pre class="brush: html"><p>This is a single paragraph</p></pre> + +<p>Tambahkan sampel teks kamu (kamu pasti sudah punya dari <a href="/id/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like"><em>What should your website look like?</em></a>) ke dalam satu atau lebih paragraf, taruh langsung di bawah elemen {{htmlelement("img")}} kamu.</p> + +<h3 id="List">List</h3> + +<p>Kebanyakan konten web adalah lists, dan HTML punya special elemen untuk ini. Penandaan list selalu mengandung paling sedikit 2 elemen. Tipe list paling umum adalah terurut and tak-terurut:</p> + +<ol> + <li><strong>List tak-terurut</strong> ialah list yang urutan itemnya tidak penting, seperti daftar belanja. Ini dibungkus dalam elemen {{htmlelement("ul")}}.</li> + <li><strong>List terurut</strong> ialah list yang urutan itemnya penting, seperti resep. Ini dibungkus dalam elemen {{htmlelement("ol")}}.</li> +</ol> + +<p>Tiap item dalam list ditaruh di dalam elemen {{htmlelement("li")}} (item list).</p> + +<p>Contohnya, kalau kita ingin mengubah bagian dari fragmen paragraf berikut menjadi list:</p> + +<pre class="brush: html"><p>At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... </p></pre> + +<p>Kita bisa memodifikasi markup ini menjadi:</p> + +<pre class="brush: html"><p>At Mozilla, we’re a global community of</p> + +<ul> + <li>technologists</li> + <li>thinkers</li> + <li>builders</li> +</ul> + +<p>working together ... </p></pre> + +<p>Coba tambahkan suatu list terurut atau tak-terurut ke halaman contoh kamu.</p> + +<h2 id="Link">Link</h2> + +<p>Link sangat penting — mereka yang membuat web terlihat seperti web! Untuk menambahkan link, kita harus menggunakan elemen sederhana — {{htmlelement("a")}} — "a" singkatan dari "anchor". Untuk membuat teks menjadi link di paragraf kamu, ikuti langkah ini:</p> + +<ol> + <li>Pilih teks berikut. Kita pilih teks "Mozilla Manifesto".</li> + <li>Bungkus teks ke dalam elemen {{htmlelement("a")}}, seperti ini: + <pre class="brush: html"><a>Mozilla Manifesto</a></pre> + </li> + <li>Berikan elemen {{htmlelement("a")}} atribut <code>href</code>, seperti ini: + <pre class="brush: html"><a href="">Mozilla Manifesto</a></pre> + </li> + <li>Isi nilai atribut ini dengan alamat web yang ingin kamu link: + <pre class="brush: html"><a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a></pre> + </li> +</ol> + +<p>Kamu mungkin memperoleh hasil tak terduga jika kamu buang bagian <code>https://</code> atau <code>http://</code>, disebut <em>protocol</em>, di awal alamat web. Setelah membuat link, klik untuk meyakinkan itu bekerja sebagaimana mestinya.</p> + +<div class="note"> +<p><code>href</code> mungkin terlihat seperti pilihan yang abu-abu untuk nama atribut. Selalu ingat bahwa dia singkatan dari <em><strong>h</strong>ypertext <strong>ref</strong>erence</em>.</p> +</div> + +<p>Tambahkan link ke halaman kamu sekarang kalau belum.</p> + +<h2 id="Kesimpulan">Kesimpulan</h2> + +<p>Jika kamu ikuti semua instruksi di artikel ini, kamu akan melihat halaman seperti berikut (kamu juga bisa <a href="http://mdn.github.io/beginner-html-site/">melihat itu di sini</a>):<br> + <br> + <img alt="A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text" src="https://mdn.mozillademos.org/files/9351/finished-test-page-small.png" style="display: block; height: 838px; margin: 0px auto; width: 716px;"></p> + +<p>Kalau kamu buntu, kamu bisa bandingkan kerjaanmu dengan <a href="https://github.com/mdn/beginner-html-site/blob/gh-pages/index.html">contoh code yang sudah selesai</a> punya kita di GitHub.</p> + +<p>Di sini, kita telah menyentuh hanya lapisan luar HTML. Untuk lebih lanjut, pergi ke <a href="/en-US/Learn/HTML">HTML Learning topic</a> kita.</p> + +<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</p> + +<p> </p> + +<h2 id="Dalam_modul_ini">Dalam modul ini</h2> + +<ul> + <li id="Installing_basic_software"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Menginstal perangkat lunak dasar</a></li> + <li id="What_will_your_website_look_like"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/Akan_terlihat_seperti_apa_website_anda">Akan seperti apa website kamu?</a></li> + <li id="Dealing_with_files"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/Mengelola_file">Berurusan dengan file</a></li> + <li id="HTML_basics"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML dasar</a></li> + <li id="CSS_basics"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS dasar</a></li> + <li id="JavaScript_basics"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript dasar</a></li> + <li id="Publishing_your_website"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Mempublish website kamu</a></li> + <li id="How_the_web_works"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Bagaimana web bekerja</a></li> +</ul> diff --git a/files/id/learn/getting_started_with_the_web/index.html b/files/id/learn/getting_started_with_the_web/index.html new file mode 100644 index 0000000000..d788a4d683 --- /dev/null +++ b/files/id/learn/getting_started_with_the_web/index.html @@ -0,0 +1,76 @@ +--- +title: Mulai Bekerja dengan Web +slug: Learn/Getting_started_with_the_web +tags: + - CSS + - Desain + - Guide + - HTML + - 'I10n:prioritas' + - Index + - Pemula + - Petunjuk + - Teori + - publishing +translation_of: Learn/Getting_started_with_the_web +--- +<div>{{LearnSidebar}}</div> + +<div>{{Next("Learn/Getting_started_with_the_web/Installing_basic_software")}}</div> + +<div class="summary"> +<p>Web <em>Memulai dengan web</em> adalah tulisan ringkas untuk memperkenalkan Anda kepada <em>web development</em>. Anda akan mengatur berbagai <em>tool</em> yang kamu butuhkan untuk membuat sebuah halaman web yang sederhana dan mengunggah kode sederhana Anda.</p> +</div> + +<h2 id="Alur_pembuatan_website_pertama_Anda">Alur pembuatan website pertama Anda</h2> + +<p>Banyak sekali hal yang harus dilakukan untuk membuat web profesional, jadi jika Anda benar-benar baru dalam <em>pengembangan web</em>, kami anjurkan Anda untuk mulai dari hal yang kecil. Anda tidak akan membuat sebuah website layaknya Facebook, namun kali ini kamu akan membuat website sederhana, jadi mari kita mulai.</p> + +<p>Dengan mengerjakan artikel-artikel berikut, Anda menuju dari nol ke membuat halaman web daring pertama Anda. Berangkat!</p> + +<h3 id="Memasang_perangkat_lunak_dasar"><a href="/id/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Memasang perangkat lunak dasar</a></h3> + +<p>Banyak sekali <em>tool</em> yang bisa kamu pilih untuk membuat sebuah website. Jika kamu baru mulai, kamu mungkin akan kebingungan dengan banyaknya editor kode<em>, framework</em>, atau <em>testing tool </em>yang ada di luar sana. Di <a href="/id/Learn/Getting_started_with_the_web/Installing_basic_software">Memasang perangkat lunak dasar</a>, kami akan menunjukkan langkah-langkah dalam pemasangan perangkat lunak yang kamu butuhkan untuk membangun website sederhana Anda.</p> + +<h3 id="Akan_seperti_apa_website_Anda_terlihat"><a href="/id/docs/Learn/Getting_started_with_the_web/Akan_terlihat_seperti_apa_website_anda">Akan seperti apa website Anda terlihat?</a></h3> + +<p>Sebelum Anda mulai menulis kode untuk website Anda, Anda harus merencanakan terlebih dahulu. Informasi apa yang akan Anda muat dalam website tersebut? <em>Font</em> (tulisan) dan warna apa yang akan Anda gunakan? <a href="/id/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like">Situs Anda akan terlihat seperti apa?</a> Kami menguraikan metode sederhana yang bisa Anda ikuti untuk merencanakan konten dan desain situs web Anda.</p> + +<h3 id="Mengurus_berkas"><a href="/id/Learn/Getting_started_with_the_web/Dealing_with_files">Mengurus berkas</a></h3> + +<p>Sebuah situs terdiri dari banyak file: wacana, kode, <em>stylesheet</em>, konten media, dan seterusnya. Ketika Anda membangun situs, Anda harus mengatur semua berkas dalam struktur yang baik dan memastikan bahwa semua berkas dapat terhubung satu sama lain. <a href="/id/Learn/Getting_started_with_the_web/Dealing_with_files">Mengurus berkas</a><em> </em>menjelaskan bagaimana caranya Anda mengatur berkas dengan baik dan persoalan apa sajakah yang harus Anda perhatikan.</p> + +<h3 id="Dasar-dasar_HTML"><a href="/id/Learn/Getting_started_with_the_web/HTML_basics">Dasar-dasar HTML</a></h3> + +<p><em>Hypertext Markup Language</em> (HTML) adalah kode yang Anda gunakan untuk membuat struktur konten website Anda dan memberikannya arti dan tujuan. Contoh, apakah konten yang saya buat terdiri dari paragraf-paragraf, atau terdiri dari daftar-daftar? Apakah saya perlu memasukan gambar-gambar di halaman saya? Apakah saya memiliki tabel data? Tanpa membuat Anda bingung, <a href="/id/Learn/Getting_started_with_the_web/HTML_basics">Dasar-dasar HTML</a> akan memberikan Anda informasi yang cukup untuk membuat Anda familiar dengan HTML.</p> + +<h3 id="Dasar-dasar_CSS"><a href="/id/Learn/Getting_started_with_the_web/CSS_basics">Dasar-dasar CSS</a></h3> + +<p><em>Cascading Stylesheets</em> (CSS) merupakan kode yang dapat kamu pakai untuk memberikan gaya (<em>style</em>) pada website Anda. Contoh, apakah Anda ingin teks berwarna hitam atau merah? Dimanakah seharusnya konten ditampilkan pada layar? Apa latar belakang gambar dan warna yang seharusnya digunakan untuk mendekorasi website Anda? <a href="/id/Learn/Getting_started_with_the_web/CSS_basics">Dasar-dasar CSS</a> akan membantu Anda memulainya.</p> + +<h3 id="Dasar-dasar_JavaScript"><a href="/id/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Dasar-dasar JavaScript</a></h3> + +<p>JavaScript adalah bahasa pemrograman yang digunakan untuk menambahkan fitur interaktif di website Anda. Seperti permainan, hal yang akan terjadi ketika tombol ditekan atau data dimasukkan ke dalam <em>form</em> (formulir), penambahan efek <em>styling</em> yang dinamis, animasi, dan banyak lagi. <a href="/id/Learn/Getting_started_with_the_web/JavaScript_basics">Dasar-dasar JavaScript</a> memberikan Anda sebuah ide tentang apa saja yang dapat Anda lakukan dengan bahasa menakjubkan ini, dan cara memulainya.</p> + +<h3 id="Mempublikasikan_website_Anda"><a href="/id/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Mempublikasikan website Anda</a></h3> + +<p>Setelah Anda menyelesaikan penulisan kode dan penyusunan berkas dalam pembuatan situs, Anda perlu untuk mempublikasikan website Anda secara <em>online</em> sehingga orang-orang dapat mengaksesnya. <a href="/id/Learn/Getting_started_with_the_web/Publishing_your_website">Publikasi sampel kode Anda</a> menjelaskan bagaimana cara untuk mempublikasikan sampel kode daring Anda dengan sedikit usaha.</p> + +<h3 id="Cara_kerja_web"><a href="/id/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Cara kerja web</a></h3> + +<p>Ketika Anda mengakses situs kesukaan Anda, banyak hal rumit yang terjadi di dalamnya yang mungkin Anda tidak ketahui. <a href="/id/Learn/Getting_started_with_the_web/How_the_Web_works">Cara kerja web</a> menguraikan hal-hal yang terjadi ketika Anda melihat halaman web pada komputer Anda.</p> + +<p>Sekarang, mari kita atasi hal yang paling membuat pusing, dari manakah Anda harus membeli <em>hosting</em> untuk situs web Anda.</p> + +<p>Jawaban pertanyaan ini mungkin terlihat sedikit bias, tapi kenyataannya Anda harus percaya dengan suatu yang Anda yakini. Terdapat banyak situs web yang dapat menawarkan jasa <em>hosting</em> gratis tapi segala hal yang gratis itu tidak selalu bagus. Harga jasa-jasa ini terus berubah-ubah, karenanya dibawah ini adalah beberapa perusahaan yang Anda dapat jadikan sebagai rujukan. (Harap dicatat daftar dibawah ini diurutkan tidak berdasarkan kepercayaan atau harga atau pelayanan, ini daftar acak dan tanpa niat dibayar perusahaan):</p> + +<p><a href="https://godaddy.com/">godaddy.com</a>, <a href="https://www.hostgator.com/">hostgator.com</a>, <a href="https://alibabacloud.com/">alibabacloud.com</a>, <a href="https://aws.amazon.com/">Amazon Web Services</a>, <a href="https://www.cluestech.com/">cluestech.com</a>, <a href="https://www.namecheap.com/">namecheap.com</a>, <a href="https://www.bluehost.com/">bluehost.com</a> dan banyak lagi. Sepertinya ini bukan yang terbaik tapi setidaknya memiliki rekam jejak yang baik.</p> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">Web Demystified</a>: Rangkaian video bagus yang menjelaskan dasar-dasar web, ditujukan pada pemula untuk mengembangkan web. Dibuat oleh <a href="https://twitter.com/JeremiePat" rel="noopener">Jérémie Patonnier</a>.</li> + <li><a href="/id/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards">The web and web standards</a>: Artikel ini menyediakan beberapa latar belakang pada Web — bagaimana hal itu tetjadi, apa standar teknologi web, bagaimana mereka kerja bersamaan, mengapa "web developer" merupakan pilihan karir yang bagus, dan apa jenis-jenis pelatihan terbaik Anda akan mempelajarinya di kursus ini.</li> +</ul> + +<p>{{Next("Learn/Getting_started_with_the_web/Installing_basic_software")}}</p> diff --git a/files/id/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/id/learn/getting_started_with_the_web/installing_basic_software/index.html new file mode 100644 index 0000000000..93abc80228 --- /dev/null +++ b/files/id/learn/getting_started_with_the_web/installing_basic_software/index.html @@ -0,0 +1,76 @@ +--- +title: Menginstal perangkat lunak dasar +slug: Learn/Getting_started_with_the_web/Installing_basic_software +tags: + - Browser + - 'I10n:prioritas' + - Pemula + - Setup + - Tools + - WebMechanics + - belajar + - editor teks +translation_of: Learn/Getting_started_with_the_web/Installing_basic_software +--- +<div>{{LearnSidebar}}</div> + +<p>{{PreviousNext("Learn/Getting_started_with_the_web","Learn/Getting_started_with_the_web/Akan_terlihat_seperti_apa_website_anda")}}</p> + +<div class="summary"> +<p>Pada bagian <em>Memasang perangkat lunak dasar</em>ini, kami akan menunjukkan kepada Anda apa saja alat yang Anda butuhkan untuk mengembangkan web sederhana, dan cara memasangnya dengan benar.</p> +</div> + +<h2 id="Alat_apa_yang_digunakan_oleh_para_profesional">Alat apa yang digunakan oleh para profesional?</h2> + +<ul> + <li><strong>Komputer</strong>. Hal ini terdengar sangat jelas bagi beberapa orang, namun sebagian orang membaca artikel ini dari ponsel atau pustaka komputer (computer library). Untuk serius mengembangkan web, sebaiknya menggunakan desktop komputer atau laptop yang dijalankan Windows, macOS, atau Linux.</li> + <li><strong>Editor teks</strong>, untuk menulis kode. Ini bisa jadi text editor (spt. <a href="https://code.visualstudio.com/"> Studio Code</a>, <a href="https://notepad-plus-plus.org/">Notepad++</a>, <a href="https://www.sublimetext.com/">Sublime Text</a>, <a href="https://atom.io/">Atom</a>, <a href="http://brackets.io/">Brackest</a>, <a href="https://www.gnu.org/software/emacs/">GNU Emacs</a>, atau <a href="https://www.vim.org/">VIM</a>), atau hybrid editor (spt. <a href="https://www.adobe.com/products/dreamweaver.html">Dreamweaver</a> atau <a href="https://www.jetbrains.com/webstorm/">WebStorm</a>). Editor dokumen kantor tidak cocok untuk hal ini, karena itu tergantung pada element tersembunyi yabg dapat mengganggu mesin penterjemah yang digubakan oleh peramban web.</li> + <li><strong>Peramban web</strong>, untuk mencoba kode. Saat ini peramban yang banyak digunakan antara lain <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a>, <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a>, dan <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a>. Kamu juga perlu mencoba apakah situs kamu berjalan baik di perangkat mobile dan semua peramban lama yang masih banyak digunakan pengunjung (seperti IE 8–10.) <a href="https://lynx.browser.org/">Lynx</a>, terminal peramban web berbasis teks, bagus untuk mengetahui bagaimana situs web Anda dijelajahi oleh pengguna yang masalah penglihatan.</li> + <li><strong>Editor grafis</strong>, seperti <a href="http://www.gimp.org/">GIMP</a>, <a href="http://www.getpaint.net/">Paint.NET</a>, <a href="https://www.adobe.com/products/photoshop.html">Photoshop</a>, atau <a href="https://www.adobe.com/products/xd.html">XD</a> untuk membuat gambar atau grafis pada halaman web kamu.</li> + <li><strong>Version control system</strong>, untuk mengelola berkas di server, proyek yang berkolaborasi dengan sebuah tim, berbagi kode dan aset, serta menghindari konflik editing. Saat ini, <a href="http://git-scm.com/">Git</a> merupakan alat version control yang populer bersama dengan layanan hosting<a href="https://github.com/">GitHub</a> atau <a href="https://gitlab.com/">GitLab</a>.</li> + <li><strong>Program FTP</strong>, digunakan pada akun hosting lama untuk mengatur berkas pada (<a href="https://git-scm.com/">Git</a> secara bertahap menggantikan FTP untuk tujuan ini). Banyak sekali program FTP yang tersedia termasuk <a href="https://cyberduck.io/">Cyberduck</a>, <a href="http://fetchsoftworks.com/">Fetch</a>, dan <a href="https://filezilla-project.org/">FileZilla</a>.</li> + <li><strong>Automation system</strong>, seperti <a href="http://gruntjs.com/">Grunt</a> atau <a href="http://gulpjs.com/">Gulp</a> untuk menjalankan tugas berulang secara otomatis, seperti meminimalisir code dan menjalankan serangkaian test.</li> + <li><em>Templates</em>, <em>libraries</em>, <em>frameworks</em>, dan sebagainya, untuk mempercepat menulis fungsi umum.</li> + <li>Dan masih banyak lainnya!</li> +</ul> + +<h2 id="Alat_apa_saja_yang_sebenarnya_saya_butuhkan_sekarang">Alat apa saja yang sebenarnya saya butuhkan sekarang?</h2> + +<p>Daftar di atas sepertinya sedikit "menakutkan", tapi untungnya, Anda bisa mulai mengembangkan web tanpa harus tahu banyak tentang hal-hal ini. Pada artikel ini, kita akan membuat Anda siap dengan sesuatu yang paling sederhana, yaitu sebuah pengubah teks dan beberapa peramban web.</p> + +<h3 id="Memasang_text_editor">Memasang text editor</h3> + +<p>Anda mungkin sudah punya <em>text editor</em> bawaan pada komputer Anda. Secara default Windows mempunyai <a href="https://en.wikipedia.org/wiki/Notepad_%28software%29">Notepad</a> dan macOS mempunyai <a href="https://en.wikipedia.org/wiki/TextEdit">TextEdit</a>. <strong>Distro</strong> Linux beragam; Ubuntu mempunyai <a href="https://en.wikipedia.org/wiki/Gedit">gedit</a> secara default.</p> + +<p>Untuk mengembangkan web, Anda bisa melakukan lebih dari Notepad atau TextEdit. Kami sarankan mulai dengan <a href="https://code.visualstudio.com/">Visual Studio Code</a>, yang merupakan editor teks gratis, yang menawarkan tinjauan langsung (live preview) dan petunjuk kode.</p> + +<h3 id="Memasang_peramban_modern">Memasang peramban modern</h3> + +<p>Untuk saat ini, kita akan memasang dua peramban web desktop untuk menguji kode kita. Pilih sistem operasi kamu di bawah ini dan klik link yang relevan untuk mengunduh installer untuk peramban kesukaan Anda:</p> + +<ul> + <li>Linux: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>.</li> + <li>Windows: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a>, <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a> (Windows 10 hadir dengan Edge secara default; Jika kamu punya Windows 7 atau di atasnya, Anda bisa memasang Internet Explorer 11 atau di atasnya; jika tidak, Anda harus memasang peramban alternatif)</li> + <li>macOS: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a> (Safari hadir dengan iOS and macOS secara default)</li> +</ul> + +<p>Sebelum melanjutkan, kamu harus memasang minimum dua dari browser tersebut untuk pengujian.</p> + +<h3 id="Memasang_server_web_lokal">Memasang server web lokal</h3> + +<p>Beberapa contoh perlu dijalankan oleh server web agar dapat bekerja. Anda dapat mengetahui cara melakukan ini di <a href="https://developer.mozilla.org/id/docs/Learn/Common_questions/set_up_a_local_testing_server">Bagaimana Anda membuat server pengujian lokal?</a></p> + +<p>{{PreviousNext("Learn/Getting_started_with_the_web", "Learn/Getting_started_with_the_web/Akan_terlihat_seperti_apa_website_anda")}}</p> + +<h2 id="Dalam_modul_ini">Dalam modul ini</h2> + +<ul> + <li id="Installing_basic_software"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Memasang perangkat lunak dasar</a></li> + <li id="What_will_your_website_look_like"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/Akan_terlihat_seperti_apa_website_anda">Akan seperti apa website Anda terlihat?</a></li> + <li id="Dealing_with_files"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/Mengelola_file">Mengurus berkas</a></li> + <li id="HTML_basics"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/HTML_basics">Dasar-dasar HTML</a></li> + <li id="CSS_basics"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/CSS_basics">Dasar-dadar CSS</a></li> + <li id="JavaScript_basics"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Dasar-dasar JavaScript</a></li> + <li id="Publishing_your_website"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Mempublikasikan website Anda</a></li> + <li id="How_the_web_works"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Cara kerja web</a></li> +</ul> diff --git a/files/id/learn/getting_started_with_the_web/javascript_basics/index.html b/files/id/learn/getting_started_with_the_web/javascript_basics/index.html new file mode 100644 index 0000000000..f1fb4295df --- /dev/null +++ b/files/id/learn/getting_started_with_the_web/javascript_basics/index.html @@ -0,0 +1,398 @@ +--- +title: Dasar JavaScript +slug: Learn/Getting_started_with_the_web/JavaScript_basics +tags: + - Beginner + - CodingScripting + - JavaScript + - Web + - belajar +translation_of: Learn/Getting_started_with_the_web/JavaScript_basics +--- +<div> +<p>{{LearnSidebar}}</p> + +<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p> +</div> + +<div class="summary"> +<p>JavaScript adalah bahasa pemograman yang digunakan untuk menambahkan fitur interaktif pada website anda, seperti ketika ingin membuat game, melakukan perubahan ketika mengklik tombol, efek dinamik, animasi, dan masih banyak lagi. Tutorial ini adalah dasar dari JavaScript yang akan memberikan gambaran apa yang bisa anda buat dengan JavaScript.</p> +</div> + +<h2 id="Apakah_JavaScript_yang_Sebenarnya">Apakah JavaScript yang Sebenarnya?</h2> + +<p>{{Glossary("JavaScript")}} adalah bahasa pemograman yang sangat matang dan dapat dikolaborasikan dengan dokumen {{Glossary("HTML")}} dan digunakan untuk membuat website yang interaktif. JavaScript diciptakan oleh Brendan Eich yang juga co-founder dari Mozilla project, Mozilla Foundation dan Mozilla Corporation.</p> + +<p>Anda dapat melakukan banyak hal dengan JavaScript. Anda akan memulai dari fitur sederhana seperti menentukan layout, membuat respon ketika mengklik button, caousels, dan gallery gambar. Namun pada akhirnya ketika anda sudah mendapat banyak pengetahuan anda juga akan dapat membuat game, animasi 2D dan 3D, aplikasi yang berhubungan dengan database, dan masih banyak lagi.</p> + +<p>JavaScript sendiri adalah bahasa yang cukup komplek namun sangat fleksibel, dan banyak Developer (Programmer) telah menyediakan tool yang berdiri diatas core JavaScript agar anda dapat menggunakan fungsi - fungsi ekstra, tool tersebut sebagai berikut :</p> + +<ul> + <li>Application Programming Interfaces ({{Glossary("API","APIs")}}) dibangun pada web browser agar memungkinkan anda melakukan apapun dari dinamik dokumen HTML dan set CSS yang anda buat, untuk menangkap dan memodifikasi video dari web cam, atau membuat animasi 3D dan sampel audio.</li> + <li>API pihak ketiga menyediakan akses bagi Developer untuk menghubungkan aplikasi mereka pada website atau aplikasi lain layaknya facebook dan twitter. Pernahkan anda login soundcloud dengan facebook ? itu API pihak ketiga.</li> + <li>Frameworks pihak ketiga dan libraries dapat digabungkan pada HTML sehingga memungkinkan Developer membangun website atau aplikasi dengan cepat.</li> +</ul> + +<p>Karena artikel ini hanya sebagai pengenalan, kami tidak ingin membingungkan anda pada tingkat ini dengan membahas secara detail tentang apa perbedaan antara inti bahasa javascript dan perbedaan alat yang digunakan di atas. Anda bisa belajar semuanya nanti pada <a href="/en-US/docs/Learn/JavaScript">Area Belajar JavaScript </a>, dan pada semua bagian MDN.</p> + +<p>Di bawah ini kami akan memperkenalkan anda pada beberapa aspek dari inti bahasa, dan anda juga bisa bermain dengan beberapa fitur API Browser. Selamat Bersenang-senang!</p> + +<h2 id="Contoh_Hello_World">Contoh "Hello World"</h2> + +<p>Judul diatas terdengar menarik bukan ?. JavaScript adalah salah satu bahasa yang sangar menarik dari banyak teknologi web yang lain. dan jika anda mengikuti tutorial ini dengan baik, anda dapat menambahkan dimensi baru dan hal lain yang kreatif pada website anda. </p> + +<p>Namun, JavaScript sedikit lebih rumit dari pada HTML dan CSS, dan anda akan belajar sedikit demi sedikit, dan tetaplah belajar pada langkah-langkah kecil yang kami berikan. Untuk memulainya, kami akan menunjukkan bagaimana cara menambah beberapa skrip JavaScript yang sangat sederhana pada halaman Anda, yakni dengan contoh cara membuat "Hello, world!" (<a href="http://en.wikipedia.org/wiki/%22Hello,_world!%22_program">contoh standar pada dasar pemrograman</a>.)</p> + +<div class="warning"> +<p><strong>Penting</strong>: Jika anda belum mengikuti semua kursus kami, <a href="https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip">download contoh kode berikut</a> dan gunakan untuk memulai.</p> +</div> + +<div class="note"> +<p><strong>Catatan</strong>: Alasan kita menepatkan elemen {{htmlelement("script")}} di bawah file html adalah ketika HTML di muat oleh browser untuk ditampilkan pada sebuah file. Jika JavaScript dimuat pertama kali dan seharusnya mempengatuhi HTML di bawahnya, kemungkinan ini tidak bisa bekerja, oleh karena itu JavaScript dimuat sebelum HTML bekeja seperti seharusnya. Oleh karena itu, strategi yang terbaik biasanya adalah di bawah halaman.</p> +</div> + +<ol> + <li>Pertama-tema, buka situs percobaan anda, dan buatlah sebuah file baru bernama <code>main.js</code>. Simpan di dalam folder <code>scripts</code>.</li> + <li>Selanjutnya, buka file <code>index.html</code> Anda, dan masukkan elemen berikut pada sebuah baris bari sebelum tag penutup <code></body></code>: + <pre class="brush: html"><script src="scripts/main.js"></script></pre> + </li> + <li>Ini sama halnya dengan cara kerja elemen {{htmlelement("link")}} untuk CSS — ini menempatkan JavaScript ke halaman, sehingga dapat memberikan pegaruh pada HTML (CSS, dan lainnya pada halaman).</li> + <li>Sekarang tambahkan kode berikut pada file <code>main.js</code>: + <pre class="brush: js">var myHeading = document.querySelector('h1'); +myHeading.innerHTML = 'Hello world!';</pre> + </li> + <li>Sekarang pastikan file HTML dan JavaScript disimpan, dan muat <code>index.html</code> di browser. Anda seharusnya mendapatkan hasil seperti berikut: <img alt="" src="https://mdn.mozillademos.org/files/9543/hello-world.png" style="display: block; height: 236px; margin: 0px auto; width: 806px;"></li> +</ol> + +<h3 id="Apa_yang_Terjadi">Apa yang Terjadi?</h3> + +<p>Jadi text heading anda telah diubah menjadi "Hello world!" mengunakan JavaScript. Kita melakukannya dengan menggunakan fungsi {{domxref("Document.querySelector", "querySelector()")}} untuk mendapatkan referensi untuk heading, dan menyimpannya di variabel <code>myHeading</code>. Ini sama halnya seperti yang kita lakukan saat menggunakan CSS selector — kita menginginkan untuk melakukan sesuatu ke sebuah elemen, maka kita perlu memilihnya terlebih dahulu.</p> + +<p>Setelah itu, kita tambahkan nilai dari variabel <code>myHeading</code> properti {{domxref("Element.innerHTML", "innerHTML")}} ( dimana mewakili konten heading) ke "Hello world!".</p> + +<h2 id="Kursus_Kilat_Bahasa_Dasar">Kursus Kilat Bahasa Dasar</h2> + +<p>Mari kita jelaskan beberapa fitur dasar dari bahasa JavaScript, untuk memberi anda pemahaman lebih dalam bagaimana semuanya bekerja. Lebih baik lagi, fitur ini umum diterapkan pada semua bahasa pemrograman. Jika anda memahami fundamental ini, anda berada pada jalur untuk menguasai segala pemrograman!</p> + +<div class="warning"> +<p><strong>Penting</strong>: Pada artikel ini, coba masukkan contoh kode ke konsole browser anda dan lihat apa yang terjadi. Untuk detail tentang konsole browser, lihat <a href="/en-US/Learn/Discover_browser_developer_tools">Temukan Browser alat pengembang</a>.</p> +</div> + +<div class="note"> +<p><strong>Catatan</strong>: Fitur seperti ini sangat umum pada semua bahasa pemrograman. Jika anda dapat memahami dasar ini, anda akan mampu memulai pemrograman apapun.</p> +</div> + +<h3 id="Variabel">Variabel</h3> + +<p>{{Glossary("Variable", "Variables")}} merupakan wadah yang dapat anda beri nilai. Anda bisa memulai mendeklarasikan variabel dengan keyword <code>var</code>, diikuti nama yang anda inginkan:</p> + +<pre class="brush: js">var myVariable;</pre> + +<div class="note"> +<p><strong>Catatan</strong>: Semua baris di JS harus diakhiri dengan semi-colon (;), untuk menandakan akhr baris kode. Jika anda tidak menambahkanya, anda bisa mendapatkan hasil yang tidak diinginkan.</p> +</div> + +<div class="note"> +<p><strong>Catatan</strong>: Anda bisa memanggil variabel apa saja, tapi ada beberapa pembatasan (lihat <a href="http://www.codelifter.com/main/tips/tip_020.shtml">artikel ini tentang aturan penamaan variabel</a>.)</p> +</div> + +<div class="note"> +<p><strong>Catatan</strong>: JavaScript sangat case sensitive — <code>myVariable</code> sangat berbeda dengan variabel <code>myvariable</code>. jika anda mendapatkan masalah pada kode anda, periksa huruf besar/kecil (casing)!</p> +</div> + +<p>Setelah mendeklarasikan sebuah variabel, anda bisa menambahkan nilai:</p> + +<pre class="brush: js">myVariable = 'Bob';</pre> + +<p>Anda dapat mengambil nilai dengan memangil nama variabel:</p> + +<pre class="brush: js">myVariable;</pre> + +<p>Anda bisa melakukan operasi ini dalam satu baris jika anda menginginkanya:</p> + +<pre class="brush: js">var myVariable = 'Bob';</pre> + +<p>Setelah memberikan nilai pada variabel, setelah itu anda bisa mengubah nilainya:</p> + +<pre>var myVariable = 'Bob'; +myVariable = 'Steve';</pre> + +<p>Catat bahwa variabel memiliki <a href="/en-US/docs/Web/JavaScript/Data_structures">Tipe data</a> yang berbeda:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="row">Variabel</th> + <th scope="col">Penjelasan</th> + <th scope="col">Contoh</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">{{Glossary("String")}}</th> + <td>Teks String. Untuk menamdakan bahwa variabel adalah sebuah string anda perlu menambahkan tanda kutip.</td> + <td><code>var myVariable = 'Bob';</code></td> + </tr> + <tr> + <th scope="row">{{Glossary("Number")}}</th> + <td>Angka/number. Angka tidak menggunakan tanda kutip.</td> + <td><code>var myVariable = 10;</code></td> + </tr> + <tr> + <th scope="row">{{Glossary("Boolean")}}</th> + <td>Nilai True/False. <code>true</code>/<code>false</code> merupakan keyword spesial di JS, dan tidak perlu menggunakan kutip.</td> + <td><code>var myVariable = true;</code></td> + </tr> + <tr> + <th scope="row">{{Glossary("Array")}}</th> + <td>Struktur yang memungkinkan anda menyimpan lebih dari satu nilai dalam sebuah reference.</td> + <td><code>var myVariable = [1,'Bob','Steve',10];</code><br> + Panggil setiap member array seperti ini: <code>myVariable[0]</code>, <code>myVariable[1]</code>, etc.</td> + </tr> + <tr> + <th scope="row">{{Glossary("Object")}}</th> + <td>Pada dasarnya, semua. Semuanya di javascript adalah sebuah objek, dan dapat disimpan dalam variabel. Ingatlah untuk anda belajar.</td> + <td><code>var myVariable = document.querySelector('h1');</code><br> + All of the above examples too.</td> + </tr> + </tbody> +</table> + +<p>Jadi kenapa kita memerlukan variabel? Baik, variable dibutuhkan dalam berbagai hal menarik di pemrograman. Jika nilainya tidak berubah, maka anda tidak dapat melakukan sesuatu hal yang bersifat dinamis, seperti menyesuaikan pesan salam ke pengunjung website anda, atau mengubah gambar yang tampil di galeri, dan masih banyak lagi.</p> + +<h3 id="Komentar">Komentar</h3> + +<p>Anda dapat menambahkan komentar di kode Javascript, seperti halnya pada CSS. Di JavaScript, sebaris komentar ditulis seperti berikut:</p> + +<pre class="brush: js">// Ini adalah komentar</pre> + +<p>Namun anda juga dapat menggunakan lebih dari satu baris komentar seperti yang anda lakukan pada CSS:</p> + +<pre class="brush: js">/* +Ini adalah komentar +lebih dari satu baris +*/</pre> + +<h3 id="Operator">Operator</h3> + +<p>{{Glossary("operator")}} pada dasarnya adalah simbol matematika yang bertindak atas dua nilai (atau variabel yang berisi nilai) dan menghasilkan nilai baru. Pada tabel dibawah anda bisa melihat beberapa operator yang sederhana, disertai contoh untuk anda coba di konsole browser.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="row">Operator</th> + <th scope="col">Penjelasan</th> + <th scope="col">Simbol</th> + <th scope="col">Contoh</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">penambahan / penggabungan</th> + <td>Digunakan untuk menambahkan nilai satu dengan lainnya menjadi sebuah nilai baru, atau menggabungkan dua teks string.</td> + <td><code>+</code></td> + <td><code>6 + 9;<br> + "Hello " + "world!";</code></td> + </tr> + <tr> + <th scope="row">pengurangan, Perkalian, pembagian</th> + <td>Yang ini hasilnya sama seperti yang kita kenal di matematika dasar.</td> + <td><code>-</code>, <code>*</code>, <code>/</code></td> + <td><code>9 - 3;<br> + 8 * 2; // perkalian di JS menggunakan tanda bintang (*)<br> + 9 / 3;</code></td> + </tr> + <tr> + <th scope="row">operator penugasan</th> + <td>Anda telah melihat ini sebelumnya, penugasan di JS digunakan untuk memberikan nilai pada variabel.</td> + <td><code>=</code></td> + <td><code>var myVariable = 'Bob';</code></td> + </tr> + <tr> + <th scope="row">Operator kesetaraan</th> + <td>Melakukan tes untuk melihat apakah suatu nilai sama dengan nilai pembanding, dan mengembalikan nilai hasil berupa boolean <code>true</code>/<code>false</code> .</td> + <td><code>===</code></td> + <td><code>var myVariable = 3;<br> + myVariable === 4;</code></td> + </tr> + <tr> + <th scope="row">Negasi, tidak sama dengan</th> + <td>Sering digunakan bersama operator kesetaraan, operator negasi di JS sama dengan logical NOT — membalik nilai <code>true</code> menjadi <code>false</code> dan sebaliknya.</td> + <td><code>!</code>, <code>!==</code></td> + <td> + <p>Ekspresi dasarnya bernilai <code>true</code>, namun pada pernamdingan mengembalikan nilai <code>false</code> karena kita menggunakan negasi:</p> + + <p><code>var myVariable = 3;<br> + !myVariable === 3;</code></p> + + <p>Disini kita mencoba "Apakah <code>myVariable</code> NOT ( tidak ) sama dengan 3". Mengembalikan nilai <code>false</code>, karena disitu pembandingnya sama dengan 3.</p> + + <p><code><code>var myVariable = 3;</code><br> + myVariable !== 3;</code></p> + </td> + </tr> + </tbody> +</table> + +<p>Disana masih banyak lagi yang dapat anda pelajari, tapi ini dulu yang kita cukup pahami. Lihat <a href="/en-US/docs/Web/JavaScript/Reference/Operators">Operator dan ekspressi</a> untuk daftar yang lebih lengkap.</p> + +<div class="note"> +<p><strong>Catatan</strong>: Mencampur tipe data akan memyebabkan hasil yang tidak kita duga ketika melakukan perhitungan, jadi hati - hati ketika memberikan nilai pada variabel pastikan memberikan nilai yang sesuai, dan mendapatkan hasil sesuai yang anda inginkan. Misalnya menuliskan <code>"35" + "25"</code> pada konsol. Kenapa anda tidak mendapatkan nilai yang anda inginkan? karena tanda kutip mengubah angka menjadi teks string — anda hanya mendapatkan nilai string yang digabungkan, dan bukan angka yang ditambahkan. Jika anda memasukkan <code>35 + 25</code>, anda akan mendapatkan nilai yang sesuai.</p> +</div> + +<h3 id="Kondisional">Kondisional</h3> + +<p>Kondisional adalah struktur kode yang memungkinkan anda untuk menguji apakah ekspresi mengembalikan nilai yang benar atau tidak, dan kemudian menjalankan perintah lain tergantung pada hasilnya. Bentuk umum dari kondisional disebut <code>if ... else</code>. Contoh seperti berikut:</p> + +<pre class="brush: js">var esKrim = 'coklat'; +if (esKrim === 'coklat') { + alert('Yay, Aku suka eskrim coklat!'); +} else { + alert('Hahhh, tapi sukanya coklat...'); +}</pre> + +<p>Ekspresi didalam <code>if ( ... )</code> dalah pengujian — disini menggunakan operator kesetaraan (seperti yang dijelaskan sebelumnya) untuk membandingkan variabe <code>esKrim</code> dengan string <code>coklat</code> untuk melihat keduanya sama. Jika hasil perbandingan mengembalikan nilai <code>true</code>, kode blok pertama akan dijalankan. Jika tidak, akan di lewati dan kode blok selanjutnya akan di jalankan, tepatnya setelah statement <code>else</code>.</p> + +<h3 id="Fungsi">Fungsi</h3> + +<p>{{Glossary("Function", "Functions")}} merupakan cara encapsulasi fungsi yang ingin anda gunakan kembali, jadi anda dapat memanggil dengan hanya sebuah nama fungsi, dan tidak harus menulis semua kodenya lagi setiap kali anda ingin menggunakannya kembali. Anda telah melihat beberapa fungsi diatas, seperti:</p> + +<ol> + <li> + <pre class="brush: js">var myVariable = document.querySelector('h1');</pre> + </li> + <li> + <pre class="brush: js">alert('Halo!');</pre> + </li> +</ol> + +<p>Fungsi ini merupakan built-in browser untuk anda gunakan kapanpun.</p> + +<p>Jika anda melihat sesuatu yang mirip dengan nama variabel, tapi menggunakan tanda kurung — <code>()</code> — setelahnya, anda dapat memastikan bahwa itu adalah fungsi. Fungsi terkadang menggunakan {{Glossary("Argument", "arguments")}} — bit data yang dibutuhkan untuk dapat menjalankan fungsinya. Argumen di tulis di dalam tanda kurung, dan dipisahkan dengan koma jika memiliki lebih dari satu argumen.</p> + +<p>Misal, Fungsi <code>alert()</code> membuat kotak pop-up terlihat pada jendela browser, namun kita perlu membaerikan string sebagai sebuah argumen untuk mengatakan pada fungsi <code>alert()</code>pesan apa yang harus di tampilkan pada kotak po-pup.</p> + +<p>Berita bagusnya adalah kita dapat membuat fungsi anda sendiri — pada contoh berikut kita menulis sebuah fungsi sederhana dengan menggunakan dua argumen dan mengalikannya menjadi nilai baru:</p> + +<pre class="brush: js">function kalikan(angka1,angka2) { + var hasil = angka1 * angka2; + return hasil; +}</pre> + +<p>Coba jalankan fungsi diatas pada konsole, kemudian coba gunakan fungsi anda beberapa kali, misal.:</p> + +<pre class="brush: js">kalikan(4,7); +kalikan(20,20); +kalikan(0.5,3);</pre> + +<div class="note"> +<p><strong>Catatan</strong>: Statement <a href="/en-US/docs/Web/JavaScript/Reference/Statements/return"><code>return</code></a> mengatakan pada browser untuk mengembalikan nilai variabel <code>hasil</code> keluar dari fungsi sehingga dapat digunakan. Hal ini diperlukan karena variabel yang didefinisikan di dalam blok kode atau cakupan fungsi hanya akan tersedia didalam fungsi itu sendiri. Hal ini disebuat variable {{Glossary("Scope", "scoping")}} (baca <a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Variable_scope">lebih lanjut tentang variable scoping disini</a>.)</p> +</div> + +<h3 id="Events">Events</h3> + +<p>Untuk membuat hal yang interaktif pada website, anda perlu menggunakan event — kode struktur ini mendengarkan setiap hal yang terjadi pada browser, dan kemudian memungkinkan anda menjalankan kode sebagai respon pada hal yang terjadi tersebut. Contoh yang paling terjadi adalah <a href="/en-US/docs/Web/Events/click">click event</a>, dimana di suarakan oleh browser ketika mouse anda mengklik pada elemen seperti link, tombol atau yang lainnya. Untuk menunjukkannya, coba tambahkan kode berikut pada konsol anda, kemudian coba klik pada halaman web tersebut:</p> + +<pre class="brush: js">document.querySelector('html').onclick = function() { + alert('Ouch! Stop poking me!'); +}</pre> + +<p>Banyak sekali cara untuk melampirkan event pada sebuah elemen; disini kita memilih elemen HTML dan membuat properti handler <code><a href="/en-US/docs/Web/API/GlobalEventHandlers.onclick">onclick</a></code> yang sama dengan fungsi anonim (fungsi tanpa nama) yang berisi kode yang ingin kita jalankan ketika event terjadi.</p> + +<p>Catat bahwa</p> + +<pre class="brush: js">document.querySelector('html').onclick = function() {};</pre> + +<p>sama dengan</p> + +<pre class="brush: js">var myHTML = document.querySelector('html'); +myHTML.onclick = function() {};</pre> + +<p>Hanya untuk lebih pendek saja menuliskannya.</p> + +<h2 id="Meningkatkan_contoh_website_kita">Meningkatkan contoh website kita</h2> + +<p>Sekarang kita meninjau beberapa dasar JavaScript, mari tambahkan bebrapa fitur dasar ke contoh situs kita untuk memberi anda satu langkah kepada suatu yang mungkin.</p> + +<h3 id="Menambahkan_pengubah_gambar">Menambahkan pengubah gambar</h3> + +<p>Pada bagian ini kita akan menambahkan gambar lain pada situs kita, dan tambahkan beberapa Javascript sederhana untuk mengubah antara keduanya ketika gambar di-klik.</p> + +<ol> + <li>Pertama, cari gambar lain yang ingin anda gunakan di situs anda. Pastikan ukurannya sama dengan gambar pertama, atau kurang lebih sama.</li> + <li>Simpan gambar pada folder <code>images</code> anda.</li> + <li>Pada file <code>main.js</code> , tuliskan kode JavaScript berikut (Jika kode Javascript hello world masih disana, hapus saja): + <pre class="brush: js">var myImage = document.querySelector('img'); + +myImage.onclick = function() { + var mySrc = myImage.getAttribute('src'); + if(mySrc === 'images/firefox-icon.png') { + myImage.setAttribute ('src','images/firefox2.png'); + } else { + myImage.setAttribute ('src','images/firefox-icon.png'); + } +}</pre> + </li> + <li>Simpan semua file dan muat <code>index.html</code> di browser. Sekarang kita klik gambarnya, seharusnya berubah tampilannya menjadi gambar yang satunya!</li> +</ol> + +<p>Kita menyimpan referensi ke elemen gambar Kita dalam variabel myImage. Selanjutnya, Kita membuat fungsi tanpa nama (fungsi "anonim") pada property variabel pengendali event onclick. Sekarang, setiap kali elemen gambar ini diklik:</p> + +<ol> + <li>Kita mendapatkan nilai atribut src dari gambar.</li> + <li>Kita menggunakan kondisional untuk memeriksa apakah nilai src sama dengan path gambar asli: + <ol> + <li>Jika ya, kita mengubah nilai src ke path gambar kedua, memaksa gambar lain dimuat dalam elemen {{htmlelement ("image")}}.</li> + <li>Jika tidak (artinya harus sudah mengalami perubahan), kita mengubah nilai src kembali ke jalur gambar asli, untuk membalikkannya kembali ke semula.</li> + </ol> + </li> +</ol> + +<h3 id="Menambahkan_pesan_selamat_datang_yang_dinamis">Menambahkan pesan selamat datang yang dinamis</h3> + +<p>Selanjutnya, Kita akan menambahkan sedikit kode lagi untuk mengubah judul halaman untuk menyertakan pesan pembuka yang dinamis saat pengguna pertama kali masuk ke situs. Pesan pembuka ini akan bertahan saat pengguna meninggalkan situs dan kemudian kembali lagi. Kita juga akan menyertakan opsi untuk mengubah pengguna dan oleh karena itu pesan selamat datang diperlukan setiap waktu.</p> + +<ol> + <li>Pada <code>index.html</code>, <span id="result_box" lang="id"><span>Tambahkan baris berikut sebelum elemen</span></span> {{htmlelement("script")}}: + + <pre class="brush: html"><button>Change user</button></pre> + </li> + <li><code>Pada main.js</code>, <span id="result_box" lang="id"><span> tambahkan kode berikut di bagian bawah file, persis seperti yang tertulis - ini mengacu pada tombol baru yang akan kita tambahkan, judulnya, dan simpan pada variabel:</span></span> + <pre class="brush: js">var myButton = document.querySelector('button'); +var myHeading = document.querySelector('h1');</pre> + </li> + <li>Sekarang tambahkan fungsi berikut untuk mengatur ucapan yang dinamis - ini belum berinteraksi tapi nanti akan kita gunakan: + <pre class="brush: js">function setUserName() { + var myName = prompt('Please enter your name.'); + localStorage.setItem('name', myName); + myHeading.innerHTML = 'Mozilla is cool, ' + myName; +}</pre> + Fungsi ini berisi fungsi <a href="/id/docs/Web/API/Window.prompt"><code>prompt()</code></a> yang menampilkan kotak dialog seperti <code>alert()</code>. Perbedaannya adalah <code>prompt()</code> meminta pengguna untuk memasukkan data, dan menyimpan data tersebut dalam variabel saat tombol dialog OK ditekan. Dalam kasus ini, kita meminta pengguna memasukkan namanya. Selanjutnya, kita memanggil API yang disebut localStorage, yang memungkinkan kita menyimpan data di browser, dan mengambilnya nanti. Kita menggunakan fungsi setItem <code>LocalStorage ()</code> untuk membuat dan menyimpan item data yang disebut 'name', dan menetapkan nilainya ke variabel myName yang berisi nama pengguna yang dimasukkan. Akhirnya, kita mengatur innerHTML dari judul ke string, ditambahk nama penggunanya.</li> + <li>Selanjutnya, tambahkan blok <code>if ... else</code> — kita bisa memanggil kode inisialisasi, sebagai pengatur saat aplikasi pertama kali dimuat: + <pre class="brush: js">if(!localStorage.getItem('name')) { + setUserName(); +} else { + var storedName = localStorage.getItem('name'); + myHeading.innerHTML = 'Mozilla is cool, ' + storedName; +}</pre> + Blok kode pertama kali menggunakan operator negasi (logical NOT) untuk memeriksa apakah item data ada - jika tidak ada, fungsi <code>setUserName()</code> dijalankan untuk membuatnya. Jika sudah ada (misalnya pengguna mengaturnya saat mereka mengunjungi situs), kita mengambil nama yang tersimpan dengan menggunakan <code>getItem()</code> dan menetapkan innerHTML dari judul ke string, ditambah nama pengguna, sama seperti yang kita lakukan di dalam <code>setUserName()</code>.</li> + <li>Terakhir, letakkan pengendali event di bawah <code>onclick</code> pada tombolnya, sehingga saat diklik fungsi <code>setUserName()</code> dijalankan. Hal ini memungkinkan pengguna untuk mengatur nama baru kapan pun mereka mau dengan menekan tombol: + <pre class="brush: js">myButton.onclick = function() { + setUserName(); +}</pre> + </li> +</ol> + +<p>Sekarang saat pertama kali mengunjungi situs, akan meminta nama pengguna kemudian memberi pesan yang dinamis kepada anda. Kemudian Anda bisa mengganti nama kapan saja dengan menekan tombol. Sebagai bonus tambahan, karena namanya tersimpan di dalam localStorage, tetap ada setelah situs ditutup, jadi pesan yang dinamis akan tetap ada saat Anda membuka situs ini lagi!</p> + +<h2 id="Kesimpulan">Kesimpulan</h2> + +<p>Jika Anda telah mengikuti semua petunjuk dalam artikel ini, halaman yang Anda buat harus terlihat seperti ini (Anda juga dapat <a href="http://mdn.github.io/beginner-html-site-scripted/">melihat versi kami di sini</a>):</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9539/website-screen-scripted.png" style="display: block; height: 995px; margin: 0px auto; width: 800px;"></p> + +<p>Jika Anda terjebak kebingungan, Anda selalu bisa membandingkan pekerjaan Anda dengan contoh kode yang telah <a href="https://github.com/mdn/beginner-html-site-scripted/blob/gh-pages/scripts/main.js">kami selesaikan di Github</a>.</p> + +<p>Di sini, kita hanya benar-benar menenepuk permukaan JavaScript. Jika Anda telah menikmati pembelajarannya dan ingin belajar lebih dalam dengan studi Anda, masuklah ke <a href="/id/docs/Web/JavaScript/Guide">Panduan JavaScript</a> kami.</p> + +<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p> 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 new file mode 100644 index 0000000000..04cc90ec4b --- /dev/null +++ b/files/id/learn/getting_started_with_the_web/mengelola_file/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 +--- +<blockquote> +<h2 id="LearnSidebar">{{LearnSidebar}}</h2> +</blockquote> + +<div>{{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")}}</div> + +<div class="summary"> +<p>Suatu website terdiri atas banyak <em>file, </em>seperti konten teks, kode,<em> stylesheet</em>, konten media, dan lain-lain. Ketika kamu sedang membuat sebuah website, kamu perlu merangkai <em>file-file</em> ini menjadi sebuah struktur yang sesuai pada komputermu, memastikan <em>file-file</em> tersebut saling terhubung antara satu dengan lainnya, dan memastikan semua konten sudah benar sebelum akhirnya kamu <a href="/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">unggah mereka ke suatu <em>server</em></a>. Bagian ini akan membahas isu-isu yang perlu kamu ketahui sehingga kamu dapat membuat struktur <em>file </em>yang sesuai untuk website kamu.</p> +</div> + +<h2 id="Di_mana_website_kamu_berada_dalam_komputermu">Di mana website kamu berada dalam komputermu?</h2> + +<p>Ketika kamu sedang mengerjakan satu website lokal pada komputer pribadimu, kamu harus menyimpan semua <em>file</em> terkait pada satu folder sesuai dengan struktur website yang diunggah ke <em>server</em>. Folder ini dapat kamu simpan di manapun sesukamu, tetapi kamu harus meletakkannya di suatu tempat yang mudah ditemukan, seperti Desktop, pada<em> </em>folder Home, atau pada folder <em>root</em> dari <em>hard drive</em> kamu.</p> + +<ol> + <li>Pilih tempat untuk menyimpan proyek-proyek websitemu. Buatlah sebuah folder dengan nama <code>web-projects</code> (atau nama lain yang serupa). Di sinilah proyek-proyek websitemu akan disimpan. </li> + <li>Di dalam folder sebelumnya, buat lagi satu folder untuk menyimpan website pertamamu. Berilah nama <code>test-site</code> (atau nama lainnya yang lebih menarik).</li> +</ol> + +<h2 id="Catatan_untuk_pengaturan_huruf_kapital_dan_penggunaan_spasi">Catatan untuk pengaturan huruf kapital dan penggunaan spasi</h2> + +<p>Kamu akan menyadari bahwa di artikel ini, kami akan meminta kamu untuk menamai folder dan<em> file</em> dalam huruf kecil tanpa spasi. Hal ini karena:</p> + +<ol> + <li>Banyak komputer, terutama <em>web server</em>, bersifat <em>case-sensitive </em>(sensitif terhadap huruf kapital dan kecil). Sebagai contoh, jika kamu meletakkan gambar pada situs seperti <code>test-site/GambarSaya.jpg</code>, dan kemudian pada file lain kamu akan memanggil gambar tersebut dengan <code>test-site/gambarsaya.jpg</code>, maka kemungkinan hal tersebut tidak akan berhasil. </li> + <li>Peramban, <em>web server</em> dan bahasa pemrograman tidak menangani spasi secara konsisten. Contohnya. jika kamu menggunakan spasi pada nama <em>file</em>mu, beberapa sistem akan memperlakukannya sebagai dua nama <em>file</em>. Beberapa server akan mengganti spasi pada nama <em>file</em>mu 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 <em>underscore </em>(_): <code>file-saya.html</code> vs. <code>file_saya.html</code>.</li> +</ol> + +<p>Jawaban singkatnya adalah kamu sebaiknya menggunakan tanda hubung (-) untuk nama <em>file </em>mu. Mesin pencari Google memperlakukan tanda hubung sebagai pemisah kata, namun ia tidak memperlakukan <em>underscore </em>sebagai hal yang sama. Atas dasar hal tersebut, sebaiknya kamu membiasakan diri menulis nama folder dan <em>file </em>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.</p> + +<h2 id="Bagaimana_struktur_yang_harus_kamu_gunakan_untuk_websitemu">Bagaimana struktur yang harus kamu gunakan untuk websitemu?</h2> + +<p>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 <em>file</em> indeks HTML dan folder untuk menyimpan gambar, <em>file</em> CSS, dan <em>file </em>script. Ayo buat sekarang juga:</p> + +<ol> + <li><code><strong>index.html</strong></code>: <em>File</em> 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 <em>file</em> baru bernama <font face="consolas, Liberation Mono, courier, monospace">index.html </font>dan simpan di dalam folder <font face="consolas, Liberation Mono, courier, monospace"> <code>test-site</code>.</font></li> + <li><strong>Folder <code>images</code></strong>: Folder ini berisi semua gambar yang akan digunakan pada websitemu. Buatlah sebuah <em>folder</em> bernama <code>images</code> di dalam <em>folder</em> <code>test-site</code>. </li> + <li><strong>Folder </strong><em><strong><code>styles</code></strong></em>: Folder ini berisi kode CSS yang digunakan untuk kontenmu (contoh: pengaturan teks dan warna latar belakang). Buat folder bernama <code>styles</code> di dalam folder <code>test-site</code>.</li> + <li><strong>Folder <code>scripts</code></strong>: Folder ini berisi semua kode JavaScript yang digunakan untuk menambah fungsionalitas interaktif pada websitemu. Buat <em>folder</em> bernama <code>scripts</code> di dalam <em>folder </em><code>test-site</code>.</li> +</ol> + +<div class="note"> +<p><strong>Catatan</strong>: Pada komputer Windows, kamu mungkin mengalami kesulitan saat melihat nama file, karena Windows memiliki opsi <em><strong>Hide extensions for known file types</strong></em> yang aktif secara <em>default</em>. Umumnya, kamu dapat mematikannya dengan masuk ke Windows Explorer, pilih <strong><em>Folder options..</em>.</strong>, hilangkan centang pada kotak cek <em><strong>Hide extensions for known file types</strong></em>, lalu klik <strong>OK</strong>. Untuk informasi spesifik mengenai versi Windowsmu, kamu dapat melakukan pencarian di web.</p> +</div> + +<h2 id="JalurPath_file">Jalur/<em>Path file</em></h2> + +<p>Agar <em>file-file</em> dapat berkomunikasi antara satu dengan lainnya, kamu harus menyediakan sebuah<em> path file</em> — sebuah rute sehingga satu file dapat mengetahui di mana lokasi file yang lainnya. Untuk mendemonstrasikannya, kita akan memasukkan sedikit HTML ke dalam file <code>index.html</code>, dan membuatnya menampilkan gambar yang kamu pilih pada artikel <a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/Akan_terlihat_seperti_apa_website_anda">"Akan terlihat seperti apa website kamu?"</a> </p> + +<ol> + <li>Salin gambar yang kamu pilih sebelumnya ke folder <code>image</code>.</li> + <li>Buka<em> file</em> <code>index.html</code>, 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. + <pre class="brush: html line-numbers language-html"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>utf-8<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>title</span><span class="punctuation token">></span></span>My test page<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>img</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span><span class="punctuation token">"</span></span> <span class="attr-name token">alt</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>My test image<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> + </li> + <li>Baris <code><img src="" alt="My test image"></code> adalah kode HTML yang menyisipkan gambar ke dalam halaman. Kita perlu memberitahu HTML di mana letak gambar tersebut. Gambar berada pada folder <em>images</em> yang sejajar dengan file <code>index.html</code>. Untuk menelusuri struktur file dari <code>index.html</code> ke gambar kita, jalur <em>file </em>yang kita butuhkan adalah <code>images/your-image-filename</code>. Sebagai contoh, gambar tersebut kami namai <code>firefox-icon.png</code>, sehingga jalur <em>file</em>-nya menjadi <code>images/firefox-icon.png</code>.</li> + <li>Sisipkan jalur<em> file</em> tersebut ke dalam kode HTML kamu di antara tanda petik pada kode <code>src=""</code>.</li> + <li>Simpan file HTML, kemudian buka halaman tersebut pada peramban webmu (<em>double-click file</em>). Kamu akan melihat halaman web barumu menampilkan gambarmu!</li> +</ol> + +<p><img alt="A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world" src="https://mdn.mozillademos.org/files/9229/website-screenshot.png" style="display: block; height: 542px; margin: 0px auto; width: 690px;"></p> + +<p>Beberapa aturan umum untuk jalur file:</p> + +<ul> + <li>Untuk menghubungkan ke <em>file</em> target pada direktori yang sama dengan HTML yang terkait, cukup gunakan nama <em>file</em> seperti <code>my-image.jpg</code>.</li> + <li>Untuk menghubungkan sebuah <em>file</em> ke sebuah subdirektori, tuliskan nama direktori pada awal jalur file dengan tambahan tanda garis miring (/) seperti <code>subdirectory/my-image.jpg</code>.</li> + <li>Untuk menghubungkan <em>file</em> target pada direktori <strong>sebelum </strong><em>file</em> HTML terkait, tulis dua titik (..). Sebagai contoh, jika <code>index.html</code> berada di dalam <em>subfolder</em> <code>test-site</code> dan <code>my-image.jpg</code> berada pada<em> folder </em><code>test-site</code>, kamu harus menghubungkan <code>my-image.jpg</code> dengan <code>index.html</code> menggunakan <code>../my-image.jpg</code>.</li> + <li>Kamu dapat mengombinasikan aturan-aturan tersebut sesuai kebutuhanmu, seperti <code>../subdirectory/another-subdirectory/my-image.jpg</code>.</li> +</ul> + +<p>Untuk sekarang, itulah semua yang perlu kamu ketahui.</p> + +<div class="note"> +<p><strong>Catatan</strong>: Sistem <em>file</em> pada Windows biasanya menggunakan garis miring terbalik (\), bukan garis miring (/), contohnya <code>C:\windows</code>. Hal ini tidak masalah pada HTML — bahkan jika kamu sedang mengembangkan websitemu di Windows, kamu tetap dapat menggunakan garis miring di kodemu.</p> +</div> + +<h2 id="Apa_lagi_yang_harus_dilakukan">Apa lagi yang harus dilakukan?</h2> + +<p>Begitulah untuk saat ini. Struktur foldermu seharusnya terlihat seperti ini:</p> + +<p><img alt="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" src="https://mdn.mozillademos.org/files/9231/file-structure.png" style="display: block; height: 577px; margin: 0px auto; width: 929px;"></p> + +<p>{{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")}}</p> + +<p> </p> + +<p> </p> + +<h2 id="Dalam_modul_ini">Dalam modul ini</h2> + +<ul> + <li id="Installing_basic_software"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Menginstal perangkat lunak dasar</a></li> + <li id="What_will_your_website_look_like"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/Akan_terlihat_seperti_apa_website_anda">Akan seperti apa website kamu?</a></li> + <li id="Dealing_with_files"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/Mengelola_file">Berurusan dengan file</a></li> + <li id="HTML_basics"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML dasar</a></li> + <li id="CSS_basics"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS dasar</a></li> + <li id="JavaScript_basics"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript dasar</a></li> + <li id="Publishing_your_website"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Mempublish website kamu</a></li> + <li id="How_the_web_works"><a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Bagaimana web bekerja</a></li> +</ul> diff --git a/files/id/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/id/learn/getting_started_with_the_web/publishing_your_website/index.html new file mode 100644 index 0000000000..ad9eaa3f64 --- /dev/null +++ b/files/id/learn/getting_started_with_the_web/publishing_your_website/index.html @@ -0,0 +1,111 @@ +--- +title: Publishing your website +slug: Learn/Getting_started_with_the_web/Publishing_your_website +tags: + - Beginner + - 'I10n:priority' + - Learn + - NeedsTranslation + - Web + - publishing +translation_of: Learn/Getting_started_with_the_web/Publishing_your_website +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p>Setelah anda selesai menulis kode dan mengatur file yang membentuk website anda, anda perlu menaruh file - file tersebut secara online agar orang lain bisa menemukannya. Artikel ini menunjukan bagaimana kode sederhana anda online dengan sedikit usaha.</p> +</div> + +<h2 id="Apa_pilihannya">Apa pilihannya?</h2> + +<p>Menerbitkan sebuah website bukanlah topik yang sederhana, terutama karena banyak sekali cara yang bisa digunakan. Pada artikel ini kita tidak akan membahas keseluruhan cara. Namun, kita akan membahas pro dan kontra dari ketiga strategi yang sangat luas dari pandangan pemula, dan kita akan mencoba salah satu cara untuk digunakan.</p> + +<h3 id="Mencari_hosting_dan_nama_domain">Mencari hosting dan nama domain</h3> + +<p>Jika anda ingin mengontrol keseluruhan website anda, maka anda perlu menyisikan uang untuk membeli:</p> + +<ul> + <li>Hosting — menyewa penyimpanan file pada perusahaan hosting <a href="/id/Learn/What_is_a_web_server">web server</a>. Taruh semua file website anda pada peyimpanan tersebut, dan web server akan menyajikan konten anda ke pengguna web yang memintanya.</li> + <li><a href="/id/Learn/Understanding_domain_names">Nama Domain</a> — alamat unik dimana orang bisa mengunjungi website anda, seperti halnya <code>http://www.mozilla.org</code>, atau <code>http://www.bbc.co.uk</code>. Anda menyewa nama domain untuk beberapa tahun dari <strong>domain registrar</strong>.</li> +</ul> + +<p>Setiap website professional menerbitkan website dengan cara ini.</p> + +<p>Sebagai tambahan, anda memerlukan program {{Glossary("FTP", "File Transfer Protocol (FTP)")}} (lihat <a href="/id/Learn/How_much_does_it_cost#Software">Berapa mahal harganya: software</a> untuk lebih detail) untuk mengirim file website ke server. Program FTP sangat bervariasi, tapi umumnya anda perlu login ke web server anda menggunakan detail yang diberikan oleh perusahaan hosting anda (mis. username, password, host name). Kemudian program akan menampilkan file lokal dan file di web server ada dalam dua jendela, jadi anda bisa mentransfernya dari komputer lokal ke web server dan sebaliknya:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9469/ftp.jpg" style="display: block; height: 487px; margin: 0px auto; width: 800px;"></p> + +<h4 id="Tips_mencai_hosting_dan_domain">Tips mencai hosting dan domain</h4> + +<ul> + <li>Disini kami tidak mempromosikan perusahaan hosting dan registrar nama domain, Cukup cari "web hosting" dan "domain names" di pencarian untuk mencari perusahaan yang menjual nama domain. Hampir semua perusahaan memberikan fitur untuk mecari nama domain yang anda inginkan.</li> + <li>Internet service provider untuk rumah dan kantor biasanya memberikan hosting terbatas untuk website anda. Ketersediaan fitur akan sangat terbatas, namun sangat bagus untuk anda bereksperimen — hubungi mereka dan minta informasi!</li> + <li>Banyak sekali layanan gratis yang tersedia seperti <a href="https://neocities.org/">Neocities</a>, <a href="https://www.blogger.com">Blogger</a>, dan <a href="https://wordpress.com/">WordPress</a>. Sekali lagi, anda akan mendapatkan apa yang anda bayar, namun sangat ideal untuk eksperimen awal. Layanan gratis umumnya tidak memerlukan software FTP untuk mengupload — anda hanya cukup drag and drop di tampilan website saja.</li> + <li>Seringkali perusahaan memberikan hosting dan domain dalam satu paket.</li> +</ul> + +<h3 id="Menggunakan_alat_online_seperti_GitHub_Google_App_Engine_atau_Dropbox">Menggunakan alat online seperti GitHub, Google App Engine atau Dropbox</h3> + +<p>Beberapa alat yang memungkinkan anda menerbitkan website secara online:</p> + +<ul> + <li><a href="https://github.com/">GitHub</a> merupakan situs "social coding". Memungkinkan anda untuk mengupload repositori kode ke penyimpanan di <a href="http://git-scm.com/">Git</a> <strong>version control system. </strong>Anda juga berkolaborasi pada sebuah proyek, dan sistemnya secara default adalah open-source, yang artinya semua orang dapat melihat kode anda di GitHub, untuk gunakan, belajar dan mengembangkan kode tersebut. GitHub memliki fitur yang sangat berguna yaitu <a href="https://pages.github.com/">GitHub Pages</a>, yang memungkinkan anda untuk menampilkan website kode langsung di Web.</li> + <li><a href="https://cloud.google.com/appengine/" title="App Engine - Platform as a Service — Google Cloud Platform">Google App Engine</a> merupakan sebuah platform yang powerfull yang memungkinkan anda untuk membangun dan menjalankan aplikasi pada infrastruktur google — apakah anda perlu membangun aplikasi web multi-tier dari awal atau meng-host website statik. Lihat <a href="/en-US/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">Bagaimana cara anda meng-host website anda di Google App Engine?</a> untuk informasi lengkap.</li> + <li><a href="https://www.dropbox.com/">Dropbox</a> merupakan sistem penyimpanan file yang memungkinkan anda menyimpan file di web dan juga memungkinkan kita untuk mengaksesnya di setiap komputer. Semua orang dengan koneksi internet dapat mengakses setiap folder dropbox jika folder tersebut anda buat secara publik. Jika folder tersebut bersi file website, maka akan secara otomatis akan disajikan sebagai halaman web. Lihat <a href="http://www.dropboxwiki.com/tips-and-tricks/host-websites-with-dropbox">Cara Host Websites dengan Dropbox</a> untuk informasi lengkapnya.</li> +</ul> + +<p>Tidak seperti hosting umumnya, alat tersebut dapat digunakan secara gratis, tapi anda hanya mendapatkan fitur terbatas atau yang hanya disediakan.</p> + +<h3 id="Menggunakan_IDE_berbasis_web_seperti_Thimble">Menggunakan IDE berbasis web seperti Thimble</h3> + +<p>Banyak sekali aplikasi web yang <span id="result_box" lang="id"><span>meniru lingkungan pengembangan situs web, memungkinkan anda untuk menulis HTML, CSS, dan JavaScript, kemudian menampilkan hasil kode itu saat diberikan sebagai situs web - semuanya ada dalam satu tab browser.</span> <span>Secara umum alat ini cukup mudah, bagus untuk dipelajari, dan gratis (untuk fitur dasar), dan mereka meng-host halaman yang anda berikan di alamat web yang unik.</span> <span>Namun, fitur dasarnya cukup terbatas, dan aplikasi biasanya tidak menyediakan ruang hosting untuk aset (seperti gambar).</span></span></p> + +<p><span id="result_box" lang="id"><span>Cobalah bermain dengan beberapa contoh ini, dan lihatlah mana yang paling Anda sukai:</span></span></p> + +<ul> + <li><a href="https://jsfiddle.net/">JSFiddle</a></li> + <li><a href="https://thimble.mozilla.org">Thimble</a></li> + <li><a href="http://jsbin.com/">JS Bin</a></li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9471/jsbin-screen.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></p> + +<h2 id="Penerbitan_Melalui_Github_Pages">Penerbitan Melalui Github Pages</h2> + +<p>Sekarang mari kami menuntun anda melalui cara mudah menerbitkan situs anda melalui GitHub Pages.</p> + +<ol> + <li>Pertama, <a href="https://github.com/">daftar akun GitHub</a> dan verifikasi alamat email anda.</li> + <li>Selanjutnya, anda perlu <a href="https://github.com/new">membuat repository</a> untuk menempatkan file anda.</li> + <li>Pada halaman ini, pada kolom <em>Nama Repository</em>, tulis <em>username</em>.github.io, dimana <em>username</em> merupakan username akun github anda. Sebagai contoh, teman kita rmsubekti perlu menuliskan <em>rmsubekti.github.io</em>.<br> + Juga centang <em>Initialize this repository with a README</em> kemudian klik <em>Create repository</em>.<img alt="" src="https://mdn.mozillademos.org/files/9479/github-create-repo.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></li> + <li>Setelah itu, seret konten folder website anda ke repository dan klik <em>Commit changes</em>.<br> + + <div class="note"> + <p><strong>Catatan</strong>: Pastikan folder website anda memiliki file <em>index.html</em>.</p> + </div> + </li> + <li> + <p>Sekarang kunjugi<em> username</em>.github.io dari browser anda untuk melihat website anda di sajikan secara online. Sebagai contoh, untuk username <em>chrisdavidmills</em>, maka kunjugi <a href="http://chrisdavidmills.github.io/">chrisdavidmills.github.io</a>.</p> + + <div class="note"> + <p><strong>Catatan</strong>: Mungkin akan memakan waktu sedikit lama agar website anda dapat disajikan. Jika tidak segera disajikan, anda mungkin perlu menunggu beberapa menit kemudian coba lagi.</p> + </div> + </li> +</ol> + +<p>Pelajari lebih lanjut, kunjungi <a href="https://help.github.com/categories/github-pages-basics/">GitHub Pages Help</a>.</p> + +<h2 id="Bacaan_lebih_lanjut">Bacaan lebih lanjut</h2> + +<ul> + <li><a href="/id/Learn/What_is_a_web_server">Apa itu web server</a></li> + <li><a href="/id/Learn/Understanding_domain_names">Memahamin nama domain</a></li> + <li><a href="/en-US/Learn/How_much_does_it_cost">How much does it cost to do something on the web?</a></li> + <li><a href="https://www.codecademy.com/learn/deploy-a-website">Deploy a Website</a>: A nice tutorial from Codecademy that goes a bit further and shows some additional techniques.</li> + <li><a href="http://alignedleft.com/resources/cheap-web-hosting">Cheap or Free Static Website Hosting</a> by Scott Murray has some useful ideas on available services.</li> +</ul> + +<p>{{PreviousNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works")}}</p> diff --git a/files/id/learn/how_to_contribute/index.html b/files/id/learn/how_to_contribute/index.html new file mode 100644 index 0000000000..0a64757fc1 --- /dev/null +++ b/files/id/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 +--- +<p>{{LearnSidebar}}</p> + +<p><span style="line-height: 1.5;">Jika Anda berada disini, itu mungkin karena Anda tertarik berkontribusi dalam Area Belajar MDN. Itu berita bagus!</span></p> + +<p><span class="seoSummary">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</span>.</p> + +<div class="note"> +<p><strong>Catatan:</strong> 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.</p> +</div> + +<div class="note"> +<p><strong>Catatan:</strong> Kontributor menggunakan <a href="https://trello.com/b/LDggrYSV"> Trello board</a> untuk mengorganisir diri. Jika Anda ingin menggunakannya, hanya dengan membuat akun <a href="https://trello.com/signup">Trello</a> dan ping <a href="/en-US/docs/MDN/Contribute/Drivers_and_curators">Jeremie</a> untuk memberikan Anda akses tulis ke papan.</p> +</div> + +<h2 id="Saya_seorang_pemula">Saya seorang pemula</h2> + +<p>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.</p> + +<p><span id="result_box" lang="id"><span title="Contributing is also a great way to have some fun while learning new stuff.">Kontribusi juga merupakan cara yang bagus untuk bersenang-senang sambil belajar hal-hal baru. </span><span title="If you ever feel lost or have questions, don't hesitate to reach us on our mailing list or IRC channel (see at the bottom of this page for details). + +">Jika Anda pernah merasa kebingungan atau memiliki pertanyaan, jangan ragu untuk menghubungi kami di </span></span><a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">mailing list kami</a><span lang="id"><span title="If you ever feel lost or have questions, don't hesitate to reach us on our mailing list or IRC channel (see at the bottom of this page for details). + +"> atau </span></span><a href="/en-US/docs/MDN/Community#Get_into_IRC">Saluran IRC</a> <span lang="id"><span title="If you ever feel lost or have questions, don't hesitate to reach us on our mailing list or IRC channel (see at the bottom of this page for details). + +"> (lihat di bagian bawah halaman ini untuk rincian).</span><br> + <br> + <span title="Here are some suggested ways you can contribute: + +">Berikut adalah beberapa cara yang disarankan untuk Anda dapat berkontribusi:</span></span></p> + +<dl> + <dt><a href="/en-US/docs/MDN/Contribute/Howto/Tag">Tambahkan tag ke artikel kami</a> (<em>5 menit</em>)</dt> + <dd><span lang="id"><span title="Tagging MDN content is one of the easiest ways to contribute to MDN.">Pemberian tag konten MDN adalah salah satu cara termudah untuk berkontribusi MDN. </span><span title="As many of our features use tags to help present information in context, helping with tagging is a very valuable contribution.">Seperti banyak fitur kami menggunakan tag untuk membantu menyajikan informasi dalam konteks, membantu dengan pemberian tag merupakan kontribusi yang sangat berharga. </span><span title="Take a look at the lists of glossary entries and learning articles without any tags to get started. +">Lihatlah </span></span><a href="/en-US/docs/MDN/Doc_status/Glossary#No_tags">daftar istilah </a><span lang="id"><span title="Take a look at the lists of glossary entries and learning articles without any tags to get started. +">dan </span></span><a href="/en-US/docs/MDN/Doc_status/Learn#No_tags">artikel pembelajaran</a><span lang="id"><span title="Take a look at the lists of glossary entries and learning articles without any tags to get started. +"> tanpa tag untuk memulai.</span></span></dd> + <dt><a href="/en-US/docs/Glossary">Membaca dan meninjau daftar istilah</a> (<em>15 menit</em>)</dt> + <dd><span lang="id"><span title="As a beginner, we need your fresh eyes looking at our content.">Sebagai pemula, kita perlu mata segar Anda untuk melihat konten kami. </span><span title="If you find a glossary entry hard to understand, it means that entry needs to be improved.">Jika Anda menemukan entri glossary yang sulit untuk dipahami, itu berarti bahwa entrinya perlu ditingkatkan. </span><span title="Feel free to make any change you think is necessary.">Jangan ragu untuk membuat perubahan yang Anda anggap perlu. </span><span title="If you do not think you have the necessary skill to edit the entry yourself, at least tell us on our mailing list. +">Jika Anda tidak berpikir Anda memiliki keterampilan yang diperlukan untuk mengedit entri sendiri, setidaknya memberitahu kami di </span></span><a href="/en-US/docs/MDN/Community#Join_our_mailing_lists" style="line-height: 1.5;">mailing list kami</a>.</dd> + <dt><a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Menulis daftar istilah baru</a> (<em>1 jam</em>)</dt> + <dd><span lang="id"><span title="This is the most effective way to learn something new.">Ini adalah cara yang paling efektif untuk belajar sesuatu yang baru. </span><span title="Pick a concept you want to understand, and as you learn about it, write a glossary entry about it.">Pilih sebuah konsep yang ingin Anda pahami, dan saat Anda belajar tentang hal itu, tulislah daftar istilah tentang hal itu. </span><span title='Explaining something to others is a great way to "fix" the knowledge into your brain, and to help you make sense of things yourself, all while helping other people.'>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. </span><span title="Everybody wins! +">Setiap orang menang!</span></span></dd> + <dt><a href="/en-US/Learn/Index">Membaca dan meninjau artikel pembelajaran </a>(<em>2 jam</em>)</dt> + <dd><span lang="id"><span title="This is very much like reviewing glossary entries (see above);">Hal ini sangat mirip meninjau daftar istilah (lihat di atas); </span><span title="it just takes more time, since these articles are typically quite a bit longer.">itu hanya membutuhkan waktu lebih lama, karena artikel ini biasanya sedikit lebih lama.</span></span></dd> +</dl> + +<h2 id="Saya_seorang_pengembang_web">Saya seorang pengembang web</h2> + +<p><span id="result_box" lang="id"><span title="Fantastic!">Fantastis! </span><span title="Your technical skills are just what we need to be sure we provide technically accurate content for beginners.">Keterampilan teknis Anda adalah apa yang kami butuhkan untuk memastikan kami menyediakan konten teknis yang akurat untuk pemula. </span><span title="As this specific part of MDN is dedicated to learning the Web, be sure your explanations are as simple as possible, without being so simple that they're not useful.">Karena ini adalah bagian tertentu dari MDN didedikasikan untuk belajar Web, pastikan penjelasan Anda sesederhana mungkin, tanpa begitu sederhana itu tidak akan berguna. </span><span title="It's more important to be understandable than to be overly precise. + +">Ini lebih penting untuk dimengerti daripada menjadi terlalu tepat.</span></span></p> + +<dl> + <dt><a href="/en-US/docs/Glossary">Membaca dan meninjau daftar istilah </a>(<em>15 menit</em>)</dt> + <dd><span id="result_box" lang="id"><span title="As a web developer, we need you to make sure our content is technically accurate without being too pedantic.">Sebagai pengembang web, kita perlu Anda untuk memastikan konten kami secara teknis akurat tanpa terlalu bertele-tele. </span><span title="Feel free to make any change you think is necessary.">Jangan ragu untuk membuat perubahan yang Anda anggap perlu. </span><span title="If you want to discuss the content before editing, ping us on our mailing list or IRC channel. +">Jika Anda ingin mendiskusikan isi sebelum mengedit, ping kami di </span></span><a href="/en-US/docs/MDN/Community#Join_our_mailing_lists" style="line-height: 1.5;">mailing list</a> kami atau <a href="/en-US/docs/MDN/Community#Get_into_IRC">Saluran IRC</a>.</dd> + <dt><a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Menulis daftar istilah baru</a> (<em>1 jam</em>)</dt> + <dd><span class="message_content">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 </span><a href="/en-US/docs/Glossary#Contribute">banyak istilah yang belum terdefinisikan</a><span class="message_content">, yang membutuhkan perhatian Anda. Pilih salah satu dan kerjakan</span>.</dd> + <dt><a href="/en-US/Learn/Index">Membaca dan meninjau artikel pembelajaran</a> (<em>2 jam</em>)</dt> + <dd><span id="result_box" lang="id"><span title="This is the same deal as with reviewing glossary entry (see above);">Ini adalah hal yang sama seperti meninjau entri glossary (lihat di atas);</span><span title="it just takes a bit more time as those articles are quite a bit longer. +"> hanya saja membutuhkan sedikit lebih banyak waktu karena artikelnya sedikit panjang.</span></span></dd> + <dt><a href="/en-US/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">Menulis artikel pembelajaran baru </a>(<em>4 jam</em>)</dt> + <dd><span id="result_box" lang="id"><span title="MDN is lacking simple straightforward articles about using web technologies (HTML, CSS, JavaScript, etc).">MDN kurang artikel sederhana tentang menggunakan teknologi web </span></span>(<a href="/en-US/docs/Learn/CSS">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, d<span lang="id"><span title="MDN is lacking simple straightforward articles about using web technologies (HTML, CSS, JavaScript, etc).">ll). </span><span title="We also have old content on MDN that deserves to be reviewed and reshaped.">Kami juga memiliki konten lama di MDN yang layak untuk dikaji dan dibentuk kembali. </span><span title="Push your skills to the limit to make web technologies usable even by beginners. +">Dorong kemampuan Anda sampai batas untuk membuat teknologi web yang dapat digunakan bahkan oleh pemula</span></span>.</dd> + <dt><a href="/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">Buat latihan, contoh kode atau alat pembelajaran aktif</a> (<em>? hours</em>)</dt> + <dd><span id="result_box" lang="id"><span title='All our learning articles require what we call "active learning" materials, because people learn best by doing something themselves.'>Semua artikel pembelajaran kita membutuhkan apa yang kita sebut materi "belajar aktif", karena orang belajar lebih baik dengan melakukanya sendiri. Materi</span><span title="Such materials are exercises or interactive content that help a user to apply and manipulate the concepts detailed in an article."> tersebut adalah latihan atau konten interaktif yang membantu pengguna untuk menerapkan dan memanipulasi ricnian konsep dalam sebuah artikel. </span><span title="There are many possible ways to make active learning content, from creating code samples with JSFiddle or similar, to building fully hackable interactive content with Thimble.">Ada banyak cara yang mungkin untuk membuat konten pembelajaran yang aktif, dari menciptakan contoh kode dengan </span></span><a href="http://jsfiddle.net" rel="external">JSFiddle</a><span lang="id"><span title="There are many possible ways to make active learning content, from creating code samples with JSFiddle or similar, to building fully hackable interactive content with Thimble."> atau serupa, untuk membangun konten interaktif yang sepenuhnya dapat diubah dengan </span></span><a href="https://thimble.webmaker.org/" rel="external">Thimble</a><span lang="id"><span title="There are many possible ways to make active learning content, from creating code samples with JSFiddle or similar, to building fully hackable interactive content with Thimble.">. </span><span title="Unleash your creativity!">Lepaskan kreativitas Anda</span></span>!</dd> +</dl> + +<h2 id="Saya_seorang_Pengajar">Saya seorang Pengajar</h2> + +<p><span id="result_box" lang="id"><span title="MDN has a long history of technical excellence, but we lack a good sense of the best way to teach concepts to newcomers.">MDN memiliki sejarah panjang keunggulan teknis, tapi kami tidak memiliki rasa yang baik dari cara terbaik untuk mengajarkan konsep untuk pendatang baru. </span><span title="This is where we need you, as a teacher or educator.">Di sinilah kami perlu Anda, sebagai pengajar atau pendidik. </span><span title="You can help us ensure that our materials provide a good, sensible educational track for our readers. + +">Anda dapat membantu kami memastikan bahwa materi yang kami berikan baik, jalur pendidikan yang masuk akal bagi pembaca kami.</span></span></p> + +<dl> + <dt><a href="/en-US/docs/Glossary">Membaca dan meninjau daftar istilah </a>(<em>15 menit</em>)</dt> + <dd><span id="result_box" lang="id"><span title="Check out a glossary entry and feel free to make any changes you think are necessary.">Periksa daftar istilah dan jangan takut untuk membuat perubahan yang menurut Anda perlu. </span><span title="If you want to discuss the content before editing, ping us on our mailing list or IRC channel. +">Jika Anda ingin mendiskusikan konten sebelum mengedit, ping kami di </span></span><a href="/en-US/docs/MDN/Community#Join_our_mailing_lists" style="line-height: 1.5;">mailing list</a> atau<a href="/en-US/docs/MDN/Community#Get_into_IRC"> Saluran IRC </a>kami.</dd> + <dt><a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Menulis daftar istilah baru</a> (<em>1 jam</em>)</dt> + <dd><span id="result_box" lang="id"><span title="Clear, simple definitions of terms and basic overviews of concepts in the glossary are critical in meeting beginners' needs.">Jelas, definisi sederhana dari istilah dan ikhtisar dasar konsep dalam daftar istilah penting dalam memenuhi kebutuhan pemula '. </span><span title="Your experience as an educator can help create excellent glossary entries;">Pengalaman Anda sebagai seorang pendidik dapat membantu membuat daftar istilah yang sangat baik; </span><span title="we have many undefined terms which need your attention.">kami memiliki <a href="/en-US/docs/Glossary#Contribute">banyak istilah yang belum terdefinisikan</a> yang perlu Anda perhatikan. </span><span title="Pick one and go for it. +">Pilih satu dan kerjakan.</span></span></dd> + <dt><a href="/en-US/docs/tag/needsSchema">Tambahkan ilustrasi dan/ atau skema artikel</a> (<em>1 jam</em>)</dt> + <dd><span id="result_box" lang="id"><span title="As you might know, illustrations are an invaluable part of any learning content.">Seperti yang anda ketahui, ilustrasi merupakan bagian penting dari isi pembelajaran apapun. </span><span title="This is something we often lack on MDN and your skills can make a difference in that area.">Ini adalah sesuatu yang kita sering kekurangan di MDN dan keterampilan Anda dapat membuat perbedaan di area itu. </span><span title="Check out the articles that lack illustrative content and pick one you'd like to create graphics for. +">Kunjungi <a href="/en-US/docs/tag/needsSchema">artikel yang kekurangan konten ilustrasi</a> dan pilih salah satu yang Anda inginkan untuk membuat ilustrasi.</span></span></dd> + <dt><a href="/en-US/Learn/Index">Membaca dan meninjau artikel pembelajaran</a> (<em>2 jam</em>)</dt> + <dd><span id="result_box" lang="id"><span title="This is similar to reviewing glossary entries (see above), but it requires more time since the articles are typically quite a bit longer. +">Hal ini mirip dengan meninjau daftar istilah (lihat di atas), tetapi membutuhkan lebih banyak waktu karena artikel biasanya sedikit lebih panjang.</span></span></dd> + <dt><a href="/en-US/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">Menulis artikel pembelajaran baru</a> (<em>4 jam</em>)</dt> + <dd><span id="result_box" lang="id"><span title="We need simple, straightforward articles about the Web ecosystem and other functional topics around it.">Kita perlu artikel yang mudah tentang ekosistem Web dan topik fungsional lain di sekitarnya. </span><span title="Since these learning articles need to be educational rather than trying to literally cover everything there is to know, your experience in knowing what to cover and how will be a great asset. +">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.</span></span></dd> + <dt><a href="/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">Buat latihan, kuis atau alat pembelajaran interaktif</a> (<em>? jam</em>)</dt> + <dd><span id="result_box" lang="id"><span title='All our learning articles require what we call "active learning" materials.'>Semua artikel pembelajaran kita membutuhkan apa yang kita sebut materi "belajar aktif". Materi</span><span title="Such materials are exercises or interactive content which help a user learn to use and expand upon the concepts detailed in an article."> tersebut adalah latihan atau konten interaktif yang membantu pengguna belajar untuk menggunakan dan memanipulasi konsep yang dirincikan dalam sebuah artikel. </span><span title="There are lots of things you can do here, from creating quizzes to building fully hackable interactive content with Thimble.">Ada banyak hal yang dapat Anda lakukan di sini, dari membuat kuis untuk membangun konten interaktif yang sepenuhnya dapat diubah dengan <a href="https://thimble.webmaker.org/">Thimble</a>. </span><span title="Unleash your creativity! +">Lepaskan kreativitas Anda!</span></span></dd> + <dt><a href="/en-US/docs/MDN/Contribute/Howto/Create_learning_pathways">Buat jalur studi</a> (<em>? jam</em>)</dt> + <dd><span id="result_box" lang="id"><span title="In order to provide progressive and comprehensible tutorials, we need to shape ou content into pathways.">Dalam rangka memberikan tutorial yang progresif dan mudah dipahami, kita perlu membentuk konten jalur studi. </span><span title="It's a way to gather existing content and figure what are the missing learning article to write.">Ini adalah cara untuk mengumpulkan konten yang ada dan mencari apa kekurangan artikel pembelajaran untuk menuliskannya.</span></span></dd> +</dl> diff --git a/files/id/learn/html/howto/index.html b/files/id/learn/html/howto/index.html new file mode 100644 index 0000000000..ef45d155ad --- /dev/null +++ b/files/id/learn/html/howto/index.html @@ -0,0 +1,142 @@ +--- +title: Menggunakan HTML dalam masalah umum +slug: Learn/HTML/Howto +translation_of: Learn/HTML/Howto +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Daftar berikut menunjukkan solusi untuk masalah umum sehari-hari yang harus kamu selesaikan dengan menggunakan HTML.</p> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Struktur_Dasar">Struktur Dasar</h3> + +<p>Penerapan HTML yang paling dasar adalah struktur dokumen. Jika kamu baru mengenal HTML, kamu harus mulai dengan ini.</p> + +<ul> + <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document">Cara membuat dokumen HTML dasar</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Divide_a_webpage_into_logical_sections">Cara membagi halaman web menjadi beberapa bagian yang logis</a></li> + <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#The_basics_headings_and_paragraphs">Cara mengatur struktur judul dan paragraf yang tepat</a></li> +</ul> + +<h3 id="Dasar_semantik_tingkat_dasar">Dasar semantik tingkat dasar</h3> + +<p>HTML mengkhususkan dalam memberikan informasi semantik untuk dokumen, jadi HTML menjawab banyak pertanyaan yang mungkin kamu miliki tentang bagaimana cara menyampaikan pesan kamu dengan baik di dokumen kamu.</p> + +<ul> + <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists">Cara membuat list item dengan HTML</a></li> + <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">Cara menekankan (stressed) atau menekankan (empashed) konten</a></li> + <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">Cara menambahkan text important</a></li> + <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Representing_computer_code">Cara menampilkan kode komputer dengan HTML</a></li> + <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#Annotating_images_with_figures_and_figure_captions">Cara membuat anotasi gambar dan grafik</a></li> + <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations">Bagaimana menandai singkatan dan membuatnya bisa dimengerti</a></li> + <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Quotations">Bagaimana menambahkan quote dan cite ke halaman web</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Define_terms_with_HTML">How to define terms with HTML</a></li> +</ul> +</div> + +<div class="column-half"> +<h3 id="Hyperlinks">Hyperlinks</h3> + +<p>Salah satu alasan utama HTML adalah memudahkan navigasi {{Glossary("hyperlink", "hyperlinks")}}, which can be used in many different ways:</p> + +<ul> + <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Bagaimana cara membuat hyperlink</a></li> + <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Active_learning_creating_a_navigation_menu">Cara membuat daftar isi dengan HTML</a></li> +</ul> + +<h3 id="Gambar_multimedia">Gambar & multimedia</h3> + +<ul> + <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#How_do_we_put_an_image_on_a_webpage">Bagaimana cara menambahkan gambar ke halaman web</a></li> + <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Bagaimana cara menambahkan video ke halaman web</a></li> +</ul> + +<h3 id="Scripting_styling">Scripting & styling</h3> + +<p>HTML hanya mengatur struktur dokumen. Untuk mengatasi masalah tampilan, gunakan{{glossary("CSS")}}, atau gunakan scripting atau javascript untuk membuat halaman Anda interaktif.</p> + +<ul> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML">Cara menggunakan CSS dalam halaman web</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Use_JavaScript_within_a_webpage">Cara menggunakan JavaScript dalam halaman web</a></li> +</ul> + +<h3 id="Embedded_content">Embedded content</h3> + +<ul> + <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">Cara mengembed halaman web di dalam halaman web lain</a></li> + <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies#The_%3Cembed%3E_and_%3Cobject%3E_elements">Bagaimana cara menambahkan konten Flash dalam halaman web</a></li> +</ul> +</div> +</div> + +<h2 id="Masalah_yang_tidak_umum_atau_tingkat_lanjut">Masalah yang tidak umum atau tingkat lanjut</h2> + +<p>Selain dasar-dasarnya, HTML sangat kaya dan menawarkan fitur-fitur canggih untuk memecahkan masalah yang kompleks. Artikel ini membantu kamu menangani kasus penggunaan yang kurang umum yang mungkin kamu hadapi:</p> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Forms_Formulir">Forms (Formulir)</h3> + +<p>Forms adalah struktur HTML kompleks yang dibuat untuk mengirim data dari halaman web ke server web. Kami mendorong kamu untuk membaca panduan lengkap kami. Di sinilah kamu harus memulai:</p> + +<ul> + <li><a href="/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form">Cara membuat formulir Web sederhana</a></li> + <li><a href="/en-US/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form">Bagaimana menyusun formulir Web</a></li> +</ul> + +<h3 id="Tabular_information_Informasi_Tabel">Tabular information ( Informasi Tabel)</h3> + +<p>Beberapa informasi, yang disebut data tabular, perlu diatur ke dalam tabel dengan kolom dan baris. Itu salah satu struktur HTML paling kompleks, dan menguasainya tidaklah mudah:</p> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Tables/Basics">Cara membuat tabel data</a></li> + <li><a href="/en-US/docs/Learn/HTML/Tables/Advanced">Bagaimana membuat tabel HTML dapat diakses</a></li> +</ul> + +<h3 id="Data_representation_Representasi_data">Data representation (Representasi data)</h3> + +<ul> + <li>Bagaimana merepresentasikan nilai numerik dan kode dengan HTML — Lihat <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Superscript_and_subscript">Superscript and Subscript</a>, dan <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Representing_computer_code">Representasi kode komputer</a>.</li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Cara menggunakan atribut data</a></li> +</ul> +</div> + +<div class="column-half"> +<h3 id="Sematik_text_tingkat_lanjut">Sematik text tingkat lanjut</h3> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Element/br">Cara membuat garis baru</a></li> + <li>How to mark changes (added and removed text) — see the {{htmlelement("ins")}} and {{htmlelement("del")}} elements.</li> +</ul> + +<h3 id="Advanced_images_multimedia">Advanced images & multimedia</h3> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Bagaimana cara menambahkan gambar responsif ke halaman web</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Bagaimana cara menambahkan gambar vektor ke halaman web</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">Bagaimana cara menambahkan peta di atas gambar</a></li> +</ul> + +<h3 id="Internationalization">Internationalization</h3> + +<p>HTML tidak monolingual. Alat ini menyediakan sesuatu untuk menangani masalah internasionalisasi umum.</p> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#Setting_the_primary_language_of_the_document">Bagaimana cara menambahkan banyak bahasa ke dalam satu halaman web</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Marking_up_times_and_dates">Bagaimana menampilkan waktu dan tanggal dengan HTML</a></li> +</ul> + +<h3 id="Performa">Performa</h3> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages">Cara membuat halaman HTML yang dimuat dengan cepat</a></li> +</ul> +</div> +</div> + +<p><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span> </p> + +<div id="gtx-trans" style="position: absolute; left: 50px; top: 3011.2px;"> +<div class="gtx-trans-icon"></div> +</div> diff --git a/files/id/learn/html/index.html b/files/id/learn/html/index.html new file mode 100644 index 0000000000..8f5726db10 --- /dev/null +++ b/files/id/learn/html/index.html @@ -0,0 +1,58 @@ +--- +title: HTML +slug: Learn/HTML +tags: + - HTML + - Panduan + - Pemula + - Pengenalan + - Topik + - belajar +translation_of: Learn/HTML +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Untuk membangun websites, Anda harus mengetahui tentang {{Glossary('HTML')}} — teknologi dasar yang digunakan untuk menentukan struktur halaman web,yaitu HTML. HTML adalah kerangka dari suatu halaman web. Anda dapat menggunakan HTML untuk menentukan konten mana yang termasuk dalam paragraf, judul, link, gambar, input form, multimedia player dan lain-lain.</p> + +<p class="summary"></p> + +<h2 id="Jalur_belajar">Jalur belajar</h2> + +<p>Idealnya, Anda harus memulai perjalanan belajar dengan mempelajari HTML. Memulai dengan membaca <a href="/en-US/docs/Web/Guide/HTML/Introduction">Introduction to HTML</a>. Anda kemudian dapat melanjutkan untuk belajar tentang topik yang lebih maju seperti:</p> + +<ul> + <li><a href="/en-US/docs/Learn/CSS">CSS</a>, dan bagaimana menggunakan css untuk menghias HTML (Contohnya mengubah ukuran teks dan font yang digunakan, menambahkan batas dan menaruh bayangan, tatak letak halaman Anda dengan beberapa kolom, menambahkan animasi dan efek visual lainnya.)</li> + <li><a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, dan bagaimana menggunakannya untuk menambahkan fungsi dinamis pada halaman web (Contohnya mencari lokasi Anda dan menandakannya di peta, membuat elemen UI muncul/hilang saat Anda mengganti tombol, menyimpan data pengguna secara lokal di komputer mereka, dan banyak-banyak lagi.)</li> +</ul> + +<p>Sebelum topik dimulai, Anda harus mempunyai paling sedikit akrab menggunakan komputer, dan menggunakan web secara pasif (yaitu hanya melihat, yang mengkonsumsi konten). Anda harus memiliki lingkungan kerja dasar yang diatur seperti yang terperinci dalam <a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a>, dan memahami bagaimana membuat dan mengelola file, seperti yang dijelaskan dalam <a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a> — keduanya merupakan bagian dari modul <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a>.</p> + +<p>Dianjurkan agar Anda bekerja melalui <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web </a>sebelum mencoba topik ini, namun hal itu tidak mutlak diperlukan; sebgaian besar dari apa yang tercakup dalam artikel <a href="/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a> juga dibahas dalam modul <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>, meskipun dalam detail lebih banyak.</p> + +<h2 id="Modul">Modul</h2> + +<p>Topik ini berisi modul berikut, dalam urutan yang disarankan untuk mengerjakannya. Anda pasti harus mulai dengan yang pertama.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Pengenalan tentang HTML</a></dt> + <dd>Modul ini mengatur panggung, membuat Anda terbiasa dengan konsep dan sintaks penting, melihat penerapan HTML ke teks, cara membuat hyperlink, dan cara menggunakan HTML untuk menyusun halaman web.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia and embedding</a></dt> + <dd>Modul ini membahas bagaimana menggunakan HTML untuk menyertakan multimedia di halaman web Anda, termasuk berbagai cara agar gambar dapat disertakan, dan bagaimana cara menyematkan video, audio, dan bahkan seluruh halaman Web lainnya.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Tables">HTML Tables</a></dt> + <dd>Mewakili data tabular pada halaman web dengan cara yang dapat dimengerti, {{glossary("Accessibility", "accessible")}} bisa menjadi tantangan tersendiri. Modul ini mencakup markup tabel dasar, beserta fitur yang lebih kompleks seperti menerapkan caption dan ringkasan.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Forms">HTML Forms</a></dt> + <dd>Forms adalah bagian yang sangat penting dari Web — ini memberikan banyak fungsi yang Anda butuhkan untuk berinteraksi dengan situs web, misalnya. Mendaftar dan masuk, mengirim umpan balik, membeli produk, dan banyak lagi. Modul ini akan membantu Anda memulai dengan membuat bagian-bagian client-side.</dd> +</dl> + +<h2 id="Memecahkan_masalah_HTML_biasa">Memecahkan masalah HTML biasa</h2> + +<p><a href="/en-US/docs/Learn/HTML/Howto">Gunakan HTML untuk memecahkan masalah umum</a> menyediakan tautan ke bagian konten yang menjelaskan cara menggunakan HTML untuk memecahkan masalah yang sangat umum saat membuat laman web: menangani judul, menambahkan gambar atau video, menekankan konten, membuat formulir dasar, dll.</p> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<div class="document-head" id="wiki-document-head"> +<dl> + <dt><a href="/en-US/docs/Web/HTML">HTML (HyperText Markup Language)</a> on MDN</dt> + <dd>Petunjuk utama masuk untuk HTML dokumentasi di MDN, termasuk elemen rinci dan referensi atribut - jika Anda ingin mengetahui atribut elemen atau nilai apa yang dimiliki atribut, misalnya, ini adalah tempat yang tepat untuk memulai.</dd> +</dl> +</div> 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 new file mode 100644 index 0000000000..acddef0b53 --- /dev/null +++ b/files/id/learn/html/multimedia_dan_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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</div> + +<div class="summary"> +<p>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.</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <td>Anda harus tahu <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">basics of HTML</a> dan bagaimana caranya <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">insert an image into your document</a>.</td> + </tr> + <tr> + <th scope="row">Objective:</th> + <td>Pelajari cara menyematkan gambar SVG (vektor) ke halaman web.</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Note</strong>: Artikel ini tidak bermaksud mengajarkan Anda SVG; hanya apa itu, dan bagaimana menambahkannya ke halaman web.</p> +</div> + +<h2 id="Apa_itu_grafik_vektor">Apa itu grafik vektor?</h2> + +<p>Di web, Anda akan bekerja dengan dua jenis gambar — <strong>gambar raster</strong>, dan <strong>gambar vektor</strong>:</p> + +<ul> + <li><strong>Gambar raster</strong> didefinisikan menggunakan kisi-kisi piksel - file gambar raster berisi informasi yang menunjukkan dengan tepat di mana setiap piksel ditempatkan, dan persis apa warna yang seharusnya. Popular web raster formats include Bitmap (<code>.bmp</code>), PNG (<code>.png</code>), JPEG (<code>.jpg</code>), and GIF (<code>.gif</code>.)</li> + <li><strong>Gambar vektor</strong> didefinisikan menggunakan algoritme - file gambar vektor berisi definisi bentuk dan jalur yang dapat digunakan komputer untuk mengetahui seperti apa gambar itu ketika ditampilkan di layar. The {{glossary("SVG")}} format memungkinkan kita membuat grafik vektor yang kuat untuk digunakan di Web.</li> +</ul> + +<p>Untuk memberi Anda gambaran tentang perbedaan antara keduanya, mari kita lihat sebuah contoh. Anda dapat menemukan contoh ini langsung di repo Github kami sebagai <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/adding-vector-graphics-to-the-web/vector-versus-raster.html">vector-versus-raster.html</a> — 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.</p> + +<p>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.</p> + +<p><img alt="Two star images" src="https://mdn.mozillademos.org/files/12866/raster-vector-default-size.png" style="display: block; height: 112px; margin: 0px auto; width: 223px;"></p> + +<p><img alt="Two star images zoomed in, one crisp and the other blurry" src="https://mdn.mozillademos.org/files/12868/raster-vector-zoomed.png" style="display: block; height: 328px; margin: 0px auto; width: 677px;"></p> + +<div class="note"> +<p><strong>Note</strong>: 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 <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/adding-vector-graphics-to-the-web/vector-versus-raster.html">vector-versus-raster.html</a> demo for a real example!</p> +</div> + +<p>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.</p> + +<h2 id="What_is_SVG">What is SVG?</h2> + +<p><a href="/en-US/docs/Web/SVG">SVG</a> 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.)</p> + +<p>Sebagai contoh sederhana, kode berikut ini membuat lingkaran dan persegi panjang:</p> + +<pre class="brush: html"><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></pre> + +<p>This creates the following output:</p> + +<p>{{ EmbedLiveSample('What_is_SVG', 300, 200, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>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 <a href="https://inkscape.org/en/">Inkscape</a> or <a href="https://en.wikipedia.org/wiki/Adobe_Illustrator">Illustrator</a>. Paket-paket ini memungkinkan Anda untuk membuat berbagai ilustrasi menggunakan berbagai alat grafis, dan membuat perkiraan foto (misalnya fitur Trace Bitmap dari Inkscape.)</p> + +<p>SVG memiliki beberapa keuntungan tambahan selain yang dijelaskan sejauh ini:</p> + +<ul> + <li>Teks dalam gambar vektor tetap dapat diakses (yang juga bermanfaat bagi Anda {{glossary("SEO")}}).</li> + <li>SVG cocok untuk styling / scripting, karena setiap komponen gambar adalah elemen yang dapat ditata melalui CSS atau dituliskan melalui JavaScript.</li> +</ul> + +<p>Jadi mengapa ada orang yang mau menggunakan grafik raster di atas SVG? Nah, SVG memang memiliki beberapa kelemahan:</p> + +<ul> + <li>SVG bisa menjadi rumit dengan sangat cepat, artinya ukuran file bisa bertambah; SVG yang kompleks juga dapat mengambil waktu pemrosesan yang signifikan di browser.</li> + <li>SVG bisa lebih sulit untuk dibuat daripada gambar raster, tergantung pada jenis gambar apa yang Anda coba buat.</li> + <li>SVG tidak didukung di peramban yang lebih lama, jadi mungkin tidak cocok jika Anda perlu mendukung versi Internet Explorer yang lebih lama dengan situs web Anda (SVG mulai didukung pada IE9.)</li> +</ul> + +<p>Grafik raster bisa dibilang lebih baik untuk gambar presisi kompleks seperti foto, karena alasan yang dijelaskan di atas.</p> + +<div class="note"> +<p><strong>Note</strong>: Di Inkscape, simpan file Anda sebagai Plain SVG untuk menghemat ruang. Juga, silakan lihat ini <a href="http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Inkscape.html">article describing how to prepare SVGs for the Web</a>.</p> +</div> + +<h2 id="Adding_SVG_to_your_pages">Adding SVG to your pages</h2> + +<p>In this section we'll go through the different ways in which you can add SVG vector graphics to your web pages.</p> + +<h3 id="The_quick_way_htmlelementimg">The quick way: {{htmlelement("img")}}</h3> + +<p>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 <code>height</code> or a <code>width</code> attribute (or both if your SVG has no inherent aspect ratio). If you have not already done so, please read <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a>.</p> + +<pre class="brush: html"><img + src="equilateral.svg" + alt="triangle with all three sides equal" + height="87" + width="100" /></pre> + +<h4 id="Pros">Pros</h4> + +<ul> + <li>Sintaks gambar cepat dan dikenal dengan teks bawaan yang tersedia di <code>alt</code> attribute.</li> + <li>You can make the image into a hyperlink easily by nesting the <code><img></code> inside an {{htmlelement("a")}} element.</li> + <li>File SVG dapat di-cache oleh browser, menghasilkan waktu pemuatan yang lebih cepat untuk setiap halaman yang menggunakan gambar yang dimuat di masa depan.</li> +</ul> + +<h4 id="Cons">Cons</h4> + +<ul> + <li>You cannot manipulate the image with JavaScript.</li> + <li>If you want to control the SVG content with CSS, you must include inline CSS styles in your SVG code. (External stylesheets invoked from the SVG file take no effect.)</li> + <li>You cannot restyle the image with CSS pseudoclasses (like <code>:focus</code>).</li> +</ul> + +<h3 id="Troubleshooting_and_cross-browser_support">Troubleshooting and cross-browser support</h3> + +<p>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 <code>src</code> 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:</p> + +<pre class="brush: html"><img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg"></pre> + +<p>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:</p> + +<pre class="brush: css"><code>background: url("fallback.png") no-repeat center;</code> +<code>background-image: url("image.svg"); +background-size: contain;</code></pre> + +<p>Like the <code><img></code> 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.</p> + +<p>Jika SVG Anda tidak muncul sama sekali, itu mungkin karena server Anda tidak diatur dengan benar. Jika itu masalahnya, ini <a href="/en-US/docs/Web/SVG/Tutorial/Getting_Started#A_Word_on_Webservers">article will point you in the right direction</a>.</p> + +<h3 id="How_to_include_SVG_code_inside_your_HTML">How to include SVG code inside your HTML</h3> + +<p>Anda juga dapat membuka file SVG dalam editor teks, menyalin kode SVG, dan menempelkannya ke dokumen HTML Anda — this is sometimes called putting your <strong>SVG inline</strong>, or <strong>inlining SVG</strong>. Pastikan cuplikan kode SVG Anda dimulai dan diakhiri dengan <code><a href="/en-US/docs/Web/SVG/Element/svg"><svg></svg></a></code> tags (don't include anything outside those.) Berikut adalah contoh yang sangat sederhana dari apa yang mungkin Anda tempel ke dalam dokumen Anda:</p> + +<pre class="brush: html"><svg width="300" height="200"> + <rect width="100%" height="100%" fill="green" /> +</svg> +</pre> + +<h4 id="Pros_2">Pros</h4> + +<ul> + <li>Menempatkan inline SVG Anda menghemat permintaan HTTP, dan karenanya dapat mengurangi sedikit waktu pemuatan Anda.</li> + <li>You can assign <code>class</code>es and <code>id</code>s to SVG elements and style them with CSS, either within the SVG or wherever you put the CSS style rules for your HTML document. In fact, you can use any <a href="/en-US/docs/Web/SVG/Attribute#Presentation_attributes">SVG presentation attribute </a>as a CSS property.</li> + <li>Inlining SVG adalah satu-satunya pendekatan yang memungkinkan Anda menggunakan interaksi CSS (like <code>:focus</code>) and CSS animations on your SVG image (even in your regular stylesheet.)</li> + <li>Anda dapat membuat markup SVG menjadi hyperlink dengan membungkusnya dengan {{htmlelement("a")}} element.</li> +</ul> + +<h4 id="Cons_2">Cons</h4> + +<ul> + <li>Metode ini hanya cocok jika Anda menggunakan SVG hanya di satu tempat. Duplikasi membuat pemeliharaan intensif sumber daya.</li> + <li>Kode SVG tambahan meningkatkan ukuran file HTML Anda.</li> + <li>Browser tidak dapat men-cache inline SVG karena akan men-cache aset gambar biasa, sehingga halaman yang menyertakan gambar tidak akan memuat lebih cepat setelah halaman pertama berisi gambar dimuat.</li> + <li>You may include fallback in a {{svgelement("foreignObject")}} element, tetapi browser yang mendukung SVG masih mengunduh gambar yang mundur. Anda perlu mempertimbangkan apakah overhead tambahan benar-benar berharga, hanya untuk mendukung browser yang usang.</li> +</ul> + +<ul> +</ul> + +<h3 id="How_to_embed_an_SVG_with_an_htmlelementiframe">How to embed an SVG with an {{htmlelement("iframe")}}</h3> + +<p>Anda dapat membuka gambar SVG di browser Anda seperti halnya halaman web. Jadi menanamkan dokumen SVG dengan <code><iframe></code> is done just like we studied in <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From <object> to <iframe> — other embedding technologies</a>.</p> + +<p>Here's a quick review:</p> + +<pre class="brush: html"><iframe src="triangle.svg" width="500" height="500" sandbox> + <img src="triangle.png" alt="Triangle with three unequal sides" /> +</iframe></pre> + +<p>Ini jelas bukan metode terbaik untuk memilih:</p> + +<h4 id="Cons_3">Cons</h4> + +<ul> + <li><code>iframe</code>s do have a fallback mechanism, as you can see, but browsers only display the fallback if they lack support for <code>iframe</code>s altogether.</li> + <li>Selain itu, kecuali SVG dan halaman web Anda saat ini memiliki yang sama {{glossary('origin')}}, Anda tidak dapat menggunakan JavaScript di halaman web utama Anda untuk memanipulasi SVG.</li> +</ul> + +<h2 id="Active_Learning_Playing_with_SVG">Active Learning: Playing with SVG</h2> + +<p>Di bagian pembelajaran aktif ini kami ingin Anda bersenang-senang bermain SVG untuk bersenang-senang. Di bagian <em>Input</em> di bawah ini Anda akan melihat bahwa kami telah menyediakan beberapa sampel untuk Anda mulai. Anda juga dapat pergi ke <a href="/en-US/docs/Web/SVG/Element">SVG Element Reference</a>, 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.</p> + +<p>If you get stuck and can't get your code working, you can always reset it using the <em>Reset</em> button.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="width: 95%;min-height: 200px;"> + <svg width="100%" height="100%"> + <rect width="100%" height="100%" fill="red" /> + <circle cx="100%" cy="100%" r="150" fill="blue" stroke="black" /> + <polygon points="120,0 240,225 0,225" fill="green"/> + <text x="50" y="100" font-family="Verdana" font-size="55" + fill="white" stroke="black" stroke-width="2"> + Hello! + </text> + </svg> +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution" disabled> +</div></pre> + +<pre class="brush: css">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js">const textarea = document.getElementById('code'); +const reset = document.getElementById('reset'); +const solution = document.getElementById('solution'); +const output = document.querySelector('.output'); +let code = textarea.value; +let userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +const htmlSolution = ''; +let solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + const scrollPos = textarea.scrollTop; + const caretPos = textarea.selectionStart; + const front = (textarea.value).substring(0, caretPos); + const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 500, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="Summary">Summary</h2> + +<p>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.</p> + +<p>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.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/SVG/Tutorial/Getting_Started">SVG tutorial</a> on MDN</li> + <li><a href="http://thenewcode.com/744/Making-SVG-Responsive">Quick tips for responsive SVGs</a></li> + <li><a href="https://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/">Sara Soueidan's tutorial on responsive SVG images</a></li> + <li><a href="https://www.w3.org/TR/SVG-access/">Accessibility benefits of SVG</a></li> + <li><a href="https://css-tricks.com/scale-svg/">How to scale SVGs </a>(it's not as simple as raster graphics!)</li> +</ul> + +<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From <object> to <iframe> — other embedding technologies</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the Web</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></li> +</ul> diff --git a/files/id/learn/html/multimedia_dan_embedding/index.html b/files/id/learn/html/multimedia_dan_embedding/index.html new file mode 100644 index 0000000000..fe111da30c --- /dev/null +++ b/files/id/learn/html/multimedia_dan_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 +--- +<p>{{LearnSidebar}}</p> + +<p class="summary">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.</p> + +<h2 id="Persyaratan">Persyaratan</h2> + +<p>Sebelum memulai modul ini, kamu harus punya pengetahuan mendasar tentang HTML dasar, seperti dicover sebelumnya dalam <a href="https://developer.mozilla.org/id/docs/Learn/HTML/Pengenalan_HTML">Pengenalan HTML</a>. Kalau kamu belum bekerja melalui modul ini (atau sesuatu yang serupa), kerja dulu di situ, lalu kembali lagi!</p> + +<div class="note"> +<p><strong>Catatan</strong>: Kalau kamu bekerja pada komputer/tablet/device lain yang mana kamu tidak bisa membuat <em>file</em>mu sendiri, kamu bisa mencoba (sebagian besar) contoh kode dalam program coding daring macam <a href="https://jsbin.com/">JSBin</a> atau <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Petunjuk">Petunjuk</h2> + +<p>Module ini berisi artikel berikut yang akan mengantar kamu melalui semua fundamental mengembed multimedia dalam halaman web.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Image dalam HTML</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Konten video dan audio</a></dt> + <dd>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 <em>file</em> berbeda ke peramban berbeda, menambah caption dan subtitle, dan bagaimana menambah fallback untuk peramban jadul.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">Dari <object> ke <iframe> — teknologi pengembedan lain</a></dt> + <dd>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")}}. <code><iframe></code> dipakai untuk mengembed halaman web lain, dan 2 lainnya untuk mengembed PDF, SVG, dan bahkan Flash — teknologi yang jarang, tapi masih ada saja.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Menambah grafis vektor ke web</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Image responsif</a></dt> + <dd>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")}}.</dd> +</dl> + +<h2 id="Asesmen">Asesmen</h2> + +<p>Asesmen berikut akan menguhi pemahamanmu tentang HTML dasar yang dicover dalam panduan di atas:</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Halaman splash Mozilla</a></dt> + <dd>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!</dd> +</dl> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">Add a hitmap on top of an image</a></dt> + <dd>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.</dd> + <dt><a href="https://teach.mozilla.org/activities/web-lit-basics-two/">Web literacy basics 2</a></dt> + <dd> + <p>An excellent Mozilla foundation course that explores and tests some of the skills talked about in this <em>Multimedia and embedding</em> 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).</p> + </dd> +</dl> 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 new file mode 100644 index 0000000000..e13790b7f4 --- /dev/null +++ b/files/id/learn/html/multimedia_dan_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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{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")}}</div> + +<div> +<p class="summary"><font>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. </font><font>Ini membantu meningkatkan kinerja di berbagai perangkat yang berbeda. </font><font>Gambar responsif hanyalah salah satu bagian dari</font> <a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">responsive design</a>, topik CSS masa depan yang dapat Anda pelajari.</p> +</div> + +<table class="learn-box nostripe standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <td>Anda harus sudah mengetahui <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">basics of HTML</a> dan cara <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">add static images to a web page</a>.</td> + </tr> + <tr> + <th scope="row">Objective:</th> + <td>Learn how to use features like {{htmlattrxref("srcset", "img")}} and the {{htmlelement("picture")}} element to implement responsive image solutions on websites.</td> + </tr> + </tbody> +</table> + +<h2 id="Why_responsive_images">Why responsive images?</h2> + +<p>Let's examine a typical scenario. <font>Situs web tipikal mungkin berisi gambar tajuk dan beberapa gambar konten di bawah tajuk. </font><font>Gambar header kemungkinan akan menjangkau seluruh lebar header, dan gambar konten akan cocok di suatu tempat di dalam kolom konten. </font><font>Berikut ini contoh sederhana:</font></p> + +<p><img alt="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." src="https://mdn.mozillademos.org/files/12940/picture-element-wide.png" style="display: block; height: 554px; margin: 0px auto; width: 700px;"></p> + +<p>Ini bekerja dengan baik pada perangkat layar lebar, seperti laptop atau desktop (you can <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html">see the example live</a> and find the <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/not-responsive.html">source code</a> on Github.) Kami tidak akan banyak membahas CSS dalam pelajaran ini, kecuali untuk mengatakan bahwa:</p> + +<ul> + <li>The body content has been set to a maximum width of 1200 pixels — in viewports above that width the body remains at 1200px and centers itself in the available space. In viewports below that width, the body will stay at 100% of the width of the viewport.</li> + <li>The header image has been set so that its center always stays in the center of the header, no matter what width the heading is set at. If the site is being viewed on a narrower screen, the important detail in the center of the image (the people) can still be seen, and the excess is lost off either side. It is 200px high.</li> + <li>The content images have been set so that if the body element becomes smaller than the image, the images start to shrink so that they always stay inside the body, rather than overflowing it.</li> +</ul> + +<p><font>Namun, masalah muncul ketika Anda mulai melihat situs di perangkat layar sempit. </font><font>Header di bawah ini terlihat baik-baik saja, tetapi mulai mengambil banyak ketinggian layar untuk perangkat seluler. </font><font>Dan pada ukuran ini, sulit untuk melihat orang-orang di dalam gambar konten pertama.</font></p> + +<p><img alt="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." src="https://mdn.mozillademos.org/files/12936/non-responsive-narrow.png" style="display: block; height: 793px; margin: 0px auto; width: 320px;"></p> + +<p>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 <strong>art direction problem</strong>.</p> + +<p>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 <a href="/en-US/docs/Glossary/Raster_image">raster image</a> 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 <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">vector graphics</a>). This is called the <strong>resolution switching problem</strong>.</p> + +<p><font>Sebaliknya, tidak perlu untuk menampilkan gambar besar di layar secara signifikan lebih kecil dari ukuran yang dimaksudkan. </font><font>Melakukannya dapat menghabiskan bandwidth; </font><font>khususnya, pengguna seluler tidak ingin membuang bandwidth dengan mengunduh gambar besar yang ditujukan untuk desktop, ketika gambar kecil dilakukan untuk perangkat mereka. </font><font>Idealnya, Anda akan memiliki beberapa resolusi yang tersedia dan melayani ukuran yang sesuai tergantung pada perangkat yang mengakses data di situs web.</font></p> + +<p><font>Untuk membuat segalanya lebih rumit, beberapa perangkat memiliki layar resolusi tinggi yang membutuhkan gambar lebih besar dari yang Anda harapkan untuk ditampilkan dengan baik. </font><font>Ini pada dasarnya adalah masalah yang sama, tetapi dalam konteks yang sedikit berbeda.</font></p> + +<p><font>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. </font><font>Namun, mereka tidak cocok untuk semua jenis gambar. </font><font>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. </font><font>Format gambar raster seperti JPEG lebih cocok untuk jenis gambar yang kita lihat dalam contoh di atas.</font></p> + +<p>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. <em>Responsive image technologies</em> 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 (<em>resolution switching</em>), or different images suitable for different space allocations (<em>art direction</em>).</p> + +<div class="note"> +<p><strong>Note</strong>: 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.) </p> +</div> + +<h2 id="How_do_you_create_responsive_images">How do you create responsive images?</h2> + +<p><font>Di bagian ini, kita akan melihat dua masalah yang diilustrasikan di atas dan menunjukkan bagaimana menyelesaikannya menggunakan fitur gambar HTML yang responsif. </font><font>Anda harus mencatat bahwa kami akan fokus pada HTML</font> {{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. <a href="http://blog.cloudfour.com/responsive-images-101-part-8-css-images/">CSS arguably has better tools for responsive design</a> than HTML, and we'll talk about those in a future CSS module.</p> + +<h3 id="Resolution_switching_Different_sizes">Resolution switching: Different sizes</h3> + +<p>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:</p> + +<pre class="brush: html"><img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy"></pre> + +<p>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 <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> example on Github (see also <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/responsive.html">the source code</a>):</p> + +<pre class="brush: html"><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"></pre> + +<p>The <code>srcset</code> and <code>sizes</code> 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:</p> + +<p><strong><code>srcset</code></strong> 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:</p> + +<ol> + <li>An <strong>image filename</strong> (<code>elva-fairy-480w.jpg</code>)</li> + <li>A space</li> + <li>The image's <strong>intrinsic width in pixels</strong> (<code>480w</code>) — note that this uses the <code>w</code> unit, not <code>px</code> 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 <kbd>Cmd</kbd> + <kbd>I</kbd> to bring up the info screen).</li> +</ol> + +<p><strong><code>sizes</code></strong> 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:</p> + +<ol> + <li>A <strong>media condition</strong> (<code>(max-width:600px)</code>) — you'll learn more about these in the <a href="/en-US/docs/Learn/CSS">CSS topic</a>, 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".</li> + <li>A space</li> + <li>The <strong>width of the slot</strong> the image will fill when the media condition is true (<code>480px</code>)</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: For the slot width, you may provide an absolute length (<code>px</code>, <code>em</code>) or a length relative to the viewport (<code>vw</code>), 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.</p> +</div> + +<p>So, with these attributes in place, the browser will:</p> + +<ol> + <li>Look at its device width</li> + <li>Work out which media condition in the <code>sizes</code> list is the first one to be true</li> + <li>Look at the slot size given to that media query</li> + <li>Load the image referenced in the <code>srcset</code> list that <strong>most closely</strong> matches the chosen slot size</li> +</ol> + +<p>And that's it! At this point, if a supporting browser with a viewport width of 480px loads the page, the <code>(max-width: 600px)</code> media condition will be true, and so the browser chooses the <code>480px</code> slot. The <code>elva-fairy-480w.jpg</code> will be loaded, as its inherent width (<code>480w</code>) 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.</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: 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 <code><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="cm-variable">document</span>.<span class="cm-property">querySelector</span>(<span class="cm-string">'html'</span>).<span class="cm-property">clientWidth</span></span></span></span></code>). 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 <code>about:debugging</code> page to inspect the page loaded on the mobile using the desktop developer tools.<br> + <br> + To see which images were loaded, you can use Firefox DevTools's <a href="/en-US/docs/Tools/Network_Monitor">Network Monitor</a> tab.</p> +</div> + +<p>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.</p> + +<div class="note"> +<p><strong>Note</strong>: In the {{htmlelement("head")}} of the example linked above, you'll find the line <code><meta name="viewport" content="width=device-width"></code>: 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).</p> +</div> + +<h3 id="Resolution_switching_Same_size_different_resolutions">Resolution switching: Same size, different resolutions</h3> + +<p>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 <code>srcset</code> with x-descriptors and without <code>sizes</code> — a somewhat easier syntax! You can find an example of what this looks like in <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">srcset-resolutions.html</a> (see also <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">the source code</a>):</p> + +<pre class="brush: html"><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"> +</pre> + +<p><img alt="A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the image" src="https://mdn.mozillademos.org/files/12942/resolution-example.png" style="display: block; height: 425px; margin: 0px auto; width: 480px;">In 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):</p> + +<pre class="brush: css">img { + width: 320px; +}</pre> + +<p>In this case, <code>sizes</code> 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 <code>srcset</code>. So if the device accessing the page has a standard/low resolution display, with one device pixel representing each CSS pixel, the <code>elva-fairy-320w.jpg</code> 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 <code>elva-fairy-640w.jpg</code> image will be loaded. The 640px image is 93KB, whereas the 320px image is only 39KB.</p> + +<h3 id="Art_direction">Art direction</h3> + +<p>To recap, the <strong>art direction problem</strong> 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.</p> + +<p>Returning to our original <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html">not-responsive.html</a> example, we have an image that badly needs art direction:</p> + +<pre class="brush: html"><img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"></pre> + +<p>Let's fix this, with {{htmlelement("picture")}}! Like <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content"><code><video></code> and <code><audio></code></a>, the <code><picture></code> 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 <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> looks like so:</p> + +<pre class="brush: html"><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> +</pre> + +<ul> + <li>The <code><source></code> elements include a <code>media</code> attribute that contains a media condition — as with the first <code>srcset</code> example, these conditions are tests that decide which image is shown — the first one that returns true will be displayed. In this case, if the viewport width is 799px wide or less, the first <code><source></code> element's image will be displayed. If the viewport width is 800px or more, it'll be the second one.</li> + <li>The <code>srcset</code> attributes contain the path to the image to display. Just as we saw with <code><img></code> above, <code><source></code> can take a <code>srcset</code> attribute with multiple images referenced, as well as a <code>sizes</code> attribute. So, you could offer multiple images via a <code><picture></code> element, but then also offer multiple resolutions of each one. Realistically, you probably won't want to do this kind of thing very often.</li> + <li>In all cases, you must provide an <code><img></code> element, with <code>src</code> and <code>alt</code>, right before <code></picture></code>, otherwise no images will appear. This provides a default case that will apply when none of the media conditions return true (you could actually remove the second <code><source></code> element in this example), and a fallback for browsers that don't support the <code><picture></code> element.</li> +</ul> + +<p>This code allows us to display a suitable image on both wide screen and narrow screen displays, as shown below:</p> + +<p><img alt="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." src="https://mdn.mozillademos.org/files/12940/picture-element-wide.png" style="display: block; height: 554px; margin: 0px auto; width: 700px;"><img alt="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" src="https://mdn.mozillademos.org/files/12938/picture-element-narrow.png" style="display: block; height: 710px; margin: 0px auto; width: 320px;"></p> + +<div class="note"> +<p><strong>Note</strong>: You should use the <code>media</code> attribute only in art direction scenarios; when you do use <code>media</code>, don't also offer media conditions within the <code>sizes</code> attribute.</p> +</div> + +<h3 id="Why_cant_we_just_do_this_using_CSS_or_JavaScript">Why can't we just do this using CSS or JavaScript?</h3> + +<p>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 <code>srcset</code>. 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.</p> + +<ul> +</ul> + +<h3 id="Use_modern_image_formats_boldly">Use modern image formats boldly</h3> + +<p>There are several exciting new image formats (such as <a href="/en-US/docs/Glossary/webp">WebP</a> and JPEG-2000) that can maintain a low file size and high quality at the same time. However, browser support is spotty.</p> + +<p><code><picture></code> lets us continue catering to older browsers. You can supply MIME types inside <code>type</code> attributes so the browser can immediately reject unsupported file types:</p> + +<pre class="brush: html"><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> +</pre> + +<ul> + <li>Do <em>not </em>use the <code>media</code> attribute, unless you also need art direction.</li> + <li>In a <code><source></code> element, you can only refer to images of the type declared in <code>type</code>.</li> + <li>Use comma-separated lists with <code>srcset</code> and <code>sizes</code>, as needed.</li> +</ul> + +<h2 id="Active_learning_Implementing_your_own_responsive_images">Active learning: Implementing your own responsive images</h2> + +<p>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 <code><picture></code>, and a resolution switching example that uses <code>srcset</code>.</p> + +<ol> + <li>Write some simple HTML to contain your code (use <code>not-responsive.html</code> as a starting point, if you like).</li> + <li>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).</li> + <li>Use the <code><picture></code> element to implement an art direction picture switcher!</li> + <li>Create multiple image files of different sizes, each showing the same picture.</li> + <li>Use <code>srcset</code>/<code>size</code> to create a resolution switcher example, either to serve the same size image at different resolutions, or different image sizes at different viewport widths.</li> +</ol> + +<h2 id="Test_your_skills!">Test your skills!</h2> + +<p>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 <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a>.</p> + +<h2 id="Summary">Summary</h2> + +<p>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:</p> + +<ul> + <li><strong>Art direction</strong>: The problem whereby you want to serve cropped images for different layouts — for example a landscape image showing a full scene for a desktop layout, and a portrait image showing the main subject zoomed in for a mobile layout. You can solve this problem using the {{htmlelement("picture")}} element.</li> + <li><strong>Resolution switching</strong>: The problem whereby you want to serve smaller image files to narrow screen devices, as they don't need huge images like desktop displays do — and also optionally that you want to serve different resolution images to high density/low density screens. You can solve this problem by using <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">vector graphics</a> (SVG images) and the {{htmlattrxref("srcset", "img")}} with {{htmlattrxref("sizes", "img")}} attributes.</li> +</ul> + +<p>This also draws to a close the entire <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia and embedding</a> module! The only thing to do now before moving on is to try our multimedia assessment, and see how you get on. Have fun!</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="http://blog.cloudfour.com/responsive-images-101-definitions">Jason Grigsby's excellent introduction to responsive images</a></li> + <li><a href="https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/">Responsive Images: If you’re just changing resolutions, use srcset</a> — includes more explanation of how the browser works out which image to use</li> + <li>{{htmlelement("img")}}</li> + <li>{{htmlelement("picture")}}</li> + <li>{{htmlelement("source")}}</li> +</ul> + +<div>{{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")}}</div> + +<div> +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From <object> to <iframe> — other embedding technologies</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the Web</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></li> +</ul> +</div> 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 new file mode 100644 index 0000000000..5563c68fd3 --- /dev/null +++ b/files/id/learn/html/pengenalan_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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <td>Basic HTML familiarity, as covered in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a>. HTML text formatting, as covered in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a>. How hyperlinks work, as covered in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a>.</td> + </tr> + <tr> + <th scope="row">Objective:</th> + <td>Learn how to structure your document using semantic tags, and how to work out the structure of a simple website.</td> + </tr> + </tbody> +</table> + +<h2 id="Bagian_dasar_dari_suatu_dokumen">Bagian dasar dari suatu dokumen</h2> + +<p>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:</p> + +<dl> + <dt>header (tajuk):</dt> + <dd>Biasanya strip besar di bagian atas dengan tajuk besar, logo, dan mungkin tagline. Ini biasanya tetap sama dari satu halaman web ke yang lain.</dd> + <dt>navigation bar (bilah navigasi):</dt> + <dd>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.</dd> + <dt>main content (konten utama):</dt> + <dd>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!</dd> + <dt>sidebar (bilah samping):</dt> + <dd>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.</dd> + <dt>footer:</dt> + <dd>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.</dd> +</dl> + +<p>A "typical website" could be structured something like this:</p> + +<p><img alt="a simple website structure example featuring a main heading, navigation menu, main content, side bar, and footer." src="https://mdn.mozillademos.org/files/12417/sample-website.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="HTML_for_structuring_content">HTML for structuring content</h2> + +<p>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 <strong>use the right element for the right job</strong>.</p> + +<p>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?</p> + +<div class="note"> +<p><strong>Note</strong>: Colorblind people represent around <a href="http://www.color-blindness.com/2006/04/28/colorblind-population/">4% of the world population</a> 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 <a href="https://en.wikipedia.org/wiki/Visual_impairment">285 million such people in the world</a>, while the total population was <a href="https://en.wikipedia.org/wiki/World_human_population#/media/File:World_population_history.svg">around 7 billion</a>).</p> +</div> + +<p>In your HTML code, you can mark up sections of content based on their <em>functionality</em> — 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 <a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Why_do_we_need_structure">consequences of not using the right element structure and semantics for the right job</a>.</p> + +<p>Untuk menerapkan mark up semantik tersebut, HTML menyediakan tag khusus yang dapat Anda gunakan untuk mewakili bagian tersebut, misalnya:</p> + +<ul> + <li><strong>header: </strong>{{htmlelement("header")}}.</li> + <li><strong>navigation bar: </strong>{{htmlelement("nav")}}.</li> + <li><strong>main content: </strong>{{htmlelement("main")}}, with various content subsections represented by {{HTMLElement("article")}}, {{htmlelement("section")}}, and {{htmlelement("div")}} elements.</li> + <li><strong>sidebar: </strong>{{htmlelement("aside")}}; often placed inside {{htmlelement("main")}}.</li> + <li><strong>footer: </strong>{{htmlelement("footer")}}.</li> +</ul> + +<h3 id="Active_learning_exploring_the_code_for_our_example">Active learning: exploring the code for our example</h3> + +<p>Our example seen above is represented by the following code (you can also <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/document_and_website_structure/index.html">find the example in our GitHub repository</a>). Kami ingin Anda melihat contoh di atas, dan kemudian melihat daftar di bawah untuk melihat bagian apa yang membentuk bagian visual apa.</p> + +<pre class="brush: html"><!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></pre> + +<p>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.</p> + +<h2 id="HTML_layout_elements_in_more_detail">HTML layout elements in more detail</h2> + +<p>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 <a href="/en-US/docs/Web/HTML/Element">HTML element reference</a>. For now, these are the main definitions that you should try to understand:</p> + +<ul> + <li>{{HTMLElement('main')}} is for content <em>unique to this page. </em>Use <code><main></code> only <em>once </em>per page, and put it directly inside {{HTMLElement('body')}}. Ideally this shouldn't be nested within other elements.</li> + <li>{{HTMLElement('article')}} encloses a block of related content that makes sense on its own without the rest of the page (e.g., a single blog post).</li> + <li>{{HTMLElement('section')}} is similar to <code><article></code>, but it is more for grouping together a single part of the page that constitutes one single piece of functionality (e.g., a mini map, or a set of article headlines and summaries). It's considered best practice to begin each section with a <a href="/en-US/Learn/HTML/Howto/Set_up_a_proper_title_hierarchy">heading</a>; also note that you can break <code><article></code>s up into different <code><section></code>s, or <code><section></code>s up into different <code><article></code>s, depending on the context.</li> + <li>{{HTMLElement('aside')}} contains content that is not directly related to the main content but can provide additional information indirectly related to it (glossary entries, author biography, related links, etc.).</li> + <li>{{HTMLElement('header')}} represents a group of introductory content. If it is a child of {{HTMLElement('body')}} it defines the global header of a webpage, but if it's a child of an {{HTMLElement('article')}} or {{HTMLElement('section')}} it defines a specific header for that section (try not to confuse this with <a href="/en-US/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#Adding_a_title">titles and headings</a>).</li> + <li>{{HTMLElement('nav')}} contains the main navigation functionality for the page. Secondary links, etc., would not go in the navigation.</li> + <li>{{HTMLElement('footer')}} represents a group of end content for a page.</li> +</ul> + +<h3 id="Non-semantic_wrappers">Non-semantic wrappers</h3> + +<p>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.</p> + +<p>{{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> + +<pre class="brush: html"><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></pre> + +<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.</p> + +<p>{{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:</p> + +<pre class="brush: html"><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></pre> + +<p>This isn't really an <code><aside></code>, 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 <code><section></code>, as it isn't part of the main content of the page. So a <code><div></code> is fine in this case. We've included a heading as a signpost to aid screenreader users in finding it.</p> + +<div class="warning"> +<p><strong>Warning</strong>: 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.</p> +</div> + +<h3 id="Line_breaks_and_horizontal_rules">Line breaks and horizontal rules</h3> + +<p>Two elements that you'll use occasionally and will want to know about are {{htmlelement("br")}} and {{htmlelement("hr")}}:</p> + +<p><code><br></code> 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> + +<div id="line-break-live-sample"> +<pre class="brush: html"><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></pre> +</div> + +<p>Without the <code><br></code> elements, the paragraph would just be rendered in one long line (as we said earlier in the course, <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Whitespace_in_HTML">HTML ignores most whitespace</a>); with <code><br></code> elements in the code, the markup renders like this:</p> + +<p>{{EmbedLiveSample('line-break-live-sample', '100%', '125px', '', '', 'hide-codepen-jsfiddle')}}</p> + +<p><code><hr></code> 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> + +<div id="horizantal-rule-live-sample"> +<pre class="brush: html"><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></pre> +</div> + +<p>Would render like this:</p> + +<p>{{EmbedLiveSample('horizantal-rule-live-sample', '100%', '185px', '', '', 'hide-codepen-jsfiddle')}}</p> + +<h2 id="Planning_a_simple_website">Planning a simple website</h2> + +<p>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!</p> + +<ol> + <li>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.<img alt="the common features of the travel site to go on every page: title and logo, contact, copyright, terms and conditions, language chooser, accessibility policy" src="https://mdn.mozillademos.org/files/12423/common-features.png" style="border-style: solid; border-width: 1px; display: block; height: 375px; margin: 0px auto; width: 600px;"></li> + <li>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.<img alt="A simple diagram of a sample site structure, with a header, main content area, two optional sidebars, and footer" src="https://mdn.mozillademos.org/files/12429/site-structure.png" style="border-style: solid; border-width: 1px; display: block; height: 232px; margin: 0px auto; width: 600px;"></li> + <li>Sekarang, tukar pikiran semua konten lain (tidak umum untuk setiap halaman) yang ingin Anda miliki di situs web Anda - tulis daftar besar.<img alt="A long list of all the features that we could put on our travel site, from searching, to special offers and country-specific info" src="https://mdn.mozillademos.org/files/12425/feature-list.png" style="border-style: solid; border-width: 1px; display: block; height: 1066px; margin: 0px auto; width: 600px;"></li> + <li>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")}}.<img alt="The items that should appear on a holiday site sorted into 5 categories: Search, Specials, Country-specific info, Search results, and Buy things" src="https://mdn.mozillademos.org/files/12421/card-sorting.png" style="border-style: solid; border-width: 1px; display: block; height: 579px; margin: 0px auto; width: 600px;"></li> + <li>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.<img alt="A map of the site showing the homepage, country page, search results, specials page, checkout, and buy page" src="https://mdn.mozillademos.org/files/12427/site-map.png" style="border-style: solid; border-width: 1px; display: block; height: 872px; margin: 0px auto; width: 600px;"></li> +</ol> + +<h3 id="Active_learning_create_your_own_sitemap">Active learning: create your own sitemap</h3> + +<p>Coba lakukan latihan di atas untuk situs web ciptaan Anda sendiri. Anda ingin membuat situs tentang apa?</p> + +<div class="note"> +<p><strong>Note</strong>: Simpan pekerjaan Anda di suatu tempat; Anda mungkin membutuhkannya nanti.</p> +</div> + +<h2 id="Test_your_skills!">Test your skills!</h2> + +<p>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 <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a>. Kami menyarankan untuk membaca artikel berikutnya dalam seri ini terlebih dahulu dan tidak hanya melewatkannya saja!</p> + +<h2 id="Ringkasan">Ringkasan</h2> + +<p>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.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">Using HTML sections and outlines</a>: Advanced guide to HTML5 semantic elements and the HTML5 outline algorithm.</li> +</ul> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li> +</ul> 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 new file mode 100644 index 0000000000..bbee58cc80 --- /dev/null +++ b/files/id/learn/html/pengenalan_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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prasyarat:</th> + <td>Familiar dengan dasar-dasar HTML, dicakup dalam <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a>.</td> + </tr> + <tr> + <th scope="row">Hal yang dipelajari:</th> + <td>Mempelajari cara menandai halaman dasar teks untuk memberikan struktur dan tujuan — termasuk paragraf, judul, daftar, penekanan, dan kutipan.</td> + </tr> + </tbody> +</table> + +<h2 id="Dasar-dasarnya_Judul_dan_paragaf">Dasar-dasarnya: Judul dan paragaf</h2> + +<p>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.</p> + +<p><img alt="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs." src="https://mdn.mozillademos.org/files/12371/newspaper_small.jpg" style="display: block; margin: 0px auto;" title="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs."></p> + +<p>Konten yang terstruktur membuat pengalaman membaca lebih mudah dan lebih menyenangkan.</p> + +<p>Dalam HTML, setiap paragraf dirangkap element {{htmlelement("p")}}, seperti berikut.</p> + +<pre class="brush: html"><p>I am a paragraph, oh yes I am.</p></pre> + +<p>Setiap judul juga dirangkap dalam sebuah element "heading":</p> + +<pre class="brush: html"><h1>I am the title of the story.</h1></pre> + +<p>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; <code><h1></code> mewakili judul utama, <code><h2></code> mewakili sub judul, <code><h3></code> mewakili sub-sub judul, dan seterusnya.</p> + +<h3 id="Menerapkan_susunan_struktural">Menerapkan susunan struktural</h3> + +<p>Untuk contohnya, dalam sebuah kisah, <code><h1></code> mewakili judul kisahnya, <code><h2></code> mewakili judul setiap babnya dan <code><h3></code> mewakili sub-bagian setiap babnya, dan seterusnya.</p> + +<pre class="brush: html"><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></pre> + +<p>Sebenarnya terserah Anda element yang digunakan, selama susunannya masuk akal. Anda perlu mengingat beberapa prakter terbaik saat Anda membuat struktur seperti:</p> + +<ul> + <li>Lebih baik Anda hanya menggunakan <code><h1></code> sekali per halaman — ini adalah judul teratas, dan semua yang lain berada di bawah tingkat ini.</li> + <li>Pastikan Anda menggunakan headung dalam tingkatan urut yang benar. Jangan menggunakan <code><h3></code> untuk mewakili sub-judul subheadings, diikuti <code><h2></code> untuk mewakili sub-sub judul — ini tidak masuk akal dan akan membuat hasil yang aneh.</li> + <li>Dari enam level heading yang tersedia, Anda harus menargetkan tidak nenggunakn lebih dari tiga oer halaman, kecuali jika Anda merasa itu diperlukan. Documents with many levels (i.e., a deep heading hierarchy) become unwieldy and difficult to navigate. On such occasions, it is advisable to spread the content over multiple pages if possible.</li> +</ul> + +<h3 id="Why_do_we_need_structure">Why do we need structure?</h3> + +<p>To answer this question, let's take a look at <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> — 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).</p> + +<p>However, when you open the document in your browser, you'll see that the text appears as a big chunk!</p> + +<p><img alt="A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it." src="https://mdn.mozillademos.org/files/14827/Screen%20Shot%202017-03-29%20at%2009.20.35.png" style="display: block; height: 377px; margin: 0px auto; width: 600px;" title="A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it."></p> + +<p>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:</p> + +<ul> + <li>Users looking at a web page tend to scan quickly to find relevant content, often just reading the headings to begin with (we usually <a class="external external-icon" href="http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/">spend a very short time on a web page</a>). If they can't see anything useful within a few seconds, they'll likely get frustrated and go somewhere else.</li> + <li>Search engines indexing your page consider the contents of headings as important keywords for influencing the page's search rankings. Without headings, your page will perform poorly in terms of {{glossary("SEO")}} (Search Engine Optimization).</li> + <li>Severely visually impaired people often don't read web pages; they listen to them instead. This is done with software called a <a class="external external-icon" href="http://en.wikipedia.org/wiki/Screen_reader" title="screen readers">screen reader</a>. This software provides ways to get fast access to given text content. Among the various techniques used, they provide an outline of the document by reading out the headings, allowing their users to find the information they need quickly. If headings are not available, they will be forced to listen to the whole document read out loud.</li> + <li>To style content with {{glossary("CSS")}}, or make it do interesting things with {{glossary("JavaScript")}}, you need to have elements wrapping the relevant content, so CSS/JavaScript can effectively target it.</li> +</ul> + +<p>We therefore need to give our content structural markup.</p> + +<h3 id="Active_learning_Giving_our_content_structure">Active learning: Giving our content structure</h3> + +<p>Let's jump straight in with a live example. In the example below, add elements to the raw text in the <em>Input</em> field so that it appears as a heading and two paragraphs in the <em>Output</em> field.</p> + +<p>If you make a mistake, you can always reset it using the <em>Reset</em> button. If you get stuck, press the <em>Show solution</em> button to see the answer.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + + + +<pre class="brush: html"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 100px; width: 95%">My short story I am a policewoman and my name is Trish. + +My legs are made of cardboard and I am married to a fish.</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + + + + + +<pre class="brush: css">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + + + + + + + + + +<pre class="brush: js">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<h1>My short story</h1>\n<p>I am a policewoman and my name is Trish.</p>\n<p>My legs are made of cardboard and I am married to a fish.</p>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> + + +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Why_do_we_need_semantics">Why do we need semantics?</h3> + +<p>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.)</p> + +<p>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."</p> + +<pre class="brush: html"><h1>This is a top level heading</h1></pre> + +<p>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).</p> + +<p>On the other hand, you could make any element <em>look</em> like a top level heading. Consider the following:</p> + +<pre class="brush: html"><span style="font-size: 32px; margin: 21px 0; display: block;">Is this a top level heading?</span></pre> + +<p>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.</p> + +<h2 id="Lists">Lists</h2> + +<p>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.</p> + +<h3 id="Unordered">Unordered</h3> + +<p>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.</p> + +<pre>milk +eggs +bread +hummus</pre> + +<p>Every unordered list starts off with a {{htmlelement("ul")}} element — this wraps around all the list items:</p> + +<pre class="brush: html"><ul> +milk +eggs +bread +hummus +</ul></pre> + +<p>The last step is to wrap each list item in a {{htmlelement("li")}} (list item) element:</p> + +<pre class="brush: html"><ul> + <li>milk</li> + <li>eggs</li> + <li>bread</li> + <li>hummus</li> +</ul></pre> + +<h4 id="Active_learning_Marking_up_an_unordered_list">Active learning: Marking up an unordered list</h4> + +<p>Try editing the live sample below to create your very own HTML unordered list.</p> + +<div class="hidden"> +<h6 id="Playable_code_2">Playable code</h6> + + + +<pre class="brush: html"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 100px; width: 95%">milk +eggs +bread +hummus</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + + + + + + + +<pre class="brush: css">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + + + + + + + + + +<pre class="brush: js">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<ul>\n<li>milk</li>\n<li>eggs</li>\n<li>bread</li>\n<li>hummus</li>\n</ul>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> + + +</div> + +<p>{{ EmbedLiveSample('Playable_code_2', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Ordered">Ordered</h3> + +<p>Ordered lists are lists in which the order of the items <em>does</em> matter — let's take a set of directions as an example:</p> + +<pre>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</pre> + +<p>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 <code><ul></code>:</p> + +<pre class="brush: html"><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></pre> + +<h4 id="Active_learning_Marking_up_an_ordered_list">Active learning: Marking up an ordered list</h4> + +<p>Try editing the live sample below to create your very own HTML ordered list.</p> + +<div class="hidden"> +<h6 id="Playable_code_3">Playable code</h6> + + + +<pre class="brush: html"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 200px; width: 95%">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</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + + + + + + + +<pre class="brush: css">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + + + + + + + +<pre class="brush: js">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<ol>\n<li>Drive to the end of the road</li>\n<li>Turn right</li>\n<li>Go straight across the first two roundabouts</li>\n<li>Turn left at the third roundabout</li>\n<li>The school is on your right, 300 meters up the road</li>\n</ol>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> + + +</div> + +<p>{{ EmbedLiveSample('Playable_code_3', 700, 500, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Active_learning_Marking_up_our_recipe_page">Active learning: Marking up our recipe page</h3> + +<p>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 <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> 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.</p> + +<div class="hidden"> +<h6 id="Playable_code_4">Playable code</h6> + + + + + +<pre class="brush: html"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 200px; width: 95%">Quick hummus recipe + + This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years. + + Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads. + + Ingredients + + 1 can (400g) of chick peas (garbanzo beans) + 175g of tahini + 6 sundried tomatoes + Half a red pepper + A pinch of cayenne pepper + 1 clove of garlic + A dash of olive oil + + Instructions + + Remove the skin from the garlic, and chop coarsely + Remove all the seeds and stalk from the pepper, and chop coarsely + Add all the ingredients into a food processor + Process all the ingredients into a paste + If you want a coarse "chunky" hummus, process it for a short time + If you want a smooth hummus, process it for a longer time + + For a different flavour, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you. + + Storage + + Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you've made it. If it starts to become fizzy, you should definitely discard it. + + Hummus is suitable for freezing; you should thaw it and use it within a couple of months.</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + + + + + + + + + +<pre class="brush: css">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + + + + + + + + + +<pre class="brush: js">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<h1>Quick hummus recipe</h1>\n\n<p>This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years.</p>\n\n<p>Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads.</p>\n\n<h2>Ingredients</h2>\n\n<ul>\n<li>1 can (400g) of chick peas (garbanzo beans)</li>\n<li>175g of tahini</li>\n<li>6 sundried tomatoes</li>\n<li>Half a red pepper</li>\n<li>A pinch of cayenne pepper</li>\n<li>1 clove of garlic</li>\n<li>A dash of olive oil</li>\n</ul>\n\n<h2>Instructions</h2>\n\n<ol>\n<li>Remove the skin from the garlic, and chop coarsely.</li>\n<li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>\n<li>Add all the ingredients into a food processor.</li>\n<li>Process all the ingredients into a paste.</li>\n<li>If you want a coarse "chunky" hummus, process it for a short time.</li>\n<li>If you want a smooth hummus, process it for a longer time.</li>\n</ol>\n\n<p>For a different flavour, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you.</p>\n\n<h2>Storage</h2>\n\n<p>Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you\'ve made it. If it starts to become fizzy, you should definitely discard it.</p>\n\n<p>Hummus is suitable for freezing; you should thaw it and use it within a couple of months.</p>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> + + +</div> + +<p>{{ EmbedLiveSample('Playable_code_4', 900, 500, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>If you get stuck, you can always press the <em>Show solution</em> button, or check out our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-complete.html">text-complete.html</a> example on our github repo.</p> + +<h3 id="Nesting_lists">Nesting lists</h3> + +<p>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:</p> + +<pre class="brush: html"><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></pre> + +<p>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:</p> + +<pre class="brush: html"><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></pre> + +<p>Try going back to the previous active learning example and updating the second list like this.</p> + +<h2 id="Emphasis_and_importance">Emphasis and importance</h2> + +<p>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.</p> + +<h3 id="Emphasis">Emphasis</h3> + +<p>When we want to add emphasis in spoken language, we <em>stress</em> 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.</p> + +<p>I am glad you weren't late.</p> + +<p>I am <em>glad</em> you weren't <em>late</em>.</p> + +<p>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.</p> + +<p>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> + +<pre class="brush: html"><p>I am <em>glad</em> you weren't <em>late</em>.</p></pre> + +<h3 id="Strong_importance">Strong importance</h3> + +<p>To emphasize important words, we tend to stress them in spoken language and <strong>bold</strong> them in written language. For example:</p> + +<p>This liquid is <strong>highly toxic</strong>.</p> + +<p>I am counting on you. <strong>Do not</strong> be late!</p> + +<p>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> + +<pre class="brush: html"><p>This liquid is <strong>highly toxic</strong>.</p> + +<p>I am counting on you. <strong>Do not</strong> be late!</p></pre> + +<p>You can nest strong and emphasis inside one another if desired:</p> + +<pre class="brush: html"><p>This liquid is <strong>highly toxic</strong> — +if you drink it, <strong>you may <em>die</em></strong>.</p></pre> + +<h3 id="Active_learning_Lets_be_important!">Active learning: Let's be important!</h3> + +<p>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.</p> + +<div class="hidden"> +<h6 id="Playable_code_5">Playable code</h6> + + + + + +<pre class="brush: html"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 200px; width: 95%"><h1>Important notice</h1> +<p>On Sunday January 9th 2010, a gang of goths were + spotted stealing several garden gnomes from a + shopping center in downtown Milwaukee. They were + all wearing green jumpsuits and silly hats, and + seemed to be having a whale of a time. If anyone + has any information about this incident, please + contact the police now.</p></textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + + + + + + + +<pre class="brush: css">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + + + + + + + + + +<pre class="brush: js">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<h1>Important notice</h1>\n<p>On <strong>Sunday January 9th 2010</strong>, a gang of <em>goths</em> were spotted stealing <strong><em>several</em> garden gnomes</strong> from a shopping center in downtown <strong>Milwaukee</strong>. They were all wearing <em>green jumpsuits</em> and <em>silly hats</em>, and seemed to be having a whale of a time. If anyone has <strong>any</strong> information about this incident, please contact the police <strong>now</strong>.</p>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> + + +</div> + +<p>{{ EmbedLiveSample('Playable_code_5', 700, 500, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Italic_bold_underline...">Italic, bold, underline...</h3> + +<p>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 <strong>presentational elements</strong> and should no longer be used, because as we've seen before, semantics is so important to accessibility, SEO, etc.</p> + +<p>HTML5 redefined <code><b></code>, <code><i></code> and <code><u></code> with new, somewhat confusing, semantic roles.</p> + +<p>Here's the best rule of thumb: it's likely appropriate to use <code><b></code>, <code><i></code>, or <code><u></code> 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.</p> + +<ul> + <li>{{HTMLElement('i')}} is used to convey a meaning traditionally conveyed by italic: Foreign words, taxonomic designation, technical terms, a thought...</li> + <li>{{HTMLElement('b')}} is used to convey a meaning traditionally conveyed by bold: Key words, product names, lead sentence...</li> + <li>{{HTMLElement('u')}} is used to convey a meaning traditionally conveyed by underline: Proper name, misspelling...</li> +</ul> + +<div class="note"> +<p>A kind warning about underline: <strong>People strongly associate underlining with hyperlinks.</strong> Therefore, on the Web, it's best to underline only links. Use the <code><u></code> 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.</p> +</div> + +<pre class="brush: html"><!-- 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></pre> + +<h2 id="Summary">Summary</h2> + +<p>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 <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">create hyperlinks</a>, possibly the most important element on the Web.</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</p> + + + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li> +</ul> diff --git a/files/id/learn/html/pengenalan_html/index.html b/files/id/learn/html/pengenalan_html/index.html new file mode 100644 index 0000000000..367ef45712 --- /dev/null +++ b/files/id/learn/html/pengenalan_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 +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Pada intinya, {{glossary("HTML")}} adalah bahasa yang cukup sederhana yang tersusun dari <a href="/en-US/docs/Glossary/Element">elemen</a>, 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 <em>header</em>? 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.</p> + +<h2 id="Prasyarat">Prasyarat</h2> + +<p>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 <a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Menginstal perangkat lunak dasar</a>), dan memahami cara membuat dan mengelola <em>file </em>(seperti dijelaskan dalam <a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/Mengelola_file">Berurusan dengan file</a>). Keduanya adalah bagian dari modul untuk pemula yang berjudul <a href="https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web">Mengenal apa itu web</a>.</p> + +<div class="note"> +<p><strong>Catatan</strong>: Jika kamu menggunakan komputer/tablet/alat lain yang tidak bisa membuat <em>file</em> sendiri, kamu bisa mencoba (banyak) contoh kode di aplikasi pemrograman daring seperti <a href="http://jsbin.com/">JSBin</a> atau <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Panduan">Panduan</h2> + +<p>Modul ini berisi artikel-artikel berikut, yang akan mengajarkan kamu mengenai semua teori dasar HTML dan memberimu kesempatan untuk menguji beberapa keterampilan.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Mulai bekerja dengan HTML</a></dt> + <dd>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!</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Apa yang ada di head? Metadata dalam HTML</a></dt> + <dd><a href="/en-US/docs/Glossary/Head">Head</a> 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).</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Fundamental teks HTML</a></dt> + <dd>Salah satu dari tugas utama HTML ialah memberi teks arti (juga disebut <a href="/en-US/docs/Glossary/Semantics">semantic</a>), 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.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Membuat hyperlinks</a></dt> + <dd>Hyperlinks sangat penting — merekalah yang membuat web menjadi web. Artikel ini menunjukkan syntaks yang dibutuhkan untuk membuat link, dan mendiskusikan praktek terbaik untuk link.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Pemformatan teks maju</a></dt> + <dd>Banyak elemen lain dalam HTML untuk pemformatan teks yang tidak kita dapatkan dalam artikel <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">fundamental teks HTML</a>. 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.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Struktur dokumen dan website</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Mendebug HTML</a></dt> + <dd>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.</dd> +</dl> + +<h2 id="Latihan">Latihan</h2> + +<p>Latihan-latihan berikut akan menguji pemahaman kamu mengenai HTML dasar yang ada pada panduan-panduan di atas.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Menandai huruf</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Menandai halaman konten</a></dt> + <dd>Asesmen ini menguji kemampuanmu menggunakan HTML untuk menstrukturisasi halaman konten sederhana, yang berisi header, footer, menu navigasi, konten utama, dan sidebar.</dd> +</dl> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<dl> + <dt><a href="https://teach.mozilla.org/activities/web-lit-basics/">Dasar literasi web 1</a></dt> + <dd>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.</dd> +</dl> 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 new file mode 100644 index 0000000000..2535589f38 --- /dev/null +++ b/files/id/learn/html/pengenalan_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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <td>Before attempting this assessment you should have already worked through the rest of the course, with a particular emphasis on <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a>.</td> + </tr> + <tr> + <th scope="row">Objective:</th> + <td>To test knowledge of web page structures, and how to represent a prospective layout design in markup.</td> + </tr> + </tbody> +</table> + +<h2 id="Starting_point">Starting point</h2> + +<p>To get this assessment started, you should go and grab the <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/structuring-a-page-of-content-start/assets.zip?raw=true">zip file containing all the starting assets</a>.</p> + +<p><br> + The zip file contains:</p> + +<ul> + <li>The HTML you need to add structural markup to.</li> + <li>CSS to style your markup.</li> + <li>Images that are used on the page.</li> +</ul> + +<p>Create the example on your local computer, or alternatively use an online tool such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a> to work on the tasks.</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: If you get stuck, then ask us for help — see the {{anch("Assessment or further help")}} section at the bottom of this page.</p> +</div> + +<h2 id="Project_brief">Project brief</h2> + +<p>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:</p> + +<ul> + <li>Header yang merentang lebar penuh dari situs yang berisi judul utama untuk halaman, logo situs, dan menu navigasi. Judul dan logo muncul berdampingan setelah penataan diterapkan, dan navigasi muncul di bawah kedua item.</li> + <li>Area konten utama yang mengandung dua kolom - blok utama yang berisi teks sambutan, dan bilah samping berisi thumbnail gambar.</li> + <li>Footer yang berisi informasi hak cipta dan kredit.</li> +</ul> + +<p>You need to add a suitable wrapper for (Anda perlu menambahkan pembungkus yang cocok untuk:):</p> + +<ul> + <li>The header</li> + <li>The navigation menu</li> + <li>The main content</li> + <li>The welcome text</li> + <li>The image sidebar</li> + <li>The footer</li> +</ul> + +<p>You should also:</p> + +<ul> + <li>Apply the provided CSS to the page by adding another {{htmlelement("link")}} element just below the existing one provided at the start.</li> +</ul> + +<h2 id="Hints_and_tips">Hints and tips</h2> + +<ul> + <li>Use the <a href="https://validator.w3.org/nu/">W3C Nu HTML Checker</a> to catch unintended mistakes in your HTML, CSS, and SVG — mistakes you might have otherwise missed — so that you can fix them.</li> + <li>You don't need to know any CSS to do this assessment; you just need to put the provided CSS inside an HTML element.</li> + <li>The provided CSS is designed so that when the correct structural elements are added to the markup, they will appear green in the rendered page.</li> + <li>If you are getting stuck and can't envisage what elements to put where, draw out a simple block diagram of the page layout, and write on the elements you think should wrap each block. This is extremely helpful.</li> +</ul> + +<h2 id="Example">Example</h2> + +<p>The following screenshot shows an example of what the homepage might look like after being marked up.</p> + +<p><img alt='The finished example for the assessment; a simple webpage about birdwatching, including a heading of "Birdwatching", bird photos, and a welcome message' src="https://mdn.mozillademos.org/files/12449/example-page.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="Assessment_or_further_help">Assessment or further help</h2> + +<p>If you would like your work assessed, or are stuck and want to ask for help:</p> + +<ol> + <li>Put your work into an online shareable editor such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a>.</li> + <li>Write a post asking for assessment and/or help at the <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a>. Your post should include: + <ul> + <li>A descriptive title such as "Assessment wanted for Structuring a page of content".</li> + <li>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.</li> + <li>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.</li> + <li>A link to the actual task or assessment page, so we can find the question you want help with.</li> + </ul> + </li> +</ol> + +<p>{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li> +</ul> diff --git a/files/id/learn/html/tabel/index.html b/files/id/learn/html/tabel/index.html new file mode 100644 index 0000000000..b8fe3a2d8a --- /dev/null +++ b/files/id/learn/html/tabel/index.html @@ -0,0 +1,36 @@ +--- +title: HTML Tables +slug: Learn/HTML/Tabel +translation_of: Learn/HTML/Tables +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">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.</p> + +<p class="summary"></p> + +<h2 id="Prasayarat">Prasayarat</h2> + +<p>Sebelum memulai modul ini, anda harus sudah menguasai dasar HTML — Lihat <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>.</p> + +<div class="note"> +<p><strong>Catatan</strong>: 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 <a href="http://jsbin.com/">JSBin</a> atau <a href="https://glitch.com/">Glitch</a>.</p> +</div> + +<h2 id="Panduan">Panduan</h2> + +<p>Modul ini berisi artikel berikut :</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Tables/Basics">HTML table basics</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Tables/Advanced">HTML table advanced features and accessibility</a></dt> + <dd>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</dd> +</dl> + +<h2 id="Penilaian">Penilaian</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Tables/Structuring_planet_data">Structuring planet data</a></dt> + <dd>pada penilaian tabel, kami menyediakan anda data planet dalam tata surya kita, dan membantu menyusunnya dalam tabel HTML.</dd> +</dl> diff --git a/files/id/learn/index.html b/files/id/learn/index.html new file mode 100644 index 0000000000..3e9329375a --- /dev/null +++ b/files/id/learn/index.html @@ -0,0 +1,97 @@ +--- +title: Belajar Pengembangan Web +slug: Learn +tags: + - Index + - Landing + - Pemula + - Web +translation_of: Learn +--- +<div> +<h1 id="V-neckline_necklines_are_ideal_for_the_following_body_types">V-neckline necklines are ideal for the following body types:</h1> + +<p>Because it gives a vertical impression to the outfit worn, the V-neckline can give the illusion of a slimmer, more elongated, and taller silhouette. Adapted to all body types, the V-neck can, depending on the depth chosen, create a balanced look.</p> + +<p>A V-neckline is particularly recommended for silhouettes with broad shoulders and for people who have a large bust or a very short neck. While, overall, depending on the shape of the neckline, moreover, you're petite, skinny or voluptuous, the V-neck flatters and suits all body types.</p> + +<p>If you want to buy some stylish and fashionable dresses you can visit <strong><a href="https://lailoo.com/collections/bonanza-satrangi">bonanza satrangi</a></strong> online store and find the latest gorgeous and stylish dresses with good quality.</p> + +<h2 id="What_is_a_square_neckline">What is a square neckline?</h2> + +<p>The square collar is a neckline whose shape, on the front, evokes that of a square or a rectangle. This neckline falls straight and visually cuts the bust. This is a perfect style for women with large breasts as well as those with small breasts. However, it is not recommended for women with a square face as it will make it look too masculine.</p> + +<h2 id="Square_necklines_are_ideal_for_the_following_body_types">Square necklines are ideal for the following body types:</h2> + +<p>Pyramid morphology</p> + +<p>If you are a woman with a small neck and narrow shoulders, this type of neckline will help you lengthen your neck. In addition, if you have a round face or a pyramid-shaped body, a square neckline will help you rebalance the lines of your face as well as those of your figure. Finally, the square neckline is ideal for women with large breasts because it offers a sophisticated structure to the neckline without revealing too much.</p> + +<p><strong><a href="https://lailoo.com/collections/bonanza-satrangi">Latest bonanza satrangi sale</a> </strong>2020 offers new designs and best quality dresses for men and women.</p> + + + +<h2 id="What_is_a_dancers_neckline">What is a dancer's neckline?</h2> + +<p>The dancer neckline is a very indented rounded neckline which owes its name to the leotard worn by the dancers. </p> + +<p>Black dress with dancer collar, fitted and sleeveless</p> + +<h2 id="Dancing_necklines_are_ideal_for_the_following_body_types">Dancing necklines are ideal for the following body types:</h2> + +<p>Hourglass morphology</p> + +<p>Pyramid morphology</p> + +<p>This simple cut neckline is very flattering and fits almost any figure. Very high cut, this wide and deep neckline lengthens the neck and highlights the collarbones. Whether you are petite or tall, this neckline will suit you. The dancer collar works particularly well on people with narrow shoulders. Indeed, this neckline balances the defects as well as the proportions.</p> + +<p><strong><a href="lailoo.com/collections/nishat-linen">Nishatlinen</a></strong> provides the latest summer lawn and cotton dresses with unique designs. If you want to buy these stylish and stunning dresses you can visit <strong><a href="lailoo.com/collections/nishat-linen">nishat linen</a> </strong>online store.</p> + +<p>Accompany your tops with a dancer collar or your dresses with this neckline of a collar that follows its flared shape. Lightweight, layered necklaces or earrings will not compete with your cleavage and may even create a perfect lengthening effect if you are petite.</p> + +<h2 id="What_is_a_halter_or_halter_neckline">What is a halter or halter neckline?</h2> + +<p>The halter neckline or halter neckline consists of two triangular points of fabric, of variable width according to the desired effect. These cutouts run down the chest to the back of the neck. Sometimes the halter neckline is made from a single piece of fabric that is tied or tied with a drawstring or tie at the nape of the neck. </p> + + + +<h2 id="Avoid_this_neckline_if">Avoid this neckline if:</h2> + +<p>You have a downward shoulder line</p> + +<p>Broad or square shoulders</p> + +<p>If you have beefy arms, broad shoulders, or a voluminous chest, avoid wearing a dress or halter top. Indeed, this neckline will tend to make you appear wider than you are.</p> + +<h2 id="How_to_wear_the_halter_neckline_or_the_halter_neck">How to wear the halter neckline or the halter neck?</h2> + +<p>No collar is needed with this particular neckline. Opt for a pair of trendy earrings or, more simply, let this spectacular neckline speak for itself.</p> + +<h2 id="What_is_a_sweetheart_neckline_or_sweetheart_neckline">What is a sweetheart neckline or sweetheart neckline?</h2> + +<p>This neckline has a neckline whose shape, on the front, evokes the graphics of the upper part of a heart. This very feminine neckline is mainly associated with strapless dresses, with off the shoulders. However, a few clothes with long sleeves and thin straps may also feature a heart-shaped neckline. This neckline shape is mostly found on wedding dresses and evening gowns but is increasingly found on casual clothes like tank tops or feminine tops.</p> + +<p>The sweetheart neckline adapts very easily to all body types and to all sizes. It is suitable for small breasts as well as medium or larger breasts. Small women, with small breasts and narrow shoulders will opt for this sweetheart neckline to appear more voluptuous. Finally, the vertical hollow of this neckline visually lengthens the face and balances the proportions of the silhouette of the wearer.</p> + +<h2 id="Which_keyhole_neckline_is_best">Which keyhole neckline is best?</h2> + +<p>The “keyhole” neckline is very close to the halter neckline (or halter) except that the converging diagonal lines meet at the beginning of the neck to form a small slit similar to the shape of a keyhole. This very versatile neckline can have several shapes: it can be in the form of a discreet slot on a top or a dress or adopt a more or less important oval or round shape, closed by a seam, a tie to tie or a fastening system (button, clip, etc.).</p> + +<p>Correctly positioned, this opening can give the impression of wearing a jewel and, depending on the height or it is located, this opening can reveal more or less the neckline.</p> + +<p>Short black dress, with a keyhole neckline.</p> + +<h2 id="Keyhole_necklines_are_ideal_for_the_following_body_types">Keyhole necklines are ideal for the following body types:</h2> + +<p>Keyhole necklines can be tailored to fit most figures and women of all ages. The effect depends on the height at which the opening is located. If you have a petite bust, this neckline can magnify your cleavage and provide an illusion of volume.</p> + +<h2 id="Avoid_this_neckline_if_2">Avoid this neckline if:</h2> + +<p>You have a round body shape and a voluminous chest. Indeed, located on a voluminous chest, this low-cut keyhole neckline could harm your elegance by revealing your chest a little too much.</p> + +<h2 id="In_conclusion">In conclusion:</h2> + +<p>There are many other forms of necklines and necklines and this list cannot be exhaustive, however, we have no doubt that this guide will guide you on the forms adapted to your face and your body type. Now you should be able to find the perfect top or the perfect dress to flatter your figure as well as your facial features. </p> + + +</div> diff --git a/files/id/learn/javascript/building_blocks/index.html b/files/id/learn/javascript/building_blocks/index.html new file mode 100644 index 0000000000..14142a20ba --- /dev/null +++ b/files/id/learn/javascript/building_blocks/index.html @@ -0,0 +1,42 @@ +--- +title: JavaScript building blocks +slug: Learn/JavaScript/Building_blocks +translation_of: Learn/JavaScript/Building_blocks +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Pada modul ini, kita lanjutkan cakupan semua fitur dasar JavaScript, arahkan perhatian kita pada jenis blok kode yang biasa ditemukan seperti pernyataan kondisional, perulangan, fungsi, dan <em>events</em>. Anda pernah melihat dasar ini sudah ada di kursus, tapi hanya sebentar - di sini kami akan membahas semuanya secara jelas.</p> + +<h2 id="Persyaratan">Persyaratan</h2> + +<p>Sebelum memulai modul ini, Anda harus memiliki beberapa pemahaman mengenai dasar-dasar dari <a href="/id/docs/Learn/HTML/Introduction_to_HTML">HTML</a> dan <a href="/id/docs/Learn/CSS/Introduction_to_CSS">CSS</a>, <span id="result_box" lang="id"><span>dan Anda juga harus sudah mengerjakan modul kami sebelumnya</span></span> , <a href="/id/docs/Learn/JavaScript/First_steps">Memulai JavaScript</a>.</p> + +<div class="note"> +<p><strong>Catatan</strong>: Jika Anda bekerja di komputer / tablet / perangkat lain dimana Anda tidak memiliki kemampuan untuk membuat <em>file </em>sendiri, Anda bisa mencoba (sebagian besar) contoh kode dalam program pengkodean online seperti <a href="http://jsbin.com/">JSBin</a> atau <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Panduan">Panduan</h2> + +<dl> + <dt><a href="/id/docs/Learn/JavaScript/Building_blocks/conditionals">Membuat keputusan di kode Anda — kondisional</a></dt> + <dd>Dalam bahasa pemrograman apapun, kode perlu untuk membuat keputusan dan melakukan tindakan yang sesuai pada masukan yang berbeda. Misalnya dalam permainan, jika jumlah nyawa pemain adalah 0, maka permainannya berakhir. Dalam aplikasi cuaca, jika yang dilihat adalah pagi hari maka akan tampil grafik matahari terbit dan jika sudah malam hari maka akan menunjukkan bintang dan bulan. Pada artikel ini kita akan membahas bagaimana struktur kondisional bekerja dalam JavaScript.</dd> + <dt><a href="/id/docs/Learn/JavaScript/Building_blocks/Looping_code">Kode perulangan</a> <a href="/id/docs/Learn/JavaScript/Building_blocks/Looping_code">(<em>looping</em>)</a></dt> + <dd>Terkadang Anda membutuhkan tugas yang dilakukan lebih dari sekali dan berulang-ulang. Misalnya melihat daftar banyak nama. Dalam pemrograman, <em>loop </em>melakukan pekerjaan ini dengan sangat baik. Di sini kita akan melihat struktur perulangan di JavaScript.</dd> + <dt><a href="/id/docs/Learn/JavaScript/Building_blocks/Functions">Fungsi — blok kode yang bisa digunakan kembali</a></dt> + <dd>Konsep penting lainnya dalam berkode adalah <strong>fungsi</strong>. <strong>Fungsi </strong>memungkinkan Anda untuk menyimpan bagian kode yang melakukan satu tugas di dalam blok yang ditetapkan, dan kemudian memanggil kode itu kapan pun Anda memerlukannya kemudian menggunakan satu perintah pendek untuk memanggilnya daripada harus mengetikkan kode yang sama beberapa kali. Pada artikel ini kita akan mengeksplorasi konsep dasar di balik fungsi seperti sintaks dasar, bagaimana cara memanggil dan mendefinisikan fungsi, ruang lingkup, dan parameternya.</dd> + <dt><a href="/id/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Membangun fungsi sendiri</a></dt> + <dd>Dengan sebagian besar teori esensial yang telah dibahas dalam artikel sebelumnya, artikel ini akan memberikan pengalaman praktik. Di sini Anda akan mendapatkan beberapa latihan dengan membangun fungsi Anda sendiri. Ikutilah jalannya, kami juga akan menjelaskan beberapa rincian lebih lanjut mengenai fungsi.</dd> + <dt><a href="/id/docs/Learn/JavaScript/Building_blocks/Return_values">Fungsi mengembalikan suatu nilai</a></dt> + <dd>Ada satu konsep penting yang bisa kita diskusikan dalam kursus ini, untuk menutup fungsi kita bisa mengembalikan suatu nilai. Beberapa fungsi tidak mengembalikan nilai yang signifikan setelah selesai, tapi ada juga yang melakukannya. Penting untuk memahami apa nilai mereka, bagaimana memanfaatkannya dalam kode Anda, dan bagaimana membuat fungsi Anda sendiri mengembalikan nilai yang berguna.</dd> + <dt><a href="/id/docs/Learn/JavaScript/Building_blocks/Events">Perkenalan events</a></dt> + <dd>Events adalah tindakan atau kejadian yang terjadi di sistem yang Anda gunakan dalam pemrograman, dimana sistem memberi tahu Anda sehingga Anda dapat meresponsnya dengan cara apa pun jika diinginkan. Misalnya jika pengguna mengeklik tombol pada laman web, Anda mungkin ingin menanggapi tindakan tersebut dengan menampilkan kotak informasi. Pada artikel akhir ini kita akan membahas beberapa konsep penting seputar events, dan melihat bagaimana mereka bekerja di browser.</dd> +</dl> + +<h2 id="Penilaian">Penilaian</h2> + +<p>Penilaian berikut akan menguji pemahaman Anda tentang dasar-dasar JavaScript yang tercakup dalam panduan di atas.</p> + +<dl> + <dt><a href="/id/docs/Learn/JavaScript/Building_blocks/Image_gallery">Galeri Gambar</a></dt> + <dd>Sekarang setelah melihat fundamental dari bangunan blok di JavaScript, kami akan menguji pengetahuan Anda tentang loop, fungsi, kondisional dan events dengan membangun barang yang cukup umum yang akan Anda lihat di banyak situs web yaitu galeri gambar yang dibuat dengan JavaScript.</dd> +</dl> diff --git a/files/id/learn/javascript/client-side_web_apis/index.html b/files/id/learn/javascript/client-side_web_apis/index.html new file mode 100644 index 0000000000..171c0647b7 --- /dev/null +++ b/files/id/learn/javascript/client-side_web_apis/index.html @@ -0,0 +1,50 @@ +--- +title: Client-side web APIs +slug: Learn/JavaScript/Client-side_web_APIs +tags: + - API + - Artikel + - CodingScripting + - DOM + - JavaScript + - Landing + - Latihan + - Media + - Module + - Pemula + - WebAPI + - data +translation_of: Learn/JavaScript/Client-side_web_APIs +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Ketika menulis JavaScript <em>client-side</em> untuk website atau aplikasi, anda tidak akan berkembang jauh sebelum memulai cara menggunakan API — yaitu sekumpulan <em>interface</em> untuk memanifulasi berbagai aspect pada browser dan operating sistem dimana situs dijalankan, atau cara mengolah data dari website atau <em>service </em>yang lain. Didalam modul kali ini, kita akan menjelajahi apa itu API dan bagaimana cara menggunakan beberapa API yang sangat umum yang mungkin anda akan temukan dalam pekerjaan Development anda.</p> + +<h2 id="Prasyarat">Prasyarat</h2> + +<p>Untuk mendapatkan hasil maksimal dalam modul ini, diharuskan bagi anda menyelesaikan tahapan modul JavaScript pada seri-seri (<a href="/en-US/docs/Learn/JavaScript/First_steps">First steps</a>, <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a>, dan <a href="/en-US/docs/Learn/JavaScript/Objects">JavaScript objects</a>). Keseluruhan modul tersebut cukup banyak melibatkan cara-cara penggunaan API yang sederhana, dikarenakan akan sulit untuk menulis contoh-contoh JavaScript <em>client-side </em>yang sangat berguna tanpa mereka! Disini kita meningkat pada satu level, dengan mengharapkan pengetahunan lebih mendalam tentang <em>core </em>pemrograman JavaScript dan mengeksplorasi banyak contoh Web API yang umum.</p> + +<p>Pengetahuan dasar mengenai <a href="/en-US/docs/Learn/HTML">HTML</a> dan <a href="/en-US/docs/Learn/CSS">CSS</a> juga akan sangat berguna.</p> + +<div class="note"> +<p><strong>Catatan:</strong> Jika anda sedang bekerja dengan <em> </em>perangkat dimana anda tidak mendapatkan kemampuan untuk membuat <em>file -file</em> anda sendiri, anda dapat mencoba (hampir semua) contoh <em>code</em> pada sebuah program pemrograman online semisal <a href="http://jsbin.com/">JSBin</a> atau <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Panduan">Panduan</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Pengenalan tentang Web API</a></dt> + <dd>Sebagai permulaan, kita akan memulai melihat mengenai API dari sebuah level yang tinggi — tentang apa itu API, bagaimana cara API bekerja, bagaimana cara menggunakannya pada program kita, dan bagaimana mereka dibentuk secara terstruktur? Kita juga akan melihat apa perbedaan utama antara <em>Class-class</em> API dan jenis penggunaan sepert apa yang mereka miliki.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Cara memanipulasi dokumen</a></dt> + <dd>Ketika sedang menulis website dan aplikasi, satu hal yang sangat penting yang anda ingin lakukan adalah menemukan berbagai cara untuk memanipulasi dokumen-dokumen web. Hal ini biasanya dilakukan menggunakan <em>Document Object Model</em> (DOM), sekumpulan API untuk mengontrol HTML dan memperindah tampilan informasi yang menekankan penggunaan objek {{domxref("Document")}}. Pada artikel ini, kita akan melihat bagaimana cara menggunakan DOM secara detail, we'll look at how to use the DOM in detail, bersamaan dengan berbagai API menarik lainnya yang dapat mengubah ruang lingkup anda dengan cara-cara yang menarik.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Cara mengambil data dari server</a></dt> + <dd>Another very common task in modern websites and applications is retrieving individual data items from the server to update sections of a webpage without having to load an entirely new page. This seemingly small detail has had a huge impact on the performance and behavior of sites, so in this article, we'll explain the concept, and look at technologies that make it possible, such as {{domxref("XMLHttpRequest")}} and the <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a>.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">Third party APIs</a></dt> + <dd>The APIs we've covered so far are built into the browser, but not all APIs are. Many large websites and services such as Google Maps, Twitter, Facebook, PayPal, etc. provide APIs allowing developers to make use of their data (e.g. displaying your twitter stream on your blog) or services (e.g. displaying custom Google Maps on your site, or using Facebook login to log in your users). This article looks at the difference between browser APIs and 3rd party APIs and shows some typical uses of the latter.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a></dt> + <dd>The browser contains some very powerful graphics programming tools, from the Scalable Vector Graphics (<a href="/en-US/docs/Web/SVG">SVG</a>) language, to APIs for drawing on HTML {{htmlelement("canvas")}} elements, (see <a href="/en-US/docs/Web/API/Canvas_API">The Canvas API</a> and <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a>). Ths article provides an introduction to the Canvas API, and further resources to allow you to learn more.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">Video and audio APIs</a></dt> + <dd>HTML5 comes with elements for embedding rich media in documents — {{htmlelement("video")}} and {{htmlelement("audio")}} — which in turn come with their own APIs for controlling playback, seeking, etc. This article shows you how to do common tasks such as creating custom playback controls.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">Client-side storage</a></dt> + <dd>Modern web browsers feature a number of different technologies that allow you to store data related to web sites and retrieve it when necessary allowing you to persist data long term, save sites offline, and more. This article explains the very basics of how these work.</dd> +</dl> diff --git a/files/id/learn/javascript/client-side_web_apis/introduction/index.html b/files/id/learn/javascript/client-side_web_apis/introduction/index.html new file mode 100644 index 0000000000..20cd0d7214 --- /dev/null +++ b/files/id/learn/javascript/client-side_web_apis/introduction/index.html @@ -0,0 +1,278 @@ +--- +title: Introduction to web APIs +slug: Learn/JavaScript/Client-side_web_APIs/Introduction +translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}</div> + +<p class="summary">First up, we'll start by looking at APIs from a high level — what are they, how do they work, how do you use them in your code, and how are they structured? We'll also take a look at what the different main classes of APIs are, and what kind of uses they have.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <td>Basic computer literacy, a basic understanding of <a href="/en-US/docs/Learn/HTML">HTML</a> and <a href="/en-US/docs/Learn/CSS">CSS</a>, JavaScript basics (see <a href="/en-US/docs/Learn/JavaScript/First_steps">first steps</a>, <a href="/en-US/docs/Learn/JavaScript/Building_blocks">building blocks</a>, <a href="/en-US/docs/Learn/JavaScript/Objects">JavaScript objects</a>).</td> + </tr> + <tr> + <th scope="row">Objective:</th> + <td>To gain familiarity with APIs, what they can do, and how you can use them in your code.</td> + </tr> + </tbody> +</table> + +<h2 id="What_are_APIs">What are APIs?</h2> + +<p>Application Programming Interfaces (APIs) are constructs made available in programming languages to allow developers to create complex functionality more easily. They abstract more complex code away from you, providing some easier syntax to use in its place.</p> + +<p>As a real-world example, think about the electricity supply in your house, apartment, or other dwellings. If you want to use an appliance in your house, you simply plug it into a plug socket and it works. You don't try to wire it directly into the power supply — to do so would be really inefficient and, if you are not an electrician, difficult and dangerous to attempt.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14317/plug-socket.png" style="display: block; height: 472px; margin: 0px auto; width: 700px;"></p> + +<p><em>Image source: <a href="https://www.flickr.com/photos/easy-pics/9518184890/in/photostream/lightbox/">Overloaded plug socket</a> by <a href="https://www.flickr.com/photos/easy-pics/">The Clear Communication People</a>, on Flickr.</em></p> + +<p>In the same way, if you want to say, program some 3D graphics, it is a lot easier to do it using an API written in a higher level language such as JavaScript or Python, rather than try to directly write low level code (say C or C++) that directly controls the computer's GPU or other graphics functions.</p> + +<div class="note"> +<p><strong>Note</strong>: See also the <a href="/en-US/docs/Glossary/API">API glossary entry</a> for further description.</p> +</div> + +<h3 id="APIs_in_client-side_JavaScript">APIs in client-side JavaScript</h3> + +<p>Client-side JavaScript, in particular, has many APIs available to it — these are not part of the JavaScript language itself, rather they are built on top of the core JavaScript language, providing you with extra superpowers to use in your JavaScript code. They generally fall into two categories:</p> + +<ul> + <li><strong>Browser APIs</strong> are built into your web browser and are able to expose data from the browser and surrounding computer environment and do useful complex things with it. For example, the <a href="/en-US/docs/Web/API/Geolocation/Using_geolocation">Geolocation API</a> provides some simple JavaScript constructs for retrieving location data so you can say, plot your location on a Google Map. In the background, the browser is actually using some complex lower-level code (e.g. C++) to communicate with the device's GPS hardware (or whatever is available to determine position data), retrieve position data, and return it to the browser environment to use in your code. But again, this complexity is abstracted away from you by the API.</li> + <li><strong>Third party APIs</strong> are not built into the browser by default, and you generally have to grab their code and information from somewhere on the Web. For example, the <a href="https://dev.twitter.com/overview/documentation">Twitter API</a> allows you to do things like displaying your latest tweets on your website. It provides a special set of constructs you can use to query the Twitter service and return specific information.</li> +</ul> + +<p> </p> + +<p> </p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13508/browser.png" style="display: block; height: 511px; margin: 0px auto; width: 815px;"></p> + +<p> </p> + +<h3 id="Relationship_between_JavaScript_APIs_and_other_JavaScript_tools">Relationship between JavaScript, APIs, and other JavaScript tools</h3> + +<p>So above, we talked about what client-side JavaScript APIs are, and how they relate to the JavaScript language. Let's recap this to make it clearer, and also mention where other JavaScript tools fit in:</p> + +<ul> + <li>JavaScript — A high-level scripting language built into browsers that allows you to implement functionality on web pages/apps. Note that JavaScript is also available in other programming environments, such as <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Node</a>. But don't worry about that for now.</li> + <li>Browser APIs — constructs built into the browser that sit on top of the JavaScript language and allow you to implement functionality more easily.</li> + <li>Third party APIs — constructs built into third-party platforms (e.g. Twitter, Facebook) that allow you to use some of those platform's functionality in your own web pages (for example, display your latest Tweets on your web page).</li> + <li>JavaScript libraries — Usually one or more JavaScript files containing <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Custom_functions">custom functions</a> that you can attach to your web page to speed up or enable writing common functionality. Examples include jQuery, Mootools and React.</li> + <li>JavaScript frameworks — The next step up from libraries, JavaScript frameworks (e.g. Angular and Ember) tend to be packages of HTML, CSS, JavaScript, and other technologies that you install and then use to write an entire web application from scratch. The key difference between a library and a framework is “Inversion of Control”. When calling a method from a library, the developer is in control. With a framework, the control is inverted: the framework calls the developer's code.</li> +</ul> + +<h2 id="What_can_APIs_do">What can APIs do?</h2> + +<p>There are a huge number of APIs available in modern browsers that allow you to do a wide variety of things in your code. You can see this by taking a look at the <a href="https://developer.mozilla.org/en-US/docs/Web/API">MDN APIs index page</a>.</p> + +<h3 id="Common_browser_APIs">Common browser APIs</h3> + +<p>In particular, the most common categories of browser APIs you'll use (and which we'll cover in this module in greater detail) are:</p> + +<ul> + <li><strong>APIs for manipulating documents</strong> loaded into the browser. The most obvious example is the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model">DOM (Document Object Model) API</a>, which allows you to manipulate HTML and CSS — creating, removing and changing HTML, dynamically applying new styles to your page, etc. Every time you see a popup window appear on a page, or some new content displayed, for example, that's the DOM in action. Find out more about these types of API in <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipulating documents</a>.</li> + <li><strong>APIs that fetch data from the server</strong> to update small sections of a webpage on their own are very commonly used. This seemingly small detail has had a huge impact on the performance and behaviour of sites — if you just need to update a stock listing or list of available new stories, doing it instantly without having to reload the whole entire page from the server can make the site or app feel much more responsive and "snappy". APIs that make this possible include <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest" title="XMLHttpRequest is an API that provides client functionality for transferring data between a client and a server. It provides an easy way to retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just a part of the page without disrupting what the user is doing."><code>XMLHttpRequest</code></a> and the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">Fetch API</a>. You may also come across the term <strong>Ajax</strong>, which describes this technique. Find out more about such APIs in <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Fetching data from the server</a>.</li> + <li><strong>APIs for drawing and manipulating graphics</strong> are now widely supported in browsers — the most popular ones are <a href="/en-US/docs/Web/API/Canvas_API">Canvas</a> and <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a>, which allow you to programmatically update the pixel data contained in an HTML {{htmlelement("canvas")}} element to create 2D and 3D scenes. For example, you might draw shapes such as rectangles or circles, import an image onto the canvas, and apply a filter to it such as sepia or grayscale using the Canvas API, or create a complex 3D scene with lighting and textures using WebGL. Such APIs are often combined with APIs for creating animation loops (such as {{domxref("window.requestAnimationFrame()")}}) and others to make constantly updating scenes like cartoons and games.</li> + <li><strong><a href="https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery">Audio and Video APIs</a></strong> like {{domxref("HTMLMediaElement")}}, the <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a>, and <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> allow you to do really interesting things with multimedia such as creating custom UI controls for playing audio and video, displaying text tracks like captions and subtitles along with your videos, grabbing video from your web camera to be manipulated via a canvas (see above) or displayed on someone else's computer in a web conference, or adding effects to audio tracks (such as gain, distortion, panning, etc).</li> + <li><strong>Device APIs</strong> are basically APIs for manipulating and retrieving data from modern device hardware in a way that is useful for web apps. We've already talked about the Geolocation API accessing the device's location data so you can plot your position on a map. Other examples include telling the user that a useful update is available on a web app via system notifications (see the <a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a>) or vibration hardware (see the <a href="/en-US/docs/Web/API/Vibration_API">Vibration API</a>).</li> + <li><strong>Client-side storage APIs</strong> are becoming a lot more widespread in web browsers — the ability to store data on the client-side is very useful if you want to create an app that will save its state between page loads, and perhaps even work when the device is offline. There are a number of options available, e.g. simple name/value storage with the <a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage API</a>, and more complex tabular data storage with the <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB API</a>.</li> +</ul> + +<h3 id="Common_third-party_APIs">Common third-party APIs</h3> + +<p>Third party APIs come in a large variety; some of the more popular ones that you are likely to make use of sooner or later are:</p> + +<ul> + <li>The <a href="https://dev.twitter.com/overview/documentation">Twitter API</a>, which allows you to do things like displaying your latest tweets on your website.</li> + <li>The <a href="https://developers.google.com/maps/">Google Maps API</a> allows you to do all sorts of things with maps on your web pages (funnily enough, it also powers Google Maps). This is now an entire suite of APIs, which handle a wide variety of tasks, as evidenced by the <a href="https://developers.google.com/maps/documentation/api-picker">Google Maps API Picker</a>.</li> + <li>The <a href="https://developers.facebook.com/docs/">Facebook suite of APIs</a> enables you to use various parts of the Facebook ecosystem to benefit your app, for example by providing app login using Facebook login, accepting in-app payments, rolling out targetted ad campaigns, etc.</li> + <li>The <a href="https://developers.google.com/youtube/">YouTube API</a>, which allows you to embed YouTube videos on your site, search YouTube, build playlists, and more.</li> + <li>The <a href="https://www.twilio.com/">Twilio API</a>, which provides a framework for building voice and video call functionality into your app, sending SMS/MMS from your apps, and more.</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: You can find information on a lot more 3rd party APIs at the <a href="http://www.programmableweb.com/category/all/apis">Programmable Web API directory</a>.</p> +</div> + +<h2 id="How_do_APIs_work">How do APIs work?</h2> + +<p>Different JavaScript APIs work in slightly different ways, but generally, they have common features and similar themes to how they work.</p> + +<h3 id="They_are_based_on_objects">They are based on objects</h3> + +<p>APIs are interacted with in your code using one or more <a href="/en-US/docs/Learn/JavaScript/Objects">JavaScript objects</a>, which serve as containers for the data the API uses (contained in object properties), and the functionality the API makes available (contained in object methods).</p> + +<div class="note"> +<p><strong>Note</strong>: If you are not already familiar with how objects work, you should go back and work through our <a href="/en-US/docs/Learn/JavaScript/Objects">JavaScript objects</a> module before continuing.</p> +</div> + +<p>Let's return to the example of the Geolocation API — this is a very simple API that consists of a few simple objects:</p> + +<ul> + <li>{{domxref("Geolocation")}}, which contains three methods for controlling the retrieval of geodata.</li> + <li>{{domxref("Position")}}, which represents the position of a device at a given time — this contains a {{domxref("Coordinates")}} object that contains the actual position information, plus a timestamp representing the given time.</li> + <li>{{domxref("Coordinates")}}, which contains a whole lot of useful data on the device position, including latitude and longitude, altitude, velocity and direction of movement, and more.</li> +</ul> + +<p>So how do these objects interact? If you look at our <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/maps-example.html">maps-example.html</a> example (<a href="http://mdn.github.io/learning-area/javascript/apis/introduction/maps-example.html">see it live also</a>), you'll see the following code:</p> + +<pre class="brush: js">navigator.geolocation.getCurrentPosition(function(position) { + var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude); + var myOptions = { + zoom: 8, + center: latlng, + mapTypeId: google.maps.MapTypeId.TERRAIN, + disableDefaultUI: true + } + var map = new google.maps.Map(document.querySelector("#map_canvas"), myOptions); +});</pre> + +<div class="note"> +<p><strong>Note</strong>: When you first load up the above example, you should be given a dialog box asking if you are happy to share your location with this application (see the {{anch("They have additional security mechanisms where appropriate")}} section later in the article). You need to agree to this to be able to plot your location on the map. If you still can't see the map, you may need to set your permissions manually; you can do this in various ways depending on what browser you are using; for example in Firefox go to > <em>Tools</em> > <em>Page Info</em> > <em>Permissions</em>, then change the setting for <em>Share Location</em>; in Chrome go to <em>Settings</em> > <em>Privacy</em> > <em>Show advanced settings</em> > <em>Content settings</em> then change the settings for <em>Location</em>.</p> +</div> + +<p>We first want to use the {{domxref("Geolocation.getCurrentPosition()")}} method to return the current location of our device. The browser's {{domxref("Geolocation")}} object is accessed by calling the {{domxref("Navigator.geolocation")}} property, so we start off by using</p> + +<pre class="brush: js">navigator.geolocation.getCurrentPosition(function(position) { ... });</pre> + +<p>This is equivalent to doing something like</p> + +<pre class="brush: js">var myGeo = navigator.geolocation; +myGeo.getCurrentPosition(function(position) { ... });</pre> + +<p>But we can use the dot syntax to chain our property/method access together, reducing the number of lines we have to write.</p> + +<p>The {{domxref("Geolocation.getCurrentPosition()")}} method only has a single mandatory parameter, which is an anonymous function that will run when the device's current position has been successfully retrieved. This function itself has a parameter, which contains a {{domxref("Position")}} object representing the current position data.</p> + +<div class="note"> +<p><strong>Note</strong>: A function that is taken by another function as an argument is called a <a href="/en-US/docs/Glossary/Callback_function">callback function</a>.</p> +</div> + +<p>This pattern of invoking a function only when an operation has been completed is very common in JavaScript APIs — making sure one operation has completed before trying to use the data the operation returns in another operation. These are called <strong><a href="/en-US/docs/Glossary/Asynchronous">asynchronous</a> operations</strong>. Because getting the device's current position relies on an external component (the device's GPS or other geolocation hardware), we can't guarantee that it will be done in time to just immediately use the data it returns. Therefore, something like this wouldn't work:</p> + +<pre class="brush: js example-bad">var position = navigator.geolocation.getCurrentPosition(); +var myLatitude = position.coords.latitude;</pre> + +<p>If the first line had not yet returned its result, the second line would throw an error, because the position data would not yet be available. For this reason, APIs involving asynchronous operations are designed to use {{glossary("callback function")}}s, or the more modern system of <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a>, which were made available in ECMAScript 6 and are widely used in newer APIs.</p> + +<p>We are combining the Geolocation API with a third party API — the Google Maps API — which we are using to plot the location returned by <code>getCurrentPosition()</code> on a Google Map. We make this API available on our page by linking to it — you'll find this line in the HTML:</p> + +<pre class="brush: html"><script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyDDuGt0E5IEGkcE6ZfrKfUtE9Ko_de66pA"></script></pre> + +<p>To use the API, we first create a <code>LatLng</code> object instance using the <code>google.maps.LatLng()</code> constructor, which takes our geolocated {{domxref("Coordinates.latitude")}} and {{domxref("Coordinates.longitude")}} values as parameters:</p> + +<pre class="brush: js">var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);</pre> + +<p>This object is itself set as the value of the <code>center</code> property of an options object that we've called <code>myOptions</code>. We then create an object instance to represent our map by calling the <code>google.maps.Map()</code> constructor, passing it two parameters — a reference to the {{htmlelement("div")}} element we want to render the map on (with an ID of <code>map_canvas</code>), and the options object we defined just above it.</p> + +<pre class="brush: js">var myOptions = { + zoom: 8, + center: latlng, + mapTypeId: google.maps.MapTypeId.TERRAIN, + disableDefaultUI: true +} + +var map = new google.maps.Map(document.querySelector("#map_canvas"), myOptions);</pre> + +<p>With this done, our map now renders.</p> + +<p>This last block of code highlights two common patterns you'll see across many APIs. First of all, API objects commonly contain constructors, which are invoked to create instances of those objects that you'll use to write your program. Second, API objects often have several options available that can be tweaked to get the exact environment you want for your program. API constructors commonly accept options objects as parameters, which is where you'd set such options.</p> + +<div class="note"> +<p><strong>Note</strong>: Don't worry if you don't understand all the details of this example immediately. We'll cover using third party APIs in a lot more detail in a future article.</p> +</div> + +<h3 id="They_have_recognizable_entry_points">They have recognizable entry points</h3> + +<p>When using an API, you should make sure you know where the entry point is for the API. In The Geolocation API, this is pretty simple — it is the {{domxref("Navigator.geolocation")}} property, which returns the browser's {{domxref("Geolocation")}} object that all the useful geolocation methods are available inside.</p> + +<p>The Document Object Model (DOM) API has an even simpler entry point — its features tend to be found hanging off the {{domxref("Document")}} object, or an instance of an HTML element that you want to affect in some way, for example:</p> + +<pre class="brush: js">var em = document.createElement('em'); // create a new em element +var para = document.querySelector('p'); // reference an existing p element +em.textContent = 'Hello there!'; // give em some text content +para.appendChild(em); // embed em inside para</pre> + +<p>Other APIs have slightly more complex entry points, often involving creating a specific context for the API code to be written in. For example, the Canvas API's context object is created by getting a reference to the {{htmlelement("canvas")}} element you want to draw on, and then calling its {{domxref("HTMLCanvasElement.getContext()")}} method:</p> + +<pre class="brush: js">var canvas = document.querySelector('canvas'); +var ctx = canvas.getContext('2d');</pre> + +<p>Anything that we want to do to the canvas is then achieved by calling properties and methods of the content object (which is an instance of {{domxref("CanvasRenderingContext2D")}}), for example:</p> + +<pre class="brush: js">Ball.prototype.draw = function() { + ctx.beginPath(); + ctx.fillStyle = this.color; + ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI); + ctx.fill(); +};</pre> + +<div class="note"> +<p><strong>Note</strong>: You can see this code in action in our <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/bouncing-balls.html">bouncing balls demo</a> (see it <a href="http://mdn.github.io/learning-area/javascript/apis/introduction/bouncing-balls.html">running live</a> also).</p> +</div> + +<h3 id="They_use_events_to_handle_changes_in_state">They use events to handle changes in state</h3> + +<p>We already discussed events earlier on in the course, in our <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a> article — this article looks in detail at what client-side web events are and how they are used in your code. If you are not already familiar with how client-side web API events work, you should go and read this article first before continuing.</p> + +<p>Some web APIs contain no events, but some contain a number of events. The handler properties that allow us to run functions when events fire are generally listed in our reference material in separate "Event handlers" sections. As a simple example, instances of the <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> object (each one represents an HTTP request to the server to retrieve a new resource of some kind) have a number of events available on them, for example the <code>load</code> event is fired when a response has been successfully returned containing the requested resource, and it is now available.</p> + +<p>The following code provides a simple example of how this would be used:</p> + +<pre class="brush: js">var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json'; +var request = new XMLHttpRequest(); +request.open('GET', requestURL); +request.responseType = 'json'; +request.send(); + +request.onload = function() { + var superHeroes = request.response; + populateHeader(superHeroes); + showHeroes(superHeroes); +}</pre> + +<div class="note"> +<p><strong>Note</strong>: You can see this code in action in our <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/ajax.html">ajax.html</a> example (<a href="http://mdn.github.io/learning-area/javascript/apis/introduction/ajax.html">see it live</a> also).</p> +</div> + +<p>The first five lines specify the location of resource we want to fetch, create a new instance of a request object using the <code>XMLHttpRequest()</code> constructor, open an HTTP <code>GET</code> request to retrieve the specified resource, specify that the response should be sent in JSON format, then send the request.</p> + +<p>The <code>onload</code> handler function then specifies what we do with the response. We know the response will be successfully returned and available after the load event has required (unless an error occurred), so we save the response containing the returned JSON in the <code>superHeroes</code> variable, then pass it to two different functions for further processing.</p> + +<h3 id="They_have_additional_security_mechanisms_where_appropriate">They have additional security mechanisms where appropriate</h3> + +<p>WebAPI features are subject to the same security considerations as JavaScript and other web technologies (for example <a href="/en-US/docs/Web/Security/Same-origin_policy">same-origin policy</a>), but they sometimes have additional security mechanisms in place. For example, some of the more modern WebAPIs will only work on pages served over HTTPS due to them transmitting potentially sensitive data (examples include <a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a> and <a href="/en-US/docs/Web/API/Push_API">Push</a>).</p> + +<p>In addition, some WebAPIs request permission to be enabled from the user once calls to them are made in your code. As an example, you may have noticed a dialog like the following when loading up our earlier <a href="/en-US/docs/Web/API/Geolocation">Geolocation</a> example:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14313/location-permission.png" style="border-style: solid; border-width: 1px; display: block; height: 188px; margin: 0px auto; width: 413px;"></p> + +<p>The <a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a> asks for permission in a similar fashion:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14315/notification-permission.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<p>These permission prompts are given to users for security — if they weren't in place, then sites could start secretly tracking your location without you knowing it, or spamming you with a lot of annoying notifications.</p> + +<h2 id="Summary">Summary</h2> + +<p>At this point, you should have a good idea of what APIs are, how they work, and what you can do with them in your JavaScript code. You are probably excited to start actually doing some fun things with specific APIs, so let's go! Next up, we'll look at manipulating documents with the Document Object Model (DOM).</p> + +<p>{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Introduction to web APIs</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipulating documents</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Fetching data from the server</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">Third party APIs</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">Video and audio APIs</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">Client-side storage</a></li> +</ul> diff --git a/files/id/learn/javascript/first_steps/index.html b/files/id/learn/javascript/first_steps/index.html new file mode 100644 index 0000000000..6f7e166951 --- /dev/null +++ b/files/id/learn/javascript/first_steps/index.html @@ -0,0 +1,63 @@ +--- +title: Memulai Javascript +slug: Learn/JavaScript/First_steps +tags: + - Arrays + - Article + - Assessment + - Beginner + - Guide + - JavaScript + - Landing + - Operator + - String + - Variables +translation_of: Learn/JavaScript/First_steps +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Pada modul Javascript pertama kita, kita akan mengawali dengan menjawab beberapa pertanyaan fundamental seperti "Apa itu JavaScript?", "seperti apa?", dan "untuk apa?", sebelum anda melanjutkan belajar menulis javascript pertama kali. Setelah itu, kita akan mendiskusikan beberapa kunci block pembangun secara detail, Seperti variable, string, number dan array.</p> + +<h2 id="Persyaratan">Persyaratan</h2> + +<p>Sebelum memulai modul ini, anda tidak perlu memiliki pemahaman javascript sebelumnya, namun anda perlu setidaknya pernah menggunakan HTML and CSS. Anda disarankan belajar dari modul berikut sebelum memulai di javascript:</p> + +<ul> + <li><a href="/id/docs/Learn/Getting_started_with_the_web">Memulai dengan Web</a> (dimana didalamnya terdapat <a href="/id/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Pengenalan dasar JavaScript </a>)</li> + <li><a href="/id/docs/Web/Guide/HTML/Introduction">Pegenalan HTML</a></li> + <li><a href="/id/docs/Learn/CSS/Introduction_to_CSS">Pengenalan CSS</a></li> +</ul> + +<div class="note"> +<p><strong>Catatan</strong>: jika anda bekerja dengan menggunakan computer/tablet/perangkat lainnya dimana anda tidak memiliki kemampuan untuk membuat file anda sendiri, anda bisa mencoba (sangat disarankan) contoh kode di online coding program seperti <a href="http://jsbin.com/">JSBin</a> atau <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Panduan">Panduan</h2> + +<dl> + <dt><a href="/id/docs/Learn/JavaScript/First_steps/What_is_JavaScript">Apa itu JavaScript?</a></dt> + <dd>Selamat datang di Kursus Javascript MDN untuk pemula! pada artikel pertama kita akan melihat javascript dari level tertinggi, menjawab pertanyaan seperti "Apa itu javascript?", dan "untuk apa?", dan memastikan anda nyaman dengan tujuan dari JavaScript.</dd> + <dt><a href="/id/docs/Learn/JavaScript/First_steps/A_first_splash">Percikan pertama Javascript</a></dt> + <dd>Sekarang anda akan belajar teori tentang JavaScript, dan apa yang bisa anda lakukan dengan itu, kita akan memberikan anda kursus kilat pada dasar JavaScript melalui tutorial yang praktis. Disini anda akan membuat permainan sederhana "Guess the number" langkah demi langkah.</dd> + <dt><a href="/id/docs/Learn/JavaScript/First_steps/What_went_wrong">Apa yang salah? Memecahkan Masalah JavaScript</a></dt> + <dd>Ketika anda membangun permainan "Guess the number" pada artikel sebelumnya, anda mungkin telah menemukan bahwa itu tidak berjalan dengan baik. Jangan takut — artikel ini akan membantu anda memecahkan masalah tersebut dengan memberikan anda beberapa tips sederhana untuk mencari dan memperbaiki error di program javascript.</dd> + <dt><a href="/id/docs/Learn/JavaScript/First_steps/Variables">Menyimpan informasi yang anda butuhkan — Variable</a></dt> + <dd>Setelah membaca beberapa artikel, anda perlu mengetahui apa itu javascript, apa yang bisa dimanfaatkan bagi anda, bagaimana menggunakannya dengan teknologi web lain, dan seperti apa fitur utama dari level tertinggi. Pada artikel ini kita akan kembali ke hal yang lebihdasar, melihat bagaimana bekerja dengan hal paling dasar pada block pembangun JavaScript — Variable.</dd> + <dt><a href="/id/docs/Learn/JavaScript/First_steps/Math">Matematika dasar di JavaScript — number dan operator</a></dt> + <dd>Pada poin ini anda akan mendiskusikan matematika di JavaScript — bagaimana kita mengabungkan operator dan fitur lain untuk berhasil memanipulasi angka melakukan perintah kita.</dd> + <dt><a href="/id/docs/Learn/JavaScript/First_steps/Strings">Penanganan text — strings di JavaScript</a></dt> + <dd>Selanjunya kita akan mengalihkan perhatian kita pada string — ini adalah potongan teks di programming. Pada artikel ini kita akan melihat pada semua hal umum yang sangat perlu anda tahu tentang string ketika belajar JavaScript, seperti membuat string, memunculkan tanda kutip pada string, dan menggabungkanya.</dd> + <dt><a href="/id/docs/Learn/JavaScript/First_steps/Useful_string_methods">Metod string yang berguna</a></dt> + <dd>Sekarang kita telah melihat pada dasar string, mari kita beralih dan mulai memikirkan tentang operasi apa yang berguna yang bisa kita gunakan dengan method built-in pada string, seperti mencari panjang teks string, menggabung dan memisahkan string, mensubtitusi sebuah karakter pada string ke lainnya, dan banyak lagi.</dd> + <dt><a href="/id/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></dt> + <dd>Pada artikel terakhir pada modul ini, kita akan melihat pada array — cara rapi untuk menyimpan daftar item pada sebuah nama variabel. Disini kita akan melihat kenapa ini berguna, kemudian mencari tahu bagaimana membuat array, mengambil, menambah, dan menghapus item yang tersimpan pada array, dan banyak lagi.</dd> +</dl> + +<h2 id="Penilaian">Penilaian</h2> + +<p>Penilaian berikut akan menguji pemahaman anda tentang dasar javascrip berdasarkan paduan yang telah diberikan.</p> + +<dl> + <dt><a href="/id/docs/Learn/JavaScript/First_steps/Silly_story_generator">Silly story generator</a></dt> + <dd>Pada penilaian ini anda ditugaskan mengambil beberapa pengetahuan yang anda dapatkan dari modul artikel ini dan menerapkannya dengan membuat sebuah aplikasi seru yang menghasilkan cerita konyol secara acak. Selamat Bersenang — senang!</dd> +</dl> diff --git a/files/id/learn/javascript/first_steps/what_is_javascript/index.html b/files/id/learn/javascript/first_steps/what_is_javascript/index.html new file mode 100644 index 0000000000..f85ec8b2e1 --- /dev/null +++ b/files/id/learn/javascript/first_steps/what_is_javascript/index.html @@ -0,0 +1,433 @@ +--- +title: What is JavaScript? +slug: Learn/JavaScript/First_steps/What_is_JavaScript +tags: + - 3rd party + - API + - Artikel + - Bahasa Indonesia + - Browser + - Coding + - JavaScript + - Learn + - Pemula + - programming +translation_of: Learn/JavaScript/First_steps/What_is_JavaScript +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</div> + +<p class="summary">Selamat datang di kursus Javascript MDN tingkat pemula ini! Di artikel ini kita akan melihat JavaScript dari level tinggi, menjawab pertanyaan seperti "Apa itu?" dan "Bagaimana kamu dapat melakukannya", dan memastikan kamu nyaman dengan kegunaan JavaScript </p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <td>Basic computer literacy, a basic understanding of HTML and CSS.</td> + </tr> + <tr> + <th scope="row">Objective:</th> + <td>To gain familiarity with what JavaScript is, what it can do, and how it fits into a web site.</td> + </tr> + </tbody> +</table> + +<h2 id="Definisi_Tingkat_Tinggi">Definisi Tingkat Tinggi</h2> + +<p>JavaScript merupakan bahasa pemrograman yang memungkinkan anda untuk melakukan sesuatu yang kompleks di halaman web — ketika halaman web dibuka, pasti ada sesuatu selain menampilkan halaman statis dan informasi — halaman web akan menampilkan konten terbaru, map interaktif, animasi 2D/3D, scrolling video, dan lain-lain. — Apabila semua itu ada di sebuah halaman web, sudah pasti halaman itu menggunakan bahasa JavaScript. JavaScript merupakan lapisan/layer ketiga dari <em>standard web technologies</em>, yang pertama <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML">HTML</a> dan kedua <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">CSS</a>. Anda dapat melihat dokumentasinya di link yang di sediakan.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13502/cake.png" style="display: block; margin: 0 auto;"></p> + +<ul> + <li>{{glossary("HTML")}} merupakan bahasa markup untuk membuat kerangka dan memberikan konten terhadap halaman web. sebagai contoh, membuat <em>paragraph, headings, </em>dan <em>data tables, </em>atau menyematkan gambar dan video di halam web.</li> + <li>{{glossary("CSS")}} adalah bahasa yang digunakan untuk mengubah gaya/<em>styling </em>pada halaman HTML kita, sehingga terlihat lebih menarik. sebagai contoh, mengatur warna background dan font, mengatur layout konten dengan kolom yang banyak.</li> + <li>{{glossary("JavaScript")}} adalah bahasa program yang memungkinkan kita membuat konten terupdate secara dinamis, mengontrol multimedia, membuat animasi, dan membuat apa saja (Oke, tidak semua bisa dibuat oleh JavaScript, tetapi ini sangatlah luar biasa karena, hanya beberapa baris kode kalian dapat membuat hal yang menakjubkan di JavaScript.)</li> +</ul> + +<p>Mari kita buat label teks sederhana sebagai contoh. kita bisa gunakan HTML untuk strukturnya.</p> + +<pre class="brush: html"><p>Player 1: Chris</p></pre> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13422/just-html.png" style="height: 28px; width: 108px;"></p> + +<p>Lalu kita tambahkan CSS agar terlihat menarik.</p> + +<pre class="brush: css">p { + font-family: 'helvetica neue', helvetica, sans-serif; + letter-spacing: 1px;j + text-transform: uppercase; + text-align: center; + border: 2px solid rgba(0,0,200,0.6); + background: rgba(0,0,200,0.3); + color: rgba(0,0,200,0.6); + box-shadow: 1px 1px 2px rgba(0,0,200,0.4); + border-radius: 10px; + padding: 3px 10px; + display: inline-block; + cursor: pointer; +}</pre> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13424/html-and-css.png" style="height: 48px; width: 187px;"></p> + +<p>Dan yang terakhir, kita akan menambahkan JavaScript sehingga kita bisa menambahkan <em>Player</em>:</p> + +<pre class="brush: js" dir="rtl">var para = document.querySelector('p'); + +para.addEventListener('click', updateName); + +function updateName() { + var name = prompt('Enter a new name'); + para.textContent = 'Player 1: ' + name; +} +</pre> + +<p>{{ EmbedLiveSample('Definisi_Tingkat_Tinggi', '', '', '', 'Learn/JavaScript/First_steps/What_is_JavaScript') }}</p> + +<p>Coba kalian klik label teks yang sudah kita buat dan lihat apa yang terjadi!. Kalian akan diminta menuliskan nama untuk Player 1. (Note: Kalian bisa melihat demo ini di GitHub — <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/javascript-label.html">source code</a>, atau <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/javascript-label.html">live preview</a>)</p> + +<p>JavaScript bisa melakukan sesuatu lebih dari yang diatas! — mari kita jelajahi lebih tentang JavaScript.</p> + +<h2 id="Lalu_apa_yang_bisa_dilakukannya">Lalu apa yang bisa dilakukannya?</h2> + +<p>Inti dari bahasa JavaScript terdiri dari beberapa fitur umum pada bahasa program lainnya yang memungkinkan kita:</p> + +<ul> + <li>Menyimpan nilai-nilai didalam variabel. Diatas merupakan contoh untuk penyimpanan variabel <code>name</code>, kita meminta teks label untuk menambahkan nama baru untuk disimpan ke variabel <code>name</code>.</li> + <li> + <p>Operasi dalam teks (atau "string" dalam ketentuan pemrograman). Contoh diatas kita mengambil string "Player 1: " dan menggabungkan variabel <code>name</code> untuk membuat label teks yang lengkap menjadi, "Player 1: Chris".</p> + </li> + <li> + <p>Menjalankan kode sebagai respon terhadap <em>event</em> yang sedang terjadi di halaman web. Sebagai contoh seperti diatas, kita menggunakan <em>event </em>{{Event("click")}} untuk mendeteksi apabila kita telah meng-klik label teks "Player 1 : Chris" maka JavaScript akan dijalankan.</p> + </li> + <li>Dan masih banyak lagi.</li> +</ul> + +<p>What is even more exciting however is the functionality built on top of the core JavaScript language. So-called <strong>Application Programming Interfaces</strong> (<strong>APIs</strong>) provide you with extra superpowers to use in your JavaScript code.</p> + +<p>APIs are ready-made sets of code building blocks that allow a developer to implement programs that would otherwise be hard or impossible to implement. They do the same thing for programming that ready-made furniture kits do for home building — it is much easier to take ready-cut panels and screw them together to make a bookshelf than it is to work out the design yourself, go and find the correct wood, cut all the panels to the right size and shape, find the correct-sized screws, and <em>then</em> put them together to make a bookshelf.</p> + +<p>They generally fall into two categories.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13508/browser.png" style="display: block; height: 511px; margin: 0px auto; width: 815px;"></p> + +<p><strong>Browser APIs</strong> are built into your web browser, and are able to expose data from the surrounding computer environment, or do useful complex things. For example:</p> + +<ul> + <li>The {{domxref("Document_Object_Model","DOM (Document Object Model) API")}} allows you to manipulate HTML and CSS, creating, removing and changing HTML, dynamically applying new styles to your page, etc. Everytime you see a popup window appear on a page, or some new content displayed (as we saw above in our simple demo) for example, that's the DOM in action.</li> + <li>The {{domxref("Geolocation","Geolocation API")}} retrieves geographical information. This is how <a href="https://www.google.com/maps">Google Maps</a> is able to find your location, and plot it on a map.</li> + <li>The {{domxref("Canvas_API","Canvas")}} and {{domxref("WebGL_API","WebGL")}} APIs allow you to create animated 2D and 3D graphics. People are doing some amazing things using these web technologies —see <a href="https://www.chromeexperiments.com/webgl">Chrome Experiments</a> and <a href="http://webglsamples.org/">webglsamples</a>.</li> + <li><a href="https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery">Audio and Video APIs</a> like {{domxref("HTMLMediaElement")}} and {{domxref("WebRTC API", "WebRTC")}} allow you to do really interesting things with multimedia, such as play audio and video right in a web page, or grab video from your web camera and display it on someone else's computer (try our simple <a href="http://chrisdavidmills.github.io/snapshot/">Snapshot demo</a> to get the idea).</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: Many of the above demos won't work in an older browser — when experimenting, it's a good idea to use a modern browser like Firefox, Chrome, Edge or Opera to run your code in. You will need to consider <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">cross browser testing</a> in more detail when you get closer to delivering production code (i.e. real code that real customers will use).</p> +</div> + +<p><strong>Third party APIs</strong> are not built into the browser by default, and you generally have to grab their code and information from somewhere on the Web. For example:</p> + +<ul> + <li>The <a href="https://dev.twitter.com/overview/documentation">Twitter API</a> allows you to do things like displaying your latest tweets on your website.</li> + <li>The <a href="https://developers.google.com/maps/">Google Maps API</a> allows you to embed custom maps into your website, and other such functionality.</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: These APIs are advanced, and we'll not be covering any of these in this module. You can find out much more about these in our <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Client-side web APIs module</a>.</p> +</div> + +<p>There's a lot more available, too! However, don't get over excited just yet. You won't be able to build the next Facebook, Google Maps or Instagram after studying JavaScript for 24 hours — there are a lot of basics to cover first. And that's why you're here — let's move on!</p> + +<h2 id="What_is_JavaScript_doing_on_your_page">What is JavaScript doing on your page?</h2> + +<p>Here we'll start actually looking at some code, and while doing so explore what actually happens when you run some JavaScript in your page.</p> + +<p>Let's briefly recap the story of what happens when you load a web page in a browser (first talked about in our <a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_does_CSS_actually_work">How CSS works</a> article). When you load a web page in your browser, you are running your code (the HTML, CSS, and JavaScript) inside an execution environment (the browser tab). This is like a factory that takes in raw materials (the code) and outputs a product (the web page).</p> + + + + + +<h4 id="sect1" style="display: block; margin: 0px auto;"></h4> + + + +<p>The JavaScript is executed by the browser's JavaScript engine, after the HTML and CSS have been assembled and put together into a web page. This ensures that the structure and style of the page are already in place by the time the JavaScript starts to run.</p> + +<p>This is a good thing, as a very common use of JavaScript is to dynamically modify HTML and CSS to update a user interface, via the Document Object Model API (as mentioned above). If the JavaScript loaded and tried to run before the HTML and CSS were there to affect, then errors would occur.</p> + +<h3 id="Browser_security">Browser security</h3> + +<p>Each browser tab is its own separate bucket for running code in (these buckets are called "execution environments" in technical terms) — this means that in most cases the code in each tab is run completely separately, and the code in one tab cannot directly affect the code in another tab — or on another website. This is a good security measure — if this were not the case, then pirates could start writing code to steal information from other websites, and other such bad things.</p> + +<div class="note"> +<p><strong>Note</strong>: There are ways to send code and data between different websites/tabs in a safe manner, but these are advanced techniques that we won't cover in this course.</p> +</div> + +<h3 id="JavaScript_running_order">JavaScript running order</h3> + +<p>When the browser encounters a block of JavaScript, it generally runs it in order, from top to bottom. This means that you need to be careful what order you put things in. For example, let's return to the block of JavaScript we saw in our first example:</p> + +<pre class="brush: js">var para = document.querySelector('p'); + +para.addEventListener('click', updateName); + +function updateName() { + var name = prompt('Enter a new name'); + para.textContent = 'Player 1: ' + name; +}</pre> + +<p>Here we are selecting a text paragraph (line 1), then attaching an event listener to it (line 3) so that when the paragraph is clicked, the <code>updateName()</code> code block (lines 5–8) is run. The <code>updateName()</code> code block (these types of reusable code blocks are called "functions") asks the user for a new name, and then inserts that name into the paragraph to update the display.</p> + +<p>If you swapped the order of the first two lines of code, it would no longer work — instead, you'd get an error returned in the browser developer console — <code>TypeError: para is undefined</code>. This means that the <code>para</code> object does not exist yet, so we can't add an event listener to it.</p> + +<div class="note"> +<p><strong>Note</strong>: This is a very common error — you need to be careful that the objects referenced in your code exist before you try to do stuff to them.</p> +</div> + +<h3 id="Interpreted_versus_compiled_code">Interpreted versus compiled code</h3> + +<p>You might hear the terms <strong>interpreted</strong> and <strong>compiled</strong> in the context of programming. In interpreted languages, the code is run from top to bottom and the result of running the code is immediately returned. You don't have to transform the code into a different form before the browser runs it.</p> + +<p>Compiled languages on the other hand are transformed (compiled) into another form before they are run by the computer. For example C/C++ are compiled into assembly language that is then run by the computer.</p> + +<p>JavaScript is a lightweight interpreted programming language. Both approaches have different advantages, which we won't discuss at this point.</p> + +<h3 id="Server-side_versus_client-side_code">Server-side versus client-side code</h3> + +<p>You might also hear the terms <strong>server-side</strong> and <strong>client-side</strong> code, especially in the context of web development. Client-side code is code that is run on the user's computer — when a web page is viewed, the page's client-side code is downloaded, then run and displayed by the browser. In this JavaScript module we are explicitly talking about <strong>client-side JavaScript</strong>.</p> + +<p>Server-side code on the other hand is run on the server, then its results are downloaded and displayed in the browser. Examples of popular server-side web languages include PHP, Python, Ruby, and ASP.NET. And JavaScript! JavaScript can also be used as a server-side language, for example in the popular Node.js environment — you can find out more about server-side JavaScript in our <a href="/en-US/docs/Learn/Server-side">Dynamic Websites – Server-side programming</a> topic.</p> + +<h3 id="Dynamic_versus_static_code">Dynamic versus static code</h3> + +<p>The word <strong>dynamic</strong> is used to describe both client-side JavaScript, and server-side languages — it refers to the ability to update the display of a web page/app to show different things in different circumstances, generating new content as required. Server-side code dynamically generates new content on the server, e.g. pulling data from a database, whereas client-side JavaScript dynamically generates new content inside the browser on the client, e.g. creating a new HTML table, filling it with data requested from the server, then displaying the table in a web page shown to the user. The meaning is slightly different in the two contexts, but related, and both approaches (server-side and client-side) usually work together.</p> + +<p>A web page with no dynamically updating content is referred to as <strong>static</strong> — it just shows the same content all the time.</p> + +<h2 id="How_do_you_add_JavaScript_to_your_page">How do you add JavaScript to your page?</h2> + +<p>JavaScript is applied to your HTML page in a similar manner to CSS. Whereas CSS uses {{htmlelement("link")}} elements to apply external stylesheets and {{htmlelement("style")}} elements to apply internal stylesheets to HTML, JavaScript only needs one friend in the world of HTML — the {{htmlelement("script")}} element. Let's learn how this works.</p> + +<h3 id="Internal_JavaScript">Internal JavaScript</h3> + +<ol> + <li>First of all, make a local copy of our example file <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript.html">apply-javascript.html</a>. Save it in a directory somewhere sensible.</li> + <li>Open the file in your web browser and in your text editor. You'll see that the HTML creates a simple web page containing a clickable button.</li> + <li>Next, go to your text editor and add the following in your head — just before your closing <code></head></code> tag: + <pre class="brush: html"><script> + + // JavaScript goes here + +</script></pre> + </li> + <li>Now we'll add some JavaScript inside our {{htmlelement("script")}} element to make the page do something more interesting — add the following code just below the "// JavaScript goes here" line: + <pre>document.addEventListener("DOMContentLoaded", function() { + function createParagraph() { + var para = document.createElement('p'); + para.textContent = 'You clicked the button!'; + document.body.appendChild(para); + } + + var buttons = document.querySelectorAll('button'); + + for(var i = 0; i < buttons.length ; i++) { + buttons[i].addEventListener('click', createParagraph); + } +});</pre> + </li> + <li>Save your file and refresh the browser — now you should see that when you click the button, a new paragraph is generated and placed below.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: If your example doesn't seem to work, go through the steps again and check that you did everything right. Did you save your local copy of the starting code as a <code>.html</code> file? Did you add your {{htmlelement("script")}} element just before the <code></head></code> tag? Did you enter the JavaScript exactly as shown? <strong>JavaScript is case sensitive, and very fussy, so you need to enter the syntax exactly as shown, otherwise it may not work.</strong></p> +</div> + +<div class="note"> +<p><strong>Note</strong>: You can see this version on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">apply-javascript-internal.html</a> (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">see it live too</a>).</p> +</div> + +<h3 id="External_JavaScript">External JavaScript</h3> + +<p>This works great, but what if we wanted to put our JavaScript in an external file? Let's explore this now.</p> + +<ol> + <li>First, create a new file in the same directory as your sample HTML file. Call it <code>script.js</code> — make sure it has that .js filename extension, as that's how it is recognized as JavaScript.</li> + <li>Replace your current {{htmlelement("script")}} element with the following: + <pre class="brush: html"><script src="script.js" defer></script></pre> + </li> + <li>Inside <code>script.js</code>, add the following script: + <pre class="brush: js">function createParagraph() { + var para = document.createElement('p'); + para.textContent = 'You clicked the button!'; + document.body.appendChild(para); +} + +var buttons = document.querySelectorAll('button'); + +for(var i = 0; i < buttons.length ; i++) { + buttons[i].addEventListener('click', createParagraph); +}</pre> + </li> + <li>Save and refresh your browser, and you should see the same thing! It works just the same, but now we've got our JavaScript in an external file. This is generally a good thing in terms of organizing your code, and making it reusable across multiple HTML files. Plus the HTML is easier to read without huge chunks of script dumped in it.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: You can see this version on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">apply-javascript-external.html</a> and <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/script.js">script.js</a> (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">see it live too</a>).</p> +</div> + +<h3 id="Inline_JavaScript_handlers">Inline JavaScript handlers</h3> + +<p>Note that sometimes you'll come across bits of actual JavaScript code living inside HTML. It might look something like this:</p> + +<pre class="brush: js example-bad">function createParagraph() { + var para = document.createElement('p'); + para.textContent = 'You clicked the button!'; + document.body.appendChild(para); +}</pre> + +<pre class="brush: html example-bad"><button onclick="createParagraph()">Click me!</button></pre> + +<p>You can try this version of our demo below.</p> + +<p>{{ EmbedLiveSample('Inline_JavaScript_handlers', '100%', 150, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>This demo has exactly the same functionality as in the previous two sections, except that the {{htmlelement("button")}} element includes an inline <code>onclick</code> handler to make the function run when the button is pressed.</p> + +<p><strong>Please don't do this, however.</strong> It is bad practice to pollute your HTML with JavaScript, and it is inefficient — you'd have to include the <code>onclick="createParagraph()"</code> attribute on every button you wanted the JavaScript to apply to.</p> + +<p>Using a pure JavaScript construct allows you to select all the buttons using one instruction. The code we used above to serve this purpose looks like this:</p> + +<pre class="brush: js">var buttons = document.querySelectorAll('button'); + +for (var i = 0; i < buttons.length ; i++) { + buttons[i].addEventListener('click', createParagraph); +}</pre> + +<p>This might be a bit longer than the <code>onclick</code> attribute, but it will work for all buttons — no matter how many are on the page, nor how many are added or removed. The JavaScript does not need to be changed.</p> + +<div class="note"> +<p><strong>Note</strong>: Try editing your version of <code>apply-javascript.html</code> and add a few more buttons into the file. When you reload, you should find that all of the buttons when clicked will create a paragraph. Neat, huh?</p> +</div> + +<h3 id="Script_loading_strategies">Script loading strategies</h3> + +<p>There are a number of issues involved with getting scripts to load at the right time. Nothing is as simple as it seems! A common problem is that all the HTML on a page is loaded in the order in which it appears. If you are using JavaScript to manipulate elements on the page (or more accurately, the <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents#The_document_object_model">Document Object Model</a>), your code won't work if the JavaScript is loaded and parsed before the HTML you are trying to do something to.</p> + +<p>In the above code examples, in the internal and external examples the JavaScript is loaded and run in the head of the document, before the HTML body is parsed. This could cause an error, so we've used some constructs to get around it.</p> + +<p>In the internal example, you can see this structure around the code:</p> + +<pre class="brush: js">document.addEventListener("DOMContentLoaded", function() { + ... +});</pre> + +<p>This is an event listener, which listens for the browser's "DOMContentLoaded" event, which signifies that the HTML body is completely loaded and parsed. The JavaScript inside this block will not run until after that event is fired, therefore the error is avoided (you'll <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">learn about events</a> later in the course).</p> + +<p>In the external example, we use a more modern JavaScript feature to solve the problem, the <code>async</code> attribute, which tells the browser to continue downloading the HTML content once the <code><script></code> tag element has been reached.</p> + +<pre class="brush: js"><script src="script.js" async></script></pre> + +<p>In this case both the script and the HTML will load simultaneously and the code will work.</p> + +<div class="note"> +<p><strong>Note</strong>: In the external case, we did not need to use the <code>DOMContentLoaded</code> event because the <code>async</code> attribute solved the problem for us. We didn't use the <code>async</code> solution for the internal JavaScript example because <code>async</code> only works for external scripts.</p> +</div> + +<p>And old-fashioned solution to this problem used to be to put your script element right at the bottom of the body (e.g. just before the <code></body></code> tag), so that it would load after all the HTML has been parsed. The problem with this solution (and the <code>DOMContentLoaded</code> solution seen above) is that loading/parsing of the script is completely blocked until the HTML DOM has been loaded. On larger sites with lots of JavaScript, this can cause a major performance issue, slowing down your site. This is why <code>async</code> was added to browsers!</p> + +<h4 id="async_and_defer">async and defer</h4> + +<p>There are actually two ways we can bypass the problem of the blocking script — <code>async</code> and <code>defer</code>. Let's look at the difference between these two.</p> + +<p>Async scripts will download the script without blocking rendering the page and will execute it as soon as the script finishes downloading. You get no guarantee that scripts will run in any specific order, only that they will not stop the rest of the page from displaying. It is best to use <code>async</code> when the scripts in the page run independently from each other and depend on no other script on the page.</p> + +<p>For example, if you have the following script elements:</p> + +<pre class="brush: html"><script async src="js/vendor/jquery.js"></script> + +<script async src="js/script2.js"></script> + +<script async src="js/script3.js"></script></pre> + +<p>You can't rely on the order the scripts will load in. <code>jquery.js</code> may load before or after <code>script2.js</code> and <code>script3.js</code> and if this is the case, any functions in those scripts depending on <code>jquery</code> will produce an error because <code>jquery</code> will not be defined at the time the script runs.</p> + +<p>Defer will run the scripts in the order they appear in the page and execute them as soon as the script and content are downloaded:</p> + +<pre class="brush: html"><script defer src="js/vendor/jquery.js"></script> + +<script defer src="js/script2.js"></script> + +<script defer src="js/script3.js"></script></pre> + +<p>All the scripts with the <code>defer</code> attribute will load in the order they appear on the page. So in the second example, we can be sure that <code>jquery.js</code> will load before <code>script2.js</code> and <code>script3.js</code> and that <code>script2.js</code> will load before <code>script3.js</code>.</p> + +<p>To summarize:</p> + +<ul> + <li>If your scripts can run independently without dependencies then use <code>async</code>.</li> + <li>If your scripts depend on other scripts load them using <code>defer</code> and put their corresponding <code><script></code> elements in the order you want the browser to execute them.</li> +</ul> + +<h2 id="Comments">Comments</h2> + +<p>As with HTML and CSS, it is possible to write comments into your JavaScript code that will be ignored by the browser, and exist simply to provide instructions to your fellow developers on how the code works (and you, if you come back to your code after six months and can't remember what you did). Comments are very useful, and you should use them often, particularly for larger applications. There are two types:</p> + +<ul> + <li>A single line comment is written after a double forward slash (//), e.g. + <pre class="brush: js">// I am a comment</pre> + </li> + <li>A multi-line comment is written between the strings /* and */, e.g. + <pre class="brush: js">/* + I am also + a comment +*/</pre> + </li> +</ul> + +<p>So for example, we could annotate our last demo's JavaScript with comments like so:</p> + +<pre class="brush: js">// Function: creates a new paragraph and append it to the bottom of the HTML body. + +function createParagraph() { + var para = document.createElement('p'); + para.textContent = 'You clicked the button!'; + document.body.appendChild(para); +} + +/* + 1. Get references to all the buttons on the page and sort them in an array. + 2. Loop through all the buttons and add a click event listener to each one. + + When any button is pressed, the createParagraph() function will be run. +*/ + +var buttons = document.querySelectorAll('button'); + +for (var i = 0; i < buttons.length ; i++) { + buttons[i].addEventListener('click', createParagraph); +}</pre> + +<h2 id="Summary">Summary</h2> + +<p>So there you go, your first step into the world of JavaScript. We've begun with just theory, to start getting you used to why you'd use JavaScript and what kind of things you can do with it. Along the way, you saw a few code examples and learned how JavaScript fits in with the rest of the code on your website, amongst other things.</p> + +<p>JavaScript may seem a bit daunting right now, but don't worry — in this course, we will take you through it in simple steps that will make sense going forward. In the next article, we will <a href="/en-US/docs/Learn/JavaScript/Introduction_to_JavaScript_1/A_first_splash">plunge straight into the practical</a>, getting you to jump straight in and build your own JavaScript examples.</p> + +<ul> +</ul> + +<p>{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li> +</ul> diff --git a/files/id/learn/javascript/index.html b/files/id/learn/javascript/index.html new file mode 100644 index 0000000000..bdcf5aeedb --- /dev/null +++ b/files/id/learn/javascript/index.html @@ -0,0 +1,57 @@ +--- +title: JavaScript +slug: Learn/JavaScript +tags: + - JavaScript + - JavaScript Pemula + - Landing + - Module + - Pemula +translation_of: Learn/JavaScript +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">{{Glossary("JavaScript")}} adalah bahasa pemrograman yang memungkinkan anda mengimplementasikan hal kompleks di halaman web — setiap halaman web tidak hanya berdiam disana dengan menampilkan informasi statis untuk anda lihat — menampilkan update setiap waktu, peta interaktif, animasi grafis 2D/3D, scrolling video jukeboxes, dll. — anda bisa memastikan bahwa disanalah JavaScript terlibat.</p> + +<h2 id="Jalur_Belajar">Jalur Belajar</h2> + +<p>JavaScript dapat dikatakan sulit untuk dipelajari dibandingkan teknologi terkait seperti <a href="/en-US/docs/Learn/HTML">HTML</a> dan <a href="/en-US/docs/Learn/CSS">CSS</a>. Sebelum mencoba belajar JavaScript, disarankan anda telah mengetahui setidaknya kedua teknologi tersebut, dan mungkin yang lain juga. Mulailah dengan modul belajar berikut:</p> + +<ul> + <li><a href="/en-US/docs/Learn/Getting_started_with_the_web">Memulai dengan Web</a></li> + <li><a href="/en-US/docs/Web/Guide/HTML/Introduction">Pengenalan HTML</a></li> + <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Pengenalan CSS</a></li> +</ul> + +<p>Memiliki pengalaman bahasa pemrograman lain juga bisa sangat membantu anda memahami Javascript.</p> + +<p>Setelah mengetahui dasar javascript , anda bisa belajar topik yang lebih lanjut, seperti:</p> + +<ul> + <li>Mendalami JavaScript, seperti yang diajarkan di <a href="/en-US/docs/Web/JavaScript/Guide">Paduan JavaScript</a> kami</li> + <li><a href="/en-US/docs/Web/API">HTML5 APIs</a></li> +</ul> + +<h2 id="Modul_Belajar">Modul Belajar</h2> + +<p>Pada topik ini berisi modul berikut, dengan urutan yang disarankan untuk belajar.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps">Dasar JavaScript</a></dt> + <dd>Pada modul pertama ini, kita akan menjawab beberapa pertanyaan fundamental seperti "apa itu JavaScript?", "seperti apa itu javascript?", dan "untuk apa?", sebelum melanjukan untuk menuntun anda berlatih menulis javascript untuk pertama kali. Setelah itu, kita akan mendiskusikan beberapa kunci fitur Javascript secara detail, seperti variabel, strings, number dan array.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks">Block Pembangun JavaScript</a></dt> + <dd>Pada modul ini, kita melanjutkan memperluas cakupan pada semua kunci fitur fundamental Javascript, beralih pada tipe kode block yang umum digunakan seperti pernyataan kondisional, perulangan, fungsi, dan event. Anda tentu telah melihatnya di pembelajaran, tapi hanya sepintas — disini kita akan mendiskusikannya dengan lebih eksplisit.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects">Mengenal Objek JavaScript</a></dt> + <dd>Di JavaScript, kebanyakan diantaranya adalah objek, dari fitur inti javascript seperti string dan array sampai pada API browser dibangun diatas JavaScript. Anda juga bisa membuat objek anda sendiri untuk merangkum fungsi dan variabel terkait menjadi paket yang lebih efisien. Sifat orientasi objek dari javascript sangat penting untuk dipahami jika anda ingin meningkatkan pengetahuan pada bahasa dan menulis kode yang lebih efisien, karena itu disini kami telah menyediakan modul ini untuk membantu anda. Disini kita belajar teori objek dan sintak secara detail, melihat bagaimana anda bisa membuat objek anda sendiri, dan menjelaskan apa itu data JSON dan bagaimana menggunakannya.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Client-side web API</a></dt> + <dd>Ketika menulis client-side JavaScript untuk Website atau aplikasi, anda tidak akan lebih jauh sebelum memulai menggunakan API — antarmuka untuk memanipulasi aspek berbeda dari browser dan sistem operasi dimana situs berjalan, atau bahkan data dari website lain atau services. Pada modul ini kita akan membahas apa itu API, dan bagaimana menggunakan API yang umum digunakan pada pembangunan kode anda. </dd> +</dl> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript">JavaScript di MDN</a></dt> + <dd>Poin utama untuk inti dokumentasi Javascript di MDN — dimana anda mencari referensi yang luas pada semua aspek dari dan beberapa tutorial lanjutan untuk mendalami pengalaman menggunakan Javascript.</dd> + <dt><a href="https://www.youtube.com/user/codingmath">Coding math</a></dt> + <dd>Seri terbaik dari tutorial video untuk anda belajar matematika yang perlu dipahami untuk menjadi programer yang lebih efektif, oleh <a href="https://twitter.com/bit101">Keith Peters</a>.</dd> +</dl> diff --git a/files/id/learn/javascript/objects/dasar-dasar/index.html b/files/id/learn/javascript/objects/dasar-dasar/index.html new file mode 100644 index 0000000000..6c273b51a3 --- /dev/null +++ b/files/id/learn/javascript/objects/dasar-dasar/index.html @@ -0,0 +1,261 @@ +--- +title: Dasar-dasar Objek JavaScript object +slug: Learn/JavaScript/Objects/Dasar-dasar +translation_of: Learn/JavaScript/Objects/Basics +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</div> + +<p class="summary">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 .</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prasyarat:</th> + <td>Mengetahui dasar komputer literasi, memahami tentang dasar HTML dan CSS, memahami dasar javascript (lihat <a href="/en-US/docs/Learn/JavaScript/First_steps">First steps</a> dan <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a>).</td> + </tr> + <tr> + <th scope="row">Tujuan:</th> + <td>Untuk memahami teori dasar tentang pemrograman berbasis objek, dan bagaimana hubungannya dengan Javascript dan bagaimana memulai bekerja menggunakan JavaScript objects.</td> + </tr> + </tbody> +</table> + +<h2 id="Dasar_Objek">Dasar Objek</h2> + +<p>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). </p> + +<p>Untuk memulainya, silakan salin file <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html">oojs.html</a>, 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 <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools#The_JavaScript_console">developer tools JavaScript console</a>.</p> + +<p>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:</p> + +<pre class="brush: js notranslate">const person = {};</pre> + +<p>Now open your browser's <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools#The_JavaScript_console">JavaScript console</a>, enter <code>person</code> into it, and press <kbd>Enter</kbd>/<kbd>Return</kbd>. You should get a result similar to one of the below lines:</p> + +<pre class="brush: js notranslate">[object Object] +Object { } +{ } +</pre> + +<p>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:</p> + +<pre class="brush: js notranslate">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] + '.'); + } +}; +</pre> + +<p>After saving and refreshing, try entering some of the following into the JavaScript console on your browser devtools:</p> + +<pre class="brush: js notranslate">person.name +person.name[0] +person.age +person.interests[1] +person.bio() +person.greeting()</pre> + +<p>You have now got some data and functionality inside your object, and are now able to access them with some nice simple syntax!</p> + +<div class="note"> +<p><strong>Note</strong>: If you are having trouble getting this to work, try comparing your code against our version — see <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-finished.html">oojs-finished.html</a> (also <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-finished.html">see it running live</a>). 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.</p> +</div> + +<p>So what is going on here? Well, an object is made up of multiple members, each of which has a name (e.g. <code>name</code> and <code>age</code> above), and a value (e.g. <code>['Bob', 'Smith']</code> and <code>32</code>). 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:</p> + +<pre class="brush: js notranslate">const objectName = { + member1Name: member1Value, + member2Name: member2Value, + member3Name: member3Value +};</pre> + +<p>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 <strong>properties</strong>. The last two items are functions that allow the object to do something with that data, and are referred to as the object's <strong>methods</strong>.</p> + +<p>An object like this is referred to as an <strong>object literal</strong> — 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.</p> + +<p>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.</p> + +<h2 id="Dot_notation">Dot notation</h2> + +<p>Above, you accessed the object's properties and methods using <strong>dot notation</strong>. The object name (person) acts as the <strong>namespace</strong> — it must be entered first to access anything <strong>encapsulated</strong> 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:</p> + +<pre class="brush: js notranslate">person.age +person.interests[1] +person.bio()</pre> + +<h3 id="Sub-namespaces">Sub-namespaces</h3> + +<p>It is even possible to make the value of an object member another object. For example, try changing the name member from</p> + +<pre class="brush: js notranslate">name: ['Bob', 'Smith'],</pre> + +<p>to</p> + +<pre class="brush: js notranslate">name : { + first: 'Bob', + last: 'Smith' +},</pre> + +<p>Here we are effectively creating a <strong>sub-namespace</strong>. 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:</p> + +<pre class="brush: js notranslate">person.name.first +person.name.last</pre> + +<p><strong>Important</strong>: At this point you'll also need to go through your method code and change any instances of</p> + +<pre class="brush: js notranslate">name[0] +name[1]</pre> + +<p>to</p> + +<pre class="brush: js notranslate">name.first +name.last</pre> + +<p>Otherwise your methods will no longer work.</p> + +<h2 id="Bracket_notation">Bracket notation</h2> + +<p>There is another way to access object properties — using bracket notation. Instead of using these:</p> + +<pre class="brush: js notranslate">person.age +person.name.first</pre> + +<p>You can use</p> + +<pre class="brush: js notranslate">person['age'] +person['name']['first']</pre> + +<p>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 <strong>associative arrays</strong> — they map strings to values in the same way that arrays map numbers to values.</p> + +<h2 id="Setting_object_members">Setting object members</h2> + +<p>So far we've only looked at retrieving (or <strong>getting</strong>) object members — you can also <strong>set</strong> (update) the value of object members by simply declaring the member you want to set (using dot or bracket notation), like this:</p> + +<pre class="brush: js notranslate">person.age = 45; +person['name']['last'] = 'Cratchit';</pre> + +<p>Try entering the above lines, and then getting the members again to see how they've changed, like so:</p> + +<pre class="brush: js notranslate">person.age +person['name']['last']</pre> + +<p>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:</p> + +<pre class="brush: js notranslate">person['eyes'] = 'hazel'; +person.farewell = function() { alert("Bye everybody!"); }</pre> + +<p>You can now test out your new members:</p> + +<pre class="brush: js notranslate">person['eyes'] +person.farewell()</pre> + +<p>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:</p> + +<pre class="brush: js notranslate">let myDataName = nameInput.value; +let myDataValue = nameValue.value;</pre> + +<p>We could then add this new member name and value to the <code>person</code> object like this:</p> + +<pre class="brush: js notranslate">person[myDataName] = myDataValue;</pre> + +<p>To test this, try adding the following lines into your code, just below the closing curly brace of the <code>person</code> object:</p> + +<pre class="brush: js notranslate">let myDataName = 'height'; +let myDataValue = '1.75m'; +person[myDataName] = myDataValue;</pre> + +<p>Now try saving and refreshing, and entering the following into your text input:</p> + +<pre class="brush: js notranslate">person.height</pre> + +<p>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.</p> + +<h2 id="What_is_this">What is "this"?</h2> + +<p>You may have noticed something slightly strange in our methods. Look at this one for example:</p> + +<pre class="brush: js notranslate">greeting: function() { + alert('Hi! I\'m ' + this.name.first + '.'); +}</pre> + +<p>You are probably wondering what "this" is. The <code>this</code> keyword refers to the current object the code is being written inside — so in this case <code>this</code> is equivalent to <code>person</code>. So why not just write <code>person</code> instead? As you'll see in the <a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a> article, when we start creating constructors and so on, <code>this</code> is very useful — it always ensures that the correct values are used when a member's context changes (for example, two different <code>person</code> object instances may have different names, but we want to use their own name when saying their greeting).</p> + +<p>Let's illustrate what we mean with a simplified pair of person objects:</p> + +<pre class="brush: js notranslate">const person1 = { + name: 'Chris', + greeting: function() { + alert('Hi! I\'m ' + this.name + '.'); + } +} + +const person2 = { + name: 'Deepti', + greeting: function() { + alert('Hi! I\'m ' + this.name + '.'); + } +}</pre> + +<p>In this case, <code>person1.greeting()</code> outputs "Hi! I'm Chris."; <code>person2.greeting()</code> 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, <code>this</code> 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.</p> + +<h2 id="Youve_been_using_objects_all_along">You've been using objects all along</h2> + +<p>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.</p> + +<p>So when you used string methods like:</p> + +<pre class="brush: js notranslate">myString.split(',');</pre> + +<p>You were using a method available on an instance of the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code> class. Every time you create a string in your code, that string is automatically created as an instance of <code>String</code>, and therefore has several common methods and properties available on it.</p> + +<p>When you accessed the document object model using lines like this:</p> + +<pre class="brush: js notranslate">const myDiv = document.createElement('div'); +const myVideo = document.querySelector('video');</pre> + +<p>You were using methods available on an instance of the <code><a href="/en-US/docs/Web/API/Document">Document</a></code> class. For each webpage loaded, an instance of <code>Document</code> is created, called <code>document</code>, 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.</p> + +<p>The same is true of pretty much any other built-in object or API you've been using — <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math">Math</a></code>, and so on.</p> + +<p>Note that built in objects and APIs don't always create object instances automatically. As an example, the <a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a> — 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:</p> + +<pre class="brush: js notranslate">const myNotification = new Notification('Hello!');</pre> + +<p>Again, we'll look at constructors in a later article.</p> + +<div class="note"> +<p><strong>Note</strong>: It is useful to think about the way objects communicate as <strong>message passing</strong> — 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.</p> +</div> + +<h2 id="Test_your_skills!">Test your skills!</h2> + +<p>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 <a href="/en-US/docs/Learn/JavaScript/Objects/Test_your_skills:_Object_basics">Test your skills: Object basics</a>.</p> + +<h2 id="Summary">Summary</h2> + +<p>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 <code>person</code> 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.</p> + +<p>In the next article we'll start to look at object-oriented programming (OOP) theory, and how such techniques can be used in JavaScript.</p> + +<p>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Object basics</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Inheritance in JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Working with JSON data</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adding features to our bouncing balls demo</a></li> +</ul> diff --git a/files/id/learn/javascript/objects/index.html b/files/id/learn/javascript/objects/index.html new file mode 100644 index 0000000000..a1ddfe032a --- /dev/null +++ b/files/id/learn/javascript/objects/index.html @@ -0,0 +1,54 @@ +--- +title: Memperkenalkan objek JavaScript +slug: Learn/JavaScript/Objects +tags: + - Artikel + - Asesmen + - CodingScripting + - JavaScript + - Objek + - Panduan + - Pemula + - Tutorial + - belajar +translation_of: Learn/JavaScript/Objects +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Dalam JavaScript, banyak hal adalah objek, dari fitur inti JavaScript seperti string dan array sampai API browser dibangun atas JavaScript. Kamu bahkan bisa membuat objek sendiri untuk membungkus function dan variabel yang berhubungan menjadi package yang efisien, dan bertindak sebagai wadah data praktis. Sifat JavaScript yang berorientasi object penting untuk dipahami jika kamu ingin melangkah lebih jauh dengan pengetahuanmu tentang bahasanya, oleh karena itu kami menyediakan modul ini untuk membantumu. Di sini kita mengajarkan teori objek dan syntax secara detil, lalu melihat bagaimana cara membuat objekmu sendiri.</p> + +<h2 id="Persyaratan">Persyaratan</h2> + +<p>Sebelum mulai modul ini, kamu harus punya beberapa pemahaman dengan dasar-dasar dari modul <a href="https://developer.mozilla.org/id/docs/Web/Guide/HTML/Introduction">Pengenalan HTML</a> dan <a href="https://developer.mozilla.org/id/docs/Learn/CSS/Introduction_to_CSS">Pengenalan CSS</a> sebelum mulai JavaScript.</p> + +<p>Kamu juga harus punya pemahaman tentang JavaScript dasar sebelum melihat objek JavaScript secara detil. <span id="result_box" lang="id"><span>Sebelum mencoba modul ini</span></span>, pahami dulu <a href="/id/docs/Learn/JavaScript/First_steps">Langkah pertama JavaScript</a> dan <a href="/id/docs/Learn/JavaScript/Building_blocks">Blok bangunan JavaScript</a>.</p> + +<div class="note"> +<p><strong>Catatan</strong>: Jika kamu bekerja di komputer /tablet /perangkat lain di mana kamu tiak punya kemampuan membuat file sendiri, kamu bisa mencoba (sebagian besar) contoh kode dalam program pengkodean online seperti <a href="http://jsbin.com/">JSBin</a> atau <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Panduan">Panduan</h2> + +<dl> + <dt><a href="/id/docs/Learn/JavaScript/Objects/Basics">Dasar Objek</a></dt> + <dd> + <p>Dalam artikel pertama tentang objek JavaScript, kita akan melihat syntax dasar objek JavaScript dan meninjau kembali beberapa fitur JavaScript yang telah kita lihat sebelumnya, mengulangi fakta bahwa banyak fitur yang telah kamu hadapi sebelumnya, yang mana itu sebenarnya objek.</p> + </dd> + <dt><a href="/id/docs/Learn/JavaScript/Objects/Object-oriented_JS">JavaScript berorientasi object untuk pemula</a></dt> + <dd>Dengan dasar-dasar yang sudah dilalui, kita sekarang akan fokus pada JavaScript berorientasi objek (OOJS) - artikel ini menyajikan pandangan dasar teori pemrograman berorientasi objek (OOP), kemudian membahas bagaimana JavaScript mengemulasikan kelas objek melalui fungsi konstruktor, dan cara membuat objek secara instan.</dd> + <dt><a href="/id/docs/Learn/JavaScript/Objects/Object_prototypes">Prototipe objek</a></dt> + <dd>Prototipe adalah mekanisme di mana objek JavaScript mewarisi fitur satu sama lain, dan mereka bekerja secara berbeda dengan mekanisme pewarisan dalam bahasa pemrograman berorientasi objek klasik. Pada artikel ini kita mengeksplorasi perbedaan itu, menjelaskan bagaimana rantai prototipe bekerja, dan melihat bagaimana properti prototipe dapat digunakan untuk menambahkan metode pada konstruktor yang ada.</dd> + <dt><a href="/id/docs/Learn/JavaScript/Objects/Inheritance">Pewarisan/Inheritance pada JavaScript</a></dt> + <dd>Dengan sebagian besar rincian OOJS sudah dijelaskan, artikel ini menunjukkan bagaimana membuat kelas objek "child" (konstructor) yang mewarisi fitur dari kelas "parent" mereka. Selain itu, kami menyajikan beberapa saran, kapan dan di mana kamu bisa menggunakan OOJS..</dd> + <dt><a href="/id/docs/Learn/JavaScript/Objects/JSON">Bekerja dengan data JSON</a></dt> + <dd>JavaScript Object Notation (JSON) adalah format standar untuk mewakili data terstruktur sebagai objek JavaScript, yang biasanya digunakan untuk mewakili dan mentransmisi data di situs web (misalnya mengirimkan beberapa data dari server ke klien, sehingga dapat ditampilkan di laman web). Kamu akan sering menjumpainya, jadi dalam artikel ini, kami memberikan semua yang kamu butuhkan untuk bekerja dengan JSON menggunakan JavaScript, termasuk mengakses item data dalam objek JSON dan menulis JSONmu sendiri.</dd> + <dt><a href="/id/docs/Learn/JavaScript/Objects/Object_building_practice">Latihan membangun objek</a></dt> + <dd>Pada artikel sebelumnya, kita melihat semua teori esensial dari objek JavaScript dan sintak secara detil, sehingga memberi dasar kokoh untuk mulai membangun. Di artikel ini, kita melakukan latihan praktik, memberimu beberapa latihan lagi dalam membangun objek JavaScript sendiri untuk menghasilkan sesuatu yang menyenangkan dan berwarna — beberapa bola pantul berwarna.</dd> +</dl> + +<h2 id="Asesmen">Asesmen</h2> + +<dl> + <dt><a href="/id/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Menambahkan fitur pada demo bola pantul kita</a></dt> + <dd>Dalam asesmen ini, kamu diharapkan menggunakan demo bola pantul dari artikel sebelumnya sebagai titik awal, dan menambahkan beberapa fitur baru dan menarik.</dd> +</dl> diff --git a/files/id/learn/server-side/django/development_environment/index.html b/files/id/learn/server-side/django/development_environment/index.html new file mode 100644 index 0000000000..79cb6b884a --- /dev/null +++ b/files/id/learn/server-side/django/development_environment/index.html @@ -0,0 +1,423 @@ +--- +title: Setting up a Django development environment +slug: Learn/Server-side/Django/development_environment +translation_of: Learn/Server-side/Django/development_environment +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Server-side/Django/Introduction", "Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django")}}</div> + +<p class="summary">Sekarang setelah Anda tahu apa gunanya Django, kami akan menunjukkan kepada Anda cara mengatur dan menguji lingkungan pengembangan Django di Windows, Linux (Ubuntu), dan macOS - sistem operasi apa pun yang Anda gunakan, artikel ini akan memberi Anda apa yang Anda butuhkan untuk dapat mulai mengembangkan aplikasi Django.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <td>Pengetahuan dasar tentang penggunaan terminal / baris perintah dan cara menginstal paket perangkat lunak pada sistem operasi komputer pengembangan Anda.</td> + </tr> + <tr> + <th scope="row">Objective:</th> + <td>Untuk memiliki lingkungan pengembangan untuk Django (2.0) yang berjalan di komputer Anda.</td> + </tr> + </tbody> +</table> + +<h2 id="Gambaran_lingkungan_pengembangan_Django">Gambaran lingkungan pengembangan Django</h2> + +<p>Django membuatnya sangat mudah untuk mengatur komputer Anda sendiri sehingga Anda dapat mulai mengembangkan aplikasi web. Bagian ini menjelaskan apa yang Anda dapatkan dengan lingkungan pengembangan, dan memberikan gambaran umum dari beberapa opsi pengaturan dan konfigurasi Anda. Sisa dari artikel ini menjelaskan metode yang <em>disarankan</em> untuk menginstal lingkungan pengembangan Django di Ubuntu, macOS, dan Windows, dan bagaimana Anda dapat mengujinya.</p> + +<h3 id="Apa_itu_Django_development_environment">Apa itu Django development environment?</h3> + +<p>The development environment adalah instalasi Django di komputer lokal Anda yang dapat Anda gunakan untuk mengembangkan dan menguji aplikasi Django sebelum menyebarkannya ke lingkungan produksi.</p> + +<p>Alat utama yang disediakan Django sendiri adalah seperangkat skrip Python untuk membuat dan bekerja dengan proyek Django, bersama dengan<em> server web pengembangan</em> sederhana yang dapat Anda gunakan untuk menguji lokal (yaitu pada komputer Anda, bukan pada server web eksternal) Aplikasi web Django di browser web komputer Anda.</p> + +<p>Ada alat periferal lain, yang merupakan bagian dari lingkungan pengembangan, yang tidak akan kita bahas di sini. Ini termasuk hal-hal seperti editor teks atau IDE untuk mengedit kode, dan alat manajemen kontrol sumber seperti Git untuk mengelola berbagai versi kode Anda dengan aman. Kami berasumsi bahwa Anda telah menginstal editor teks.</p> + +<h3 id="Apa_saja_opsi_pengaturan_Django">Apa saja opsi pengaturan Django?</h3> + +<p>Django sangat fleksibel dalam hal bagaimana dan di mana ia dapat diinstal dan dikonfigurasi. Django dapat:</p> + +<ul> + <li>Installed on different operating systems.</li> + <li>Diinstal dari sumber, dari Python Package Index (PyPi) dan dalam banyak kasus dari aplikasi manajer paket komputer host.</li> + <li>Dikonfigurasi untuk menggunakan salah satu dari beberapa basis data, yang mungkin juga perlu diinstal dan dikonfigurasi secara terpisah.</li> + <li>Jalankan di lingkungan sistem utama Python atau dalam lingkungan virtual Python yang terpisah.</li> +</ul> + +<p>Masing-masing opsi ini memerlukan konfigurasi dan pengaturan yang sedikit berbeda. Subbagian berikut menjelaskan beberapa pilihan Anda. Untuk sisa artikel ini, kami akan menunjukkan kepada Anda cara mengatur Django pada sejumlah kecil sistem operasi, dan pengaturan itu akan diasumsikan sepanjang sisa modul ini.</p> + +<div class="note"> +<p><strong>Catatan</strong>: Opsi instalasi lain yang mungkin dicakup dalam dokumentasi resmi Django. Kami menautkan ke <a href="#" id="See_also">appropriate documents below</a>.</p> +</div> + +<h4 id="Sistem_operasi_apa_yang_didukung">Sistem operasi apa yang didukung?</h4> + +<p>Aplikasi web Django dapat dijalankan di hampir semua mesin yang dapat menjalankan bahasa pemrograman Python 3: Windows, macOS, Linux / Unix, Solaris, dan lain-lain. Hampir semua komputer harus memiliki kinerja yang diperlukan untuk menjalankan Django selama pengembangan.</p> + +<p>In this article, we'll provide instructions for Windows, macOS, and Linux/Unix.</p> + +<h4 id="Versi_Python_apa_yang_harus_digunakan">Versi Python apa yang harus digunakan?</h4> + +<p>Kami menyarankan Anda menggunakan versi terbaru yang tersedia - pada saat penulisan ini adalah Python 3.8.2.</p> + +<p>Python 3.5 or later can be used if needed (Python 3.5 support will be dropped in future releases).</p> + +<div class="note"> +<p><strong>Catatan</strong>: Python 2.7 tidak dapat digunakan dengan rilis Django saat ini (The Django 1.11.x series adalah yang terakhir untuk mendukung Python 2.7).</p> +</div> + +<h4 id="Di_mana_kita_bisa_mengunduh_Django">Di mana kita bisa mengunduh Django?</h4> + +<p>Ada tiga tempat untuk mengunduh Django:</p> + +<ul> + <li>Repositori Paket Python (PyPi), menggunakan alat <em>pip</em>. Ini adalah cara terbaik untuk mendapatkan versi stabil terbaru dari Django.</li> + <li>Gunakan versi dari manajer paket komputer Anda. Distribusi Django yang dibundel dengan sistem operasi menawarkan mekanisme instalasi familiar. Namun perlu dicatat bahwa versi paket mungkin sudah cukup lama, dan hanya dapat diinstal ke lingkungan sistem Python (yang mungkin bukan yang Anda inginkan).</li> + <li>Instal dari sumber. Anda bisa mendapatkan dan menginstal versi terkini dari Django dari sumber. Ini tidak disarankan untuk pemula tetapi diperlukan saat Anda siap untuk mulai berkontribusi kembali ke Django itu sendiri.</li> +</ul> + +<p>Artikel ini menunjukkan cara menginstal Django dari PyPi, untuk mendapatkan versi stabil terbaru.</p> + +<h4 id="Database_yang_mana">Database yang mana?</h4> + +<p>Django mendukung empat database utama (PostgreSQL, MySQL, Oracle, dan SQLite), dan ada perpustakaan komunitas yang menyediakan berbagai tingkat dukungan untuk database SQL dan NoSQL populer lainnya. Kami menyarankan Anda memilih database yang sama untuk produksi dan pengembangan (meskipun Django mengabstraksikan banyak perbedaan database menggunakan Object-Relational Mapper (ORM), there are still <a href="https://docs.djangoproject.com/en/2.1/ref/databases/">potential issues</a> that are better to avoid).</p> + +<p>Untuk artikel ini (dan sebagian besar modul ini) kita akan menggunakan database <em>SQLite</em>, yang menyimpan datanya dalam file. SQLite dimaksudkan untuk digunakan sebagai basis data yang ringan dan tidak dapat mendukung konkurensi tingkat tinggi. Namun, ini adalah pilihan yang sangat baik untuk aplikasi yang hanya bersifat baca-saja.</p> + +<div class="note"> +<p><strong>Catatan: </strong>Django dikonfigurasi untuk menggunakan SQLite secara default ketika Anda memulai proyek situs web Anda menggunakan alat standar (<em>django-admin</em>). Ini adalah pilihan yang bagus ketika Anda memulai karena tidak memerlukan konfigurasi atau pengaturan tambahan.</p> +</div> + +<h4 id="Menginstal_seluruh_sistem_atau_dalam_lingkungan_virtual_Python">Menginstal seluruh sistem atau dalam lingkungan virtual Python?</h4> + +<p>Ketika Anda menginstal Python3 Anda mendapatkan lingkungan global tunggal yang dibagikan oleh semua kode Python3. Meskipun Anda dapat menginstal paket Python apa pun yang Anda suka di lingkungan, Anda hanya dapat menginstal satu versi tertentu dari setiap paket pada suatu waktu.</p> + +<div class="note"> +<p><strong>Catatan</strong>: Aplikasi python yang diinstal ke dalam lingkungan global berpotensi dapat saling bertentangan (mis. Jika mereka bergantung pada versi berbeda dari paket yang sama).</p> +</div> + +<p>Jika Anda menginstal Django ke lingkungan default / global maka Anda hanya akan dapat menargetkan satu versi Django di komputer. Ini bisa menjadi masalah jika Anda ingin membuat situs web baru (menggunakan Django versi terbaru) sambil tetap mempertahankan situs web yang bergantung pada versi yang lebih lama.</p> + +<p>Akibatnya, pengembang Python / Django berpengalaman biasanya menjalankan aplikasi Python dalam lingkungan virtual Python independen. Ini memungkinkan beberapa lingkungan Django berbeda di satu komputer. Tim pengembang Django sendiri merekomendasikan agar Anda menggunakan lingkungan virtual Python!</p> + +<p>Modul ini mengasumsikan bahwa Anda telah menginstal Django ke lingkungan virtual, dan kami akan menunjukkan caranya di bawah ini.</p> + +<h2 id="Memasang_Python_3">Memasang Python 3</h2> + +<p>Untuk menggunakan Django Anda harus menginstal Python di sistem operasi Anda. Jika anda menggunakan <em>Python 3</em> maka anda juga akan memerlukan <a href="https://pypi.python.org/pypi">Python Package Index</a> tool — <em>pip3</em> — yang digunakan untuk mengelola (menginstal, memperbarui, dan menghapus) paket / pustaka Python yang digunakan oleh Django dan aplikasi Python Anda yang lain.</p> + +<p>Bagian ini menjelaskan secara singkat bagaimana Anda dapat memeriksa versi Python apa yang ada, dan menginstal versi baru sesuai kebutuhan, untuk Ubuntu Linux 18.04, macOS, dan Windows 10.</p> + +<div class="note"> +<p><strong>Note</strong>: Bergantung pada platform Anda, Anda mungkin juga dapat menginstal Python / pip dari manajer paket sistem operasi sendiri atau melalui mekanisme lain. Untuk sebagian besar platform, Anda dapat mengunduh file instalasi yang diperlukan dari <a href="https://www.python.org/downloads/">https://www.python.org/downloads/</a> dan menginstalnya menggunakan metode spesifik platform yang sesuai.</p> +</div> + +<h3 id="Ubuntu_18.04">Ubuntu 18.04</h3> + +<p>Ubuntu Linux 18.04 LTS sudah terdapat Python 3.6.6 secara default. Anda dapat melihatnya dengan menjalankan perintah berikut di bash terminal:</p> + +<pre class="brush: bash notranslate"><span style="line-height: 1.5;">python3 -V + Python 3.6.6</span> +</pre> + +<p>Namun, alat Python Package Index yang akan dibutuhkan untuk dapat memasang packages Python 3 (termasuk Django) tidak tersedia secara default. Jadi, Anda dapat memasang pip3 di bash terminal menggunakan:</p> + +<pre class="brush: bash notranslate">sudo apt install python3-pip +</pre> + +<h3 id="macOS">macOS</h3> + +<p>macOS "El Capitan" dan versi terbaru yang lainnya tidak tersedia Python 3 didalamnya. Anda dapat melihatnya dengan menjalankan perintah di bash terminal:</p> + +<pre class="brush: bash notranslate"><span style="line-height: 1.5;">python3 -V + </span>-bash: python3: command not found</pre> + +<p>Anda dapat dengan mudah memasang Python 3 (bersamaan dengan pip3) di<a href="https://www.python.org/"> python.org</a>:</p> + +<ol> + <li>Download installer yang dibutuhkan: + <ol> + <li>Pergi ke <a href="https://www.python.org/downloads/">https://www.python.org/downloads/</a></li> + <li>Pilih tombol <strong>Download Python 3.8.2</strong> (versi minor yang tepat mungkin berbeda)</li> + </ol> + </li> + <li>Cari file tersebut dengan menggunakan <em>Finder, </em>double-click file tersebut. Ikuti perintah pada proses instalasi.</li> +</ol> + +<p>Sekarang Anda dapat mengonfirmasi keberhasilan instalasi dengan melihat versi Python 3 seperti yang ditunjukkan dibawah:</p> + +<pre class="brush: bash notranslate"><span style="line-height: 1.5;">python3 -V + Python 3.8.2</span> +</pre> + +<p>Anda dapat pula mengecek bahwa <em>pip3 </em>sudah terpasang dengan melihat list packages yang tersedia:</p> + +<pre class="brush: bash notranslate">pip3 list</pre> + +<h3 id="Windows_10">Windows 10</h3> + +<p>Windows doesn't include Python by default, but you can easily install it (along with the <em>pip3</em> tool) from<a href="https://www.python.org/"> python.org</a>:</p> + +<ol> + <li>Download the required installer: + <ol> + <li>Go to <a href="https://www.python.org/downloads/">https://www.python.org/downloads/</a></li> + <li>Select the <strong>Download Python 3.8.2</strong> button (the exact minor version number may differ).</li> + </ol> + </li> + <li>Instal Python dengan mengklik dua kali pada file yang diunduh dan mengikuti petunjuk instalasi</li> + <li>Pastikan untuk menandai kotak yang berlabel "Add Python to PATH"Pastikan untuk menandai kotak yang berlabel</li> +</ol> + +<p>You can then verify that Python 3 was installed by entering the following text into the command prompt:</p> + +<pre class="brush: bash notranslate"><span style="line-height: 1.5;">py -3 -V + Python 3.8.2</span> +</pre> + +<p>The Windows installer incorporates <em>pip3</em> (the Python package manager) by default. You can list installed packages as shown:</p> + +<pre class="brush: bash notranslate"><span style="line-height: 1.5;">pip3 list</span> +</pre> + +<div class="note"> +<p><strong>Note</strong>: Pemasang harus mengatur semua yang Anda butuhkan agar perintah di atas berfungsi. Namun jika Anda mendapatkan pesan bahwa Python tidak dapat ditemukan, Anda mungkin lupa menambahkannya ke jalur sistem Anda. Anda dapat melakukan ini dengan menjalankan penginstal lagi, memilih "Modify", dan centang kotak berlabel "Add Python to environment variables" di halaman kedua.</p> +</div> + +<h2 id="Using_Django_inside_a_Python_virtual_environment">Using Django inside a Python virtual environment</h2> + +<p>Perpustakaan yang akan kami gunakan untuk membuat lingkungan virtual kami adalah <a href="https://virtualenvwrapper.readthedocs.io/en/latest/index.html">virtualenvwrapper</a> (Linux and macOS) dan <a href="https://pypi.python.org/pypi/virtualenvwrapper-win">virtualenvwrapper-win</a> (Windows), yang pada gilirannya keduanya menggunakan alat virtualenv. The wrapper tools menciptakan antarmuka yang konsisten untuk mengelola antarmuka di semua platform.</p> + +<h3 id="Menginstal_perangkat_lunak_lingkungan_virtual">Menginstal perangkat lunak lingkungan virtual</h3> + +<h4 id="Ubuntu_virtual_environment_setup">Ubuntu virtual environment setup</h4> + +<p>Setelah menginstal Python dan pip Anda dapat menginstal <em>virtualenvwrapper</em> (which includes <em>virtualenv</em>). Panduan instalasi resmi dapat ditemukan <a href="http://virtualenvwrapper.readthedocs.io/en/latest/install.html">here</a>, atau ikuti instruksi di bawah ini.</p> + +<p>Install the tool using <em>pip3</em>:</p> + +<pre class="brush: bash notranslate"><code>sudo pip3 install virtualenvwrapper</code></pre> + +<p>Kemudian tambahkan baris berikut di akhir file startup shell Anda (ini adalah nama file tersembunyi <strong>.bashrc</strong> di direktori home Anda). Ini mengatur lokasi di mana lingkungan virtual seharusnya hidup, lokasi direktori proyek pengembangan Anda, dan lokasi skrip yang diinstal dengan paket ini:</p> + +<pre class="brush: bash notranslate"><code>export WORKON_HOME=$HOME/.virtualenvs +export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3 +export VIRTUALENVWRAPPER_VIRTUALENV_ARGS=' -p /usr/bin/python3 ' +export PROJECT_HOME=$HOME/Devel +source /usr/local/bin/virtualenvwrapper.sh</code> +</pre> + +<div class="note"> +<p><strong>Note</strong>: The <code>VIRTUALENVWRAPPER_PYTHON</code> and <code>VIRTUALENVWRAPPER_VIRTUALENV_ARGS </code>variables point to the normal installation location for Python3, and <code>source /usr/local/bin/virtualenvwrapper.sh</code> points to the normal location of the <code>virtualenvwrapper.sh</code> script. If the <em>virtualenv</em> doesn't work when you test it, one thing to check is that Python and the script are in the expected location (and then change the startup file appropriately).<br> + <br> + You can find the correct locations for your system using the commands <code>which virtualenvwrapper.sh</code> and <code>which python3</code>.</p> +</div> + +<p>Kemudian muat ulang file startup dengan menjalankan perintah berikut di terminal:</p> + +<pre class="brush: bash notranslate"><code>source ~/.bashrc</code></pre> + +<p>Pada titik ini Anda akan melihat banyak skrip dijalankan seperti yang ditunjukkan di bawah ini:</p> + +<pre class="brush: bash notranslate"><code>virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/premkproject +virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/postmkproject +... +virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/preactivate +virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/postactivate +virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/get_env_details</code> +</pre> + +<p>Sekarang Anda dapat membuat lingkungan virtual baru dengan perintah <code>mkvirtualenv</code> .</p> + +<h4 id="macOS_virtual_environment_setup">macOS virtual environment setup</h4> + +<p>Pengaturan <em>virtualenvwrapper</em> pada macOS hampir persis sama dengan di Ubuntu (sekali lagi, Anda dapat mengikuti instruksi dari <a href="http://virtualenvwrapper.readthedocs.io/en/latest/install.html">official installation guide</a> atau di bawah). </p> + +<p>Install <em>virtualenvwrapper</em> (and bundling <em>virtualenv</em>) using <em>pip</em> as shown.</p> + +<pre class="brush: bash notranslate"><code>sudo pip3 install virtualenvwrapper</code></pre> + +<p>Then add the following lines to the end of your shell startup file.</p> + +<pre class="brush: bash notranslate"><code>export WORKON_HOME=$HOME/.virtualenvs +export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3 +export PROJECT_HOME=$HOME/Devel +source /usr/local/bin/virtualenvwrapper.sh</code></pre> + +<div class="note"> +<p><strong>Note</strong>: The <code>VIRTUALENVWRAPPER_PYTHON</code> variable points to the normal installation location for Python3, and <code>source /usr/local/bin/virtualenvwrapper.sh</code> points to the normal location of the <code>virtualenvwrapper.sh</code> script. If the <em>virtualenv</em> doesn't work when you test it, one thing to check is that Python and the script are in the expected location (and then change the startup file appropriately).</p> + +<p>For example, one installation test on macOS ended up with the following lines being necessary in the startup file:</p> + +<pre class="brush: bash notranslate">export WORKON_HOME=$HOME/.virtualenvs +export VIRTUALENVWRAPPER_PYTHON=/Library/Frameworks/Python.framework/Versions/3.7/bin/python3 +export PROJECT_HOME=$HOME/Devel +source /Library/Frameworks/Python.framework/Versions/3.7/bin/virtualenvwrapper.sh</pre> + +<p>You can find the correct locations for your system using the commands <code>which virtualenvwrapper.sh</code> and <code>which python3</code>.</p> +</div> + +<p>These are the same lines as for Ubuntu, but the startup file is the differently named hidden file <strong>.bash_profile</strong> in your home directory.</p> + +<div class="note"> +<p><strong>Note</strong>: If you can't find <strong>.bash_profile</strong> to edit in the finder, you can also open this in the terminal using nano.</p> + +<p>The commands look something like this:</p> + +<pre class="notranslate"><code>cd ~ # Navigate to my home directory +ls -la #List the content of the directory. YOu should see .bash_profile +nano .bash_profile # Open the file in the nano text editor, within the terminal +# Scroll to the end of the file, and copy in the lines above +# Use Ctrl+X to exit nano, Choose Y to save the file.</code> +</pre> +</div> + +<p>Then reload the startup file by making the following call in the terminal:</p> + +<pre class="brush: bash notranslate"><code>source ~/.bash_profile</code></pre> + +<p>At this point, you may see a bunch of scripts being run (the same scripts as for the Ubuntu installation). You should now be able to create a new virtual environment with the <code>mkvirtualenv</code> command.</p> + +<h4 id="Windows_10_virtual_environment_setup">Windows 10 virtual environment setup</h4> + +<p>Installing <a href="https://pypi.python.org/pypi/virtualenvwrapper-win">virtualenvwrapper-win</a> is even simpler than setting up <em>virtualenvwrapper</em> because you don't need to configure where the tool stores virtual environment information (there is a default value). All you need to do is run the following command in the command prompt:</p> + +<pre class="notranslate"><code>pip3 install virtualenvwrapper-win</code></pre> + +<p>Now you can create a new virtual environment with the <code>mkvirtualenv</code> command</p> + +<h3 id="Creating_a_virtual_environment">Creating a virtual environment</h3> + +<p>Setelah Anda menginstal <em>virtualenvwrapper</em> or <em>virtualenvwrapper-win</em> then working with virtual environments is very similar on all platforms.</p> + +<p>Sekarang anda dapat membuat lingkungan baru dengan perintah <code>mkvirtualenv</code> .Saat perintah ini berjalan, Anda akan melihat lingkungan sedang disiapkan (apa yang Anda lihat sedikit <em>platform-specific</em>). Ketika perintah selesai lingkungan virtual baru akan aktif - Anda dapat melihat ini karena awal prompt akan menjadi nama lingkungan dalam tanda kurung (di bawah ini kami menunjukkan ini untuk Ubuntu, tetapi baris terakhir mirip untuk Windows / macOS) .</p> + +<pre class="notranslate"><code>$ mkvirtualenv my_django_environment + +Running virtualenv with interpreter /usr/bin/python3 +... +virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/t_env7/bin/get_env_details +(my_django_environment) ubuntu@ubuntu:~$</code> +</pre> + +<p>Sekarang Anda berada di dalam lingkungan virtual Anda dapat menginstal Django dan mulai mengembangkan.</p> + +<div class="note"> +<p><strong>Catatan</strong>: Mulai sekarang dalam artikel ini (dan memang modul) asumsikan bahwa setiap perintah dijalankan dalam lingkungan virtual Python seperti yang kita atur di atas.</p> +</div> + +<h3 id="Menggunakan_lingkungan_virtual">Menggunakan lingkungan virtual</h3> + +<p>Hanya ada beberapa perintah berguna lainnya yang harus Anda ketahui (ada lebih banyak dalam dokumentasi alat, tetapi ini adalah yang akan Anda gunakan secara teratur):</p> + +<ul> + <li><code>deactivate</code> — Keluar dari lingkungan virtual Python saat ini</li> + <li><code>workon</code> — Daftar lingkungan virtual yang tersedia</li> + <li><code>workon name_of_environment</code> — Aktifkan lingkungan virtual Python yang ditentukan</li> + <li><code>rmvirtualenv name_of_environment</code> — Hapus lingkungan yang ditentukan.</li> +</ul> + +<h2 id="Installing_Django">Installing Django</h2> + +<p>Setelah Anda membuat lingkungan virtual, dan memanggil <code>workon</code> untuk memasukkannya, kamu dapat menggunakan <em>pip3 </em>untuk menginstal Django. </p> + +<pre class="brush: bash notranslate">pip3 install django~=2.2</pre> + +<p>Anda dapat menguji bahwa Django diinstal dengan menjalankan perintah berikut (ini hanya menguji apakah Python dapat menemukan modul Django):Anda dapat menguji bahwa Django diinstal dengan menjalankan perintah berikut (ini hanya menguji apakah Python dapat menemukan modul Django):</p> + +<pre class="brush: bash notranslate"># Linux/macOS +python3 -m django --version + 2.2.12 + +# Windows +py -3 -m django --version + 2.2.12 +</pre> + +<div class="note"> +<p><strong>Catatan</strong>: Jika perintah Windows di atas tidak menampilkan modul django, cobalah:</p> + +<pre class="brush: bash notranslate">py -m django --version</pre> + +<p>Pada Windows, skrip <em>Python 3</em> diluncurkan dengan mengawali perintah dengan <code>py -3</code>, meskipun ini dapat bervariasi tergantung pada instalasi spesifikasi anda. Coba hilangkan <code>-3 </code> jika anda menemukan masalah dengan perintah, Di Linux / macOS, perintahnya adalah <code>python3.</code></p> +</div> + +<div class="warning"> +<p><strong>Penting</strong>: Sisa <strong>modul ini </strong>menggunakan perintah <em>Linux</em> untuk menjalankan Python 3 (<code>python3</code>) . Jika anda bekerja pada <em>Windows </em>cukup ganti awalan ini dengan: <code>py -3</code></p> +</div> + +<h2 id="Menguji_instalasi_Anda">Menguji instalasi Anda</h2> + +<p>Tes di atas berfungsi, tetapi tidak terlalu menyenangkan. Tes yang lebih menarik adalah membuat proyek kerangka dan melihatnya bekerja. Untuk melakukan ini, pertama-tama navigasikan di command prompt / terminal Anda ke tempat Anda ingin menyimpan aplikasi Django Anda. Buat folder untuk situs pengujian Anda dan navigasikan ke dalamnya.</p> + +<pre class="brush: bash notranslate">mkdir django_test +cd django_test +</pre> + +<p>Anda kemudian dapat membuat situs kerangka baru bernama "<em>mytestsite</em>" menggunakan alat <strong>django-admin</strong> seperti yang ditunjukkan. Setelah membuat situs, Anda dapat menavigasi ke folder tempat Anda akan menemukan skrip utama untuk mengelola proyek, bernama <strong>manage.py</strong>.</p> + +<pre class="brush: bash notranslate">django-admin startproject mytestsite +cd mytestsite</pre> + +<p>Kita dapat menjalankan <em>development web server</em> dari dalam folder ini menggunakan <strong>manage.py</strong> dan perintah <code>runserver</code> , seperti yang ditunjukkan.</p> + +<pre class="brush: bash notranslate">$ python3 manage.py runserver +Performing system checks... + +System check identified no issues (0 silenced). + +You have 15 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions. +Run 'python manage.py migrate' to apply them. + +December 16, 2018 - 07:06:30 +Django version 2.2.12, using settings 'mytestsite.settings' +Starting development server at http://127.0.0.1:8000/ +Quit the server with CONTROL-C. +</pre> + +<div class="note"> +<p><strong>Catatan: </strong>Perintah di atas menunjukkan perintah Linux / macOS. Anda dapat mengabaikan peringatan tentang "15 migrasi yang belum diterapkan" pada titik ini!</p> +</div> + +<p>Setelah server berjalan, Anda dapat melihat situs dengan menavigasi ke URL berikut di browser web lokal Anda:<code>http://127.0.0.1:8000/</code>. Anda akan melihat situs yang terlihat seperti ini:<br> + <img alt="Django Skeleton App Homepage - Django 2.0" src="https://mdn.mozillademos.org/files/16288/Django_Skeleton_Website_Homepage_2_1.png" style="height: 714px; width: 806px;"></p> + +<ul> +</ul> + +<h2 id="Ringkasan">Ringkasan</h2> + +<p>Anda sekarang memiliki lingkungan pengembangan Django dan berjalan di komputer Anda.</p> + +<p>Di bagian pengujian Anda juga melihat secara singkat bagaimana kami dapat membuat situs web Django baru menggunakan <code>django-admin startproject</code>, dan jalankan di browser Anda menggunakan server web pengembangan (<code>python3 manage.py runserver</code>). Pada artikel selanjutnya, kami memperluas proses ini, membangun aplikasi web yang sederhana namun lengkap.</p> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li><a href="https://docs.djangoproject.com/en/2.1/intro/install/">Quick Install Guide</a> (Django docs)</li> + <li><a href="https://docs.djangoproject.com/en/2.1/topics/install/">How to install Django — Complete guide</a> (Django docs) - termasuk informasi tentang cara menghapus Django</li> + <li><a href="https://docs.djangoproject.com/en/2.1/howto/windows/">How to install Django on Windows</a> (Django docs)</li> +</ul> + +<p>{{PreviousMenuNext("Learn/Server-side/Django/Introduction", "Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django")}}</p> + +<h2 id="Dalam_modul_ini">Dalam modul ini</h2> + +<ul> + <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li> +</ul> diff --git a/files/id/learn/server-side/django/index.html b/files/id/learn/server-side/django/index.html new file mode 100644 index 0000000000..c95aa6f162 --- /dev/null +++ b/files/id/learn/server-side/django/index.html @@ -0,0 +1,67 @@ +--- +title: Django Web Framework (Python) +slug: Learn/Server-side/Django +tags: + - CodingScripting + - Pemula + - Python + - Server-side programming + - belajar + - django +translation_of: Learn/Server-side/Django +--- +<div>{{LearnSidebar}}</div> + +<p>Django merupakan sebuah web framework server-side yang sangat populer dan unggul. Modul ini menunjukan mengapa Django adalah salah satu web server frameworks yang paling populer, bagaimana mempersiapkan sebuah lingkungan pengembangan, dan bagaimana memulai menggunakan Django untuk membuat aplikasi web milik Anda.</p> + +<h2 id="Persyaratan">Persyaratan</h2> + +<p>Sebelum memulai modul ini, Anda tidak perlu memiliki pengetahuan tentang Django. Anda perlu mengetahui apa itu server-side web programming dan web frameworks, idealnya dengan membaca topik di modul <a href="/en-US/docs/Learn/Server-side/First_steps">Server-side website programming first steps</a>.</p> + +<p>Pengetahuan umum tentang konsep pemrograman dan <a href="/en-US/docs/Glossary/Python">Python</a> sangat direkomendasikan, tetapi tidak penting untuk memahami konsep inti.</p> + +<div class="note"> +<p><strong>Catatan</strong>: Python adalah salah satu bahasa pemrograman termudah bagi pemula untuk dibaca dan dimengerti. Disarankan, jika Anda ingin memahami modul ini dengan lebih baik maka ada banyak buku dan tutorial gratis yang tersedia di internet (programmers baru barangkali ingin memeriksa halaman <a href="https://wiki.python.org/moin/BeginnersGuide/NonProgrammers">Python untuk Non Programmers</a> di wiki python.org).</p> +</div> + +<h2 id="Panduan">Panduan</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Pengenalan Django</a></dt> + <dd>Dalam artikel pertama Django kita menjawab pertanyaan "Apa itu Django?" dan memberi Anda sebuah gambaran tentang apa yang membuat web framework ini spesial. Kita akan menjelaskan mengenai fitur utama-nya, termasuk beberapa fungsi lanjutan yang tidak dapat kami bahas secara rinci dalam modul ini. Kita juga akan menunjukan Anda beberapa bagian utama aplikasi Django, untuk memberi gambaran tentang apa yang dapat dilakukan sebelum Anda memasangnya dan mulai bermain.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Menyiapkan lingkungan pengembangan Django</a></dt> + <dd>Sekarang Anda sudah tahu apa itu Django, Kita akan menunjukan Anda bagaimana untuk mempersiapkan dan menguji sebuah lingkungan pengembangan Django pada Windows, Linux (Ubuntu), dan Mac OS X -- apapun sistem operasi yang Anda gunakan, artikel ini akan memberi apa yang Anda inginkan untuk dapat mulai mengembangkan aplikasi Django.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: Situs Perpustakaan Lokal</a></dt> + <dd>Artikel pertama dalam rangkaian tutorial praktis kami menjelaskan apa yang akan Anda pelajari, dan memberikan gambaran umum tentang "perpustakaan lokal", contoh situs yang akan Kita kerjakan dan kembangkan di artikel berikutnya.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Membuat kerangka website</a></dt> + <dd>Artikel ini menjelaskan bagaimana Anda dapat membuat sebuah "skeleton (kerangka)" website sebagai dasar, yang kemudian dapat Anda gunakan untuk diisi dengan pengaturan situs, <strong>urls</strong>, <strong>models</strong>, <strong>views</strong>, dan <strong>templates</strong>.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Menggunakan Models</a></dt> + <dd>Artikel ini menunjukan bagaimana untuk mendefinisikan models untuk website <em>LocalLibrary</em> — models mewakili sebuah struktur data yang ingin disimpan dalam data aplikasi kita, dan juga memperbolehkan Django untuk menyimpan data didalam sebuah database untuk kita(dan memodifikasinya nanti). Hal ini menjelaskan apa itu model, bagaimana hal itu di deklarasikan, dan beberapa jenis field (attribute suatu data) utama.Hal ini juga secara singkat menunjukkan beberapa cara utama untuk mengakses data model.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin situs</a></dt> + <dd>Sekarang setelah kita membuat models untuk website <em>LocalLibrary</em>. Kita akan mengunakan situs Django Admin untuk menambahkan beberapa data buku "sebenarnya". Pertama Kita akan menunjukkan Anda bagaimana cara mendaftarkan models dengan situs admin (admin site), lalu kita akan menunjukkan cara masuk dan membuat beberapa data. Pada akhirnya Kita menunjukkan beberapa cara untuk lebih meningkatkan penyajian situs admin.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Membuat home page Kita</a></dt> + <dd>Kita telah mengetahui bahwa untuk menambahkan sebuah kode untuk menampilkan halaman penuh pertama kita -- sebuah homepage untuk <em>Locallibrary </em>yang menunjukkan berapa banyak record yang Kita miliki dari masing-masing tipe model dan menyediakan link navigasi sidebar ke halaman Kita yang lain. Sepanjang jalan kita akan mendapatkan pengalaman praktek dalam menulis URL maps dan views, mendapatkan records dari sebuah database, dan menggunakan templates.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: List umum dan detail views</a></dt> + <dd>Tutorial ini mengembangkan website <em>Locallibrary</em> Kita, menambahkan list dan detail untuk books dan authors. Di sini kita akan belajar tentang <em>generic class-based views (sebuah tampilan berbasis class)</em>, dan menampilkan bagaimana mereka dapat mengurangi jumlah kode yang harus Anda tulis untuk kasus penggunaan umum. Kita juga akan membahas URL secara lebih rinci, menunjukkan bagaimana melakukan pencocokan pola dasar.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></dt> + <dd>Tutorial ini mengembangkan website <em>LocalLibrary</em> kita, menambahkan session-based visit-counter ke sebuah home page. Ini adalah contoh yang relatif sederhana, namun ini menunjukkan bagaimana Anda dapat menggunakan sesi framework untuk menyediakan perilaku konsisten bagi pengguna anonymous(anonim) di situs Anda sendiri.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and perizinan</a></dt> + <dd>Pada tutorial ini Kami akan menunjukan Anda bagaimana untuk memperbolehkan pengguna untuk masuk ke situs Anda dengan akun mereka, dan bagaimana mengatur apa yang dapat mereka lakukan dan melihat berdasarkan pada apakah <span class="short_text" id="result_box" lang="id"><span>mereka login dan <em>perizinan</em> mereka</span></span>. Sebagai bagian dari demonstrasi ini, kita akan memperluas website <em>LocalLibrary</em>, menambahkan halaman masuk dan logout, dan halaman pengguna dan staf untuk melihat buku-buku yang telah dipinjam.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Bekerja dengan forms</a></dt> + <dd>Dalam tutorial ini Kami akan menunjukkan cara bekerja dengan <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML Forms</a> di Django, dan khusunya cara termudah untuk menulis Forms untuk membuat, memperbaru, dan menghapus model Instances. Sebagai bagian dari demonstrasi ini, Kita akan memperluas website <em>LocalLibrary</em> sehingga pustakawan dapat memperbarui buku, dan membuat, memperbarui, dan menghapus penulis menggunakan formulir kita sendir(bukan menggunakan aplikasi admin).</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Menguji aplikasi web Django</a></dt> + <dd>Seiring berkembangnya website mereka menjadi lebih sulit untuk dilakukan pengujian secara manual -- bukan hanya karena adanya lebih banyak tes, namun, karena interaksi antar komponen menjadi lebih kompleks, perubahan kecil di satu area dapat memerlukan banyak tes tambahan untuk memverifikasi pengaruhnya terhadap area lain. Salah satu cara untuk mengurangi masalah ini adalah dengan menulis tes secara otomatis, yang dapat dengan mudah dan handal dijalankan setiap kali Anda melakukan perubahan. Tutorial ini menunjukkan bagaimana mengotomatisasi <em>pengujian unit</em> dari situs Anda menggunakan Django's test framework.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Meluncurkan Django untuk produksi</a></dt> + <dd>Sekarang Anda telah membuat (dan menguji) website <em>LocalLibrary</em> yang hebat, Anda akan menginstallnya pada public web server sehingga bisa diakses oleh staf perpustakaan dan anggota melalui internet. Artikel ini memberikan gambaran umum tentang bagaimana Anda bisa menemukan host untuk menyebarkan situs web Anda, dan apa yang perlu Anda lakukan agar situs Anda siap masuk produksi.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Keamanan aplikasi web Django</a></dt> + <dd>Melindungi data pengguna merupakan bagian penting dari setiap desain situs web. Kita sebelumnya menjelaskan beberapa ancaman keamanan yang lebih umum dalam artikel <a href="https://developer.mozilla.org/en-US/docs/Web/Security">Web security</a> — artikel ini memberikan demonstrasi praktis tentang bagaimana perlindungan built-in (yang secara default terinstall) Django menangani ancaman tersebut.</dd> +</dl> + +<h2 id="Penilaian">Penilaian</h2> + +<p>Penilaian berikut akan menguji pemahaman Anda tentang bagaimana membuat situs web menggunakan Django, seperti yang dijelaskan dalam panduan yang tercantum di atas.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></dt> + <dd>Dalam penilaian ini Anda akan menggunakan beberapa pengetahuan yang telah Anda pelajari dari modul ini untuk membuat blog Anda sendiri.</dd> +</dl> diff --git a/files/id/learn/server-side/django/tutorial_local_library_website/index.html b/files/id/learn/server-side/django/tutorial_local_library_website/index.html new file mode 100644 index 0000000000..21ed6a040e --- /dev/null +++ b/files/id/learn/server-side/django/tutorial_local_library_website/index.html @@ -0,0 +1,90 @@ +--- +title: 'Django Tutorial: The Local Library website' +slug: Learn/Server-side/Django/Tutorial_local_library_website +translation_of: Learn/Server-side/Django/Tutorial_local_library_website +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django")}}</div> + +<div>Pada artikel pertama ini dalam seri latihan praktek menjelaskan apa yang akan Anda pelajari, dan menyediakan sebuah gambaran mengenai percobaan website "local library" Kita akan bekerja dan terus berkembang pada artikel-artikel selanjuntya.</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <td>Read the <a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django Introduction</a>. For the following articles you'll also need to have <a href="/en-US/docs/Learn/Server-side/Django/development_environment">set up a Django development environment</a>. </td> + </tr> + <tr> + <th scope="row">Objective:</th> + <td>To introduce the example application used in this tutorial, and allow readers to understand what topics will be covered. </td> + </tr> + </tbody> +</table> + +<h2 id="Gambaran">Gambaran</h2> + +<p>Selamat datang di tutorial django MDN "Local Library", dimana kita akan mengembangakn sebuah website yang memungkinkan untuk mengatur sebuah katalog untuk perpustakaan lokal. </p> + +<p>Pada seri ini Anda akan:</p> + +<ul> + <li>Menggunakan alat Django untuk membuat sebuah kerangka website dan aplikasi.</li> + <li>Memulai dan memberhentikan development server.</li> + <li>Membuat models untuk mempresentasikan data aplikasi Anda.</li> + <li>Menggunakan Django admin site untuk menempati data situs Anda.</li> + <li>Membuat views untuk mengembalikan suatu data yang spesifik sebagai tanggapan atas permintaan-permintaan yang berbeda, dan templates untuk me-render data tersebut ke HTML untuk ditampilkan kedalam browser.</li> + <li>Membuat mappers untuk menyatukan URL yang berbeda dengan spesifik views.</li> + <li>Menambahkan user authorization dan sessions untuk mengontrol perilaku dan akses.</li> + <li>Bekerja dengan forms.</li> + <li>Menulis test code untuk app Anda.</li> + <li>Menggunakan Django security secara efektif.</li> + <li>Men-deploy aplikasi anda kedalam produksi</li> +</ul> + +<p>Anda sudah belajar mengenai beberapa topik-topik yang akan dibahas. Pada akhir seri tutorial Anda seharusnya cukup tahu untuk mengembangkan aplikasi simple Django secara pribadi.</p> + +<h2 id="The_LocalLibrary_website">The LocalLibrary website</h2> + +<p><em>LocalLibrary</em> is the name of the website that we'll create and evolve over the course of this series of tutorials. As you'd expect, the purpose of the website is to provide an online catalog for a small local library, where users can browse available books and manage their accounts.</p> + +<p>This example has been carefully chosen because it can scale to show as much or as little detail as we need, and can be used to show off almost any Django feature. More importantly, it allows us to provide a <em>guided</em> path through the most important functionality in the Django web framework:</p> + +<ul> + <li>In the first few tutorial articles we will define a simple <em>browse-only </em>library that library members can use to find out what books are available. This allows us to explore the operations that are common to almost every website: reading and displaying content from a database.</li> + <li>As we progress, the library example naturally extends to demonstrate more advanced Django features. For example we can extend the library to allow users to reserve books, and use this to demonstrate how to use forms, and support user authentication.</li> +</ul> + +<p>Even though this is a very extensible example, it's called <em><strong>Local</strong>Library</em> for a reason — we're hoping to show the minimum information that will help you get up and running with Django quickly. As a result we'll store information about books, copies of books, authors and other key information. We won't however be storing information about other items a library might store, or provide the infrastructure needed to support multiple library sites or other "big library" features. </p> + +<h2 id="Im_stuck_where_can_I_get_the_source">I'm stuck, where can I get the source?</h2> + +<p>As you work through the tutorial we'll provide the appropriate code snippets for you to copy and paste at each point, and there will be other code that we hope you'll extend yourself (with some guidance).</p> + +<p>If you get stuck, you can find the fully developed version of the website <a href="https://github.com/mdn/django-locallibrary-tutorial">on Github here</a>.</p> + +<h2 id="Summary">Summary</h2> + +<p>Now that you know a bit more about the <em>LocalLibrary</em> website and what you're going to learn, it's time to start creating a <a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">skeleton project</a> to contain our example.</p> + +<p>{{PreviousMenuNext("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li> +</ul> diff --git a/files/id/learn/server-side/first_steps/index.html b/files/id/learn/server-side/first_steps/index.html new file mode 100644 index 0000000000..b085099081 --- /dev/null +++ b/files/id/learn/server-side/first_steps/index.html @@ -0,0 +1,39 @@ +--- +title: Server-side website programming first steps +slug: Learn/Server-side/First_steps +translation_of: Learn/Server-side/First_steps +--- +<div>{{LearnSidebar}}</div> + +<p>Pada module server-side ini, akan menjawab beberapa pertanyaan mendasar mengenai pemrograman server-side--, apa itu ?, apa bedanya dengan pemrograman client-side ?, kenapa pemmogrmaan ini sangat berguna. Kemudian akan diberikan penjelasan singkat dari beberapa framework pemrograman server-side populer, bersamaan dengan petunjuk bagaimana memilih framework yang paling cocok untuk website Anda. </p> + +<h2 id="Prasyarat">Prasyarat</h2> + +<p>Sebelum memulai modul ini, Anda tidak harus memiliki pengetahuan apapun mengenai pemgrograman server-side, atau jenis pemrograman lainnya.</p> + +<p>Anda perlu untuk mengeti "bagaimana web bekerja". Kami sarankan Anda baca terlebih dahulu topik - topik berikut:</p> + +<ul> + <li>Apa itu web server</li> + <li>Apa software yang butuhkan untuk membuat sebuah website ?</li> + <li>Bagaimana cara mengupload file ke web server.</li> +</ul> + +<p>Dengan pemahaman dasar diatas, Anda akan siap untuk belajar dengan modul ini. </p> + +<h2 id="Panduan">Panduan</h2> + +<dl> + <dt>Pengenalan web<a href="/en-US/docs/Learn/Server-side/First_steps/Introduction"> server side</a></dt> + <dd>Welcome to the MDN beginner's server-side programming course! In this first article we look at Server-side programming from a high level, answering questions such as "what is it?", "how does it differ from client-side programming?", and "why it is so useful?". After reading this article you'll understand the additional power available to websites through server-side coding.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview">Client-Server overview</a></dt> + <dd>Now that you know the purpose and potential benefits of server-side programming we're going to examine in detail what happens when a server receives a "dynamic request" from a browser. As most website server-side code handles requests and responses in similar ways, this will help you understand what you need to do when writing your own code.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/First_steps/Web_frameworks">Server-side web frameworks</a></dt> + <dd>The last article showed you what a server-side web application needs to do in order to respond to requests from a web browser. Now we show how web frameworks can simplify these tasks, and help you choose the right framework for your first server-side web application.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">Website security</a></dt> + <dd>Website security requires vigilance in all aspects of website design and usage. This introductory article won't make you a website security guru, but it will help you understand the first important steps you can take to harden your web application against the most common threats.</dd> +</dl> + +<h2 id="Assessments">Assessments</h2> + +<p>This "overview" module doesn't have any assessement because we haven't yet shown you any code. We do hope at this point you have a good understanding of what sorts of functionality you can deliver using server-side programming and you have made a decision about what server-side web framework you will use to create your first website.</p> diff --git a/files/id/learn/server-side/index.html b/files/id/learn/server-side/index.html new file mode 100644 index 0000000000..b497257371 --- /dev/null +++ b/files/id/learn/server-side/index.html @@ -0,0 +1,59 @@ +--- +title: Server-side website programming +slug: Learn/Server-side +tags: + - Beginner + - CodingScripting + - Intro + - Landing + - Learn + - NeedsTranslation + - Server + - Server-side programming + - Topic + - TopicStub +translation_of: Learn/Server-side +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">The <strong><em>Dynamic Websites </em></strong>–<em><strong> Server-side programming</strong></em> topic is a series of modules that show how to create dynamic websites; websites that deliver customised information in response to HTTP requests. The modules provide a generic introduction to server-side programming, along with specific beginner-level guides on how to use the Django (Python) and Express (Node.js/JavaScript) web frameworks to create basic applications.</p> + +<p>Most major websites use some kind of server-side technology to dynamically display different data as required. For example, imagine how many products are available on Amazon, and imagine how many posts have been written on Facebook? Displaying all of these using completely different static pages would be completely inefficient, so instead such sites display static templates (built using <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>), and then dynamically update the data displayed inside those templates when needed, e.g. when you want to view a different product on Amazon.</p> + +<p>In the modern world of web development, learning about server-side development is highly recommended.</p> + +<h2 id="Learning_pathway">Learning pathway</h2> + +<p>Getting started with server-side programming is usually easier than with client-side development, because dynamic websites tend to perform a lot of very similar operations (retrieving data from a database and displaying it in a page, validating user-entered data and saving it in a database, checking user permissions and logging users in, etc.), and are constructed using web frameworks that make these and other common web server operations easy.</p> + +<p>A basic knowledge of programming concepts (or of a particular programming language) is useful, but not essential. Similarly, expertise in client-side coding is not required, but a basic knowledge will help you work better with the developers creating your client-side web "front end".</p> + +<p>You will need to understand "how the web works". We recommend that you first read the following topics:</p> + +<ul> + <li><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">What is a web server</a></li> + <li><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">What software do I need to build a website?</a></li> + <li><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">How do you upload files to a web server?</a></li> +</ul> + +<p>With that basic understanding you'll be ready to work your way through the modules in this section. </p> + +<h2 id="Modules">Modules</h2> + +<p>This topic contains the following modules. You should start with the first module, then go on to one of the following modules, which show how to work with two very popular server-side languages using appropriate web frameworks . </p> + +<dl> + <dt><a href="/en-US/docs/Learn/Server-side/First_steps">Server-side website programming first steps</a></dt> + <dd>This module provides server-technology-agnostic information about server-side website programming, including answers to fundamental questions about server-side programming — "what it is", "how it differs from client-side programming", and "why it is so useful" — and an overview of some of the more popular server-side web frameworks and guidance on how to select the most suitable for your site. Lastly we provide an introductory section on web server security.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django">Django Web Framework (Python)</a></dt> + <dd>Django is an extremely popular and fully featured server-side web framework, written in Python. The module explains why Django is such a good web server framework, how to set up a development environment and how to perform common tasks with it.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Express Web Framework (Node.js/JavaScript)</a></dt> + <dd>Express is a popular web framework, written in JavaScript and hosted within the node.js runtime environment. The module explains some of the key benefits of this framework, how to set up your development environment and how to perform common web development and deployment tasks.</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/Server-side/Node_server_without_framework">Node server without framework</a></dt> + <dd>This article provides a simple static file server built with pure Node.js, for those of you not wanting to use a framework.</dd> +</dl> diff --git a/files/id/learn/web_mechanics/index.html b/files/id/learn/web_mechanics/index.html new file mode 100644 index 0000000000..c1cb59bd12 --- /dev/null +++ b/files/id/learn/web_mechanics/index.html @@ -0,0 +1,29 @@ +--- +title: Mekanisme Web +slug: Learn/Web_Mechanics +tags: + - MekanismeWeb + - Pemula +translation_of: Learn/Common_questions +--- +<p>Kompetensi ini merepresentasikan pemahaman Anda mengenai ekosistem web. Kami pecah pengetahuan yang Anda butuhkan kedalam bentuk yang lebih kecil, yakni detil keahliannya.</p> + +<p>{{NoteStart}}<em>Mekanisme web</em> berfokus pada sisi fungsional dari ekosistem web, bukan pada sisi teknis, dimana pembahasannya berada pada <em><a href="/en-US/docs/Learn/skills/Infrastructure">Infrastruktur</a>.</em>{{NoteEnd}}</p> + +<h2 id="Keahlian_Dasar">Keahlian Dasar</h2> + +<p>Mulailah dari sini jika Anda belum akrab dengan web. Kami juga menyarankan Anda untuk mengunjungi ke halaman <a href="/en-US/docs/Glossary">glosarium </a>kami untuk bantuan dalam memahami berbagai jargon yang ada pada web.</p> + +<p>{{ArticlesByTag({"tags":["WebMechanics","Beginner"]})}}</p> + +<h2 id="Keahlian_Menengah">Keahlian Menengah</h2> + +<p>Jika Anda sudah pernah mengenal web, di sini ada beberapa detail yang dapat Anda pelajari lebih lanjut:</p> + +<p>{{ArticlesByTag({"tags":["WebMechanics","Intermediate"]})}}</p> + +<h2 id="Keahlian_Lanjutan">Keahlian Lanjutan</h2> + +<p>Jika Anda adalah seorang pembuat web yang berpengalaman, Anda mungkin tertarik untuk mempelajari keahlian yang luar biasa.</p> + +<p>{{ArticlesByTag({"tags":["WebMechanics","Advanced"]})}}</p> diff --git a/files/id/mdn/about/index.html b/files/id/mdn/about/index.html new file mode 100644 index 0000000000..f220277d09 --- /dev/null +++ b/files/id/mdn/about/index.html @@ -0,0 +1,135 @@ +--- +title: About MDN Web Docs +slug: MDN/About +translation_of: MDN/About +--- +<div>{{MDNSidebar}}</div> + +<div>{{IncludeSubNav("/en-US/docs/MDN")}}</div> + +<p>MDN Web Docs (yang sebelumnya dikenal sebagai MDN — the Mozilla Developer Network) adalah sebuah platform pembelajaran untuk teknologi web dan perangkat lunak yang berbasis Web. termasuk: </p> + +<ul> + <li>Standar Web seperti <a href="/en-US/docs/CSS" title="/en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/HTML" title="/en-US/docs/HTML">HTML</a>, dan <a href="/en-US/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a></li> + <li><a href="/en-US/docs/Apps" title="/en-US/docs/Apps">Open Web app development</a></li> + <li><a href="/en-US/docs/Add-ons" title="/en-US/docs/Add-ons">Firefox add-on development</a></li> +</ul> + +<h2 id="Misi_Kami">Misi Kami</h2> + +<p>Misi MDN sederhana: menyediakan pengembang informasi yang pengembang butuhkan untuk membangun proyek <a href="https://wiki.developer.mozilla.org/en-US/docs/Web">open Web</a> dengan mudah. Jika MDN adalah sebuah teknologi terbuka di Web, kita ingin mendokumentasikannya.</p> + +<p>Kita juga menyediakan dokumentasi tentang <a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla">Mozilla products</a> dan cara <a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla">build and contribute to Mozilla projects</a>.</p> + +<p>Jika kamu tidak yakin apakah sebuah artikel harus dibahas di MDN, baca <a href="https://wiki.developer.mozilla.org/en-US/docs/Project:MDN/Contributing/Does_this_belong">Does this belong on MDN?</a></p> + +<h2 id="Cara_kamu_dapat_membantu">Cara kamu dapat membantu</h2> + +<p>Kamu tidak perlu menjadi seorang coder profesional atau penulis untuk membantu MDN! Kita mempunya banyak cara agar kamu dapat membantu, dari me-review artikel memastikan artikel tersebut masuk akal, kontribusi di tulisan, menambahkan contoh kode. Sebenarnya, ada banyak cara untuk membantu. Kami memiliki halaman <a href="/en-US/docs/MDN/Getting_started">Getting Started</a> yang membantu kamu mengambil tugas untuk dikerjakan berdasarkan ketertarikanmu dan jumlah waktu yang kamu luangkan!.</p> + +<p>Kamu juga dapat membantu dengan mempromosikan<a href="/en-US/docs/MDN/About/Promote"> MDN</a> pada blog atau website mu.</p> + +<h2 id="Komunitas_MDN">Komunitas MDN </h2> + +<p>Komunitas kita bersifat global. Kami memiliki kontributor yang luar biasa di seluruh dunia yang bekerja dengan berbagai bahasa. Jika kamu suka untuk belajar lebih banyak tentang kita, atau kamu butuh bantuan MDN, cek <a href="https://discourse.mozilla-community.org/c/mdn">discussion forum</a> kami atau saluran <a href="irc://irc.mozilla.org#mdn">IRC</a>! Kamu juga dapat menetahui berita terbaru tentang kamu dengan me- follow akun Twitter, <a href="http://twitter.com/MozDevNet">@MozDevNet</a>. Kamu juga dapat mengirimkan cuitan ke kami jika kau melihat sesuatu yang salah atau jika kamu suka memberikan masukkan (kami akan berterima kasih) pada penulis - penulis dan kontributor kami.</p> + + + +<h2 id="Menggunakan_konten_website_dokumentasi_MDN">Menggunakan konten website dokumentasi MDN</h2> + +<p>Konten MDN tersedia gratis, dan berlisensi open source.</p> + +<h3 id="Hak_cipta_dan_lisensi">Hak cipta dan lisensi</h3> + +<p>Konten MDN semuanya tersedia dengan berbagai variasi lisensi open source. Pada bagian ini membahas tipe-tipe konten yang kami sediakan dan lisensi yang berefek di masing-masingnya.</p> + +<h4 id="Dokumentasi_dan_artikel">Dokumentasi dan artikel</h4> + +<p><strong>MDN wiki documents</strong> telah disiapkan oleh kontribusi-kontribusi penulis baik dari dalam maupun dari luar Mozilla Foundation. Kecuali diyatakan lain, konten tersedia dibawah syarat <a class="external text" href="https://creativecommons.org/licenses/by-sa/2.5/" rel="nofollow">Creative Commons Attribution-ShareAlike license</a> (CC-BY-SA), v2.5 atau versi selanjutnya. </p> + +<p>Ketika menggukan ulang konten MDN, kamu perlu memastikan 2 hal:</p> + +<ol> + <li> + <p>Atribusi diberikan pada konten orisinil.</p> + + <p>Mohon atribut "Kontributor Mozilla" dan termasuk sebuah tautan (online) atau URL (cetak) ke halaman wiki khusus untuk sumber konten. Contoh, untuk menyediakan atribusi pada artikel ini, kamu dapat menulis:</p> + + <blockquote> + <p><a href="https://developer.mozilla.org/en-US/docs/MDN/About">About MDN</a> oleh <a href="https://developer.mozilla.org/en-US/docs/MDN/About$history">Mozilla Contributors</a> dibawah lisensi <a href="https://creativecommons.org/licenses/by-sa/2.5/">CC-BY-SA 2.5</a>.</p> + </blockquote> + + <p>Catat bahwa pada contoh, tautan "Mozilla Contributors" ke halaman official. liat <a href="https://wiki.creativecommons.org/Marking/Users">Best practices for attribution</a> untuk penjelasan lebih lanjut.</p> + </li> + <li> + <p>Penggunaan ulang di publikasikan dibawah lisensi yag sama dengan konten original—CC-BY-SA v2.5 atau versi selanjutnya.</p> + </li> +</ol> + +<h4 id="Contoh_kode_dan_bagian_kecil">Contoh kode dan bagian kecil</h4> + +<p>Contoh kode yang ditambahkan pada atau setelah 20 Agustus 2010 pada <a class="external" href="https://creativecommons.org/publicdomain/zero/1.0/">public domain</a> (<a href="https://creativecommons.org/publicdomain/zero/1.0/">CC0</a>). Tidak diperlukan pemberitahuan lisensi, tapi jika kamu butuh lisensi, kamu dapat menggunakan: "Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/".</p> + +<p>Contoh kode yang ditambahkan pada wiki ini sebelum 20 Agustus 2010 tersedia dibawah lisensi <a class="external" href="https://opensource.org/licenses/mit-license.php">MIT license</a>; Kamu harus menambahkan informasi atribusi pada MIT template: "© <tanggal revisi halaman wiki> <nama orang yang memasukkan ke wiki></p> + +<p>Kamu dapat menentukan lisensi mana pada sebuah contoh kode yang tersedia dibawah history artikel. Untuk menampilkan history :</p> + +<ol> + <li>Klik tombol <strong>Edit in wiki</strong> pada header artikel. Tombol ini membawa kamu pada artikel sama yang <a href="https://wiki.developer.mozilla.org">editable, wiki version of MDN Web Docs</a> (tapi tidak benar-benar menempatkan artikel pada mode edit). </li> + <li>Klik ikon berbentuk roda gigi pada header di artikel wiki, dan pilih <strong>History </strong>pada menu yang muncul.</li> + <li>Klik <strong>View All</strong>, dan lihat revisi terbaru yang ada sebelum 20 Agustus 2010 (jika ada) .</li> + <li>Klik stempel tanggal dari revisi untuk melihat revisi pada artikel dihari itu .</li> +</ol> + +<p>Jika terdapat contoh revisi yang kamu pilih, kemudian revisi itu ditambahkan sebelum lisensi dirubah dan tersedia dibawah syarat lisensi MIT. Jika contoh kode tidak ada atau tidak ada revisi sebelum 20 Agustus 2010, kemudian revisi telah ditambahkan setelah berubah dan pada domain publik.</p> + +<h4 id="Kontribusi">Kontribusi</h4> + +<p>Jika kamu berharap untuk berkontribusi pada wiki ini, kamu harus membuat dokumentasi tersedia dibawah lisensi Attribution-ShareAlike (atau ada kalanya sebuah lisensi alternatif yang secara khusus pada halaman yang kamu edit), dan contoh kode tersedia dibawah <a href="https://creativecommons.org/publicdomain/zero/1.0/">Creative Commons CC-0</a> (sebuah dedikasi Public Domain ). Menambahkan pada wiki ini berarti kamu setuju bahwa kontribusimu akan dibuat tersedia dibawah lisensi tersebut.</p> + +<p>Beberapa konten lama yang telah dibuat dibawah sebuah lisensi lain dari pada lisensi yang telah dijelaskan diatas; Konten ini ditunjukkan pada bagian bawah disetiap halaman melalui sebuah <a class="internal" href="/Archive/Meta_docs/Examples/Alternate_License_Block">Alternate License Block</a>.</p> + +<div class="warning"> +<p>Tidak ada halaman baru yang mungkin dibuat menggunakan alternate licenses.</p> +</div> + +<p><strong>Hak cipta untuk kontribusi materi tetap pada penulis kecuali penulis menetapkannya pada orang lain</strong>.</p> + +<p>Jika kamu memiliki pertanyaan atau kepentingan tentang diskusi disini, mohon hubungi<a class="external" href="mailto:mdn-admins@mozilla.org?subject=MDN%20licensing%20question" rel="nofollow" title="mailto:eshepherd@mozilla.com"> MDN administrators</a>.</p> + +<h4 id="Logo_merek_dagang_tanda_layanan_dan_tanda_kata.">Logo, merek dagang, tanda layanan dan tanda kata.</h4> + +<hr> +<p>Hak pada merek datang, logo, dan tanda layanan pada Mozilla Foundation, serta tampilan dan nuansa pada website, tidak berada dibawah lisensi Creative Commons, dan luasnya merupakan karya penulis (seperti logo dan desain grafis), mereka tidak termasuk pada karya yang dibawah lisensi pada persyaratan tersebut. Jika kamu menggunakan tulisan pada dokumen, dan berharap menggunakan hak ini, atau kamu punya pertanyaan-pertanyaan lain tentang mematuhi persyaratan lisensi pada koleksi ini. kamu harus menghubungi Mozilla Foundation disini: <a class="external text" href="mailto:licensing@mozilla.org" rel="nofollow" title="mailto:licensing@mozilla.org">licensing@mozilla.org</a>.</p> + +<h3 id="Menautkan_MDN">Menautkan MDN</h3> + +<p>Lihat artikel ini untuk pedoman <a href="/en-US/docs/MDN/About/Linking_to_MDN">linking to MDN</a> untuk praktek terbaik ketika menautkan.</p> + +<h2 id="Mengunduh_konten">Mengunduh konten</h2> + +<h3 id="Halaman_tunggal">Halaman tunggal</h3> + +<p>Kamu dapat menyalin konten dari halaman tunggal pada MDN dengan menambahkan <a href="/en-US/docs/MDN/Contribute/Tools/Document_parameters#URL_parameters">URL parameters</a> untuk menetapkan format yang kamu inginkan.</p> + +<h3 id="Alat_Third-party">Alat Third-party</h3> + +<p>Kamu dapat meliat konten MDN melalui alat third-party seperti <a href="https://kapeli.com/dash">Dash</a> (untuk macOS) dan <a href="https://zealdocs.org/">Zeal</a> (untuk Linux dan Windows).</p> + +<p><a href="https://kapeli.com/">Kapeli</a> juga mempublikasikan <a href="https://kapeli.com/mdn_offline">offline MDN docs</a> covering HTML, CSS, JavaScript, SVG, dan XSLT.</p> + +<h2 id="Melaporkan_masalah_pada_Documen_Web_MDN">Melaporkan masalah pada Documen Web MDN</h2> + +<p>lihat <a href="/en-US/docs/MDN/Contribute/Howto/Report_a_problem">How to report a problem on MDN</a>.</p> + +<h2 id="Sejarah_Dokumen_Web_MDN">Sejarah Dokumen Web MDN</h2> + +<p>MDN Web Docs (sebelumnya <em>Mozilla Developer Network (MDN)</em>, sebelumnya <em>Mozilla Developer Center (MDC)</em>, a.k.a. <em>Devmo</em>) proyek dimulai pada awal 2005, ketika <a class="external" href="https://foundation.mozilla.org">Mozilla Foundation</a> memperoleh sebuah lisensi dari AOL untuk menggunakan konten original Netscape <a href="https://web.archive.org/web/*/devedge.netscape.com" title="Project:en/DevEdge">DevEdge</a>. Konten DevEdge merupakan konten yang masih sangat berguna yang kemudian di migrasi sukarelawan pada wiki ini sehingga konten ini menjadi mudah diperbarui dan dipelihara.</p> + +<p>Nama telah dirubah menjadi MDN Web Docs pada Juni 2017. Lihat <a href="https://blog.mozilla.org/opendesign/future-mdn-focus-web-docs/">The Future of MDN: A Focus on Web Docs</a> untuk alasan dibalik keputusan ini.</p> + +<p>Kamu dapat mencari lebih banyak sejarah MDN pada halaman <a href="/en-US/docs/MDN_at_ten">10th anniversary celebration</a> kami, termasuk sejarah lain oleh beberapa orang yang terlibat.</p> + +<h2 id="Tentang_Mozilla">Tentang Mozilla</h2> + +<p>Kalau kamu ingin mempelajari lebih banyak tentang siapa kita, bagaimana menjadi bagian dari <em>Mozilla</em> atau sekedar tempat menemukan kita, kamu berada di tempat yang tepat. Untuk menemukan hal yang mendorong kami dan yang membuat kami berbeda, mohon kunjungi halaman <a href="https://www.mozilla.org/en-US/mission/">mission</a> kita.</p> diff --git a/files/id/mdn/contribute/feedback/index.html b/files/id/mdn/contribute/feedback/index.html new file mode 100644 index 0000000000..fc2958dc4f --- /dev/null +++ b/files/id/mdn/contribute/feedback/index.html @@ -0,0 +1,56 @@ +--- +title: 'Project:Tanggapan' +slug: MDN/Contribute/Feedback +tags: + - Dokumentasi + - MDN + - MDN Meta + - Panduan +translation_of: MDN/Contribute/Feedback +--- +<div>{{MDNSidebar}}</div> + +<p>Selamat datang di Mozilla Developer Network! Jika kamu mempunyai masalah, atau ingin meminta saran, ini tempat yang tepat. Kenyataannya kamu tertarik mengirimkan tanggapan membuat anda semakin menjadi bagian dari komunitas Mozilla, dan kami berterima kasih atas ketertarikan kamu.</p> + +<p>Kamu memiliki beberapa pilihan untuk menawarkan wawasan, artikel ini akan membantumu melakukannya.</p> + +<h2 id="Memperbarui_dokumentasi">Memperbarui dokumentasi</h2> + +<p>Pertama-tama, jika kamu melihat masalah dalam dokumentasi, kamu boleh mengkoreksinya sendiri. Masuk dengan <a href="https://www.persona.org/">Persona</a>, tekan tombol biru Edit sehingga membuka editor dan masukan kata untuk berkontribusi pada dokumentasi MDN. Dokumentasi di sini adalah pengetahuan, dan dikumpulkan oleh team relawan dan staff yang dibayar, jadi jangan malu -- tata bahasa kamu tidak harus sempurna. Kami akan membersihkan jika kamu membuat kesalahan; tak ada salahnya untuk dilakukan!</p> + +<p>Untuk informasi lebih lanjut tentang kontribusi untuk dokumentasi MDN, lihat:</p> + +<ul> + <li><a href="/en-US/docs/Project:Getting_started">Awal mula</a></li> + <li><a href="/en-US/docs/Project:How_to_Help">Cara membantu</a></li> + <li><a href="/en-US/docs/Project:MDN_editing_interface">Merubah tampilan MDN</a></li> +</ul> + +<h2 id="Gabung_dalam_percakapan">Gabung dalam percakapan</h2> + +<p>Bicara pada kami! Ada beberapa cara untuk terhubung dengan orang lain yang bekerja dalam konten MDN.</p> + +<h3 id="Obrolan">Obrolan</h3> + +<p>Kami menggunakan Internet Relay Chat (<a href="https://wiki.mozilla.org/IRC">IRC</a>) untuk mendiskusikan MDN dan kontennya. Kamu dapat bergabung dalam percakapan! Kami mempunyai beberapa saluran, tergantung pada minat kamu:</p> + +<dl> + <dt><a href="irc://irc.mozilla.org/mdn">Situs MDN (#mdn)</a></dt> + <dd>Saluran ini untuk diskusi umum MDN. Bila kamu tidak yakin dimana mendapatkan bantuan, atau masalah yang melibatakan kamu, kamu dapat bertanya di sini!</dd> + <dt><a href="irc://irc.mozilla.org/mdndev">Situs dokumentasi pengembang (#mdndev)</a></dt> + <dd>Di saluran #mdndev ini kita membahas tentang pekerjaan pengembang platform yang berjalan pada situs MDN. Bila kamu memiliki masalah tentang fungsionalitas website, atau ide tentang fitur, kamu dapat bergabung dalam pembahasan ini.</dd> +</dl> + +<h3 id="Asinkron_Diskusi">(Asinkron) Diskusi</h3> + +<p>Diskusi jangka panjang terjadi di <a href="https://discourse.mozilla-community.org/c/mdn">forum diskusi MDN</a> kita. Kamu bisa posting ke forum via email ke <a href="mailto:mdn@mozilla-community.org">mdn@mozilla-community.org</a>. Jika kamu bergabung dengan forum, kamu dapat memilih untuk memiliki pemberitahuan tentang diskusi yang dikirimkan kepada kamu melalui email juga.</p> + +<h2 id="Laporkan_masalah">Laporkan masalah</h2> + +<h3 id="Masalah_dokumentasi">Masalah dokumentasi</h3> + +<p>Bila kamu melihat masalah dalam dokumentasi dan tidak bisa memperbaikinya sendiri karena berbagai alasan, kamu dapat <a href="https://github.com/mdn/sprints/issues/new?template=issue-template.md&projects=mdn/sprints/2&labels=user-report">melaporkan masalah</a>! Kamu dapat menggunakan formulir ini untuk semua masalah dokumentasi, apakah itu koreksi sederhana atau permintaan untuk sepotong konten yang sama sekali baru. Seperti disebutkan sebelumnya, kami mengundang anda untuk berkontribusi dengan melakukan perubahan sendiri, tetapi opsi pelaporan ini tersedia untuk kamu juga.</p> + +<h3 id="Masalah_situs">Masalah situs</h3> + +<p>Bila kamu mengalami masalah dengan situs web MDN, atau memiliki ide untuk fitur baru dalam situs ini, anda dapat <a href="https://bugzilla.mozilla.org/form.mdn">mengajukan permintaan</a> dalam sistem Bugzilla juga.</p> diff --git a/files/id/mdn/contribute/getting_started/index.html b/files/id/mdn/contribute/getting_started/index.html new file mode 100644 index 0000000000..04dd189549 --- /dev/null +++ b/files/id/mdn/contribute/getting_started/index.html @@ -0,0 +1,126 @@ +--- +title: Langkah Awal Di MDN +slug: MDN/Contribute/Getting_started +tags: + - Dokumentasi + - Langkah Awal + - MDN + - Panduan + - Proyek MDN +translation_of: MDN/Contribute/Getting_started +--- +<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/id/docs/MDN")}}</div> + +<p id="What_is_MDN.3F"><span class="seoSummary">Kami adalah komunitas terbuka yang terdiri dari pengembang dan penulis sumber daya untuk Web yang lebih baik, terlepas dari merek, browser, atau perangkat. Siapa saja dapat memberikan kontribusinya dan mereka yang membuat kami semakin kuat. Bersama kita bisa melanjutkan untuk menggerakkan inovasi di Web untuk memberikan pelayanan yang lebih baik. Dimulai disini, dengan Anda. </span></p> + +<p><span>Setiap bagian dari MDN (dokumen, demonstrasi, dan situs itu sendiri) dibuat oleh komunitas terbuka para pengembang sumber daya. Bergabunglah bersama kami!</span></p> + +<h2 id="3_langkah_mudah_untuk_MDN"><span>3 langkah mudah untuk MDN</span></h2> + +<p>MDN adalah sebuah ensiklopedia, dimana <strong>semua orang</strong> bisa menambah dan mengedit konten. Anda tidak perlu menjadi seorang pemrogram atau mengetahui banyak hal mengenai teknologi. Ada beberapa tugas yang harus diselesaikan, mulai dari yang termudah (Mengoreksi bacaan and mengoreksi kesalahan penulisan) <span id="result_box" lang="id"><span class="hps">hingga yang kompleks</span></span> (menulis dokumentasi Program aplikasi antarmuka, <em>API</em>).</p> + +<p>Ikut berkontribusi sangatlah mudah dan aman. Bahkan jika Anda melakukan kesalahan, itu mudah diperbaiki. Bahkan jika Anda tidak mengetahui dengan tepat bagaimana suatu hal yang seharusnya benar, atau tata bahasa Anda tidak sepenuhnya bagus, jangan khawatir akan hal tersebut! Kami memiliki tim yang terdiri dari orang-orang yang bekerja untuk memastikan bahwa konten di MDN bisa lebih baik sebisa mungkin. Seseorang akan ikut serta untuk memastikan bahwa pekerjaan Anda rapih dan ditulis dengan benar.</p> + +<h3 id="Langkah_1_Membuat_akun_di_MDN">Langkah 1: Membuat akun di MDN</h3> + +<p>Untuk memulai kontribusi Anda di MDN, Anda memerlukan sebuah akun di MDN. Untuk keterangan lanjut, silahkan lihat <a href="/en-US/docs/MDN/Contribute/Howto/Create_an_MDN_account">bagaimana membuat sebuah akun</a>.</p> + +<h3 id="Langkah_2_Ambil_sebuah_tugas_untuk_diselesaikan">Langkah 2: Ambil sebuah tugas untuk diselesaikan</h3> + +<p>Setelah Anda selesai login, bacalah deskripsi mengenai perbedaan tipe tugas pada daftar dibawah ini, dan tentukan mana yang menjadi daya tarik bagi Anda. Anda bisa mengambil tugas manapun yang Anda sukai sebagai kontribusi yang Anda berikan.</p> + +<h3 id="Langkah_3_Kerjakan_tugas">Langkah 3: Kerjakan tugas</h3> + +<p>Setelah Anda menentukan tugas seperti apa yang Anda ingin kerjakan, temukan halaman yang spesifik, misalnya kode, atau yang lainnya untuk dikerjakan, dan lakukanlah!</p> + +<p>Jangan khawatir mengenai kesempurnaan dalam mengerjakan; kontributor MDN lainnya ada disini untuk membantu memperbaiki kesalahan yang terjadi. Jika Anda ingin melakukan percobaan sebelum melakukan sesuatu "yang nyata", Anda bisa mengedit halaman <a href="/en-US/docs/Sandbox">Kotakpasir</a>. Jika Anda memiliki pertanyaan selama melakukan pekerjaan, kunjungi halaman <a href="/en-US/docs/MDN/Community">Komunitas</a> untuk informasi di daftar surat menyurat (<em>mailing lists</em>) dan saluran bercakap (<em>Chat Channels</em>) dimana Anda bisa mendapatkan jawaban.</p> + +<p>Ketika Anda selesai, silahkan ambil item lainnya, atau lihat lagi <a href="#Other_things_you_can_do_on_MDN">Hal lain yang Anda bisa lakukan di MDN</a>.</p> + +<h2 id="Jenis-jenis_tugas_yang_memungkinkan">Jenis-jenis tugas yang memungkinkan</h2> + +<p>Ada banyak jalan yang dapat Anda ambil untuk berkontribusi untuk MDN tergantung keahlian yang Anda persiapkan dan sukai. Walaupun beberapa tugas bisa menghilangkan semangat, kami juga memiliki banyak kegiatan mudah yang tersedia. Kegiatan tersebut setidaknya hanya membutuhkan lima menit (atau kurang!) dari waktu Anda. Bersama dengan tugas dan dengan deskripsi yang pendek, Anda akan mengetahui <span id="result_box" lang="id"><span class="hps">berapa waktu</span> <span class="hps">perkiraan</span> <span class="hps">setiap</span> <span class="hps">jenis tugas</span> biasanya akan diselesaikan<span>.</span></span></p> + +<h3 id="Opsi_1_Saya_menyukai_kata-kata">Opsi 1: Saya menyukai kata-kata</h3> + +<p>Anda bisa membantu kami meninjau atau mengedit dokumen yang ada, dan menerapkan label yang benar.</p> + +<ul> + <li><a href="/en-US/docs/MDN/Contribute/Howto/Set_the_summary_for_a_page">Mengatur ringkasan untuk halaman</a> (5-15 menit)</li> + <li><a href="/en-US/docs/Project:MDN/Contributing/How_to/Do_an_editorial_review">Tinjauan tajuk rencana</a> (5–30 menit)</li> + <li><a href="/en-US/docs/MDN/User_guide/Writing#Editing_an_existing_page">Memperbaharui artikel yang ada dengan informasi baru</a> (5 menit-1 jam)</li> + <li><a href="/en-US/docs/MDN/User_guide/Writing#Adding_a_new_page">Tulis sebuah artikel tentang teknologi baru atau <em>API </em></a>(30 menit-2 jam)</li> +</ul> + +<div class="note"><strong>Catatan:</strong> Jika Anda sedang meninjau artikel atau menulis artikel yang baru, kami berharap Anda meninjau <a href="/en-US/docs/Project:MDN/Style_guide">Panduan Gaya</a>. Ini akan membantu untuk meyakinkan bahwa artikel tersebut sesuai.</div> + +<h3 id="Opsi_2_Saya_menyukai_kode">Opsi 2: Saya menyukai kode</h3> + +<p>Kami membutuhkan lebih banyak sampel kode! Anda juga dapat membantu membangun perangkat halaman kami, <a href="https://developer.mozilla.org/en-US/docs/Project:MDN/Kuma">Kuma</a>!</p> + +<ul> + <li><a href="/en-US/docs/Project:MDN/Contributing/How_to/Convert_code_samples_to_be_live_">Konversi sampel kode menjadi "aktif"</a> (30 menit)</li> + <li><a href="https://kuma.readthedocs.org/en/latest/installation-vagrant.html">Menyusun lingkungan membangun Kuma</a> (1 jam)</li> + <li><a href="https://github.com/mozilla/kuma#readme">Kirim kode tambalan Anda ke pusat kode Kuma</a> (1 jam)</li> + <li><a href="https://developer.mozilla.org/en-US/demos/submit">Mengajukan demonstrasi baru </a>(1 jam)</li> +</ul> + +<h3 id="Opsi_3_Saya_menyukai_kata-kata_dan_kode">Opsi 3: Saya menyukai kata-kata dan kode</h3> + +<p>Kami memiliki tugas-tugas yang membutuhkan teknis dan kemampuan bahasa bersama, seperti menulis artikel baru, meninjau keakurasian teknis, atau mengadapsikan dokumen-dokumen.</p> + +<ul> + <li><a href="/en-US/docs/Project:MDN/Contributing/How_to/Tag_JavaScript_pages">Halaman label JavaScript</a> (5 menit)</li> + <li><a href="/en-US/docs/MDN/Promote">Promosikan MDN di situs web Anda</a> (5 menit)</li> + <li><a href="/en-US/docs/Project:MDN/Contributing/How_to/Do_a_technical_review">Tinjauan teknis</a> (30 menit)</li> + <li><a href="/en-US/docs/Project:MDN/Contributing/How_to/Update_API_page_layout">Perbaharui tata ruang halaman API</a> (30 menit)</li> + <li><a href="/en-US/docs/MDN/Contribute/Creating_and_editing_pages#Creating_a_new_page">Tulis sebuah artikel baru yang akrab bagi Anda</a> (1 jam atau lebih)</li> +</ul> + +<h3 id="Opsi_4_Saya_ingin_MDN_ada_di_bahasa_saya">Opsi 4: Saya ingin MDN ada di bahasa saya</h3> + +<p>Semua lokalisasi and terjemahan selesai dikerjakan di MDN oleh komunitas sukarelawan kami yang mengagumkan.</p> + +<ul> + <li><a href="/en-US/docs/MDN/Contribute/Localize/Translating_pages">Menerjemahkan halaman</a> (2 jam)</li> + <li>Menghubungkan dengan lokalisir lainnya yang terdaftar di <a href="/en-US/docs/Project:MDN/Localizing/Localization_projects">Proyek lokalisasi</a> (30 menit)</li> +</ul> + +<h3 id="Opsi_5_Saya_menemukan_beberapa_kesalahan_informasi_tapi_saya_tidak_tahu_bagaimana_memperbaikinya">Opsi 5: Saya menemukan beberapa kesalahan informasi tapi saya tidak tahu bagaimana memperbaikinya</h3> + +<p>Anda dapat melaporkan masalah tersebut dengan <a class="external" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Mozilla%20Developer%20Network">mengisi dokumentasi kesalahan</a>. (5 menit)</p> + +<p>Gunakan nilai bidang ini:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td><strong>Bidang Bugzilla</strong></td> + <td><strong>Nilai</strong></td> + </tr> + <tr> + <td><code>produk</code></td> + <td><a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Developer+Documentation">Dokumentasi Pengembang</a></td> + </tr> + <tr> + <td><code>komponen</code></td> + <td>[<span id="result_box" lang="id"><span class="hps">memilih</span> <span class="hps">daerah yang sesuai</span> <span class="hps">dengan topik</span><span>,</span> <span class="hps">atau</span> <span class="atn hps">"</span><span>Umum</span><span>"</span> <span class="hps">jika Anda tidak</span> <span class="hps">yakin</span> <span class="hps">atau</span> <span class="hps">Anda tidak melihat</span> mana <span class="hps">yang benar</span></span>]</td> + </tr> + <tr> + <td><code>URL</code></td> + <td>Halaman dimana Anda menemukan masalah</td> + </tr> + <tr> + <td><code>Deskripsi</code></td> + <td>Sebanyak yang Anda ketahui atau memiliki waktu untuk mengutarakan masalah tersebut dan dimana menemukan informasi yang benar. Ini dapat berisi orang-orang yang ("berbicara jadi-dan-jadi") sebaik mungkin seperti tautan Web.</td> + </tr> + </tbody> +</table> + +<h2 id="Hal-hal_lai_yang_bisa_Anda_lakukan_di_MDN">Hal-hal lai yang bisa Anda lakukan di MDN</h2> + +<ul> + <li><a href="/en-US/docs/Project:Community">Bergabung dengan komunitas MDN</a>.</li> + <li><a href="/en-US/profile">Isi profil Anda</a> jadi yang lain dapat mengetahui lebih tentangmu.</li> + <li>Belajar lebih lanjut tentang <a href="/en-US/docs/MDN/Contribute">berkontribusi untuk MDN</a>.</li> +</ul> 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 new file mode 100644 index 0000000000..aba3020441 --- /dev/null +++ b/files/id/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 +--- +<div>{{MDNSidebar}}</div><p><span class="seoSummary">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.</span></p> + +<div class="standardSidebar" style="width: 280px;"><span id="result_box" lang="id"><span>Mengapakah</span> <span>MDN</span> <span>membutuhkan</span> <span>alamat</span> <span>email</span> <span>saya</span><span>?</span><br> +<br> +<span>Alamat</span> <span>email</span> <span>Anda</span> <span>digunakan</span> <span>dalam</span> <span>pemulihan</span> <span>akun</span> <span>dan</span> <span>juga</span> <span>digunakan</span> <span>oleh</span> <span>administrator</span> <span>MDN</span> <span>untuk</span> <span>menghubungi</span> <span>Anda</span> <span>tentang</span> <span>akun</span> <span>atau</span> <span>kegiatan</span> <span>Anda</span> <span>dalam</span> <span>situs</span> <span>web</span><span>.</span><br> +<br> +<span>Selanjutnya</span><span>,</span> <span>Anda</span> <span>dapat</span> <span>mendaftar</span> <span>untuk</span> <span>menerima</span> <span>pemberitahuan</span> <span>(</span><span>seperti</span> <span>pada situs</span><span>-</span><span>situs</span> <span>tertentu</span> <span>diubah</span><span>)</span> <span>serta</span> <span>pesan</span> <span>(</span><span>misalnya</span><span>,</span> <span>jika</span> <span>Anda</span> <span>ingin</span> <span>bergabung</span> <span>tim</span> <span>tes</span> <span>beta</span> <span>kami</span><span>,</span> <span>Anda</span> <span>mungkin</span> <span>menerima</span> <span>email</span> <span>tentang</span> <span>fitur</span><span>-</span><span>fitur</span> <span>baru</span> <span>yang</span> <span>membutuhkan</span> <span>tes</span><span>)</span><span>.</span><br> +<br> +<span>Alamat</span> <span>email</span> <span>Anda</span> <span>tidak</span> <span>akan</span> <span>ditampilkan</span> <span>pada</span> <span>MDN</span> <span>dan</span> <span>akan</span> <span>digunakan</span> <span>mengikuti</span> <span>kebijakan</span> <span>privasi</span> <span>kami</span> <span>saja.</span></span></div> + +<ol> + <li><span id="result_box" lang="id"><span title='Anda dapat melihat satu butang yang dilabel "Sign in with" di bahagian teratas semua laman MDN.'>Pada bagian atas tiap halaman MDN Anda dapat menemukan tombol "Masuk melalui". Arahkan</span><span title="Menuding tetikus anda pada butang ini (atau ketik padanya jika anda sedang menggunakan alatan bimbit) untuk menunjukkan satu senarai servis pengesahan yang kami menyokong bagi log masuk MDN. + "> mouse Anda pada tombol ini (atau sentuh, jika Anda menggunakan perankat seluler) untuk menampilkan daftar otentikasi layanan yang kami mendukung untuk login ke MDN.</span></span></li> + <li><span id="result_box" lang="id"><span title="2Pilih cara log masuk daripada salah satu servis yang dipaparkan.">Pilih satu layanan login dari yang tersedia ditampilan. </span><span title="Apa-apa servis yang anda pilih selain daripada Persona akan disenaraikan dalam profil awam anda. + ">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.</span></span></li> + <li><span id="result_box" lang="id"><span title="3 Ikuti arahan servis tersebut untuk menyambung akaun anda ke MDN. + ">Ikuti halaman yang mengarah ke halaman masuk akun GitHub tersebut untuk menghubungkan ke akun MDN Anda.</span></span></li> + <li><span id="result_box" lang="id"><span title="4 Apabila anda dikembalikan ke MDN, anda akan diminta untuk mendaftarkan satu nama pengguna dan alamat e-mel.">Saat layanan otentikasi kembali ke akun MDN, Anda akan diminta untuk mendaftarkan satu nama pengguna dan alamat email. </span><span title="Nama pengguna anda akan dipapar secara awam untuk kredit kerja yang anda lakukan.">Nama pengguna Anda akan tampil secara publik untuk kredit kerja yang Anda lakukan. </span><span title="Janganlah mengguna alamat e-mel anda sebagai nama pengguna. + ">Janganlah menggunakan alamat email Anda<strong> sebagai nama pengguna.</strong></span></span></li> + <li><span id="result_box" lang="id"><span title='5 Tekan butang yang dilabel "Create my MDN profile". + '>Tekan tombol berlabel <strong>Create my MDN profile</strong>.</span></span></li> + <li><span id="result_box" lang="id"><span title="6 Jika alamat e-mel yang anda beri di Langkah 4 tidak sama dengan alamat e-mel yang anda guna dengan servis pengesahan, anda perlulah mengesah e-mel anda dan tekan pada link dalam e-mel pengesahan yang akan dihantar kepada anda.">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.</span></span></li> +</ol> + +<p><span id="result_box" lang="id"><span>Begitu</span> <span>saja</span><span>!</span> <span>Anda</span> <span>telah memiliki</span> <span>akun</span> <span>MDN</span> <span>dan</span> Anda <span>dapat</span> <span>segera</span> <span>menyunting</span> <span>halaman</span><span>!</span><br> + <br> + <span>Anda</span> <span>bisa</span> klik <span>pada</span> <span>nama</span> <span>Anda</span> <span>di</span> <span>bagian</span> <span>atas</span> <span>setiap</span> <span>halaman</span> <span>MDN</span> <span>untuk</span> <span>melihat</span> <span>profil</span> <span>publik</span> <span>Anda</span><span>.</span> <span>Dari</span> <span>sana</span><span>,</span> <span>Anda</span> <span>bisa</span> <span>klik</span> <span>tombol </span><strong><span>Edit</span></strong> <span>untuk</span> <span>membuat</span> <span>perubahan pada</span> <span>profil</span> <span>atau melakukan penambahan pada profil Anda.</span></span></p> + +<div class="note"> +<p><strong>Note:</strong> <span id="result_box" lang="id"><span>Nama</span> <span>pengguna</span> <span>baru</span> <span>tidak</span> <span>boleh</span> <span>berisi</span> <span>spasi</span> <span>atau</span> <span>karakter</span> <span>"</span><span>@</span><span>"</span><span>.</span> <span>Ingatlah</span> <span>nama pengguna</span> <span>akan</span> <span>ditampilkan</span> <span>secara</span> <span>publik</span> <span>untuk</span> <span>menunjukkan</span> kreasi <span>yang</span> <span>Anda</span> <span>buat</span><span>!</span></span></p> +</div> + +<p> </p> 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 new file mode 100644 index 0000000000..7a9ffab8a9 --- /dev/null +++ b/files/id/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 +--- +<div>{{MDNSidebar}}</div><p class="summary"><strong>A Technical review</strong> 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.</p> + +<p><span class="seoSummary">This article describes how to perform a technical review, thereby helping to ensure that MDN's content is accurate.</span></p> + +<dl> + <dt>What is the task?</dt> + <dd>Reviewing and correcting the articles for technical accuracy and completeness.</dd> + <dt>Where does it need to be done?</dt> + <dd>In specific articles that are marked as requiring a <a href="/en-US/docs/needs-review/technical">technical review</a>.</dd> + <dt>What do you need to know to do the task?</dt> + <dd> + <ul> + <li>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.</li> + <li>How to edit a wiki article on MDN.</li> + </ul> + </dd> + <dt>What are the steps to do it?</dt> + <dd> + <ol> + <li>Pick an article to review: + <ol> + <li>Go to the list of pages that need <a href="/en-US/docs/needs-review/technical">technical reviews</a>. This lists all the pages for which a technical review has been requested.</li> + <li>Choose a page whose topic you are very familiar with.</li> + <li>Click on the article link to load the page.</li> + </ol> + </li> + <li><a id="core-steps" name="core-steps"></a>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.</li> + <li>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:<br> + <img alt="Screenshot of the sidebar's box listing reviews that have been requested and allowing the flags to be changed." src="https://mdn.mozillademos.org/files/13016/SidebarTechReviewRequested.png"></li> + <li>Deselect the <strong>Technical</strong> checkbox, and click <strong>Save</strong>.</li> + <li>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: + <ol> + <li>To edit the page, click the <strong>Edit</strong> button near the top of the page; this puts you into the <a href="/en-US/docs/MDN/Contribute/Editor">MDN editor</a>.</li> + <li>Fix any technical information is not correct, and/or add any important information that is missing.</li> + <li>Enter a <strong>Revision Comment</strong> at the bottom of the article. This is a brief message that describes what you did, like '<em>Technical review completed.</em>' If you corrected information, include that in your comment, for example <em>'Technical review and fixed parameter descriptions.'</em> 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</li> + <li>Deselect<em> </em>the <strong>Technical</strong> box under <strong>Review Needed?</strong> just below the Revision Comment area of the page.</li> + <li>Click the <strong>PUBLISH</strong> button.</li> + </ol> + </li> + </ol> + + <p>Congratulations! You've finished your first technical review! Thank you for your help!</p> + </dd> +</dl> 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 new file mode 100644 index 0000000000..74aff54886 --- /dev/null +++ b/files/id/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 +--- +<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/id/docs/MDN")}}</div> + +<p class="summary"><strong>Ulasan redaksi terdiri dari memperbaiki kesalahan ketik</strong>, 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.</p> + +<p><span class="seoSummary">Artikel ini menggambarkan bagaimana cara melakukan ulasan redaksi, </span> <span id="result_box" lang="id"><span>dengan demikian membantu</span> <span>memastikan bahwa</span> <span>konten</span> <span>MDN</span> <span>akurat</span></span> <span class="seoSummary">.</span></p> + +<dl> + <dt>Apa sih tugasnya?</dt> + <dd>Salin-ubah dan perbaikan cetakan dari artikel yang membutuhkan ulasan redaksi.</dd> + <dt>Dimana ulasan redaksi dikerjakan?</dt> + <dd>Diantara artikel yang sudah ditandai membutuhkan ulasan redaksi.</dd> + <dt>Apa yang harus diketahui untuk menyelesaikan tugas?</dt> + <dd>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 <a href="/id/docs/MDN/Contribute/Guidelines/Writing_style_guide">MDN writing style guide</a>.</dd> + <dt>Apa langkah-langkah untuk melakukannya?</dt> + <dd> + <ol> + <li>Pilih artikel yang ingin diulas: + <ol> + <li>Ke daftar <a href="/id/docs/needs-review/editorial">artikel yang membutuhkan ulasan</a>. Ini berisi halaman yang diminta untuk diulas.</li> + <li>Pilih halaman yang meiliki judul bahasa Inggris dan yang tidak diawali <code>Template:</code> (<code>Template:</code> halaman yang mengandung MDN macro code.)</li> + <li>Klik tautan pada artikel untuk menampilkan halaman.</li> + </ol> + </li> + <li><a id="core-steps" name="core-steps"></a>Baca artikelnya, berikan perhatian pada kesalahan ketik, ejaan, tata bahasa, atau penggunaan kata yang salah. <span id="result_box" lang="id"><span>Jangan</span> <span>ragu untuk</span> <span>beralih ke</span> <span>halaman yang berbeda</span> <span>jika pertama</span> yang <span>Anda pilih</span> <span>tidak sesuai dengan Anda</span></span> .</li> + <li>Jika tidak terdapat kesalahan, anda tidak perlu merubah artikel untuk menandakan itu telah diulas. Cari kotak "quick review" di sisi kiri dari halaman:<br> + <img alt="Screenshot of the editorial review request sidebar box" src="https://mdn.mozillademos.org/files/13018/SidebarReviewBoxEditorial.png"><br> + Hapus centang pada kotak <strong>Editorial</strong> dan klik <strong>Save</strong>.</li> + <li>Jika anda menemukan error yang perlu di koreksi: + <ol> + <li>Klik tombol <strong>Sunting</strong> di atas halaman; ini akan membawa anda ke <a href="/id/docs/Project:MDN/Contributing/Editor_guide">MDN editor</a>.</li> + <li>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.</li> + <li>Masukan <strong>Revision Comment</strong> pada bawah artikel; seperti '<em>Editorial review: perbaikan salah ketik, tata bahasa & penulisan.</em>' Ini memungkinkan kontributor lain dan editor situs tahu apa yang anda rubah dan kenapa.</li> + <li>Hapus centang pada kotak <strong>Editorial</strong> dibawah <strong>Review Needed?</strong>. Tepatnya pada bawah komentar revisi pada halaman.</li> + <li>Klik tombol <strong>Publish</strong>.</li> + </ol> + </li> + </ol> + + <div class="note"> + <p>Perubahan yang anda buat mungkin tidak langsung di tampilkan setelah disimpan; disini ada rentang waktu ketika halaman di proses dan disimpan.</p> + </div> + </dd> +</dl> diff --git a/files/id/mdn/contribute/howto/index.html b/files/id/mdn/contribute/howto/index.html new file mode 100644 index 0000000000..1ac1697957 --- /dev/null +++ b/files/id/mdn/contribute/howto/index.html @@ -0,0 +1,16 @@ +--- +title: How-to guides +slug: MDN/Contribute/Howto +tags: + - Documentation + - Landing + - MDN + - NeedsTranslation + - TopicStub +translation_of: MDN/Contribute/Howto +--- +<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/id/docs/MDN")}}</div> + +<p>Artikel berikut menyediakan pedoman langkah - langkah untuk mencapai tujuan tertentu ketika berkontribusi di MDN.</p> + +<p>{{LandingPageListSubpages}}</p> 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 new file mode 100644 index 0000000000..ad89ef0686 --- /dev/null +++ b/files/id/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 +--- +<div>{{MDNSidebar}}</div><p><span class="seoSummary">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.</span> 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.</p> +<p>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.</p> +<table class="full-width-table"> + <tbody> + <tr> + <td><strong>What is the task?</strong></td> + <td>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.</td> + </tr> + <tr> + <td><strong>Where does it need to be done?</strong></td> + <td>In pages that lack a summary or have a less-than-great summary.</td> + </tr> + <tr> + <td><strong>What do you need to know to do the task?</strong></td> + <td>Ability to use the MDN editor; good English writing skills; enough familiarity with the topic of the page to write a good summary.</td> + </tr> + <tr> + <td><strong>What are the steps to do it?</strong></td> + <td> + <ol> + <li>Pick a page on which to set the summary: + <ol> + <li>In the <a href="/en-US/docs/MDN/Doc_status">MDN documentation status</a> page, click the link under <strong>Sections</strong> for a topic that you know something about (for example, HTML).</li> + <li>On the topic's documentation status page, click the <strong>Pages</strong> header in the <strong>Summary</strong> 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.</li> + <li>Pick a page that is missing a summary, or that has a poor summary.</li> + <li>Click the link to go to that page.</li> + </ol> + </li> + <li>Click <strong>Edit</strong> to open the page in the MDN editor.</li> + <li>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.</li> + <li>Select the text to be used as a summary.</li> + <li>In the <em>Styles</em> widget of the editor toolbar, select <strong>SEO Summary</strong>. (In the page source, this creates a {{HTMLElement("span")}} element with <code>class="seoSummary"</code> around the selected text.)</li> + <li>Save your changes with a revision comment like "Set the page summary."</li> + </ol> + </td> + </tr> + </tbody> +</table> +<p> </p> +<p> </p> +<p> </p> diff --git a/files/id/mdn/contribute/howto/tag/index.html b/files/id/mdn/contribute/howto/tag/index.html new file mode 100644 index 0000000000..8b0d868f78 --- /dev/null +++ b/files/id/mdn/contribute/howto/tag/index.html @@ -0,0 +1,373 @@ +--- +title: How to properly tag pages +slug: MDN/Contribute/Howto/Tag +translation_of: MDN/Contribute/Howto/Tag +--- +<div>{{MDNSidebar}}</div><p dir="rtl">One important feature of MDN that helps users find content is the <strong>article tag</strong>. Each page can be tagged with zero or more tags <span style="line-height: 1.572;">(preferably at least one)</span><span style="line-height: 1.572;"> to help categorize the content. <span class="seoSummary">There are many ways tags are used to help organize information on MDN; this page will help you learn how to best tag pages to help information be organized, sorted, and located by readers.</span></span></p> + +<p>For a guide to the user interface for editing tags on pages, see the <a href="/en-US/docs/MDN/Contribute/Editor/Basics#The_tags_box">tagging section</a> in our editor guide.</p> + +<p>Note that proper use of tags is important; we are increasingly using automation to generate lists of content, landing pages, and cross-linking of articles. Failure to properly tag articles as indicated below can prevent articles from being listed correctly.</p> + +<h2 id="Ways_tags_are_used_on_MDN">Ways tags are used on MDN</h2> + +<p>There are several ways tags get used on MDN:</p> + +<dl> + <dt>Categorization</dt> + <dd>What type of document is it? Is it a reference? A tutorial? A landing page? These can be used when filtering searches, so they're really important!</dd> + <dt>Topic identification</dt> + <dd>What topic does the article cover? Is it about an API? The DOM? Graphics? These, too, are important, because they can be used as filters on searches.</dd> + <dt>Technology status</dt> + <dd>What's the status of the technology? Is it non-standard? Obsolete or deprecated? Experimental?</dd> + <dt>Skill level</dt> + <dd>For tutorials and guides, how advanced is the material covered by the article?</dd> + <dt>Document metadata</dt> + <dd>The writing community often needs a way to track information about pages in need of specific kinds of work. This is done using tags.</dd> +</dl> + +<h2 id="Tag_type_guide">Tag type guide</h2> + +<p>Here's a quick guide to the types of tags and possible values for them.</p> + +<h3 id="Category">Category</h3> + +<p>Tagging an article with one of these categories will help automatically constructed landing pages, table of contents pages, and the like be more accurately built. These terms will also be used by our new search system, eventually, to let the user locate reference or guide information by their choice.</p> + +<p>The following category names are standard tagging terms used on MDN.</p> + +<dl> + <dt><code>{{Tag("Intro")}}</code></dt> + <dd>The article provides introductory material about a topic. In theory there should be only one of these per technology area.</dd> + <dt><code>{{Tag("Featured")}}</code></dt> + <dd>The article is a high-importance article that should be featured in a special way on landing pages; this must be used sparingly. Only three or fewer of these should exist in any documentation area.</dd> + <dt><code>{{Tag("Reference")}}</code></dt> + <dd>The article contains reference material about an API, element, attribute, property, or the like.</dd> + <dt><code>{{Tag("Landing")}}</code></dt> + <dd>The page is a landing page.</dd> + <dt><code>{{Tag("Guide")}}</code></dt> + <dd>The article is a how-to or guide page.</dd> + <dt><code>{{Tag("Example")}}</code></dt> + <dd>The article is a code sample page, or has code samples. This shouldn't be used for very one-liner "syntax examples" but actual snippets of useful code, or for full usable samples.</dd> +</dl> + +<h3 id="Topic">Topic</h3> + +<p>By identifying the article's topic area, you can also help to generate better search results as well as landing pages and other navigational aids.</p> + +<p>While there's some room for flexibility here as new topic areas are identified, we try to keep these to the names of APIs or technologies. Some useful examples:</p> + +<ul> + <li><code>{{Tag("HTML")}}</code></li> + <li><code>{{Tag("CSS")}}</code></li> + <li><code>{{Tag("JavaScript")}}</code> (notice the capital "S"!)</li> + <li><code>{{Tag("Document")}}</code></li> + <li><code>{{Tag("DOM")}}</code></li> + <li><code>{{Tag("API")}}</code> for each interface, method and property.</li> + <li><code>{{Tag("Method")}}</code> for each method of an API</li> + <li><code>{{Tag("Property")}}</code> for each property of an API</li> + <li><code>{{Tag("Graphics")}}</code></li> + <li><code>{{Tag("Firefox OS")}}</code></li> + <li><code>{{Tag("Gecko")}}</code></li> + <li><code>{{Tag("XUL")}}</code></li> + <li><code>{{Tag("XPCOM")}}</code></li> + <li><code>{{Tag("SVG")}}</code></li> + <li><code>{{Tag("WebGL")}}</code></li> + <li><code>{{Tag("Element")}}</code></li> + <li><code>{{Tag("Node")}}</code></li> + <li><code>{{Tag("Tools")}}</code></li> + <li><code>{{Tag("Web")}}</code></li> +</ul> + +<p>In general, the name of an interface that has a number of related pages, such as <a href="/en-US/docs/Web/API/Node" title="/en-US/docs/Web/API/Node">Node</a> (which has many pages for its various properties and methods) makes a good topic identification tag, as does the name of an overall technology or technology type. A page about WebGL might be tagged with <code>Graphics</code> and <code>WebGL</code>, for example, while a page about the {{HTMLElement("canvas")}} element might be tagged <code>HTML</code>, <code>Element</code>, <code>Canvas</code>, and <code>Graphics</code>.</p> + +<h3 id="Technology_status">Technology status</h3> + +<p>To help the reader understand how viable a technology is, we use tags to label pages as to what the status of the technology's specification is. This isn't as detailed as actually explaining what the spec is and where in the specification process the technology is (that's what the Specifications table is for), but it will help the reader judge, at a glance, whether using the technology described in the article is a good idea or not.</p> + +<p>Here are possible values for these tags:</p> + +<dl> + <dt><code>{{Tag("Non-standard")}}</code></dt> + <dd>Indicates that the technology or API described on the page is not part of a standard, but is considered stable in the browser or browsers that do implement it. If you don't use this tag, the assumption is made that the article covers something that's standard. The compatibility table on the page should clarify which browser(s) support this technology or API.</dd> + <dt><code>{{Tag("Deprecated")}}</code></dt> + <dd>The technology or API covered on the page has been marked as deprecated in the specification, and is expected to eventually be removed, but is generally still available in current versions of browsers.</dd> + <dt><code>{{Tag("Obsolete")}}</code></dt> + <dd>The technology or API has been deemed obsolete and has been removed (or is actively in the process of being removed) from all or most current browsers.</dd> + <dt><code>{{Tag("Experimental")}}</code></dt> + <dd>The technology is not standardized, and is an experimental technology or API that may or may not ever become part of a standard.</dd> + <dt><code>{{Tag("Needs Privileges")}}</code></dt> + <dd>The API requires privileged access to the device on which the code is running.</dd> + <dt><code>{{Tag("Certified Only")}}</code></dt> + <dd>The API only works in certified code.</dd> +</dl> + +<p>Regardless of the use of these tags, you should be sure to include a <a href="/en-US/docs/Project:Compatibility_tables" title="/en-US/docs/Project:Compatibility_tables">compatibility table</a> in your article!</p> + +<h3 id="Skill_level">Skill level</h3> + +<p>The skill level tag type is only used for guides and tutorials (that is, pages tagged <code>Guide</code>). It's used to help users whittle down tutorials based on their familiarity level with a technology, for example. There are three values for this:</p> + +<dl> + <dt><code>{{Tag("Beginner")}}</code></dt> + <dd>Articles designed to introduce the reader to a technology they've never used or have only a passing familiarity with.</dd> + <dt><code>{{Tag("Intermediate")}}</code></dt> + <dd>Articles for users that have gotten started with the technology but aren't experts.</dd> + <dt><code>{{Tag("Advanced")}}</code></dt> + <dd>Articles about stretching the capabilities of a technology and of the reader.</dd> +</dl> + +<h3 id="Document_metadata">Document metadata</h3> + +<p>The writing community uses tags to label articles as requiring specific types of work. Here's a list of the ones we use most:</p> + +<dl> + <dt><code>{{Tag("junk")}}</code></dt> + <dd>The article needs to be deleted.</dd> + <dt><code>{{Tag("NeedsContent")}}</code></dt> + <dd>The article is a stub, or is otherwise lacking information. This tag means that someone should review the content and add more details and/or finish writing the article.</dd> + <dt><code>{{Tag("NeedsExample")}}</code></dt> + <dd>The article needs one or more examples created to help illustrate the article's point. These examples should use the <a href="/en-US/docs/Project:MDN/Contributing/How_to_help/Code_samples" title="/en-US/docs/Project:MDN/Contributing/How_to_help/Code_samples">live sample system</a>.</dd> + <dt><code>{{Tag("NeedsLiveSamples")}}</code></dt> + <dd>The article has one or more examples that need to be updated to use the <a href="/en-US/docs/Project:MDN/Contributing/How_to_help/Code_samples" title="/en-US/docs/Project:MDN/Contributing/How_to_help/Code_samples">live sample system</a>.</dd> + <dt><code>{{Tag("NeedsUpdate")}}</code></dt> + <dd>The content is out of date and needs to be updated.</dd> + <dt><code>{{Tag("l10n:exclude")}}</code></dt> + <dd>The content is not really worth localizing and will not appear on localization status pages.</dd> + <dt><code>{{Tag("l10n:priority")}}</code></dt> + <dd>The content is important and should be marked as a priority for MDN translators. Shows up in an extra priority table on localization status pages.</dd> +</dl> + +<h3 id="Web_Literacy_Map">Web Literacy Map</h3> + +<p>The <a href="https://webmaker.org" rel="external">WebMaker</a> project, through the <a href="https://webmaker.org/literacy" rel="external">Web Literacy Map</a>, has defined a set of tags to qualify the various competencies and skills recommended to get better at reading, writing and participating on the Web. We use them on MDN to help our users to find the best resources to suit their needs:</p> + +<dl> + <dt>{{Tag("Navigation")}}</dt> + <dd>The articles provides information on how to browse the web.</dd> + <dt>{{Tag("WebMechanics")}}</dt> + <dd>The article provides information on how the web is organized and how it's working.</dd> + <dt>{{Tag("Search")}}</dt> + <dd>The article provides information on how to locate information, people and resources via the web.</dd> + <dt>{{Tag("Credibility")}}</dt> + <dd>The article provides information on how to critically evaluate information found on the web.</dd> + <dt>{{Tag("Security")}}</dt> + <dd>The article provides information on how to keep systems, identities, and content safe.</dd> + <dt>{{Tag("Composing")}}</dt> + <dd>The article provides information on how to create and curate content for the web.</dd> + <dt>{{Tag("Remixing")}}</dt> + <dd>The article provides information on how to modify existing web resources to create something new.</dd> + <dt>{{Tag("DesignAccessibility")}}</dt> + <dd>The article provides information on how to create universally effective communications through web resources.</dd> + <dt>{{Tag("CodingScripting")}}</dt> + <dd>The article provides information on how to code and/or create interactive experiences on the web.</dd> + <dt>{{Tag("infrastructure")}}</dt> + <dd>The article provides information which help understanding the Internet technical stack.</dd> + <dt>{{Tag("Sharing")}}</dt> + <dd>The article provides information on how to create resources with others.</dd> + <dt>{{Tag("Collaborating")}}</dt> + <dd>The article provides information on how to work with each other.</dd> + <dt>{{Tag("Community")}}</dt> + <dd>The article provides information on how to get involved in web communities and understanding their practices.</dd> + <dt>{{Tag("Privacy")}}</dt> + <dd>The article provides information on how to examine the consequences of sharing data online.</dd> + <dt>{{Tag("OpenPractices")}}</dt> + <dd>The article provides information on how to help keep the web universally accessible.</dd> +</dl> + +<h2 id="Putting_it_all_together">Putting it all together</h2> + +<p>So, with these different types of tags, you assemble them together to get the full set of tags for a page. A few examples:</p> + +<dl> + <dt>A tutorial about WebGL for beginners</dt> + <dd>Appropriate tags would be: <code>WebGL</code>, <code>Graphics</code>, <code>Guide</code>, <code>Beginner</code></dd> + <dt>Reference page for the {{HTMLElement("canvas")}} element</dt> + <dd>This should be tagged with <code>Canvas</code>, <code>HTML</code>, <code>Element</code>, <code>Graphics</code> <code>Reference</code></dd> + <dt>A landing page for Firefox OS developer tools</dt> + <dd>This should be tagged with <code>Tools</code>, <code>Firefox OS</code>, <code>Landing</code></dd> +</dl> + +<h2 id="Tagging_and_search_filters">Tagging and search filters</h2> + +<p>The upcoming search filter implementation, which will let users restrict the results of their searches based on criteria they specify, will rely on proper tagging of pages on MDN. Here's a table of the various search filters and which tags they look for.</p> + +<div class="note"> +<p><strong>Note:</strong> If multiple tags are listed under "Tag name," that means any one or more of those tags need to be present for the article to match.</p> +</div> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Filter group</th> + <th scope="col">Search filter name</th> + <th scope="col">Tag name</th> + </tr> + </thead> + <tbody> + <tr> + <th>Topic</th> + <td>Open Web Apps</td> + <td>{{Tag("Apps")}}</td> + </tr> + <tr> + <th> </th> + <td>HTML</td> + <td>{{Tag("HTML")}}</td> + </tr> + <tr> + <th> </th> + <td>CSS</td> + <td>{{Tag("CSS")}}</td> + </tr> + <tr> + <th> </th> + <td>JavaScript</td> + <td>{{Tag("JavaScript")}}</td> + </tr> + <tr> + <th> </th> + <td>APIs and DOM</td> + <td>{{Tag("API")}}</td> + </tr> + <tr> + <th> </th> + <td>Canvas</td> + <td>{{Tag("Canvas")}}</td> + </tr> + <tr> + <th> </th> + <td>SVG</td> + <td>{{Tag("SVG")}}</td> + </tr> + <tr> + <th> </th> + <td>MathML</td> + <td>{{Tag("MathML")}}</td> + </tr> + <tr> + <th> </th> + <td>WebGL</td> + <td>{{Tag("WebGL")}}</td> + </tr> + <tr> + <th> </th> + <td>XUL</td> + <td>{{Tag("XUL")}}</td> + </tr> + <tr> + <th> </th> + <td>Marketplace</td> + <td>{{Tag("Marketplace")}}</td> + </tr> + <tr> + <th> </th> + <td>Firefox</td> + <td>{{Tag("Firefox")}}</td> + </tr> + <tr> + <th> </th> + <td>Firefox for Android</td> + <td>{{Tag("Firefox Mobile")}}</td> + </tr> + <tr> + <th> </th> + <td>Firefox for Desktop</td> + <td>{{Tag("Firefox Desktop")}}</td> + </tr> + <tr> + <th> </th> + <td>Firefox OS</td> + <td>{{Tag("Firefox OS")}}</td> + </tr> + <tr> + <th> </th> + <td>Mobile</td> + <td>{{Tag("Mobile")}}</td> + </tr> + <tr> + <th> </th> + <td>Web Development</td> + <td>{{Tag("Web Development")}}</td> + </tr> + <tr> + <th> </th> + <td>Add-ons & Extensions</td> + <td>{{Tag("Add-ons ")}}|| {{Tag("Extensions")}} || {{Tag("Plugins")}} || {{Tag("Themes")}}</td> + </tr> + <tr> + <th> </th> + <td>Games</td> + <td>{{Tag("Games")}}</td> + </tr> + <tr> + <th>Skill level</th> + <td>I'm an Expert</td> + <td>{{Tag("Advanced")}}</td> + </tr> + <tr> + <th> </th> + <td>Intermediate</td> + <td>{{Tag("Intermediate")}}</td> + </tr> + <tr> + <th> </th> + <td>I'm Learning</td> + <td>{{Tag("Beginner")}}</td> + </tr> + <tr> + <th>Document type</th> + <td>Docs</td> + <td><em>This will restrict the search to docs content, leaving out Hacks and other MDN content.</em></td> + </tr> + <tr> + <th> </th> + <td>Demos</td> + <td><em>This will include Demo Studio content in the search results.</em></td> + </tr> + <tr> + <th> </th> + <td>Tools</td> + <td>{{Tag("Tools")}}</td> + </tr> + <tr> + <th> </th> + <td>Code Samples</td> + <td>{{Tag("Example")}}</td> + </tr> + <tr> + <th> </th> + <td>How-To & Tutorial</td> + <td>{{Tag("Guide")}}</td> + </tr> + <tr> + <th> </th> + <td>Developer Profiles</td> + <td><em>This will include developer profiles from the MDN site in the search results.</em></td> + </tr> + <tr> + <th> </th> + <td>External Resources</td> + <td><em>This is something the dev team will need to figure out.</em></td> + </tr> + </tbody> +</table> + +<h2 id="Tagging_problems_you_can_fix">Tagging problems you can fix</h2> + +<p>There are several types of problems with tags you can help fix:</p> + +<dl> + <dt>No tags</dt> + <dd>All articles should have at least one tag, and usually more than one. Generally, at a minimum, articles should have at least a "<a href="/en-US/docs/Project:MDN/Contributing/Tagging_standards#Category" title="/en-US/docs/Project:MDN/Contributing/Tagging_standards#Categories">category</a>" tag and a "<a href="/en-US/docs/Project:MDN/Contributing/Tagging_standards#Topic" title="/en-US/docs/Project:MDN/Contributing/Tagging_standards#Topic">topic</a>" tag. Often other tags are appropriate as well, but if you can help us ensure that at least these are present, you'll be a documentation hero!</dd> + <dt>Tags that don't follow our tagging standards</dt> + <dd>We have a <a href="/en-US/docs/Project:MDN/Contributing/Tagging_standards" title="/en-US/docs/Project:MDN/Contributing/Tagging_standards">Tagging standards</a> guide that explains how we use tags, including lists of appropriate tags to use on various types of documentation. Ideally, all articles should follow these standards, so if you see a page whose tags don't do so, please fix it!</dd> + <dt>Incorrect tags</dt> + <dd>If you're looking at an article about HTML and it's got the "JavaScript" tag on it, that's probably wrong! Similarly, if an article is about Mozilla internals but has the "Web" tag on it, that's probably wrong too. Remove these tags (and, if missing, add the right ones). This type of problem includes misspelled tags. "JavaScript" or "Javascript" for example (the latter actually will match, since tags are case-insensitive, but it's just not right!).</dd> + <dt>Missing tags</dt> + <dd>If an article has some tags, but not all of the appropriate ones, feel free to add more. Maybe you're looking at a page in the JavaScript reference, which is correctly tagged with "JavaScript" but has no other tags. Since it's a reference page, this should also have the "Reference" tag. You're invited to add it!</dd> + <dt>Tag spam</dt> + <dd>This insidious beast is the most revolting tag problem of all: some Web vermin has deposited its droppings in the tags for a page, leaving a page with tags like "Free warez!" or "Hey I was browsing your site and wanted to ask you if you could help me solve this problem I'm having with Flash crashing all the time". These need to be deleted posthaste!</dd> +</dl> + +<p>If you see one (or more) of these problems, you can help by <a href="/en-US/docs/Project:MDN/Contributing/Getting_started#Logging_into_MDN">logging into MDN</a>, then clicking the Edit button at the top right of the MDN window. Once the editor loads up, scroll down to the bottom of the page, where you'll see the tag box. For more details on the tagging interface, see "<a href="/en-US/docs/Project:MDN/Contributing/Editor_guide#The_tags_box" title="/en-US/docs/Project:MDN/Contributing/Editor_guide#The_tags_box">The tags box</a>" in the <a href="/en-US/docs/Project:MDN/Contributing/Editor_guide" title="/en-US/docs/Project:MDN/Contributing/Editor_guide">MDN editor guide</a>.</p> diff --git a/files/id/mdn/contribute/index.html b/files/id/mdn/contribute/index.html new file mode 100644 index 0000000000..4d76fd020d --- /dev/null +++ b/files/id/mdn/contribute/index.html @@ -0,0 +1,23 @@ +--- +title: Contributing to MDN +slug: MDN/Contribute +tags: + - Documentation + - Guide + - Landing + - MDN + - NeedsTranslation + - TopicStub +translation_of: MDN/Contribute +--- +<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/MDN")}}</div> + +<p>Selamat Datang! Dengan mengunjungi halaman ini, anda telah mengambil satu langkah menjadi kontributor di MDN!</p> + +<p><span class="seoSummary">Daftar paduan disini memuat semua aspek kontribusi ke MDN, diantaranya paduan style, paduan menggunakan alat dan editor kami, dan banyak lagi. Pastikan anda membaca (dan aduan tentang) <a href="https://www.mozilla.org/en-US/about/legal/terms/mozilla/">Mozilla Terms</a> sebelum mengedit atau membuat halaman. </span></p> + +<p>Jika anda belum pernah berkontribusi di MDN, Paduan <a href="/en-US/docs/MDN/Getting_started">Memulai</a> bisa membantu anda memulai.</p> + +<div class="row topicpage-table"> </div> + +<p>{{LandingPageListSubPages()}}</p> diff --git a/files/id/mdn/contribute/processes/index.html b/files/id/mdn/contribute/processes/index.html new file mode 100644 index 0000000000..d01213c69f --- /dev/null +++ b/files/id/mdn/contribute/processes/index.html @@ -0,0 +1,23 @@ +--- +title: Proses dokumentasi +slug: MDN/Contribute/Processes +tags: + - ButuhPenerjemahan + - Landing + - MDN Meta + - Meta MDN + - NeedsTranslation + - Pendaratan + - Processes + - Proses + - RintisanTopik + - TopicStub +translation_of: MDN/Contribute/Processes +--- +<div>{{MDNSidebar}}</div> + +<div>{{IncludeSubnav("/en-US/docs/MDN")}}</div> + +<p>The MDN documentation project is enormous; there are a huge number of technologies to cover, and we have hundreds of contributors all over the world. To help bring order to chaos, we've got standard processes to follow when working on specific documentation-related tasks. Here you'll find guides to those processes.</p> + +<p>{{LandingPageListSubPages()}}</p> diff --git a/files/id/mdn/contribute/tugas/index.html b/files/id/mdn/contribute/tugas/index.html new file mode 100644 index 0000000000..c72f962d66 --- /dev/null +++ b/files/id/mdn/contribute/tugas/index.html @@ -0,0 +1,25 @@ +--- +title: Tugas untuk dilakukan di MDN +slug: MDN/Contribute/Tugas +tags: + - Dokumentasi + - MDN + - Panduan + - Proyek MDC +translation_of: MDN/Contribute/Getting_started +--- +<div>{{MDNSidebar}}</div><p>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. <a href="https://developer.mozilla.org/en-US/docs/Project:MDN/Contributing">Panduan kontributor MDN</a> mencakup semua hal yang bisa anda bantu dan lakukkan untuk mereka. Dibawah ini, anda bisa mencari daftar spesifikasi dari tugas yang perlu diselesaikan.</p> + +<p>Ada banyak hal yang bisa anda lakukan untuk membantu MDN. Kami punya panduan untuk tugas yang ingin anda lakukan pada artikel <a href="https://developer.mozilla.org/en-US/docs/MDN/Getting_started#Possible_task_types">Memulai MDN</a>. Berikut caranya: </p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Project:MDN/Contributing/How_to_help/Reviewing">Mengulas konten untuk keakuratan</a> (teknis ataupun editorial)</li> + <li><a href="/en-US/docs/MDN/Contribute/Howto/Tag">Update Tag pada halaman</a> untuk meningkatkan hasil pencarian dan daftar konten</li> + <li><a href="/en-US/docs/MDN/User_guide/Writing#Adding_a_new_page">Buat artikel baru</a></li> + <li><a href="/en-US/docs/MDN/User_guide/Writing#Editing_an_existing_page">Perbarui artikel yang sudah ada</a> dengan informasi baru, atau memperbaiki informasi yang salah</li> + <li><a href="/en-US/docs/MDN/Contribute/Howto/Convert_code_samples_to_be_live">Konversi contoh yang sudah ada menjadi contoh langsung</a></li> + <li><a href="/en-US/docs/MDN/Contribute/Editor/Live_samples">Tambahkan contoh kode baru sehingga orang bisa melihatnya langsung</a></li> + <li><a href="/en-US/docs/Project:MDN/Kuma/Contributing">Bantu mengembangkan platform Kuma dimana MDN dijalankan</a></li> +</ul> + +<p>Untuk ide lebih lanjut bagaimana anda bisa membantu dengan MDN, lihat <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto">Panduan </a>kami. Anda bisa mencari daftar kategori dari halaman yang anda butuhkan untuk membantu pada bagian <a href="/en-US/docs/MDN/Doc_status/Overview">Status Dokumen</a>.</p> diff --git a/files/id/mdn/guidelines/index.html b/files/id/mdn/guidelines/index.html new file mode 100644 index 0000000000..fdedce143e --- /dev/null +++ b/files/id/mdn/guidelines/index.html @@ -0,0 +1,16 @@ +--- +title: MDN content and style guides +slug: MDN/Guidelines +tags: + - Documentation + - Landing + - MDN + - NeedsTranslation + - TopicStub +translation_of: MDN/Guidelines +--- +<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/MDN")}}</div> + +<p><span class="seoSummary">Paduan berikut memberikan detail bagaimana dokumentasi MDN harus ditulis dan format tulisannya, juga cara bagaimana contoh kode dan konten lainnya di sampaikan.</span> Dengan mengikuti paduan berikut, anda dapat memastikan bahwa semua material yang anda buat asli dan mudah digunakan.</p> + +<p>{{LandingPageListSubpages}}</p> diff --git a/files/id/mdn/guidelines/layout/index.html b/files/id/mdn/guidelines/layout/index.html new file mode 100644 index 0000000000..9bb0fe9ea3 --- /dev/null +++ b/files/id/mdn/guidelines/layout/index.html @@ -0,0 +1,7 @@ +--- +title: MDN page layout guide +slug: MDN/Guidelines/Layout +translation_of: Archive/Meta_docs/MDN_page_layout_guide +--- +<div>{{MDNSidebar}}</div><p><span class="seoSummary">These guides supplement the <a href="/en-US/docs/MDN/Contribute/Content/Style_guide">MDN style guide</a> with specific layouts for the various types of pages on MDN. This helps contributors create new content that's structurally consistent with the rest of MDN.</span></p> +<p>{{LandingPageListSubpages}}</p> diff --git a/files/id/mdn/guidelines/writing_style_guide/index.html b/files/id/mdn/guidelines/writing_style_guide/index.html new file mode 100644 index 0000000000..b3ad6bb25f --- /dev/null +++ b/files/id/mdn/guidelines/writing_style_guide/index.html @@ -0,0 +1,802 @@ +--- +title: Writing style guide +slug: MDN/Guidelines/Writing_style_guide +tags: + - tags bahasa Indonesia +translation_of: MDN/Guidelines/Writing_style_guide +--- +<div>{{MDNSidebar}}</div> + +<div>{{IncludeSubnav("/en-US/docs/MDN")}}</div> + +<p><span class="seoSummary">To present documentation in an organized, standardized, and easy-to-read manner, the MDN Web Docs style guide describes how text should be organized, spelled, formatted, and so on. These are guidelines rather than strict rules.</span> We are more interested in content than formatting, so don't feel obligated to learn the style guide before contributing. Do not be upset or surprised, however, if an industrious volunteer later edits your work to conform to this guide.</p> + +<p>The language aspects of this guide apply primarily to English-language documentation. Other languages may have (and are welcome to create) style guides. These should be published as subpages of the localization team's page.</p> + +<p>For style standards that apply to content written for sites other than MDN, refer to the <a href="https://www.mozilla.org/en-US/styleguide/" title="https://www.mozilla.org/en-US/styleguide/">One Mozilla style guide</a>.</p> + +<h2 id="Basics">Basics</h2> + +<p>The best place to start in any extensive publishing style guide is with some very basic text standards to help keep documentation consistent. The following sections outline some of these basics to help you.</p> + +<h3 id="Page_titles">Page titles</h3> + +<p>Page titles are used in search results and also used to structure the page hierarchy in the breadcrumb list at the top of the page. The page title (which is displayed at the top of the page and in the search results) can be different from the page "slug", which is the portion of the page's URL following "<em><locale>/docs/</em>".</p> + +<h4 id="Title_and_heading_capitalization">Title and heading capitalization</h4> + +<p>Page titles and section headings should use sentence-style capitalization (only capitalize the first word and proper nouns) rather than headline-style capitalization:</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: "A new method for creating JavaScript rollovers"</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: "A New Method for Creating JavaScript Rollovers"</li> +</ul> + +<p>We have many older pages that were written before this style rule was established. Feel free to update them as needed if you like. We're gradually getting to them.</p> + +<h4 id="Choosing_titles_and_slugs">Choosing titles and slugs</h4> + +<p>Page slugs should be kept short; when creating a new level of hierarchy, the new level's component in the slug should just be a word or two.</p> + +<p>Page titles, on the other hand, may be as long as you like, within reason, and they should be descriptive.</p> + +<h4 id="Creating_new_subtrees">Creating new subtrees</h4> + +<p>When you need to add some articles about a topic or subject area, you will typically do so by creating a landing page, then adding subpages for each of the individual articles. The landing page should open with a paragraph or two describing the topic or technology, then provide a list of the subpages with descriptions of each page. You can automate the insertion of pages into the list using some macros we've created.</p> + +<p>For example, consider the <a href="/en-US/docs/Web/JavaScript">JavaScript</a> guide, which is structured as follows:</p> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide" title="JavaScript/Guide">JavaScript/Guide</a> – Main table-of-contents page</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/JavaScript_Overview" title="JavaScript/Guide/JavaScript_Overview">JavaScript/Guide/JavaScript Overview</a></li> + <li><a href="/en-US/docs/JavaScript/Guide/Functions" title="JavaScript/Guide/Functions">JavaScript/Guide/Functions</a></li> + <li><a href="/en-US/docs/JavaScript/Guide/Details_of_the_Object_Model" title="JavaScript/Guide/Details_of_the_Object_Model">JavaScript/Guide/Details of the Object Model</a></li> +</ul> + +<p>Try to avoid putting your article at the top of the hierarchy, which slows the site down and makes search and site navigation less effective.</p> + +<div class="blockIndicator note"> +<p>Note: Adding articles requires <a href="https://wiki.developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Create_and_edit_pages#Getting_page-creation_permissions">page creation privileges</a>.</p> +</div> + +<h3 id="General_article_content_guidelines">General article content guidelines</h3> + +<p>When writing any document, it's important to know how much to say. If you ramble on too long, or provide excessive detail, the article becomes tedious to read and nobody will use it. Getting the amount of coverage right is important for several reasons. Among those reasons: to ensure that the reader finds the information they truly need, and to provide enough quality material for search engines to adequately analyze and rank the article.</p> + +<p>We'll discuss the former (providing the information the reader may need) here. To learn a little about ensuring that pages are properly classified and ranked by search engines, see the article <a href="/en-US/docs/MDN/Contribute/Howto/Write_for_SEO">How to write for SEO on MDN</a>.</p> + +<p>The goal is to write pages that include all the information that readers may need without going on too long about it all. We have a few recommendations in this area.</p> + +<h4 id="Consider_your_audience">Consider your audience</h4> + +<p>Keep in mind that these are guidelines. Some of these tips may not apply in every case. Certainly keep your article's audience in mind. An article on advanced network techniques likely doesn't need to go into as much detail about basic networking concepts as the typical article on networking code, for instance.</p> + +<h4 id="Provide_a_useful_summary">Provide a useful summary</h4> + +<p>Make sure the article's summary—that is, the opening paragraph or paragraphs before the first heading—provides enough information for the reader to understand if the article is likely to be covering what they're interested in reading about.</p> + +<p>In guide or tutorial content, the summary should let the reader know what topics will be covered and what they're already expected to know, if anything. It should mention the technology, technologies, and/or APIs that are being documented or discussed, with links to those, and it should offer hints as to the situations in which the article's contents might be useful.</p> + +<h5 id="Example_Too_short!">Example: Too short!</h5> + +<p>This example of a summary is far too short. It leaves out too much information, such as what it means exactly to "stroke" text, where the text is drawn, and so forth.</p> + +<div class="example-bad"> +<p><strong><code>CanvasRenderingContext2D.strokeText()</code></strong> draws a string.</p> +</div> + +<h5 id="Example_Too_long!">Example: Too long!</h5> + +<p>Here, we've updated the summary, but now it's far too long. Too much detail is included, and the text gets far too much into other methods and properties.</p> + +<p>Instead, the summary should focus on the <code>strokeText()</code> method, and should refer to the appropriate guide where the other details are offered.</p> + +<div class="example-bad"> +<p>When called, the Canvas 2D API method <strong><code>CanvasRenderingContext2D.strokeText()</code></strong> strokes the characters in the specified string beginning at the coordinates specified, using the current pen color. In the terminology of computer graphics, "stroking" text means to draw the outlines of the glyphs in the string without filling in the contents of each character with color.</p> + +<p>The text is drawn using the context's current font as specified in the context's {{domxref("CanvasRenderingContext2D.font", "font")}} property.</p> + +<p>The placement of the text relative to the specified coordinates are determined by the context's <code>textAlign</code>, <code>textBaseline</code>, and <code>direction</code> properties. <code>textAlign</code> controls the placement of the string relative to the X coordinate specified; if the value is <code>"center"</code>, then the string is drawn starting at <code>x - (stringWidth / 2)</code>, placing the specified X-coordinate in the middle of the string. If the value is <code>"left"</code>, the string is drawn starting at the specified value of <code>x</code>. And if <code>textAlign</code> is <code>"right"</code>, the text is drawn such that it ends at the specified X-coordinate.</p> + +<p>(etc etc etc...)</p> + +<p>You can, optionally, provide a fourth parameter that lets you specify a maximum width for the string, in pixels. If you provide this parameter, the text is compressed horizontally or scaled (or otherwise adjusted) to fit inside a space that wide when being drawn.</p> + +<p>You can call the <strong><code>fillText()</code></strong> method to draw a string's characters as filled with color instead of only drawing the outlines of the characters.</p> +</div> + +<h5 id="Example_Much_better!">Example: Much better!</h5> + +<p>Here we see a much better overview for the <code>strokeText()</code> method.</p> + +<div class="example-good"> +<p>The {{domxref("CanvasRenderingContext2D")}} method <code><strong>strokeText()</strong></code>, part of the <a href="/en-US/docs/Web/API/Canvas_API">Canvas 2D API</a>, strokes—that is, draws the outlines of—the characters of a specified string, anchored at the position indicated by the given X and Y coordinates. The text is drawn using the context's current {{domxref("CanvasRenderingContext2D.font", "font")}}, and is justified and aligned according to the {{domxref("CanvasRenderingContext2D.textAlign", "textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline")}}, and {{domxref("CanvasRenderingContext2D.direction", "direction")}} properties.</p> + +<p>For more details and further examples, see {{SectionOnPage("/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Text")}} in the Learning Area as well as our main article on the subject, <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text">Drawing text</a>.</p> +</div> + +<h4 id="Include_all_relevant_examples">Include all relevant examples</h4> + +<p>More pages should have examples than not. The majority of pages probably deserve multiple examples, in fact.</p> + +<p>It's important to ensure that you use examples to clarify what every parameter is used for, and to clarify any edge cases that may exist. You should also use examples to demonstrate solutions for common tasks, and you should use examples to demonstrate solutions to problems that may arise.</p> + +<p>Each example should be preceded by text explaining what the example does and anything the reader should know before beginning to read or try out the example.</p> + +<h5 id="Code_Examples">Code Examples</h5> + +<p>Each piece of code should include an explanation of how it works. Keep in mind that it may make sense to break up a large piece of code into smaller portions so they can be described individually.</p> + +<p>The text following each piece of code should explain anything relevant, using an appropriate level of detail.</p> + +<ul> + <li>If the code is very simple and doesn't really feature anything directly related to the API being documented, you may only give a quick summary of what it is and why it's there.</li> + <li>If the code is intricate, uses the API being documented, or is technically creative, you should provide a more detailed explanation.</li> +</ul> + +<p>When using the live sample system, it's helpful to be aware that all of the {{HTMLElement("pre")}} blocks in the area that contains the sample are concatenated together before running the example, which lets you break any or all of the HTML, CSS, and JavaScript into multiple segments, each optionally with its own descriptions, headings, and so forth. This makes documenting code incredibly powerful and flexible.</p> + +<h4 id="Overly-short_articles_are_hard_to_find">Overly-short articles are hard to find</h4> + +<p>If an article is "thin"—that is, too short—it may not be indexed properly (or at all) by search engines. As a rule of thumb, the article's body text should be at least 250–300 words. Don't artificially inflate a page, but treat this guideline as a minimum target length when possible.</p> + +<h3 id="Sections_paragraphs_and_newlines">Sections, paragraphs, and newlines</h3> + +<p>Use heading levels in decreasing order: {{HTMLElement("h2")}} then {{HTMLElement("h3")}} then {{HTMLElement("h4")}}, without skipping levels.</p> + +<p>H2 is the highest level allowed because H1 is reserved for the page title. If you need more than three or four levels of headers, consider breaking up the article into several smaller articles with a landing page, and linking them together using the following macros: {{TemplateLink("Next")}}, {{TemplateLink("Previous")}}, and {{TemplateLink("PreviousNext")}}.</p> + +<h4 id="Heading_dos_and_donts">Heading dos and donts</h4> + +<ul> + <li>Don't create single subsections. Don't subdivide a topic into a single subtopic. It's either two subheadings or more, or none at all.</li> + <li>Don't use styles and classes within headings. This includes the {{HTMLElement("code")}} element for code terms. So don't make a heading "Using the <code>SuperAmazingThing</code> interface". It should instead just be "Using the SuperAmazingThing interface".</li> + <li>Avoid using macros within headings (except for certain macros that are specifically designed to be used in headings).</li> + <li>Don't create "bumping heads." These are headings followed immediately by a subheading, with no content text in between. This doesn't look good, and leaves readers without any explanatory text at the beginning of the outer section.</li> +</ul> + +<p>The <kbd>Enter</kbd> (or <kbd>Return</kbd>) key on your keyboard starts a new paragraph. To insert a newline, rather than a new paragraph (that is, to create a {{HTMLElement("br")}} instead of a {{HTMLElement("p")}}), hold down the <kbd>Shift</kbd> key while pressing <kbd>Enter</kbd>.</p> + +<h3 id="Lists">Lists</h3> + +<p>Lists should be formatted and structured uniformly across all contributions. Individual list items should be written with suitable punctuation, regardless of the list format. However, depending on the type of list you are creating, you will want to adjust your writing as described in the sections below.</p> + +<h4 id="Bulleted_lists">Bulleted lists</h4> + +<p>Bulleted lists should be used to group related pieces of concise information. Each item in the list should follow a similar sentence structure. Phrases and sentences in bulleted lists should include standard punctuation. Periods must appear at the end of each sentence in a bulleted list, including the item's final sentence, just as would be expected in a paragraph.</p> + +<p>An example of a correctly structured bulleted list:</p> + +<div class="example-good"> +<p>In this example we should include:</p> + +<ul> + <li>A condition, with a brief explanation.</li> + <li>A similar condition, with a brief explanation.</li> + <li>Yet another condition, with some further explanation.</li> +</ul> +</div> + +<p>Note how the same sentence structure repeats from bullet to bullet. In this example, each bullet point states a condition followed by a comma and a brief explanation, and each item in the list ends with a period.</p> + +<h4 id="Numbered_lists">Numbered lists</h4> + +<p>Numbered lists are used primarily to enumerate steps in a set of instructions. Because instructions can be complex, clarity is a priority, especially if the text in each list item is lengthy. As with bulleted lists, follow standard punctuation usage.</p> + +<p>An example of a correctly structured numbered list:</p> + +<div class="example-good"> +<p>In order to correctly structure a numbered list, you should:</p> + +<ol> + <li>Open with a heading or brief paragraph to introduce the instructions. It's important to provide the user with context before beginning the instructions.</li> + <li>Start creating your instructions, and keep each step in its own numbered item. Your instructions may be quite extensive, so it is important to write clearly and use correct punctuation.</li> + <li>After you have finished your instructions, close off the numbered list with a brief summary or explanation of the expected outcome upon completion.</li> +</ol> + +<p>This is an example of writing a closing explanation. We have created a short numbered list that provides instructive steps to produce a numbered list with the correct formatting.</p> +</div> + +<p>Note how the items in numbered lists read like short paragraphs. Because numbered lists are routinely used for instructional purposes, or to walk someone through an orderly procedure, be sure to keep each item focused: one item per number or step.</p> + +<h3 id="Text_formatting_and_styles">Text formatting and styles</h3> + +<p>Use the <strong>"Formatting Styles"</strong> drop-down list to apply predefined styles to selected content.</p> + +<div class="note">The <strong>"Note Box"</strong> style is used to call out important notes, like this one.</div> + +<div class="warning">Similarly, the <strong>"Warning Box"</strong> style creates warning boxes like this.</div> + +<p>Unless specifically instructed to do so, <em>do not</em> use the HTML <code>style</code> attribute to manually style content. If you can't do it using a predefined class, ask for help in the <a href="https://discourse.mozilla.org/c/mdn">MDN discussion forum</a>.</p> + +<h3 id="Code_sample_style_and_formatting">Code sample style and formatting</h3> + +<div class="note"> +<p><strong>Note</strong>: This section deals with the styling/formatting of code as it appears on an MDN article. If you want guidelines on actually writing code examples, see our <a href="/en-US/docs/MDN/Contribute/Guidelines/Code_samples">Code sample guidelines</a>.</p> +</div> + +<h4 id="Tabs_and_line_breaks">Tabs and line breaks</h4> + +<p>Use two spaces per tab in all code examples. Indent the code cleanly, with open-brace ("<code>{</code>") characters on the same line as the statement that opens the block. For example:</p> + +<pre class="brush: js notranslate">if (condition) { + /* handle the condition */ +} else { + /* handle the "else" case */ +} +</pre> + +<p>Long lines shouldn't be allowed to stretch off horizontally to the extent that they require horizontal scrolling to read. Instead, break at natural breaking points. Some examples follow:</p> + +<pre class="brush: js notranslate">if (class.CONDITION || class.OTHER_CONDITION || class.SOME_OTHER_CONDITION + || class.YET_ANOTHER_CONDITION ) { + /* something */ +} + +var toolkitProfileService = Components.classes["@mozilla.org/toolkit/profile-service;1"] + .createInstance(Components.interfaces.nsIToolkitProfileService); +</pre> + +<h4 id="Inline_code_formatting">Inline code formatting</h4> + +<p>Use the "Code" button (labeled with two angle brackets "<>") to apply inline code-style formatting to function names, variable names, and method names. (This uses the {{HTMLElement("code")}} element). For example: "the <code class="js plain">frenchText()</code> function".</p> + +<p>Method names should be followed by a pair of parentheses: <code>doSomethingUseful()</code>. The parentheses help differentiate methods from other code terms.</p> + +<h4 id="Syntax_highlighting">Syntax highlighting</h4> + +<p><img alt="Screenshot of the 'Syntax Highlighter' menu." src="https://mdn.mozillademos.org/files/12682/Language%20list.png" style="border-style: solid; border-width: 1px; float: right; margin: 2px 4px;">Entire lines (or multiple lines) of code should be formatted using syntax highlighting rather than the {{HTMLElement("code")}} element. Select the appropriate language from the language list button (the one with the two code blocks), as seen in the screenshot to the right. This will insert a preformatted code box with line numbers and syntax highlighting for the chosen language.</p> + +<div class="note"> +<p><strong>Note:</strong> <em>Do not</em> use the {{HTMLElement("code")}} element inside the {{HTMLElement("pre")}} block!</p> + +<p>While this structure is used on some sites, we do not do so on MDN; nesting these elements will break certain aspects of our styling.</p> +</div> + +<p>The following example shows text with JavaScript formatting:</p> + +<div class="line number2 index1 alt1"> +<pre class="brush: js notranslate">for (let i = 0, j = 9; i <= 9; i++, j--) + document.writeln("a[" + i + "][" + j + "]= " + a[i][j]);</pre> +</div> + +<p>If no appropriate language is available, use ("No Highlight" in the language menu). This will result in code without syntax highlighting:</p> + +<pre class="brush: plain notranslate">x = 42;</pre> + +<h4 id="Syntax_definitions">Syntax definitions</h4> + +<p>When writing the syntax description section of a reference page, use the <em>"Syntax Box"</em> option in the <strong>"Styles"</strong> drop-down menu in the editor toolbar. This creates a specially-formatted box used specifically for syntax definitions, distinguishing them from other code blocks.</p> + +<h4 id="Blocks_not_referring_to_code">Blocks not referring to code</h4> + +<p>There are a few use cases where a <code><pre></code> block does not refer to code and doesn't have syntax highlighting nor line numbers. In such cases you should add a <code><pre></code> without a <code>class</code> attribute. Those cases include things like tree structures:</p> + +<pre class="notranslate">root/ + + folder1/ + file1 + + folder2/ + file2 + file3 +</pre> + +<p>To create preformatted content without syntax highlighting and line numbers click the "pre" button in the toolbar. Then start to type the text.</p> + +<h4 id="Styling_mentions_of_HTML_elements">Styling mentions of HTML elements</h4> + +<p>There are specific rules to follow when writing about HTML elements. These rules produce consistent descriptions of elements and their components. They also ensure correct linking to detailed documentation.</p> + +<dl> + <dt>Element names</dt> + <dd>Use the {{TemplateLink("HTMLElement")}} macro, which creates a link to the page for that element. For example, writing \{{HTMLElement("title")}} produces "{{HTMLElement("title")}}". If you don't want to create a link, <strong>enclose the name in angle brackets</strong> and use the "Inline Code" style (e.g., <code><title></code>).</dd> + <dt>Attribute names</dt> + <dd>Use "Inline Code" style to put attribute names in <code>code font</code>. Additionally, put them in <strong><code>bold face</code></strong> when the attribute is mentioned in association with an explanation of what it does, or the first time it's used in the article.</dd> + <dt>Attribute definitions</dt> + <dd>Use the {{TemplateLink("htmlattrdef")}} macro (e.g., <span class="nowiki">\{{htmlattrdef("type")}}</span>) for the definition term, so that it can be linked to from other pages easily by simply using the {{TemplateLink("htmlattrxref")}} macro (e.g., <span class="nowiki">\{{htmlattrxref("attr","element")}}</span>) to reference attribute definitions.</dd> + <dt>Attribute values</dt> + <dd>Use the "Inline Code" style to apply <code><code></code> to attribute values, and don't use quotation marks around string values, unless needed by the syntax of a code sample.</dd> + <dd>For example: "When the <code>type</code> attribute of an <code><input></code> element is set to <code>email</code> or <code>tel</code> ..."</dd> +</dl> + +<h3 id="Latin_abbreviations">Latin abbreviations</h3> + +<h4 id="In_notes_and_parentheses">In notes and parentheses</h4> + +<ul> + <li>Common Latin abbreviations (etc., i.e., e.g.) may be used in parenthetical expressions and notes. Use periods in these abbreviations, followed by a comma or other appropriate punctuation. + <ul> + <li><span class="correct"><strong>Correct</strong></span>: Web browsers (e.g., Firefox) can be used ...</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: Web browsers e.g. Firefox can be used ...</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: Web browsers, e.g. Firefox, can be used ...</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: Web browsers, (eg: Firefox) can be used ...</li> + </ul> + </li> +</ul> + +<h4 id="In_running_text">In running text</h4> + +<ul> + <li>In regular text (i.e., text outside of notes or parentheses), use the English equivalent of the abbreviation. + <ul> + <li><span class="correct"><strong>Correct</strong></span>: ... web browsers, and so on.</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: ... web browsers, etc.</li> + <li><span class="correct"><strong>Correct</strong></span>: Web browsers such as Firefox can be used ...</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: Web browsers e.g. Firefox can be used ...</li> + </ul> + </li> +</ul> + +<h4 id="Meanings_and_English_equivalents_of_Latin_abbreviations">Meanings and English equivalents of Latin abbreviations</h4> + +<table class="fullwidth-table"> + <thead> + <tr> + <th scope="col">Abbrev</th> + <th scope="col">Latin</th> + <th scope="col">English</th> + </tr> + </thead> + <tbody> + <tr> + <td>cf.</td> + <td><em>confer</em></td> + <td>compare</td> + </tr> + <tr> + <td>e.g.</td> + <td><em>exempli gratia</em></td> + <td>for example</td> + </tr> + <tr> + <td>et al.</td> + <td><em>et alii</em></td> + <td>and others</td> + </tr> + <tr> + <td>etc.</td> + <td><em>et cetera</em></td> + <td>and so forth, and so on</td> + </tr> + <tr> + <td>i.e.</td> + <td><em>id est</em></td> + <td>that is, in other words</td> + </tr> + <tr> + <td>N.B.</td> + <td><em>nota bene</em></td> + <td>note well</td> + </tr> + <tr> + <td>P.S.</td> + <td><em>post scriptum</em></td> + <td>postscript</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p>Always consider whether it's truly beneficial to use a Latin abbreviation. Some of these are used so rarely that many readers won't understand the meaning, and others are often confused with one another.</p> + +<p>Also, be sure that <em>you</em> use them correctly, if you choose to do so. For example, be careful not to confuse "e.g." with "i.e.", which is a common error.</p> +</div> + +<h3 id="Acronyms_and_abbreviations">Acronyms and abbreviations</h3> + +<h4 id="Capitalization_and_periods">Capitalization and periods</h4> + +<p>Use full capitals and delete periods in all acronyms and abbreviations, including organizations such as "US" and "UN".</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: XUL</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: X.U.L.; Xul</li> +</ul> + +<h4 id="Expansion">Expansion</h4> + +<p>On the first mention of a term on a page, expand acronyms likely to be unfamiliar to users. When in doubt, expand it, or, better, link it to the article or <a href="/en-US/docs/Glossary">glossary</a> entry describing the technology.</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: "XUL (XML User Interface Language) is Mozilla's XML-based language..."</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: "XUL is Mozilla's XML-based language..."</li> +</ul> + +<h4 id="Plurals_of_acronyms_and_abbreviations">Plurals of acronyms and abbreviations</h4> + +<p>For plurals of acronyms or abbreviations, add <em>s</em>. Don't use an apostrophe. Ever. Please.</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: CD-ROMs</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: CD-ROM's</li> +</ul> + +<h4 id="Versus_vs._and_v.">"Versus", "vs.", and "v."</h4> + +<p>The contraction "vs." is preferred.</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: this vs. that</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: this v. that</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: this versus that</li> +</ul> + +<h3 id="Capitalization">Capitalization</h3> + +<p>Use standard English capitalization rules in body text, and capitalize "World Wide Web." It is acceptable to use lower case for "web" (used alone or as a modifier) and "internet;" this guideline is a change from a previous version of this guide, so you may find many instances of "Web" and "Internet" on MDN. Feel free to change these as you are making other changes, but editing an article just to change capitalization is not necessary.</p> + +<p>Keyboard keys should use sentence-style capitalization, not all-caps capitalization. For example, "Enter" not "ENTER." The only exception is that if you wish to abbreviate the name of the "Escape" key, you may use "ESC".</p> + +<p>Certain words should always be capitalized (such as trademarks which include capital letters), or words derived from the name of a person (unless it's being used within code, and the rules of the language in which the code is written mandate lower-casing). Some examples:</p> + +<ul> + <li>Boolean (named for English mathematician and logician {{interwiki("wikipedia", "George Boole")}})</li> + <li>JavaScript (a trademark of Oracle Corporation, it should always be written as trademarked)</li> + <li>Python, TypeScript, Django, and other programming languages and framework names</li> +</ul> + +<h3 id="Contractions">Contractions</h3> + +<p>Our writing style tends to be casual, so you should feel free to use contractions (e.g., "don't", "can't", "shouldn't"), if you prefer.</p> + +<h3 id="Pluralization">Pluralization</h3> + +<p>Use English-style plurals, not the Latin- or Greek-influenced forms.</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: syllabuses, octopuses</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: syllabi, octopi</li> +</ul> + +<h3 id="Hyphenation">Hyphenation</h3> + +<p>Hyphenate compounds when the last letter of the prefix is a vowel and is the same as the first letter of the root.</p> + +<ul> + <li><font color="green"><strong>Correct</strong></font>: email, re-elect, co-op</li> + <li><font color="red"><strong>Incorrect</strong></font>: e-mail, reelect, coop</li> +</ul> + +<h3 id="Gender-neutral_language">Gender-neutral language</h3> + +<p>It is a good idea to use gender-neutral language in any writing where gender is irrelevant to the subject matter, to make the text as inclusive as possible. So, for example, if you are talking about the actions of a specific man, usage of "he"/"his" is fine; but if the subject is a person of either gender, "he"/"his" isn't appropriate.<br> + <br> + Let's take the following example:</p> + +<blockquote> +<p>A confirmation dialog appears, asking the user if he allows the Web page to make use of his Web cam.</p> +</blockquote> + +<blockquote> +<p>A confirmation dialog appears, asking the user if she allows the Web page to make use of her Web cam.</p> +</blockquote> + +<p>Both versions are gender-specific. To fix this, use gender-neutral pronouns:</p> + +<blockquote> +<p>A confirmation dialog appears, asking the user if they allow the Web page to make use of their Web cam.</p> +</blockquote> + +<div class="note"> +<p>MDN allows the use of this very common syntax (which is controversial among usage authorities) to make up for the lack of a neutral gender in English.</p> + +<p>The use of the third-person plural as a gender neutral pronoun (that is, using "they," "them", "their," and "theirs") is an accepted practice, commonly known as "<a href="https://en.wikipedia.org/wiki/Singular_they">singular 'they.'</a>"</p> +</div> + +<p>You can use both genders:</p> + +<blockquote> +<p>A confirmation dialog appears, asking the user if he or she allows the web page to make use of his/her web cam.</p> +</blockquote> + +<p>Making the users plural:</p> + +<blockquote> +<p>A confirmation dialog appears, asking the users if they allow the web page to make use of their web cams.</p> +</blockquote> + +<p>The best solution, of course, is to rewrite and eliminate the pronouns:</p> + +<blockquote> +<p>A confirmation dialog appears, requesting the user's permission for web cam access.</p> +</blockquote> + +<blockquote> +<p>A confirmation dialog box appears, which asks the user for permission to use the web cam.</p> +</blockquote> + +<p>The last way of dealing with the problem is arguably better. It is not only grammatically more correct, but removes some of the complexity associated with dealing with genders across different languages that may have wildly different gender rules. This solution can make translation easier for both readers and localizers.</p> + +<h3 id="Numbers_and_numerals">Numbers and numerals</h3> + +<h4 id="Dates">Dates</h4> + +<p>For dates (not including dates in code samples) use the format "January 1, 1990".</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: February 24, 2006</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: February 24th, 2006; 24 February, 2006; 24/02/2006</li> +</ul> + +<p>Alternately, you can use the YYYY/MM/DD format.</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: 2006/02/24</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: 02/24/2006; 24/02/2006; 02/24/06</li> +</ul> + +<h4 id="Decades">Decades</h4> + +<p>For decades, use the format "1990s". Don't use an apostrophe.</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: 1990s</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: 1990's</li> +</ul> + +<h4 id="Plurals_of_numerals">Plurals of numerals</h4> + +<p>For plurals of numerals add "s". Don't use an apostrophe.</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: 486s</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: 486's</li> +</ul> + +<h4 id="Commas">Commas</h4> + +<p>In running text, use commas only in five-digit and larger numbers.</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: 4000; 54,000</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: 4,000; 54000</li> +</ul> + +<h3 id="Punctuation">Punctuation</h3> + +<h4 id="Serial_comma">Serial comma</h4> + +<p><strong>Use the serial comma</strong>. The serial (also known as "Oxford") comma is the comma that appears before the conjunction in a series of three or more items.</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: I will travel on trains, planes, and automobiles.</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: I will travel on trains, planes and automobiles.</li> +</ul> + +<div class="note"> +<p>This is in contrast to the <a href="https://www.mozilla.org/en-US/styleguide/" title="https://www.mozilla.org/en-US/styleguide/">One Mozilla style guide</a>, which specifies that the serial comma is not to be used. MDN is an exception to this rule.</p> +</div> + +<h4 id="Apostrophes_and_quotation_marks">Apostrophes and quotation marks</h4> + +<p><strong>Do not use "curly" quotes and quotation marks.</strong> On MDN, we only use straight quotes and apostrophes.</p> + +<p>There are a couple of reasons for this.</p> + +<ol> + <li>We need to choose one or the other for consistency.</li> + <li>If curly quotes or apostrophes make their way into code snippets—even inline ones—readers may copy and paste them, expecting them to function (which they will not).</li> +</ol> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: Please don't use "curly quotes."</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: Please don’t use “curly quotes.”</li> +</ul> + +<h3 id="Spelling">Spelling</h3> + +<p>For words with variant spellings, always use their American English spelling.</p> + +<p>In general, use the first entry at <a href="http://www.dictionary.com/">Dictionary.com</a>, unless that entry is listed as a variant spelling or as being primarily used in a non-American form of English. For example, if you <a href="http://www.dictionary.com/browse/behaviour">look up "behaviour"</a>, you find the phrase "Chiefly British" followed by a link to the American standard form, "<a href="http://dictionary.reference.com/browse/behavior">behavior</a>". Do not use variant spellings.</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: localize, behavior</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: localise, behaviour</li> +</ul> + +<h3 id="Terminology">Terminology</h3> + +<h4 id="HTML_elements">HTML elements</h4> + +<p>Use "elements" to refer to HTML and XML elements, rather than "tags". In addition, they should almost always be wrapped in "<>", and should be in the {{HTMLElement("code")}} style.</p> + +<p>When you reference a given element for the first time in a section, you should use the {{TemplateLink("HTMLElement")}} macro to create a link to the documentation for the element (unless you're writing within that element's reference document page).</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: the {{HTMLElement("span")}} element</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: the span tag</li> +</ul> + +<h4 id="Parameters_vs._arguments">Parameters vs. arguments</h4> + +<p>The preferred term on MDN is <strong>parameters</strong>. Please avoid the term "arguments" for consistency whenever possible.</p> + +<h4 id="User_interface_actions">User interface actions</h4> + +<p>In task sequences, describe user interface actions using the imperative mood. Identify the user interface element by its label and type.</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: Click the Edit button.</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: Click Edit.</li> +</ul> + +<h3 id="Voice">Voice</h3> + +<p>While the active voice is preferred, the passive voice is also acceptable, given the informal feel of our content. Try to be consistent, though.</p> + +<h2 id="Wiki_markup_and_usage">Wiki markup and usage</h2> + +<h3 id="Links">Links</h3> + +<p>Links are a large part of what makes a wiki a powerful learning and teaching tool. Below you'll find some basic information, but you can find a complete guide to <a href="/en-US/docs/MDN/Contribute/Editor/Links">creating and editing links on MDN</a> in our editor guide.</p> + +<p>We encourage you to create appropriate links among articles; they help improve navigation and discoverability of content, and they provide important context to search engines like Google to help them provide better results. Every page should have a good set of links from words or phrases to other pages that expand upon the relevant ideas. This can be used both to define terms and to provide more in-depth or detailed documentation about a topic, or to connect to a related page that offers examples or information that may be of further interest.</p> + +<p>You can easily create links not only among pages on MDN (internal links) but also to pages outside MDN (external links).</p> + +<p>There are two ways to create links: you explicitly create a link using the Link button in the editor's toolbar—or by pressing <kbd>Ctrl</kbd>+<kbd>K</kbd> (<kbd>Cmd</kbd>-<kbd>K</kbd> on the Mac)—or you can use MDN's powerful macro system to generate links automatically or based on an input value.</p> + +<p>When deciding what text to use as a link, there are a few guidelines you can follow:</p> + +<ul> + <li>Whenever a macro exists which will create the link you need, and you are able to do so, please do. <a href="/en-US/docs/MDN/Contribute/Editor/Links#Using_link_macros">Using macros to create links</a> will not only help you get it right, but will allow future improvements to MDN to automatically be applied to your link.</li> + <li>For an API name, use the entire string of the API term as written in your content. The easiest way to do this is to <a href="/en-US/docs/MDN/Contribute/Editor/Links#Linking_to_documentation_for_APIs">use the appropriate macro</a> to construct a properly-formatted link for you.</li> + <li>For a term for which you're linking to a page defining or discussing that term, use the name of the term and no additional text as the link's text. For example: + <ul> + <li><span class="correct"><strong>Correct</strong></span>: You can use <a href="/en-US/docs/Web/JavaScript">JavaScript</a> code to create dynamic applications on the Web.</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: You can use <a href="/en-US/docs/Web/JavaScript">JavaScript code</a> to create dynamic applications on the Web.</li> + </ul> + </li> + <li>Otherwise, when adding a useful link to prose, try to choose an action and object phrase, such as: + <ul> + <li><span class="correct"><strong>Correct</strong></span>: If you'd like to <a href="/en-US/docs/Mozilla/Developer_guide">contribute to the Firefox project</a>, your first step is to <a href="/en-US/docs/Mozilla/Developer_guide/Build_Instructions">download and build Firefox</a>.</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: <a href="/en-US/docs/Mozilla/Developer_guide">If you'd like to contribute to the Firefox project</a>, your first step is to <a href="/en-US/docs/Mozilla/Developer_guide/Build_Instructions">download and build</a> Firefox.</li> + </ul> + </li> +</ul> + +<h4 id="URL_schemes">URL schemes</h4> + +<p>For security reasons, you should only create links that use the following schemes:</p> + +<ul> + <li><code>http://</code></li> + <li><code>https://</code></li> + <li><code>ftp://</code></li> + <li><code>mailto:</code></li> +</ul> + +<p>Others may or may not work, but are not supported and will probably be removed by editorial staff.</p> + +<div class="note"> +<p>In particular, avoid the <code>about:</code> or <code>chrome://</code> schemes, as they will not work. Similarly, the <code>javascript:</code> scheme is blocked by most modern browsers, as is <code>jar:</code>.</p> +</div> + +<h3 id="Page_tags">Page tags</h3> + +<p>Tags provide meta information about a page and/or indicate that a page has specific improvements needed to its content. Every page in the wiki should have tags.</p> + +<p>You can find details on tagging in our <a href="/en-US/docs/MDN/Contribute/Howto/Tag">How to properly tag pages</a> guide.</p> + +<p>The tagging interface lives at the bottom of a page while you're in edit mode, and looks something like this:</p> + +<p><img alt="Screenshot of the UX for adding and removing tags on MDN" src="https://mdn.mozillademos.org/files/7859/tag-interface.png" style="border-style: solid; border-width: 1px; height: 167px; width: 863px;"></p> + +<p>To add a tag, click in the edit box at the end of the tag list and type the tag name you wish to add. Tags will autocomplete as you type. Press enter (or return) to submit the new tag. Each article may have as many tags as needed. For example, an article about using JavaScript in AJAX programming might have both "JavaScript" and "AJAX" as tags.</p> + +<p>To remove a tag, just click the little "X" icon in the tag.</p> + +<h4 id="Tagging_pages_that_need_work">Tagging pages that need work</h4> + +<p>In addition to using tags to track information about the documentation's quality and content, we also use them to mark articles as needing specific types of work.</p> + +<h4 id="Tagging_obsolete_pages">Tagging obsolete pages</h4> + +<p>Use the following tags for pages that are not current:</p> + +<dl> + <dt>Junk</dt> + <dd>Use for spam, pages created by mistake, or content that is so bad that it should be deleted. Pages with this tag are deleted from time to time.</dd> + <dt>Obsolete</dt> + <dd>Use for content that is technically superseded, but still valid in context. For example an HTML element that is obsolete in HTML5 is still valid in HTML 4.01. You can also use the <span class="nowiki">{{TemplateLink("obsolete_header")}}</span> macro to put a prominent banner on the topic.</dd> + <dt>Archive</dt> + <dd>Use for content that is technically superseded and no longer useful. If possible, add a note to the topic referring readers to a more current topic. For example, a page that describes how to use the Mozilla CVS repository should refer readers to a current topic on using Mercurial repos. (If no corresponding current topic exists, use the <em>NeedsUpdate</em> tag, and add an explanation on the Talk page.) Pages with the Archive tag are eventually moved from the main content of MDN to the <a href="/en-US/docs/Archive">Archive</a> section.</dd> +</dl> + +<h3 id="SEO_summary">SEO summary</h3> + +<p>The SEO summary provides a short description of a page. It will be reported as a summary of the article to robots crawling the site, and will then appear in search results for the page. It is also used by macros that automate the construction of landing pages inside MDN itself. (In other words, it's not just for SEO.)</p> + +<p>By default, the first paragraph of the page is used as the SEO summary. However, you can override this behavior by marking a section with the <a href="/en-US/docs/Project:MDN/Contributing/Editor_guide/Editing#Formatting_styles">"SEO summary" style in the WYSIWYG editor</a>.</p> + +<h3 id="Landing_pages">Landing pages</h3> + +<p><strong>Landing pages</strong> are pages at the root of a topic area of the site, such as the main <a href="/en-US/docs/CSS" title="CSS">CSS</a> or <a href="/en-US/docs/HTML" title="HTML">HTML</a> pages. They have a standard format that consists of three areas:</p> + +<ol> + <li>A brief (typically one paragraph) overview of what the technology is and how it's used. See {{anch("Writing a landing page overview")}} for tips.</li> + <li>A two-column list of links with appropriate headings. See {{anch("Creating a page link list")}} for guidelines.</li> + <li>An <strong>optional</strong> "Browser compatibility" section at the bottom of the page.</li> +</ol> + +<h4 id="Creating_a_page_link_list">Creating a page link list</h4> + +<p>The link list section of an MDN landing page consists of two columns. These are created using the following HTML:</p> + +<pre class="brush: html notranslate"><div class="row topicpage-table"> + <div class="section"> + ... left column contents ... + </div> + <div class="section"> + ... right column contents ... + </div> +</div></pre> + +<p>The left column should be a list of articles, with an <code><h2></code> header at the top of the left column explaining that it's a list of articles about the topic (e.g., "Documentation and tutorials about foo"); this header should use the CSS class "Documentation". Below that is a <code><dl></code> list of articles with each article's link in a <code><dt></code> block and a brief one-or-two sentence summary of the article in the corresponding <code><dd></code> block.</p> + +<p>The right column should contain one or more of the following sections, in order:</p> + +<dl> + <dt>Getting help from the community</dt> + <dd>This should provide information on Matrix chat rooms and mailing lists available on the topic. The heading should use the class "Community".</dd> + <dt>Tools</dt> + <dd>A list of tools the user can look at to help with the use of the technology described in this section of MDN. The heading should use the class "Tools".</dd> + <dt>Related topics</dt> + <dd>A list of links to landing pages for other, related, technologies of relevance. The heading should use the class "Related_Topics".</dd> +</dl> + +<p><strong>{{TODO("Finish this once we finalize the landing page standards")}}</strong></p> + +<h2 id="Using_and_inserting_images">Using and inserting images</h2> + +<p>It's sometimes helpful to provide an image in an article you create or modify, especially if the article is very technical. To include an image:</p> + +<ol> + <li>Before uploading your image, please ensure that it's as small as possible by using an image optiization tool. + <ol> + <li>For bitmap images (JPG or PNG), consider a tool such as <a href="https://imageoptim.com/mac">ImageOptim</a> (macOS), <a href="https://tinypng.com/">TinyPNG</a> (web service), or <a href="https://trimage.org/">Trimage</a> (Linux).</li> + <li>For SVG images, use the <code><a href="https://github.com/svg/svgo">svgo</a></code> tool to optimize the SVG file before sending it. The default configuration is fine.</li> + </ol> + </li> + <li>Attach the desired image file to the article (at the bottom of every article in edit mode). If your artwork is a diagram in SVG format (which is ideal if there is text that may need to be localized), you can't upload it directly, but you can ask an MDN admin to do it for you.</li> + <li>Click the "insert image" button in the MDN documentation WYSIWYG editor.</li> + <li>In the WYSIWYG editor, in the drop-down list of attachments, select the newly created attachment that is your image.</li> + <li>Press OK.</li> +</ol> + +<div class="warning"> +<p><strong>Important:</strong> Remember to save any changes you've made before uploading an attachment to your article! The editor is closed during the upload process, and currently <em>does not verify</em> whether or not you wish to save your work when it does so.</p> +</div> + +<h2 id="Other_references">Other references</h2> + +<h3 id="Preferred_style_guides">Preferred style guides</h3> + +<p>If you have questions about usage and style not covered here, we recommend referring to the <a href="https://docs.microsoft.com/en-us/style-guide/welcome/">Microsoft Writing Style Guide</a> or, failing that, the <a href="https://www.amazon.com/Chicago-Manual-Style-16th/dp/0226104206">Chicago Manual of Style</a>. An <a href="https://faculty.cascadia.edu/cma/HIST148/cmscrib.pdf">unofficial crib sheet for the Chicago Manual of Style</a> is available online.</p> + +<h3 id="Preferred_dictionary">Preferred dictionary</h3> + +<p>For questions of spelling, please refer to <a href="http://www.dictionary.com/">Dictionary.com</a>. The spelling checker for this site uses American English. Please do not use variant spellings (e.g., use <em>color</em> rather than <em>colour</em>).</p> + +<p>We will be expanding the guide over time, so if you have specific questions that aren't covered in this document, please post them on the <a href="https://discourse.mozilla.org/c/mdn">MDN discussion forum</a>, so we know what should be added.</p> + +<h3 id="MDN-specific">MDN-specific</h3> + +<ul> + <li><a href="/en-US/docs/MDN/Contribute/Structures/Macros/Commonly-used_macros" title="Project:en/Custom_Templates">Commonly-used macros</a> on MDN, with explanations</li> +</ul> + +<h3 id="Language_grammar_spelling">Language, grammar, spelling</h3> + +<p>If you're interested in improving your writing and editing skills, you may find the following resources to be helpful.</p> + +<ul> + <li><a href="http://www.amazon.com/Writing-Well-30th-Anniversary-Nonfiction/dp/0060891548">On Writing Well</a>, by William Zinsser (Amazon link)</li> + <li><a href="http://www.amazon.com/Style-Basics-Clarity-Grace-4th/dp/0205830765/" title="http://www.amazon.com/Style-Lessons-Clarity-Grace-Edition/dp/0321898680">Style: The Basics of Clarity and Grace</a>, by Joseph Williams and Gregory Colomb (Amazon link)</li> + <li><a href="https://brians.wsu.edu/common-errors-in-english-usage/">Common Errors in English</a></li> + <li><a href="http://www-personal.umich.edu/~jlawler/aue.html">English Grammar FAQ</a> (alt.usage.english)</li> + <li><a href="http://www.angryflower.com/bobsqu.gif">Bob's quick guide to the apostrophe, you idiots</a> (funny)</li> + <li><a href="http://www.amazon.com/Merriam-Websters-Concise-Dictionary-English-Usage/dp/B004L2KNI2" title="http://www.amazon.com/Merriam-Websters-Concise-Dictionary-English-Usage/dp/B004L2KNI2">Merriam-Webster's Concise Dictionary of English Usage</a> (Amazon link): Scholarly but user-friendly, evidence-based advice; very good for non-native speakers, especially for preposition usage.</li> + <li><a href="http://english.stackexchange.com/">English Language and Usage StackExchange</a>: Question and answer site for English language usage.</li> +</ul> diff --git a/files/id/mdn/index.html b/files/id/mdn/index.html new file mode 100644 index 0000000000..3d34d67796 --- /dev/null +++ b/files/id/mdn/index.html @@ -0,0 +1,46 @@ +--- +title: The MDN project +slug: MDN +tags: + - Landing + - MDN + - MDN Meta +translation_of: MDN +--- +<div> +<h1 id="Pink_or_blue_what_color_choice_for_her_wedding_evening_dress">Pink or blue: what color choice for her wedding evening dress</h1> + +<p>The wedding party dresses are a class of outfits that impress with their richness and variety of models they offer. However, if there is one criterion that determines the choice of evening dress for women, it is the color. It is first she who catches the eye before any interest is paid to other details. When it comes to colors, the same wealth of possibilities can be observed at marriage. However, there are two colors that have charm and are a true expression of femininity; pink and blue.</p> + +<p>If you want to buy <strong><a href="https://www.rjspret.com/product/khaadi-net-shirt-rjs-pret/">khaadi pret</a></strong> dresses and khaadi latest summer dresses you can visit online <strong><a href="https://www.rjspret.com/product/khaadi-net-shirt-rjs-pret/">Khaadi sale</a>. </strong>They offer the latest eid collection and summer lawn dresses collection with good quality.</p> + +<h2 id="Suki_Waterhouse_in_a_pink_wedding_dress_Bradley_Cooper"> Suki Waterhouse in a pink wedding dress & Bradley Cooper</h2> + +<p> Pink and blue are colors that have charm in common, although each has its own characteristics. The pink evening dress is a piece that makes the difference at first sight, because of its hue. Color symbolizing romanticism, pink brings to your style, an effect of novelty and more radiance. Attractive, it seduces the eye and commands admiration. Therefore, the pink wedding dress, therefore, represents a distinguished option, which adapts to various forms of evening dresses, to allow you to be as radiant as possible. Thus, it can be short and stand out through details and embellishments, as it can belong, low-cut, open back, or openwork. It should still be noted that these multiple options of evening wear all guarantee you a clean and elegant look.</p> + +<p><strong><a href="https://www.rjspret.com/product/khaadi-net-shirt-rjs-pret/">Gul Ahmed sale</a></strong> offers the latest <strong><a href="https://www.rjspret.com/product/khaadi-net-shirt-rjs-pret/">dress design</a></strong> with good quality if you want to buy these dresses you can visit at an online store.</p> + +<h2 id="Jennifer_Lawrence_simple_blue_dress_for_wedding">Jennifer Lawrence simple blue dress for wedding</h2> + +<p> For its part, blue is one of the most popular colors for evening dresses. The wedding evening dress in blue is a refined choice, imbued with visibility and expression. It is well suited for flaunting since it sublimates your appearance by making you shine. It is characterized by the many variations in which it is available, ranging from royal blue to dark blue, not to mention pale blue. This same diversity applies to the shapes of the wedding party dress which can also be short and sexy, long and tight, decorated with rhinestones, sequins, or other embellishments according to preference. The blue evening dress ensures you a perfect and elegant outfit, with a sensual or luxurious tone depending on the model.</p> + +<h2 id="Pink_V-neck_dress_blue_vintage_wedding_party_dress"> Pink V-neck dress & blue vintage wedding party dress</h2> + +<p> So, pink or blue? Opinions will certainly differ, although in either case, you will have sported an authentic and sumptuous outfit. On robespourmariage.fr, the midnight blue princess evening dress with V-neck back and guipure lace applied and the sexy pink dress with a plunging neckline are able to guide your choice.</p> + +<h2 id="The_gray_evening_dress_as_remarkable_as_it_is_unnoticed">The gray evening dress: as remarkable as it is unnoticed</h2> + +<p>A good time, a good atmosphere, and what could be better than being well undermined. For the occasion, we want to be on our 31. So the fateful question of what to wear begins to trot in the head. As soon as you decide on a gray evening dress, there are still several questions. What model, what cut, what material, what accessories and adornments, and above all that color of the dress to wear. What if we decided on a gray dress? Bland, who told you such nonsense! Did you not know that the trend is gray? Highlighted properly, it eclipses all other colors. </p> + +<p>A mixture of black and white, it is an interesting alternative for lovers of black & white. Know that with your gray dress, you will be of the sexiest refinement. Gray is suitable for all women regardless of their skin color. It is a neutral color to which we give the desired shine. There are several shades of it from the lightest to the darkest. So you have the possibility to choose your evening dress for weddings ranging from pearl gray to metallic gray. The materials in which it is found are numerous, each bringing its own touch to color. If you choose a maxi dress in silky satin or silk, the shine effect is more than guaranteed, especially since the gray hangs well in the light. Rather a dress in chiffon, lace, here implies a play of transparency of majestic softness.</p> + +<h2 id="Chic_gray_fluid_dress_Kate_Middleton_asymmetric_style">Chic gray fluid dress Kate Middleton asymmetric style</h2> + +<p>The gray wedding dress is not just wintery, as we often think. Although so much whiteness contrasts very well with it, it goes well in all seasons, well in both hot and cool weather. To go to a party during the spring-summer, you could opt for a short gray dress in silk or satin strapless or with straps. Sheath or ballerina according to the desire of each one. A great choice for a slim person. If you want to go lengthwise, a clean fabric such as lace, tulle, or muslin, for an empire, mermaid, or duchess cut. Fall-winter, we will focus on volume, why not a gray velvet dress, mermaid cut, or a satin dress with a sumptuous drape with long sleeves and a play of transparency.</p> + +<p>In terms of accessories, you should know that gray is very suitable for other colors but should not be overshadowed. If your dress is not already adorned with rhinestones, beading, sequins, and more, then adornments that add sparkle would be welcome. Clutch and shoe will probably match, black, white, or why not a total gray look.</p> + +<p>Gray evening dresses the short strapless A-line heart-shaped evening dress adorned with strapless rhinestones or the pleated & appliquéd evening dress with illusion collar; yes muslin, vaporous materials are in vogue. Greek goddess or princess, that's what these two models inspire. Both in the same style, yet the first a dark ash gray and the second a very light gray. The difference is also at the level of the asymmetrically decorated bustier for the second and stepped for the first. On the online store of robespourmariage.fr, you can customize them.</p> + + +</div> diff --git a/files/id/mdn/komunitas/conversations/index.html b/files/id/mdn/komunitas/conversations/index.html new file mode 100644 index 0000000000..d39080c8a3 --- /dev/null +++ b/files/id/mdn/komunitas/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 +--- +<div>{{MDNSidebar}}</div><p class="summary">"Pekerjaan" dari MDN terjadi di situs MDN, tetapi "Komunitas" juga juga melakukannya melalui diskusi (tidak tersinkronisasi) dan chatting serta meeting (tersinkronisasi)</p> + +<h2 id="Diskusi_Tidak_Tersinkronisasi">Diskusi Tidak Tersinkronisasi</h2> + +<p><span id="result_box" lang="id"><span>Untuk berbagi informasi dan berdiskusi, <a href="https://discourse.mozilla-community.org/c/mdn">MDN memiliki kategori sendiri ("MDN") di forum Wacana Mozilla</a>.</span> <span>Gunakan kategori ini untuk semua topik yang terkait dengan MDN, termasuk pembuatan konten dokumentasi, terjemahan, dan perawatan;</span> <span>Pengembangan platform MDN;</span> <span>Dan perencanaan, penetapan tujuan, dan pelacakan kemajuan.</span></span></p> + +<ul> + <li><span id="result_box" lang="id"><span>Untuk bergabung dalam Wacana Mozilla, lihat <a href="https://discourse.mozilla-community.org/t/signing-up-and-logging-in/16017">Sign up dan log in</a>;</span> <span>Jika Anda memiliki akun Mozilla LDAP, Anda dapat menggunakannya sebagai ganti "Masuk dengan email".</span></span></li> + <li><span id="result_box" lang="id"><span>Untuk berlangganan ke kategori MDN, lihat <a href="https://discourse.mozilla-community.org/t/subscribing-to-categories-and-topics/16024">Melangganan kategori dan topik</a>.</span></span></li> + <li><span id="result_box" lang="id"><span>(Opsional) Jika Anda lebih suka berinteraksi dengan Wacana terutama melalui email, lihat <a href="https://discourse.mozilla-community.org/t/mailman-mode/15279">Menyiapkan pengalaman milis untuk Anda sendiri</a>.</span> <span>Anda bisa memulai diskusi di Wacana dengan mengirimkan pesan email ke: <a href="mailto:mdn@mozilla-community.org">mdn@mozilla-community.org</a>.</span> <span>Jika Anda menggunakan Wacana melalui email, Anda dapat membalas sebuah pesan dengan membalas email pemberitahuan yang Anda terima.</span> <span>Jika Anda ingin menyisipkan komentar sebaris dalam balasan, mohon masukkan dua carriage-returns sebelum dan sesudah potongan inline Anda, sehingga Discourse memakainya dengan benar.</span></span></li> +</ul> + +<h2 id="Arsip_sejarah"><span class="short_text" id="result_box" lang="id"><span>Arsip sejarah</span></span></h2> + +<p><span id="result_box" lang="id"><span>Sebelum Juni 2017, diskusi terkait MDN berlangsung dalam daftar surat yang dikirimkan dan diarsipkan dengan kelompok Google.</span> <span>Jika Anda ingin mencari diskusi terakhir ini, Anda dapat melihat grup Google yang sesuai dengan milis lama.</span> <span>(Ya, kita tahu nama-nama ini tumpang tindih dan membingungkan. Kecelakaan </span></span>pada masa sebelumnya. maafkan hal ini.<span lang="id"><span>)</span></span></p> + +<dl> + <dt><a href="https://groups.google.com/forum/#!forum/mozilla.dev.mdc">mozilla.dev.mdc</a> a.k.a. dev-mdc</dt> + <dd><span id="result_box" lang="id"><span>Daftar ini untuk diskusi tentang konten dokumentasi di MDN.</span></span></dd> + <dt><a href="https://groups.google.com/forum/#!forum/mozilla.dev.mdn">mozilla.dev.mdn</a> a.k.a. dev-mdn</dt> + <dd><span id="result_box" lang="id"><span>Daftar ini adalah tentang pengembangan pekerjaan pada platform Kuma yang mendasari MDN.</span></span></dd> + <dt><a href="https://groups.google.com/forum/#!forum/mozilla.mdn">mozilla.mdn</a> a.k.a mdn@</dt> + <dd><span id="result_box" lang="id"><span>Forum ini untuk diskusi perencanaan dan prioritas tingkat tinggi, untuk situs web MDN dan prakarsa terkait lainnya.</span></span></dd> +</dl> + +<h2 id="Obrolan_di_IRC">Obrolan di IRC</h2> + +<p>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.</p> + +<dl> + <dt><a href="irc://irc.mozilla.org/mdn" title="irc://irc.mozilla.org/mdn">#mdn</a></dt> + <dd>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</dd> + <dt><a href="irc://irc.mozilla.org/mdndev" title="irc://irc.mozilla.org/mdndev">#mdndev</a></dt> + <dd>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</dd> +</dl> + +<p>Channel ini sangat aktif selama hari kerja di Amerika Utara.</p> + +<p>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.</p> + +<h2 id="Join_our_meetings_(and_other_events)">Join our meetings (and other events)</h2> + +<p>The MDN team holds a number of regular meetings that are open to the MDN community. See the <a href="https://wiki.mozilla.org/MDN/Meetings">MDN Meetings</a> page on the Mozilla wiki for details on the schedule, agendas and notes, and info on how to join.</p> + +<p>See the <a href="https://www.google.com/calendar/embed?src=mozilla.com_2d35383434313235392d323530%40resource.calendar.google.com">MDN Events calendar</a> for these and other meetings, local meetups, and other events. The recurring meetings are summarized on the <a href="https://wiki.mozilla.org/MDN/Meetings">MDN Meetings wiki page</a>.</p> + +<p>See the <a href="https://www.google.com/calendar/embed?src=mozilla.com_2d35383434313235392d323530%40resource.calendar.google.com">MDN Events calendar</a> for these and other meetings, doc sprints, and other events. The recurring meetings are summarized on the <a href="https://wiki.mozilla.org/MDN/Meetings">MDN Meetings wiki page</a>.</p> diff --git a/files/id/mdn/komunitas/index.html b/files/id/mdn/komunitas/index.html new file mode 100644 index 0000000000..a60c631f76 --- /dev/null +++ b/files/id/mdn/komunitas/index.html @@ -0,0 +1,75 @@ +--- +title: Gabung di Komunitas MDN +slug: MDN/Komunitas +translation_of: MDN/Community +--- +<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/MDN")}}</div> + +<h2 id="Ringkasan">Ringkasan</h2> + +<div class="summary"> +<p><span id="result_box" lang="id"><span class="hps">MDN</span> <span class="atn hps">(</span><span>yang</span> <span class="hps">merupakan singkatan dari</span> <span class="hps">jaringan</span> <span class="hps">pengembang</span> <span class="hps">Mozilla</span><span>)</span> <span class="hps">lebih dari</span> <span class="hps">wiki</span><span>:</span> <span class="hps">Ini adalah</span> <span class="hps">komunitas pengembang</span> <span class="hps">bekerja sama untuk membuat</span> <span class="hps">MDN</span> <span class="hps">sumber daya</span> <span class="hps">yang luar biasa</span> <span class="hps">bagi para pengembang</span> <span class="hps">yang menggunakan</span> <span class="hps">teknologi</span> <span class="hps">Web</span> <span class="hps">terbuka</span><span>.</span> <span class="hps">"Pekerjaan</span><span>"</span> <span class="hps">yang terjadi</span> <span class="hps">di situs</span> <span class="hps">MDN</span><span>,</span> <span class="hps">tapi</span> <span class="atn hps">"</span><span>komunitas</span><span>"</span> <span class="hps">juga</span> <span class="hps">terjadi</span> <span class="hps">melalui</span> <span class="atn hps">(</span><span>asynchronous</span><span>)</span> <span class="hps">diskusi</span> <span class="hps">dan</span> <span class="atn hps">(</span><span>sinkron</span><span>)</span> <span class="hps">chat online</span><span>.</span></span></p> +</div> + +<p>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:</p> + +<ol> + <li>Buat akun MDN.</li> + <li>Berlangganan diskusi dev-mdc.</li> + <li>masuk ke IRC.</li> +</ol> + +<h2 id="Buat_akun_MDN">Buat akun MDN</h2> + +<p>{{page("/en-US/docs/MDN/Contribute/Howto/Create_an_MDN_account") }}</p> + +<h2 id="Bergabung_milis_kami">Bergabung milis kami</h2> + +<p>untuk berbagi informasi dan memiliki diskusi yang sedang berlangsung, Mozilla memilki beberapa milis yang berguna. Berikut yang khusus untuk MDN adalah:</p> + +<dl> + <dt><a href="https://lists.mozilla.org/listinfo/dev-mdc">dev-mdc</a></dt> + <dd><span id="result_box" lang="id"><span class="hps">Daftar ini</span> <span class="hps">adalah di mana</span> <span class="hps">kita memiliki</span> <span class="hps">diskusi yang sedang berlangsung</span> <span class="hps">tentang</span> <span class="hps">dokumentasi di</span> <span class="hps">MDN</span><span>.</span> <span class="hps">Kami</span> <span class="hps">berbicara tentang</span> <span class="hps">perubahan proses</span><span>,</span> <span class="hps">perbaikan</span> <span class="hps">yang kami buat</span><span>,</span> <span class="hps">dan kami</span> <span class="hps">memilah-milah</span> <span class="hps">siapa yang</span> <span class="hps">ingin bekerja</span> <span class="hps">di mana</span> <span class="hps">konten</span><span>.</span> <span class="hps">Ini</span> <span class="hps">sangat disarankan agar Anda</span> <span class="hps">bergabung</span> <span class="hps">di daftar ini jika</span> <span class="hps">Anda tertarik</span> <span class="hps">serius</span> <span class="hps">menyelam ke</span> <span class="hps">dokumentasi di</span> <span class="hps">MDN</span><span>!</span></span></dd> + <dt><a href="https://lists.mozilla.org/listinfo/dev-mdn">dev-mdn</a></dt> + <dd>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.</dd> + <dt><a href="https://lists.mozilla.org/listinfo/mdn-drivers">mdn-drivers</a></dt> + <dd>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.</dd> +</dl> + +<p>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.</p> + +<p><span id="result_box" lang="id"><span class="hps">Mengapa</span> <span class="atn hps">"</span><span>dev</span><span class="atn">-</span><span>mdc</span><span>"</span><span>?</span> <span class="hps">Di masa lalu</span><span>,</span> <span class="hps">ini</span> <span class="hps">dikenal sebagai</span> <span class="atn hps">"</span><span>Mozilla</span> <span class="hps">Developer</span> <span class="hps">Center"</span><span>,</span> <span class="hps">atau</span> <span class="hps">MDC</span><span>.</span> <span class="hps">Milis</span> <span class="alt-edited hps">berawal dari</span> <span class="hps">masa itu</span><span>,</span> <span class="hps">jadi</span> <span class="hps">dev</span><span class="atn">-</span><span>mdc</span><span>.</span> <span class="hps">Ada juga</span> <span class="hps">dev</span><span class="atn">-</span><span>mdn</span> <span class="hps">mailing list</span><span>,</span> <span class="hps">yaitu</span> <span class="hps">untuk diskusi</span> <span class="hps">tentang pengembangan</span> <span class="hps">platform</span> <span class="hps">Kuma</span> <span class="hps">yang</span> <span class="hps">MDN</span> <span class="hps">berjalan pada</span><span>.</span> <span class="hps">Anda dipersilakan untuk</span> <span class="hps">bergabung</span> <span class="hps">itu juga,</span> <span class="hps">tapi itu</span> <span class="hps">tidak diperlukan jika</span> <span class="hps">Anda hanya</span> <span class="hps">tertarik pada konten</span> <span class="hps">MDN</span><span>.</span></span></p> + +<h2 id="Masuk_ke_IRC">Masuk ke IRC</h2> + +<p><span id="result_box" lang="id"><span class="hps">Internet Relay</span> <span class="hps">Chat (IRC</span><span>)</span> <span class="hps">adalah</span> <span class="hps">metode pilihan</span> <span class="hps">untuk hari</span><span>-hari</span> <span class="hps">chatting</span> <span class="hps">dan</span> <span class="alt-edited hps">waktu nyata</span> <span class="hps">diskusi di antara</span> <span class="hps">anggota masyarakat</span><span>.</span> <span class="hps">Kami menggunakan</span> <span class="hps">beberapa saluran</span> <span class="hps">pada</span> <span class="hps">irc.mozilla.org</span> <span class="hps">server untuk</span> <span class="hps">diskusi yang berkaitan dengan</span> <span class="hps">MDN</span><span>.</span></span></p> + +<dl> + <dt><a href="irc://irc.mozilla.org/mdn" title="irc://irc.mozilla.org/mdn">#mdn</a></dt> + <dd>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.</dd> + <dt><a href="irc://irc.mozilla.org/mdndev" title="irc://irc.mozilla.org/mdndev">#mdndev</a></dt> + <dd><span id="result_box" lang="id"><span>Saluran ini</span> <span>adalah</span> <span>di mana</span> <span>tim</span><span>-</span><span>pengembangan</span> <span>kami</span> <span>orang</span> <span>yang</span> <span>menulis kode</span> <span>yang membuat</span> <span>MDN</span> <span>kerja</span><span>-</span><span>hang</span> <span>out</span> <span>dan</span> <span>membahas</span> <span>pekerjaan mereka</span> <span>sehari-</span><span>hari</span><span>.</span> <span>Anda dipersilakan untuk</span> <span>bergabung dan</span> <span>baik</span> <span>berpartisipasi dalam pembangunan</span> <span>atau hanya</span> <span>bertanya tentang</span> <span>masalah</span> <span>yang Anda lihat dengan</span> <span>perangkat lunak</span><span>.</span></span></dd> +</dl> + +<p><span id="result_box" lang="id"><span>Saluran ini</span> <span>yang paling mungkin</span> <span>untuk menjadi</span> <span>aktif selama</span> <span>hari kerja</span> <span>di Amerika Utara</span></span>.</p> + +<p><span class="short_text" id="result_box" lang="id"><span>Jika</span> <span>Anda tidak terbiasa</span> <span>dengan</span> <span>IRC</span></span>, Cara tercepat untuk bergabung menggunakan <a href="http://scrollback.io/">Scrollback</a> - a web-based IRC client <span class="short_text" id="result_box" lang="id"><span>yang</span> <span>pra</span><span>-</span><span>dikonfigurasi</span> <span>dengan</span></span> <a href="http://scrollback.io/mozdn/">mdn</a> dan <a href="http://scrollback.io/mdndev/">mdndev</a> channel. Anda juga mungkin ingin <a href="http://wiki.mozilla.org/IRC" title="http://wiki.mozilla.org/IRC">Belajar tentang IRC</a> dan <span class="short_text" id="result_box" lang="id"><span>menggunakan</span> <span>IRC</span> <span>client</span> <span>diinstal</span> <span>seperti</span></span> <a href="https://addons.mozilla.org/en-US/firefox/addon/chatzilla/" title="https://addons.mozilla.org/en-US/firefox/addon/chatzilla/">ChatZilla</a>. <span class="short_text" id="result_box" lang="id"><span>Hal ini</span> <span>dilaksanakan</span> <span>sebagai</span> <span>Firefox add</span><span>-on</span><span>,</span></span> <span id="result_box" lang="id"><span>yang membuatnya</span> <span>cepat dan mudah</span> <span>untuk menginstal</span> <span>dan menggunakan</span><span>.</span></span></p> + +<h2 id="Join_our_biweekly_meetings_(and_other_events)">Join our biweekly meetings (and other events)</h2> + +<p>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.</p> + +<p>See the <a href="https://wiki.mozilla.org/MDN/Community_meetings" title="https://wiki.mozilla.org/MDN/Community_meetings">MDN Community Meetings</a> page on the Mozilla wiki for details on the schedule as well as agendas and notes for past and upcoming meetings.</p> + +<p>See the <a href="https://mail.mozilla.com/home/publiccalendar@mozilla.com/MDN_Events.html">MDN Events calendar</a> for these and other meetings, doc sprints, and other events.</p> + +<h2 id="Project_administrators">Project administrators</h2> + +<p>kamu dapat menghubungi MDN project <em>administrator </em>melalui email. BIla kamu ingin berbicara dengan pemimpin MDN <em>documentation</em>, ia bernama {{UserLink("Sheppy", "Eric Shepherd")}}, dan ia senang untuk menjawab pertanyaan yang kamu ajukan, atau membantu mencarikan orang yang lebih tepat.</p> + +<h2 id="Langkah_Berikutnya">Langkah Berikutnya</h2> + +<ul> + <li><a href="/en-US/docs/Project:MDN/Contributing" title="/en-US/docs/Project:MDN/Contributing">Berkontribusi di MDN</a>: Lihat petunjuk untuk berkontribusi dan bantuan dalam mengerjakannya.</li> + <li><a href="/en-US/docs/Project:MDN/Contributing/Follow_what_s_happening" title="/en-US/docs/Project:MDN/Contributing/Follow_what_s_happening">Ikuti apa yang sedang terjadi</a>: Cara untuk tetap terhubung dengan MDN, dan Mozilla <em>Developer Relations </em>secara umum. </li> +</ul> diff --git a/files/id/mdn/user_guide/index.html b/files/id/mdn/user_guide/index.html new file mode 100644 index 0000000000..b2e20cd131 --- /dev/null +++ b/files/id/mdn/user_guide/index.html @@ -0,0 +1,13 @@ +--- +title: MDN user guide +slug: MDN/User_guide +tags: + - Documentation + - Landing + - MDN + - NeedsTranslation + - TopicStub +translation_of: MDN/Tools +--- +<div>{{MDNSidebar}}</div><p>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.</p> +<p>{{SubpagesWithSummaries}}</p> diff --git a/files/id/mdn/user_guide/menghapus_halaman/index.html b/files/id/mdn/user_guide/menghapus_halaman/index.html new file mode 100644 index 0000000000..df0ba8ef81 --- /dev/null +++ b/files/id/mdn/user_guide/menghapus_halaman/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 +--- +<div>{{MDNSidebar}}</div><p>Hanya Admin MDN yang bisa menghapus halaman. <span class="seoSummary">Artikel ini menjelaskan bagaimana meminta halaman yang dihapus dari MDN.</span></p> +<p>Untuk menyusun halaman yang ingin dihapus, Anda harus mengikuti cara berikut:</p> +<ol> + <li><strong>Jangan hapus atau mengganti konten dari halaman. </strong>Kami ingin memiliki catatan dari halaman seperti pertama dihapus.</li> + <li>Tambahkan label "sampah" di halaman tersebut. Jangan hapus label lainnya.</li> + <li>Jika halaman tersebut sangat mendesak untuk segera dihapus (Sebagai contoh, konten berisi hal yang tidak sopan, penghinaan, atau secara teknis berbahaya), <a href="mailto:mdn-admins@mozilla.org" title="Notify an administrator">beritahukan pada admin MDN</a>.</li> +</ol> +<p>Admin akan menghapus halaman tersebut jika memungkinkan, setelah mengkonfirmasi bahwa penghapusan tersebut boleh dilakukan.</p> diff --git a/files/id/mozilla/add-ons/index.html b/files/id/mozilla/add-ons/index.html new file mode 100644 index 0000000000..f25d110860 --- /dev/null +++ b/files/id/mozilla/add-ons/index.html @@ -0,0 +1,16 @@ +--- +title: Add-ons +slug: Mozilla/Add-ons +translation_of: Mozilla/Add-ons +--- +<p>{{AddonSidebar}}</p> + +<p><span class="seoSummary">Add-ons Menambah fungsi baru pada aplikasi berbasis <span class="seoSummary"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Gecko">Gecko</a></span> seperti Firefox, SeaMonkey dan Thunderbird. Ada dua jenis "add-on" : <a href="/en-US/docs/Extensions" title="Extensions">Extensions</a> menambahkan fitur ke aplikasi, sedangkan <a href="https://developer.mozilla.org/id/docs/Mozilla/Add-ons$edit#Themes">Tema</a> merubah tampilan pada aplikasi.</span></p> + +<p>Keduanya (Extention, dan Tema) ditemukan dalam <a href="https://addons.mozilla.org/">addons.mozilla.org</a>, dikenal juga sebagai AMO. Ketika Anda <a href="https://developer.mozilla.org/en-US/Add-ons/Submitting_an_add-on_to_AMO">masukan add-ons ke AMO</a> mereka meninjau, dan setelah melewati tinjauan maka mereka menyajikan untuk pengguna. Anda tidak harus masukan add-on ke AMO, tetapi anda lakukan, <span id="result_box" lang="id"><span class="hps">pengguna dapat</span> <span class="hps">menaruh keyakinan </span><span class="hps">bahwa</span> <span class="hps">mereka</span> <span class="hps">telah ditinjau</span></span>, dan Anda dapat keuntungan dari visibilitas AMO sebagai sumber add-on yang berguna.</p> + +<p><span id="result_box" lang="id"><span class="atn hps">Add-</span><span>ons</span> <span class="hps">dapat </span><span class="hps">mempengaruhi perilaku</span> <span class="hps">aplikasi</span> <span class="hps">host</span> <span class="hps">mereka</span></span>. Kami telah membangun <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/Add-on_guidelines">sekumpulan panduan</a> untuk membantu memastikan bahwa mereka telah didukung mendapatkan pengalaman yang baik pada pengguna. Panduan ini digunakan untuk beberapa add-on, apakah mereka juga ditaruh di <a href="https://addons.mozilla.org/">addons.mozilla.org</a> atau tidak.</p> + +<h2 id="Extentions"><strong>Extentions</strong></h2> + +<p>Extention menambah fungsi dari aplikasi Mozzila seperti Firefox dan Thunderbird. Extension dapat menambahkan fitur pada peramban, seperti mengatur tab, dan mereka dapat merubah konten web untuk meningkatkan pengguanan atau keamanan website tertentu.</p> diff --git a/files/id/mozilla/add-ons/setting_up_extension_development_environment/index.html b/files/id/mozilla/add-ons/setting_up_extension_development_environment/index.html new file mode 100644 index 0000000000..6519e6752d --- /dev/null +++ b/files/id/mozilla/add-ons/setting_up_extension_development_environment/index.html @@ -0,0 +1,167 @@ +--- +title: Setting up an extension development environment +slug: Mozilla/Add-ons/Setting_up_extension_development_environment +translation_of: Archive/Add-ons/Setting_up_extension_development_environment +--- +<p>This article gives suggestions on how to set up your Mozilla application for extension development. Unless otherwise specified, these suggestions apply to both Firefox and Thunderbird as well as SeaMonkey version 2.0 and above.</p> + +<h3 id="Overview">Overview</h3> + +<ul> + <li>Create a development <a href="#Development_profile">user profile</a> to run your development firefox session; with special <a href="#Development_preferences">development preferences</a> in <code>about:config</code>.</li> + <li>Install some Firefox <a href="#Development_extensions">development extensions</a> to your dev profile.</li> + <li>Edit files in the extensions folder of your profile and restart the application with the dev profile.</li> +</ul> + +<h3 id="Development_profile">Development profile</h3> + +<p>To avoid performance degradation from development-related prefs and extensions, and to avoid losing your personal data, you can use a separate profile for development work.</p> + +<p>You can run two instances of Thunderbird or Firefox at the same time by using separate profiles and starting the application with parameters <code>-no-remote</code> and <code>-P ProfileName</code>. For example, the following command will start Firefox with a profile called "dev" whether an instance of Firefox is already running or not. (If there is no "dev" user yet, you'll get the profile selection screen instead, where you can create one.)</p> + +<p>On Ubuntu (and many other Linux distributions):</p> + +<pre>/usr/bin/firefox -no-remote -P dev</pre> + +<p>On some other distributions of Linux/Unix:</p> + +<pre>/usr/local/bin/firefox -no-remote -P dev +</pre> + +<p>On Mac OS Snow Leopard (10.6) and newer:</p> + +<pre class="eval">/Applications/Firefox.app/Contents/MacOS/firefox-bin -no-remote -P dev & +</pre> + +<p>On Mac OS Leopard (10.5) and older, you must request the 32-bit portion of the Universal Binary (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=622970" title="https://bugzilla.mozilla.org/show_bug.cgi?id=622970">https://bugzilla.mozilla.org/show_bug.cgi?id=622970</a>):</p> + +<pre class="eval">arch -arch i386 /Applications/Firefox.app/Contents/MacOS/firefox-bin -no-remote -P dev & +</pre> + +<p>On Windows:</p> + +<pre class="eval">Start -> Run "%ProgramFiles%\Mozilla Firefox\firefox.exe" -no-remote -P dev +</pre> + +<p>On Windows 64 bit:</p> + +<pre class="eval">Start -> Run "%ProgramFiles(x86)%\Mozilla Firefox\firefox.exe" -no-remote -P dev</pre> + +<p>To start Thunderbird or SeaMonkey instead of Firefox, substitute "thunderbird" or "seamonkey" for "firefox" in the examples above.</p> + +<p>Note that you can run Firefox using your regular profile while developing.</p> + +<p>Parameter <code>-P ProfileName</code> doesn't imply <code>-no-remote</code>, therefore use them together. Otherwise, if you already run a Firefox instance without <code>-no-remote</code>, and you attempt to start another instance with <code>-P ProfileName</code> but again without <code>-no-remote</code>, that second invocation would ignore its <code>-P ProfileName</code> parameter, but instead it would open a new blank window for the already running instance (sharing its profile, sessions etc.).</p> + +<p><span style="line-height: 1.5;">(There is a thread in the </span><a class="external" href="http://forums.mozillazine.org/" style="line-height: 1.5;" title="http://forums.mozillazine.org/">Mozillazine forums</a><span style="line-height: 1.5;"> that explains how to use both stable and development versions of Firefox to check extension compatibility. See </span><a class="external" href="http://forums.mozillazine.org/viewtopic.php?t=613873" style="line-height: 1.5;">Installing Firefox 3 or Minefield while keeping Firefox 2</a><span style="line-height: 1.5;">.)</span></p> + +<h3 id="Development_command_flags">Development command flags</h3> + +<p>As of Gecko 2 (Firefox 4), JavaScript files are cached ("fastload"). The <code>-purgecaches</code> command-line flag disables this behavior. Alternatively, you can set the MOZ_PURGE_CACHES environment variable. See <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=531886" title="https://bugzilla.mozilla.org/show_bug.cgi?id=531886">this bug</a> for more information.</p> + +<h3 id="Development_preferences">Development preferences</h3> + +<p><span style="line-height: 1.5;">There is a set of development preferences that, when enabled, allows you to view more information about application activity, thus making debugging easier. However, these preferences can degrade performance, so you may want to use a separate development profile when you enable these preferences.</span></p> + +<h4 id="Accessing_Firefox_development_preferences">Accessing Firefox development preferences</h4> + +<p>To change preference settings in Firefox or SeaMonkey, type <code style="font-size: 14px;">about:config </code>in the Location Bar. You can also use the <a class="external" href="http://addons.mozilla.org/en-US/firefox/addon/7434/" title="http://addons.mozilla.org/en-US/firefox/addon/7434/">Extension Developer's Extension</a>, which provides a menu interface for Firefox settings. Alternatively, install <span style="line-height: 1.5;">the</span><span style="line-height: 1.5;"> </span><a href="https://addons.mozilla.org/en-US/firefox/addon/developer-profile/" style="line-height: 1.5;" title="https://addons.mozilla.org/en-US/firefox/addon/developer-profile/">Developer Profile</a><span style="line-height: 1.5;"> to set the preferences listed below and skip the rest of this section.</span></p> + +<h4 id="Accessing_Thunderbird_development_preferences">Accessing Thunderbird development preferences</h4> + +<p>To change preference settings in Thunderbird, open the "Preferences" (Unix) or "Options" (Windows) interface. On the "Advanced" page, select the "General" tab then click the "Config Editor" button.</p> + +<h4 id="Recommended_development_preferences">Recommended development preferences</h4> + +<p><span style="line-height: 1.5;">Not all preferences are defined by default, and are therefore not listed</span><span style="line-height: 1.5;"> by default. You will have to create new (boolean) entries for them. </span><span style="line-height: 1.5;">For more information about Mozilla preferences, refer to the mozillaZine article on "</span><a class="external" href="http://kb.mozillazine.org/About:config" style="line-height: 1.5;" title="http://kb.mozillazine.org/About:config">about:config</a><span style="line-height: 1.5;">". (Tip: Download addon <a href="https://addons.mozilla.org/en-US/firefox/addon/devprefs/">DevPrefs</a>, it will automatically handle this)</span></p> + +<ul> + <li><strong>javascript.options.showInConsole</strong> = <strong>true</strong>. Logs errors in chrome files to the <a href="/en/Error_Console" title="en/Error_Console">Error Console</a>.</li> + <li><strong>nglayout.debug.disable_xul_cache</strong> = <strong>true</strong>. Disables the XUL cache so that changes to windows and dialogs do not require a restart. This assumes you're <a href="#Using_directories_rather_than_JARs">using directories rather than JARs</a>. Changes to XUL overlays will still require reloading of the document overlaid.</li> + <li><strong>browser.dom.window.dump.enabled</strong> = <strong>true</strong>. Enables the use of the <span style="font-family: Courier New;">dump()</span> statement to print to the standard console. See <span style="font-family: Courier New;">{{ Domxref("window.dump") }}</span> for more info. You can use <span style="font-family: Courier New;">{{ Interface("nsIConsoleService") }}</span> instead of <code>dump()</code> from a privileged script.</li> + <li><strong>javascript.options.strict</strong> = <strong>true</strong>. Enables strict JavaScript warnings in the Error Console. Note that since many people have this setting turned off when developing, you will see lots of warnings for problems with their code in addition to warnings for your own extension. You can filter those with <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1815">Console<sup>2</sup></a>.</li> + <li><strong>devtools.chrome.enabled = true.</strong> This enables to run JavaScript code snippets in the chrome context of the Scratchpad from the Tools menu. Don't forget to switch from content to browser as context.</li> + <li><strong>devtools.debugger.remote-enabled = true.</strong> This adds a "Browser Debugger" entry to the "Web Developer" submenu of the "Tools" menu. The <a href="/en/Tools/Debugger" title="/en/Tools/Debugger">Browser Debugger</a> can be used to debug the JavaScript code of extensions. The {{pref("devtools.chrome.enabled")}} preference must also be set to true for the Browser Debugger to be enabled.</li> + <li><strong>extensions.logging.enabled</strong> = <strong>true</strong>. This will send more detailed information about installation and update problems to the <a href="/en/Error_Console" title="en/Error Console">Error Console</a>. (Note that the extension manager automatically restarts the application at startup sometimes, which may mean you won't have time to see the messages logged before the automatic restart happens. To see them, prevent the automatic restart by setting the environment NO_EM_RESTART to 1 before starting the application.)</li> + <li><strong>nglayout.debug.disable_xul_fastload = true</strong>. For Gecko 2.0+ (Firefox 4.0+). See <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=531886" title="https://bugzilla.mozilla.org/show_bug.cgi?id=531886">this bug</a> for more information. Although the bug has been closed, it is believed that this pref is still relevant.</li> + <li>You might also want to set <strong>dom.report_all_js_exceptions = true</strong>. See <a class="internal" href="/en/Exception_logging_in_JavaScript" title="en/Exception logging in JavaScript">Exception logging in JavaScript</a> for details.</li> + <li><strong>devtools.errorconsole.deprecation_warnings = true</strong>. Detect deprecated code use.</li> +</ul> + +<p></p><div class="warning"><strong>Never</strong> set {{pref("nglayout.debug.disable_xul_fastload")}} to true in a production environment; it exists solely to aid in debugging. In particular, add-ons should never change this preference.</div>.<p></p> + +<div class="note"> +<p><strong>Note:</strong>The Error Console is disabled by default starting in {{Gecko("2.0")}}. You can re-enable it by changing the <code>devtools.errorconsole.enabled</code> preference to <code>true</code> and restarting the browser. With this, <code>javascript.options.showInConsole</code> is also set to <code>true</code> by default.</p> +</div> + +<div class="note"> +<p><strong>Tip:</strong> Download the addon <a href="https://addons.mozilla.org/en-US/firefox/addon/devprefs/">DevPrefs </a>from AMO to automatically configure the preferences.</p> +</div> + +<h4 id="Development_extensions"><span style="font-size: 1.428em; letter-spacing: -0.5px; line-height: 20px;">Development extensions</span></h4> + +<p>These extensions may help you with your development.</p> + +<ul> + <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622">DOM Inspector</a>, used to inspect and edit the live DOM of any web document or XUL application (Firefox and Thunderbird)</li> + <li><a class="external" href="http://www.hacksrus.com/%7Eginda/venkman/">Venkman</a>, a JavaScript Debugger (<a class="external" href="http://addons.mozilla.org/en-US/firefox/addon/216" title="http://addons.mozilla.org/en-US/firefox/addon/216">Firefox version</a>, <a class="external" href="http://addons.mozilla.org/en-US/thunderbird/addon/216" title="http://addons.mozilla.org/en-US/thunderbird/addon/216">Thunderbird version</a>)</li> + <li><a href="http://kewisch.wordpress.com/2013/09/22/thunderbird-developer-tools-wrapup/">Thunderbird Developer Tools</a>, enables debugging Thunderbird remotely using using Firefox developer tools</li> + <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/7434/">Extension Developer's Extension</a> a suite of tools for extension development (Firefox)</li> + <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/extension-test/">Extension Test</a> an add-on which makes it easier to detect problems which will lead to rejection by addons.mozilla.org</li> + <li><a class="external" href="http://console2.mozdev.org/">Console²</a> enhanced JavaScript console (<a class="external" href="http://addons.mozilla.org/en-US/firefox/addon/1815" title="http://addons.mozilla.org/en-US/firefox/addon/1815">Firefox version</a>, <a class="external" href="http://addons.mozilla.org/en-US/thunderbird/addon/1815" title="http://addons.mozilla.org/en-US/thunderbird/addon/1815">Thunderbird version</a>)</li> + <li><a class="link-https" href="https://addons.mozilla.org/firefox/addon/5058">Javascript Command</a> for writing/testing javascript on Firefox windows</li> + <li><a class="link-https" href="https://addons.mozilla.org/firefox/addon/5058">Inspect Context</a> Open <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622">DOM Inspector</a> at this node from Inspect on context menu.</li> + <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/4453/">Chrome List</a> navigate and view files in chrome:// (<a class="external" href="http://addons.mozilla.org/en-US/firefox/addon/4453" title="http://addons.mozilla.org/en-US/firefox/addon/4453">Firefox version</a>, <a class="external" href="http://addons.mozilla.org/en-US/thunderbird/addon/4453" title="http://addons.mozilla.org/en-US/thunderbird/addon/4453">Thunderbird version</a>)</li> + <li><a class="external" href="http://webdesigns.ms11.net/chromeditp.html">Chrome Edit Plus</a> a user file editor (Firefox and Thunderbird)</li> + <li><a class="link-https" href="https://addons.mozilla.org/en-US/developers/tools/builder">Add-on Builder</a> a web-based application that generates an extension skeleton (Firefox, Thunderbird, and others)</li> + <li><a class="link-https" href="https://addons.mozilla.org/firefox/addon/1843">Firebug</a> a variety of development tools (Firefox)</li> + <li><a class="external" href="http://dactyl.sf.net/pentadactyl/">Pentadactyl</a>, a general purpose extension with builtin tools for extension development, including a command line with chrome JavaScript evaluation (including property and function argument completion) and the ability to demand-load external JavaScript and CSS files into window chrome.</li> + <li><a class="external" href="http://getfirebug.com/releases/chromebug/">Chromebug</a> combines elements of a JavaScript debugger and DOM (Firefox, "kinda works for Thunderbird")</li> + <li><a class="link-https" href="https://github.com/bard/mozrepl/wiki">MozRepl</a> explore and modify Firefox and other Mozilla apps while they run (Firefox, Thunderbird version is <a href="https://github.com/bard/mozrepl/issues/47">not working</a>)</li> + <li><a class="external" href="http://www.mouseless.de/index.php?/content/view/18/31/">ExecuteJS</a> an enhanced JavaScript console (<a class="link-https" href="https://addons.mozilla.org/firefox/addon/1729">Firefox version</a>, <a class="external" href="http://xsidebar.mozdev.org/modifiedmisc.html#executejs">Thunderbird version</a> is <a href="https://code.google.com/p/executejs/issues/detail?id=6">not working</a>)</li> + <li><a class="external" href="http://xpcomviewer.mozdev.org">XPCOMViewer</a> an XPCOM inspector (Firefox and Thunderbird)</li> + <li><a class="internal" href="/en/JavaScript/Shells" title="En/JavaScript shells">JavaScript shells</a> to test snippets of JavaScript (Firefox and Thunderbird)</li> + <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/5817">SQLite Manager</a> to manage the SQLite database (Firefox and Thunderbird)</li> + <li><a class="external" href="http://www.rumblingedge.com/viewabout/">ViewAbout</a> enables access to various about: dialogs from the View menu (<a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/9695">Firefox version</a>, <a class="link-https" href="https://addons.mozilla.org/en-US/thunderbird/addon/9695">Thunderbird version</a> )</li> + <li><a class="external" href="http://code.google.com/p/crashme/">Crash Me Now!</a> useful for testing debug symbols and the crash reporting system (Firefox and Thunderbird)</li> + <li><a href="https://addons.mozilla.org/en-US/firefox/addon/javascript-object-examiner/" title="https://addons.mozilla.org/en-US/firefox/addon/javascript-object-examiner/">Javascript Object Examiner</a> displays JavaScript object methods and properties for any available scope</li> + <li><a href="https://addons.mozilla.org/en-US/firefox/addon/developer-profile/" title="https://addons.mozilla.org/en-US/firefox/addon/developer-profile/">Developer Profile</a> sets up the development environment described above when installed (Firefox and Fennec)</li> +</ul> + +<h3 id="Firefox_extension_proxy_file">Firefox extension proxy file</h3> + +<p>Extension files are normally installed in the user profile. However, it is usually easier to place extension files in a temporary location, which also protects source files from accidental deletion. This section explains how to create a proxy file that points to an extension that is installed in a location other than the user profile.</p> + +<ol> + <li>Get the extension ID from the extension's install.rdf file.</li> + <li>Create a file in the "<code>extensions</code>" directory under your profile directory with the extension's ID as the file name (for example "<code>your_profile_directory/extensions/{46D1B3C0-DB7A-4b1a-863A-6EE6F77ECB58}</code>"). (<a class="external" href="http://kb.mozillazine.org/Profile_folder">How to find your profile directory</a>) Alternatively, rather than using a GUID, create a unique ID using the format "name@yourdomain" (for example <span class="nowiki"><code>chromebug@mydomain.com</code></span>) - then the proxy filename will be same as that ID, with no curly brackets {}.</li> + <li> + <p>The contents of this file should be the path to the directory that contains your install.rdf file, for example <code><span class="nowiki">/full/path/to/yourExtension/</span></code> on Mac and Linux, and <code><span class="nowiki">C:\full\path\to\yourExtension\</span></code> on Windows. Remember to include the closing slash and remove any trailing whitespace.</p> + + <ul> + <li>Note: If you already installed the extension via XPI, you should uninstall it first before creating the pointer file.</li> + <li>Also note that the use of proxy files requires that the extension's chrome.manifest defines its chrome urls using traditional directories, rather than a JARed structure. See below.</li> + </ul> + </li> + <li>Place the file in the extensions folder of your profile and restart the application.</li> +</ol> + +<h3 id="Using_directories_rather_than_JARs">Using directories rather than JARs</h3> + +<p>Regardless of whether you choose to eventually package your extension's chrome in a JAR or in directories, developing in directories is simpler. If you choose a JARed structure for releasing, you can still develop with a directory structure by editing your chrome.manifest. For example, rather than having</p> + +<pre class="eval">content myExtension jar:chrome/myExtension.jar!/content/ +</pre> + +<p>use</p> + +<pre class="eval">content myExtension chrome/content/ +</pre> + +<p>{{ h1_gecko_minversion("Preventing the first launch extension selector", "8.0") }}</p> + +<p>Starting in Firefox 8, on the first launch of a new version of Firefox, it presents user interface letting users select which third party add-ons to keep. This lets them weed out add-ons that were installed without their knowledge, or that are no longer needed.</p> + +<p>However, this interface can be disruptive when debugging add-ons. You can avoid this by setting the preference <code>extensions.autoDisableScopes</code> to 14.</p> + +<p>{{ languages( { "de": "de/Einrichten_einer_Entwicklungsumgebung_für_Erweiterungen", "fr": "fr/Configuration_d'un_environnement_de_développement_d'extensions", "ja": "ja/Setting_up_extension_development_environment", "zh-cn": "cn/Setting_up_extension_development_environment", "pl": "pl/Przygotowanie_środowiska_programowania_rozszerzenia", "ru": "ru/Настройка_среды_разработки_расширений" } ) }}</p> 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 new file mode 100644 index 0000000000..63c093bc53 --- /dev/null +++ b/files/id/mozilla/add-ons/webextensions/apa_itu_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 +--- +<div>{{AddonSidebar}}</div> + +<p><span id="result_box" lang="id"><span title="Add-ons extend and modify the functionality of a web browser.">Add-ons memperluas dan memodifikasi fungsi dari web browser. </span><span title="They are written using standard Web technologies - JavaScript, HTML, and CSS - plus some dedicated JavaScript APIs.">Mereka ditulis menggunakan teknologi Web standar - JavaScript, HTML, dan CSS - ditambah beberapa API JavaScript. </span><span title="Among other things, add-ons can add new features to the browser or change the appearance or content of particular websites. + +">Antara lain, add-ons dapat menambahkan fitur baru untuk browser atau mengubah tampilan atau konten dari situs web tertentu.</span></span></p> + +<p><span id="result_box" lang="id"><span title="WebExtensions are a cross-browser system for developing browser add-ons.">WebExtensions adalah sistem cross-browser untuk mengembangkan browser add-ons. </span><span title="To a large extent the API is compatible with the extension API supported by Google Chrome and Opera.">Untuk sebagian besar API tersebut kompatibel dengan</span></span> <a class="external external-icon" href="https://developer.chrome.com/extensions">ekstensi API</a> <span id="result_box" lang="id"><span title="To a large extent the API is compatible with the extension API supported by Google Chrome and Opera.">yang didukung oleh Google Chrome dan Opera</span></span>. <span id="result_box" lang="id"><span title="Extensions written for these browsers will in most cases run in Firefox or Microsoft Edge with just a few changes.">Ekstensi ditulis untuk browser ini dalam banyak kasus akan berjalan di Firefox atau Microsoft Edge hanya</span></span> <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Porting_from_Google_Chrome">dengan beberapa perubahan</a>. <span id="result_box" lang="id"><span title="The API is also fully compatible with multiprocess Firefox. + +">API ini juga sepenuhnya kompatibel dengan</span></span> <a href="https://developer.mozilla.org/en-US/Firefox/Multiprocess_Firefox">multiprocess Firefox</a>.</p> + +<p><span id="result_box" lang="id"><span title="We're also intending to extend the APIs to support the needs of add-on developers, so if you have ideas, we'd love to hear them.">Kami juga berniat untuk memperpanjang API untuk mendukung kebutuhan para pengembang, jadi jika Anda memiliki ide, kami akan senang mendengar mereka. </span><span title="You can reach us on the dev-addons mailing list or #webextensions on IRC. + +">Anda dapat menghubungi kami</span></span> <a class="external external-icon" href="https://mail.mozilla.org/listinfo/dev-addons">dev-addons mailing list</a> atau <a href="irc://irc.mozilla.org/webextensions">#webextensions</a> di <a class="external external-icon" href="https://wiki.mozilla.org/IRC">IRC</a>.</p> + +<p><span id="result_box" lang="id"><span title="Before WebExtensions, you could develop Firefox add-ons using one of three different systems: XUL/XPCOM overlays, bootstrapped extensions, or the Add-on SDK.">Sebelum WebExtensions, Anda bisa mengembangkan Firefox add-ons menggunakan salah satu dari tiga sistem yang berbeda</span></span>: <a href="/en-US/Add-ons/Overlay_Extensions">XUL/XPCOM overlays</a>, <a href="/en-US/docs/Mozilla/Add-ons/Bootstrapped_extensions">bootstrapped extensions</a>, atau <a href="/en-US/docs/Mozilla/Add-ons/SDK">Add-on SDK</a>. <span id="result_box" lang="id"><span title="In the future, WebExtensions will be the recommended way to develop Firefox add-ons, and other systems will be deprecated. +">Di masa depan, WebExtensions akan menjadi cara yang direkomendasikan untuk mengembangkan add-ons pada </span></span><span lang="id"><span title="In the future, WebExtensions will be the recommended way to develop Firefox add-ons, and other systems will be deprecated. +">Firefox, dan sistem lainnya akan dihentikan.</span></span></p> + +<h2 id="Apa_berikutnya"><span id="result_box" lang="id"><span title="What's next? +">Apa berikutnya?</span></span></h2> + +<ul> + <li><span id="result_box" lang="id"><span title='To try out some example WebExtensions, see our "webextensions-examples" GitHub repo. + '>Untuk mencoba beberapa contoh WebExtensions, lihat</span></span> <a href="https://github.com/mdn/webextensions-examples">"webextensions-examples" GitHub repo</a>.</li> + <li><span id="result_box" lang="id"><span title="To learn about the structure of a WebExtension, see Anatomy of a WebExtension. + ">Untuk mempelajari tentang struktur WebExtension, lihat</span></span> <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">Anatomy of a WebExtension</a>.</li> + <li><span id="result_box" lang="id"><span title="To learn about the structure of a WebExtension, see Anatomy of a WebExtension. + "> </span><span title="To walk through the development of a simple WebExtension, see Your first WebExtension.">Berjalan melalui pengembangan WebExtension sederhana</span></span>, lihat <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension">Your first WebExtension</a>.</li> +</ul> diff --git a/files/id/mozilla/add-ons/webextensions/api/browsersettings/index.html b/files/id/mozilla/add-ons/webextensions/api/browsersettings/index.html new file mode 100644 index 0000000000..2372f738e0 --- /dev/null +++ b/files/id/mozilla/add-ons/webextensions/api/browsersettings/index.html @@ -0,0 +1,63 @@ +--- +title: browserSettings +slug: Mozilla/Add-ons/WebExtensions/API/browserSettings +translation_of: Mozilla/Add-ons/WebExtensions/API/browserSettings +--- +<div>{{AddonSidebar}}</div> + +<div>Enables an extension to modify certain global browser settings. Each property of this API is a {{WebExtAPIRef("types.BrowserSetting", "BrowserSetting")}} object, providing the ability to modify a particular setting.</div> + +<div></div> + +<div>Because these are global settings, it's possible for extensions to conflict. See the documentation for <code><a href="/en-US/Add-ons/WebExtensions/API/types/BrowserSetting/set">BrowserSetting.set()</a></code> for details of how conflicts are handled.</div> + +<div></div> + +<div> +<p>To use this API you need to have the "browserSettings" <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permission</a>.</p> +</div> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{WebExtAPIRef("browserSettings.allowPopupsForUserEvents")}}</dt> + <dd>Determines whether code running in web pages can display popups in response to user events.</dd> + <dt>{{WebExtAPIRef("browserSettings.cacheEnabled")}}</dt> + <dd>Determines whether the browser cache is enabled or not.</dd> + <dt>{{WebExtAPIRef("browserSettings.closeTabsByDoubleClick")}}</dt> + <dd>Determines whether the selected tab can be closed with a double click.</dd> + <dt>{{WebExtAPIRef("browserSettings.contextMenuShowEvent")}}</dt> + <dd>Determines the mouse event that triggers a context menu popup.</dd> + <dt>{{WebExtAPIRef("browserSettings.ftpProtocolEnabled")}}</dt> + <dd>Determines whether the FTP protocol is enabled.</dd> + <dt>{{WebExtAPIRef("browserSettings.homepageOverride")}}</dt> + <dd>Read the value of the browser's home page.</dd> + <dt>{{WebExtAPIRef("browserSettings.imageAnimationBehavior")}}</dt> + <dd>Determines how the browser treats animated images.</dd> + <dt>{{WebExtAPIRef("browserSettings.newTabPageOverride")}}</dt> + <dd>Reads the value of the browser's new tab page.</dd> + <dt>{{WebExtAPIRef("browserSettings.newTabPosition")}}</dt> + <dd>Controls the position of newly opened tabs relative to already open tabs.</dd> + <dt>{{WebExtAPIRef("browserSettings.openBookmarksInNewTabs")}}</dt> + <dd>Determines whether bookmarks are opened in the current tab or a new tab.</dd> + <dt>{{WebExtAPIRef("browserSettings.openSearchResultsInNewTabs")}}</dt> + <dd>Determines whether search results are opened in the current tab or a new tab.</dd> + <dt>{{WebExtAPIRef("browserSettings.openUrlbarResultsInNewTabs")}}</dt> + <dd>Determines whether address bar autocomplete suggestions are opened in the current tab or a new tab.</dd> + <dt>{{WebExtAPIRef("browserSettings.overrideDocumentColors")}}</dt> + <dd>Controls whether the user-chosen colors override the page's colors.</dd> + <dt>{{WebExtAPIRef("browserSettings.useDocumentFonts")}}</dt> + <dd>Controls whether the browser will use the fonts specified by a web page or use only built-in fonts.</dd> + <dt>{{WebExtAPIRef("browserSettings.webNotificationsDisabled")}}</dt> + <dd>Prevents websites from showing notifications using the <code><a href="/en-US/docs/Web/API/notification">Notification</a></code> Web API.</dd> + <dt>{{WebExtAPIRef("browserSettings.zoomFullPage")}}</dt> + <dd>Controls whether zoom is applied to the entire page or to text only.</dd> + <dt>{{WebExtAPIRef("browserSettings.zoomSiteSpecific")}}</dt> + <dd>Controls whether page zoom is applied on a per-site or per-tab basis. If {{WebExtAPIRef("privacy.websites")}}<code>.resistFingerprinting</code> is true, this setting has no effect and zoom is applied on a per-tab basis.</dd> +</dl> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{Compat("webextensions.api.browserSettings")}}</p> + +<p>{{WebExtExamples("h2")}}</p> diff --git a/files/id/mozilla/add-ons/webextensions/api/index.html b/files/id/mozilla/add-ons/webextensions/api/index.html new file mode 100644 index 0000000000..9b63bd59e8 --- /dev/null +++ b/files/id/mozilla/add-ons/webextensions/api/index.html @@ -0,0 +1,50 @@ +--- +title: JavaScript APIs +slug: Mozilla/Add-ons/WebExtensions/API +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Add-ons/WebExtensions/API +--- +<div>{{AddonSidebar}}</div> + +<div> +<p>The WebExtension JavaScript APIs can be used inside the add-on's <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">background scripts</a> and in any <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/User_interface_components#Browser_actions">browser action</a> or <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/User_interface_components#Page_actions">page action</a> popups that the add-on defines. A few of these APIs can also be accessed by an add-on's <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Content_scripts">content scripts</a> (see the <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Content_scripts#WebExtension_APIs">list in the content script guide</a>).</p> + +<p>To use the more powerful APIs you need to <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/permissions">request permission</a> in your add-on's manifest.json.</p> + +<p>You can access the APIs using the <code>browser</code> namespace:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">logTabs</span><span class="punctuation token">(</span>tabs<span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>tabs<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +browser<span class="punctuation token">.</span>tabs<span class="punctuation token">.</span><span class="function token">query</span><span class="punctuation token">(</span><span class="punctuation token">{</span>currentWindow<span class="punctuation token">:</span> <span class="keyword token">true</span><span class="punctuation token">}</span><span class="punctuation token">,</span> logTabs<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +</div> + +<div> +<p>Many of the APIs are asynchronous, returning a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">logCookie</span><span class="punctuation token">(</span>c<span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>c<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="keyword token">function</span> <span class="function token">logError</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">error</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="keyword token">var</span> setCookie <span class="operator token">=</span> browser<span class="punctuation token">.</span>cookies<span class="punctuation token">.</span><span class="keyword token">set</span><span class="punctuation token">(</span> + <span class="punctuation token">{</span>url<span class="punctuation token">:</span> <span class="string token">"https://developer.mozilla.org/"</span><span class="punctuation token">}</span> +<span class="punctuation token">)</span><span class="punctuation token">;</span> +setCookie<span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span>logCookie<span class="punctuation token">,</span> logError<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +</div> + +<div> +<p>Note that this is different from Google Chrome's extension system, which uses the <code>chrome</code> namespace instead of <code>browser</code>, and which uses callbacks instead of promises for asynchronous functions. As a porting aid, the Firefox implementation of WebExtensions supports <code>chrome</code> and callbacks as well as <code>browser</code> and promises. Mozilla has also written a polyfill which enables code that uses <code>browser</code> and promises to work unchanged in Chrome: <a class="external external-icon" href="https://github.com/mozilla/webextension-polyfill">https://github.com/mozilla/webextension-polyfill</a>.</p> + +<p>Microsoft Edge uses the <code>browser</code> namespace, but doesn't yet support promise-based asynchronous APIs. In Edge, for the time being, asynchronous APIs must use callbacks.</p> + +<p>Not all browsers support all the APIs: for the details, see <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs">Browser support for JavaScript APIs</a>.</p> +</div> + +<div>{{SubpagesWithSummaries}}</div> diff --git a/files/id/mozilla/add-ons/webextensions/api/notifikasi/index.html b/files/id/mozilla/add-ons/webextensions/api/notifikasi/index.html new file mode 100644 index 0000000000..e4fb084bb2 --- /dev/null +++ b/files/id/mozilla/add-ons/webextensions/api/notifikasi/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 +--- +<div>{{AddonSidebar}}</div> + +<p>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.</p> + +<p>Untuk menggunakan API ini Anda harus memiliki izin "notifikasi"</p> + +<h2 id="Tipe">Tipe</h2> + +<dl> + <dt>{{WebExtAPIRef("notifications.NotificationOptions")}}</dt> + <dd>Menentukan isi pemberitahuan.</dd> + <dt>{{WebExtAPIRef("notifications.TemplateType")}}</dt> + <dd>Jenis pemberitahuan. Misalnya, ini menentukan apakah pemberitahuan dapat memuat gambar.</dd> +</dl> + +<h2 id="Fungsi">Fungsi</h2> + +<dl> + <dt>{{WebExtAPIRef("notifications.clear()")}}</dt> + <dd>Hapus pemberitahuan khusus, berikan ID-nya.</dd> + <dt>{{WebExtAPIRef("notifications.create()")}}</dt> + <dd>Buat dan tampilkan pemberitahuan baru.</dd> + <dt>{{WebExtAPIRef("notifications.getAll()")}}</dt> + <dd>Dapatkan semua notifikasi.</dd> + <dt>{{WebExtAPIRef("notifications.update()")}}</dt> + <dd>Perbarui notifikasi</dd> +</dl> + +<h2 id="Events">Events</h2> + +<dl> + <dt>{{WebExtAPIRef("notifications.onButtonClicked")}}</dt> + <dd>Dipecat ketika pengguna mengklik tombol di notifikasi.</dd> + <dt>{{WebExtAPIRef("notifications.onClicked")}}</dt> + <dd>Dipecat ketika pengguna mengklik pemberitahuan, tetapi tidak pada tombol.</dd> + <dt>{{WebExtAPIRef("notifications.onClosed")}}</dt> + <dd>Dipecat ketika pemberitahuan ditutup, baik oleh sistem atau karena pengguna memecatnya.</dd> + <dt>{{WebExtAPIRef("notifications.onShown")}}</dt> + <dd>Dipecat segera setelah pemberitahuan telah ditampilkan.</dd> +</dl> + +<h2 id="Kompatibilitas_peramban">Kompatibilitas peramban</h2> + +<p>{{Compat("webextensions.api.notifications")}}</p> + +<p>{{WebExtExamples("h2")}}</p> + +<div class="note"><strong>Ucapan terima kasih</strong> + +<p>API ini berdasarkan pada API Chromium <a href="https://developer.chrome.com/extensions/notifications"><code>chrome.notifications</code></a>.</p> +</div> diff --git a/files/id/mozilla/add-ons/webextensions/api/windows/createtype/index.html b/files/id/mozilla/add-ons/webextensions/api/windows/createtype/index.html new file mode 100644 index 0000000000..569dbc0b97 --- /dev/null +++ b/files/id/mozilla/add-ons/webextensions/api/windows/createtype/index.html @@ -0,0 +1,65 @@ +--- +title: windows.CreateType +slug: Mozilla/Add-ons/WebExtensions/API/windows/CreateType +translation_of: Mozilla/Add-ons/WebExtensions/API/windows/CreateType +--- +<div>{{AddonSidebar()}}</div> + +<p>Menentukan jenis browser window yang akan dibuat.</p> + +<h2 id="Tipe">Tipe</h2> + +<p>Nilai dari tipe ini adalah <code>strings</code>. Nilai yang tersedia adalah:</p> + +<ul> + <li><code>"normal"</code></li> + <li><code>"popup"</code></li> + <li><code>"panel"</code></li> + <li><code>"detached_panel"</code></li> +</ul> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("webextensions.api.windows.CreateType")}}</p> + +<p>{{WebExtExamples}}</p> + +<div class="note"><strong>Acknowledgements</strong> + +<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/windows#type-CreateType"><code>chrome.windows</code></a> API. This documentation is derived from <a href="https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/windows.json"><code>windows.json</code></a> in the Chromium code.</p> + +<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p> +</div> + +<div class="hidden"> +<pre>// Copyright 2015 The Chromium Authors. All rights reserved. +// +// Redistribution and use in source and binary forms, with or without +// modification, are permitted provided that the following conditions are +// met: +// +// * Redistributions of source code must retain the above copyright +// notice, this list of conditions and the following disclaimer. +// * Redistributions in binary form must reproduce the above +// copyright notice, this list of conditions and the following disclaimer +// in the documentation and/or other materials provided with the +// distribution. +// * Neither the name of Google Inc. nor the names of its +// contributors may be used to endorse or promote products derived from +// this software without specific prior written permission. +// +// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. +</pre> +</div> diff --git a/files/id/mozilla/add-ons/webextensions/api/windows/index.html b/files/id/mozilla/add-ons/webextensions/api/windows/index.html new file mode 100644 index 0000000000..d0611824cd --- /dev/null +++ b/files/id/mozilla/add-ons/webextensions/api/windows/index.html @@ -0,0 +1,127 @@ +--- +title: windows +slug: Mozilla/Add-ons/WebExtensions/API/windows +tags: + - API + - Add-ons + - Extensions + - Interface + - NeedsTranslation + - Non-standard + - Reference + - TopicStub + - WebExtensions + - Windows +translation_of: Mozilla/Add-ons/WebExtensions/API/windows +--- +<div>{{AddonSidebar}}</div> + +<p>Interact with browser windows. You can use this API to get information about open windows and to open, modify, and close windows. You can also listen for window open, close, and activate events.</p> + +<h2 id="Types">Types</h2> + +<dl> + <dt>{{WebExtAPIRef("windows.WindowType")}}</dt> + <dd>The type of browser window this is.</dd> + <dt>{{WebExtAPIRef("windows.WindowState")}}</dt> + <dd>The state of this browser window.</dd> + <dt>{{WebExtAPIRef("windows.Window")}}</dt> + <dd>Contains information about a browser window.</dd> + <dt>{{WebExtAPIRef("windows.CreateType")}}</dt> + <dd>Specifies the type of browser window to create.</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{WebExtAPIRef("windows.WINDOW_ID_NONE")}}</dt> + <dd>The <code>windowId</code> value that represents the absence of a browser window.</dd> + <dt>{{WebExtAPIRef("windows.WINDOW_ID_CURRENT")}}</dt> + <dd>The <code>windowId</code> value that represents the current window.</dd> +</dl> + +<h2 id="Functions">Functions</h2> + +<dl> + <dt>{{WebExtAPIRef("windows.get()")}}</dt> + <dd>Gets details about a window, given its ID.</dd> + <dt>{{WebExtAPIRef("windows.getCurrent()")}}</dt> + <dd>Gets the current window.</dd> + <dt>{{WebExtAPIRef("windows.getLastFocused()")}}</dt> + <dd>Gets the window that was most recently focused — typically the window 'on top'.</dd> + <dt>{{WebExtAPIRef("windows.getAll()")}}</dt> + <dd>Gets all windows.</dd> + <dt>{{WebExtAPIRef("windows.create()")}}</dt> + <dd> + <p>Creates a new window.</p> + </dd> + <dt>{{WebExtAPIRef("windows.update()")}}</dt> + <dd>Updates the properties of a window. Use this to move, resize, and (un)focus a window, etc.</dd> + <dt>{{WebExtAPIRef("windows.remove()")}}</dt> + <dd>Closes a window, and all its tabs.</dd> +</dl> + +<h2 id="Events">Events</h2> + +<dl> + <dt>{{WebExtAPIRef("windows.onCreated")}}</dt> + <dd>Fired when a window is created.</dd> + <dt>{{WebExtAPIRef("windows.onRemoved")}}</dt> + <dd>Fired when a window is closed.</dd> + <dt>{{WebExtAPIRef("windows.onFocusChanged")}}</dt> + <dd>Fired when the currently focused window changes.</dd> +</dl> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{Compat("webextensions.api.windows")}}</p> + +<div class="hidden note"> +<p>The "Chrome incompatibilities" section is included from <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities"> https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities</a> using the <a href="/en-US/docs/Template:WebExtChromeCompat">WebExtChromeCompat</a> macro.</p> + +<p>If you need to update this content, edit <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities">https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities</a>, then shift-refresh this page to see your changes.</p> +</div> + +<h3 id="Edge_incompatibilities">Edge incompatibilities</h3> + +<p>Promises are not supported in Edge. Use callbacks instead.</p> + +<p>{{WebExtExamples("h2")}}</p> + +<div class="note"><strong>Acknowledgements</strong> + +<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/windows"><code>chrome.windows</code></a> API. This documentation is derived from <a href="https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/windows.json"><code>windows.json</code></a> in the Chromium code.</p> + +<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p> +</div> + +<div class="hidden"> +<pre>// Copyright 2015 The Chromium Authors. All rights reserved. +// +// Redistribution and use in source and binary forms, with or without +// modification, are permitted provided that the following conditions are +// met: +// +// * Redistributions of source code must retain the above copyright +// notice, this list of conditions and the following disclaimer. +// * Redistributions in binary form must reproduce the above +// copyright notice, this list of conditions and the following disclaimer +// in the documentation and/or other materials provided with the +// distribution. +// * Neither the name of Google Inc. nor the names of its +// contributors may be used to endorse or promote products derived from +// this software without specific prior written permission. +// +// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. +</pre> +</div> diff --git a/files/id/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html b/files/id/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html new file mode 100644 index 0000000000..96ab65479e --- /dev/null +++ b/files/id/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html @@ -0,0 +1,21 @@ +--- +title: Browser support for JavaScript APIs +slug: Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs +translation_of: Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs +--- +<div>{{AddonSidebar}}</div> + + + +<p>{{WebExtAllCompatTables}}</p> + +<div class="note"><strong>Acknowledgments</strong> + +<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_compatibility_for_manifest.json">Browser compatibility for manifest.json</a></li> +</ul> diff --git a/files/id/mozilla/add-ons/webextensions/content_scripts/index.html b/files/id/mozilla/add-ons/webextensions/content_scripts/index.html new file mode 100644 index 0000000000..da5a653034 --- /dev/null +++ b/files/id/mozilla/add-ons/webextensions/content_scripts/index.html @@ -0,0 +1,554 @@ +--- +title: Content scripts +slug: Mozilla/Add-ons/WebExtensions/Content_scripts +translation_of: Mozilla/Add-ons/WebExtensions/Content_scripts +--- +<div>{{AddonSidebar}}</div> + +<p>A content script is a part of your extension that runs in the context of a particular web page (as opposed to background scripts which are part of the extension, or scripts which are part of the web site itself, such as those loaded using the {{HTMLElement("script")}} element).</p> + +<p><a href="/en-US/Add-ons/WebExtensions/Background_scripts">Background scripts</a> can access all the <a href="/en-US/Add-ons/WebExtensions/API">WebExtension JavaScript APIs</a>, but they can't directly access the content of web pages. So if your extension needs to do that, you need content scripts.</p> + +<p>Just like the scripts loaded by normal web pages, content scripts can read and modify the content of their pages using the standard DOM APIs.</p> + +<p>Content scripts can only access <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Content_scripts#WebExtension_APIs">a small subset of the WebExtension APIs</a>, but they can <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Content_scripts#Communicating_with_background_scripts">communicate with background scripts</a> using a messaging system, and thereby indirectly access the WebExtension APIs.</p> + +<div class="note"> +<p>Note that content scripts are blocked on the following domains:</p> + +<ul style="display: grid;"> + <li>accounts-static.cdn.mozilla.net</li> + <li>accounts.firefox.com</li> + <li>addons.cdn.mozilla.net</li> + <li>addons.mozilla.org</li> + <li>api.accounts.firefox.com</li> + <li>content.cdn.mozilla.net</li> + <li>content.cdn.mozilla.net</li> + <li>discovery.addons.mozilla.org</li> + <li>input.mozilla.org</li> + <li>install.mozilla.org</li> + <li>oauth.accounts.firefox.com</li> + <li>profile.accounts.firefox.com</li> + <li>support.mozilla.org</li> + <li>sync.services.mozilla.com</li> + <li>testpilot.firefox.com</li> +</ul> + +<p>If you try to inject a content script into a page in these domains, it fails and the page logs a <a href="/en-US/docs/Web/HTTP/CSP">CSP</a> error.</p> + +<p>Because these restrictions include addons.mozilla.org, users may attempt to use your extension immediately after installation—only to find that it doesn't work! You may want to add an appropriate warning, or an <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/onboarding_upboarding_offboarding_best_practices">onboarding page</a> to move users away from <code>addons.mozilla.org</code>.</p> +</div> + +<div class="note"> +<p>Values added to the global scope of a content script with <code>let foo</code> or <code>window.foo = "bar"</code> may disappear due to bug <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1408996">1408996</a>.</p> +</div> + +<h2 id="Loading_content_scripts">Loading content scripts</h2> + +<p>You can load a content script into a web page in one of three ways:</p> + +<ol> + <li> + <dl> + <dt>At install time, into pages that match URL patterns.</dt> + <dd>Using the <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code> key in your <code>manifest.json</code>, you can ask the browser to load a content script whenever the browser loads a page whose URL <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Match_patterns">matches a given pattern</a>.</dd> + </dl> + </li> + <li> + <dl> + <dt>At runtime, into pages that match URL patterns.</dt> + <dd>Using the {{WebExtAPIRef("contentScripts")}} API, you can ask the browser to load a content script whenever the browser loads a page whose URL <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Match_patterns">matches a given pattern</a>. (This is similar to method 1, <em>except</em> that you can add and remove content scripts at runtime.)</dd> + </dl> + </li> + <li> + <dl> + <dt>At runtime, into specific tabs.</dt> + <dd>Using the <code><a href="/en-US/Add-ons/WebExtensions/API/Tabs/executeScript">tabs.executeScript()</a></code> API, you can load a content script into a specific tab whenever you want. (For example, in response to the user clicking on a <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_action">browser action</a>.)</dd> + </dl> + </li> +</ol> + +<p>There is only one global scope <em>per frame, per extension</em>. This means that variables from one content script can directly be accessed by another content script, regardless of how the content script was loaded.</p> + +<p>Using methods (1) and (2), you can only load scripts into pages whose URLs can be represented using a <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Match_patterns">match pattern</a>.</p> + +<p>Using method (3), you can also load scripts into pages packaged with your extension, but you can't load scripts into privileged browser pages (like "<code>about:debugging</code>" or "<code>about:addons</code>").</p> + +<h2 id="Content_script_environment">Content script environment</h2> + +<h3 id="DOM_access">DOM access</h3> + +<p>Content scripts can access and modify the page's DOM, just like normal page scripts can. They can also see any changes that were made to the DOM by page scripts.</p> + +<p>However, content scripts get a "clean" view of the DOM. This means:</p> + +<ul> + <li>Content scripts cannot see JavaScript variables defined by page scripts.</li> + <li>If a page script redefines a built-in DOM property, the content script sees the original version of the property, not the redefined version.</li> +</ul> + +<p>In Firefox, this behavior is called <a href="/en-US/docs/Mozilla/Tech/Xray_vision">Xray vision</a>.</p> + +<p>Consider a web page like this:</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta http-equiv="content-type" content="text/html; charset=utf-8" /> + </head> + + <body> + <script src="page-scripts/page-script.js"></script> + </body> +</html></pre> + +<p>The script <code>page-script.js</code> does this:</p> + +<pre class="brush: js notranslate">// page-script.js + +// add a new element to the DOM +let p = document.createElement("p"); +p.textContent = "This paragraph was added by a page script."; +p.setAttribute("id", "page-script-para"); +document.body.appendChild(p); + +// define a new property on the window +window.foo = "This global variable was added by a page script"; + +// redefine the built-in window.confirm() function +window.confirm = function() { + alert("The page script has also redefined 'confirm'"); +}</pre> + +<p>Now an extension injects a content script into the page:</p> + +<pre class="brush: js notranslate">// content-script.js + +// can access and modify the DOM +let pageScriptPara = document.getElementById("page-script-para"); +pageScriptPara.style.backgroundColor = "blue"; + +// can't see page-script-added properties +console.log(window.foo); // undefined + +// sees the original form of redefined properties +window.confirm("Are you sure?"); // calls the original window.confirm()</pre> + +<p>The same is true in reverse; page scripts cannot see JavaScript properties added by content scripts.</p> + +<p>This means that content scripts can rely on DOM properties behaving predictably, without worrying about its variables clashing with variables from the page script.</p> + +<p>One practical consequence of this behavior is that a content script doesn't have access to any JavaScript libraries loaded by the page. So, for example, if the page includes jQuery, the content script can't see it.</p> + +<p>If a content script needs to use a JavaScript library, then the library itself should be injected as a content script <em>alongside</em> the content script that wants to use it:</p> + +<pre class="brush: json notranslate">"content_scripts": [ + { + "matches": ["*://*.mozilla.org/*"], + "js": ["jquery.js", "content-script.js"] + } +]</pre> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> Firefox <em>does</em> provide some APIs that enable content scripts to access JavaScript objects created by page scripts, and to expose their own JavaScript objects to page scripts.</p> + +<p>See <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Sharing_objects_with_page_scripts">Sharing objects with page scripts</a> for more details.</p> +</div> + +<h3 id="WebExtension_APIs">WebExtension APIs</h3> + +<p>In addition to the standard DOM APIs, content scripts can use the following WebExtension APIs:</p> + +<dl> + <dt>From <code><a href="/en-US/Add-ons/WebExtensions/API/extension">extension</a></code>:</dt> + <dd> + <ul> + <li><code><a href="/en-US/Add-ons/WebExtensions/API/extension#getURL()">getURL()</a></code></li> + <li><code><a href="/en-US/Add-ons/WebExtensions/API/extension#inIncognitoContext">inIncognitoContext</a></code></li> + </ul> + </dd> + <dt>From <code><a href="/en-US/Add-ons/WebExtensions/API/runtime">runtime</a></code>:</dt> + <dd> + <ul> + <li><code><a href="/en-US/Add-ons/WebExtensions/API/runtime#connect()">connect()</a></code></li> + <li><code><a href="/en-US/Add-ons/WebExtensions/API/runtime#getManifest()">getManifest()</a></code></li> + <li><code><a href="/en-US/Add-ons/WebExtensions/API/runtime#getURL()">getURL()</a></code></li> + <li><code><a href="/en-US/Add-ons/WebExtensions/API/runtime#onConnect">onConnect</a></code></li> + <li><code><a href="/en-US/Add-ons/WebExtensions/API/runtime#onMessage">onMessage</a></code></li> + <li><code><a href="/en-US/Add-ons/WebExtensions/API/runtime#sendMessage()">sendMessage()</a></code></li> + </ul> + </dd> + <dt>From <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/i18n">i18n</a></code>:</dt> + <dd> + <ul> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/i18n/getMessage">getMessage()</a></code></li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/i18n/getAcceptLanguages">getAcceptLanguages()</a></code></li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/i18n/getUILanguage">getUILanguage()</a></code></li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/i18n/detectLanguage">detectLanguage()</a></code></li> + </ul> + </dd> + <dt>From <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/menus">menus</a></code>:</dt> + <dd> + <ul> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/menus/getTargetElement">getTargetElement</a></code></li> + </ul> + </dd> + <dt>Everything from:</dt> + <dd><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage">storage</a></code></dd> +</dl> + +<h3 id="XHR_and_Fetch">XHR and Fetch</h3> + +<p>Content scripts can make requests using the normal <code><a href="/en-US/docs/Web/API/XMLHttpRequest">window.XMLHttpRequest</a></code> and <code><a href="/en-US/docs/Web/API/Fetch_API">window.fetch()</a></code> APIs.</p> + +<div class="blockIndicator note"> +<p>In Firefox, content script requests (for example, using <code><a href="/en-US/docs/Web/API/Fetch_API/Using_Fetch">fetch()</a></code>) happen in the context of an extension, so you must provide an absolute URL to reference page content.</p> + +<p>In Chrome, these requests happen in context of the page, so they are made to a relative URL. For example, <code>/api</code> is sent to <code>https://<strong>«</strong><var>current page URL</var><strong>»</strong>/api</code>.</p> +</div> + +<p>Content scripts get the same cross-domain privileges as the rest of the extension: so if the extension has requested cross-domain access for a domain using the <code><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code> key in <code>manifest.json</code>, then its content scripts get access that domain as well.</p> + +<p>This is accomplished by exposing more privileged XHR and fetch instances in the content script, which has the side-effect of not setting the <code><a href="/en-US/docs/Web/HTTP/Headers/Origin">Origin</a></code> and <code><a href="/en-US/docs/Web/HTTP/Headers/Referer">Referer</a></code> headers like a request from the page itself would; this is often preferable to prevent the request from revealing its cross-origin nature.</p> + +<div class="blockIndicator note"> +<p>In Firefox, extensions that need to perform requests that behave as if they were sent by the content itself can use <code>content.XMLHttpRequest</code> and <code>content.fetch()</code> instead.</p> + +<p>For cross-browser extensions, the presence of these methods must be feature-detected.</p> +</div> + +<h2 id="Communicating_with_background_scripts">Communicating with background scripts</h2> + +<p>Although content scripts can't directly use most of the WebExtension APIs, they can communicate with the extension's background scripts using the messaging APIs, and can therefore indirectly access all the same APIs that the background scripts can.</p> + +<p>There are two basic patterns for communicating between the background scripts and content scripts:</p> + +<ul> + <li>You can send <strong>one-off messages</strong> (with an optional response).</li> + <li>You can set up a <strong>longer-lived connection between the two sides</strong>, and use that connection to exchange messages.</li> +</ul> + +<h3 id="One-off_messages">One-off messages</h3> + +<p>To send one-off messages, with an optional response, you can use the following APIs:</p> + +<table class="fullwidth-table standard-table"> + <thead> + <tr> + <th scope="row"></th> + <th scope="col">In content script</th> + <th scope="col">In background script</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Send a message</th> + <td><code><a href="/en-US/Add-ons/WebExtensions/API/runtime/sendMessage">browser.runtime.sendMessage()</a></code></td> + <td><code><a href="/en-US/Add-ons/WebExtensions/API/Tabs/sendMessage">browser.tabs.sendMessage()</a></code></td> + </tr> + <tr> + <th scope="row">Receive a message</th> + <td><code><a href="/en-US/Add-ons/WebExtensions/API/runtime/onMessage">browser.runtime.onMessage</a></code></td> + <td><code><a href="/en-US/Add-ons/WebExtensions/API/runtime/onMessage">browser.runtime.onMessage</a></code></td> + </tr> + </tbody> +</table> + +<p>For example, here's a content script that listens for click events in the web page.</p> + +<p>If the click was on a link, it sends a message to the background page with the target URL:</p> + +<pre class="brush: js notranslate">// content-script.js + +window.addEventListener("click", notifyExtension); + +function notifyExtension(e) { + if (e.target.tagName != "A") { + return; + } + browser.runtime.sendMessage({"url": e.target.href}); +}</pre> + +<p>The background script listens for these messages and displays a notification using the <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/notifications">notifications</a></code> API:</p> + +<pre class="brush: js notranslate">// background-script.js + +browser.runtime.onMessage.addListener(notify); + +function notify(message) { + browser.notifications.create({ + "type": "basic", + "iconUrl": browser.extension.getURL("link.png"), + "title": "You clicked a link!", + "message": message.url + }); +} +</pre> + +<p>(This example code is lightly adapted from the <a href="https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n">notify-link-clicks-i18n</a> example on GitHub.)</p> + +<h3 id="Connection-based_messaging">Connection-based messaging</h3> + +<p>Sending one-off messages can get cumbersome if you are exchanging a lot of messages between a background script and a content script. So an alternative pattern is to establish a longer-lived connection between the two contexts, and use this connection to exchange messages.</p> + +<p>Both sides have a <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/Port">runtime.Port</a></code> object, which they can use to exchange messages.</p> + +<p>To create the connection:</p> + +<ul> + <li>One side listens for connections using <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onConnect">runtime.onConnect</a></code></li> + <li>The other side calls: + <ul> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/connect">tabs.connect()</a></code> (if connecting to a content script)</li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/connect">runtime.connect()</a></code> (if connecting to a background script)</li> + </ul> + </li> +</ul> + +<p>This returns a <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/Port">runtime.Port</a></code> object.</p> + +<ul> + <li>The <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onConnect">runtime.onConnect</a></code> listener gets passed its own <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/Port">runtime.Port</a></code> object.</li> +</ul> + +<p>Once each side has a port, the two sides can:</p> + +<ul> + <li>Send messages using <code>runtime.Port.postMessage()</code></li> + <li>Receive messages using <code>runtime.Port.onMessage()</code></li> +</ul> + +<p>For example, as soon as it loads, the following content script:</p> + +<ul> + <li>Connects to the background script</li> + <li>Stores the <code>Port</code> in a variable <code>myPort</code></li> + <li>Listens for messages on <code>myPort</code> (and logs them)</li> + <li>Uses <code>myPort</code> to sends messages to the background script when the user clicks the document</li> +</ul> + +<pre class="brush: js notranslate">// content-script.js + +let myPort = browser.runtime.connect({name:"port-from-cs"}); +myPort.postMessage({greeting: "hello from content script"}); + +myPort.onMessage.addListener(function(m) { + console.log("In content script, received message from background script: "); + console.log(m.greeting); +}); + +document.body.addEventListener("click", function() { + myPort.postMessage({greeting: "they clicked the page!"}); +});</pre> + +<p>The corresponding background script:</p> + +<ul> + <li>Listens for connection attempts from the content script</li> + <li>When receiving a connection attempt: + <ul> + <li>Stores the port in a variable named <code>portFromCS</code></li> + <li>Sends the content script a message using the port</li> + <li>Starts listening to messages received on the port, and logs them</li> + </ul> + </li> + <li>Sends messages to the content script, using <code>portFromCS</code>, when the user clicks the extension's browser action</li> +</ul> + +<pre class="brush: js notranslate">// background-script.js + +let portFromCS; + +function connected(p) { + portFromCS = p; + portFromCS.postMessage({greeting: "hi there content script!"}); + portFromCS.onMessage.addListener(function(m) { + portFromCS.postMessage({greeting: "In background script, received message from content script:" + m.greeting}); + }); +} + +browser.runtime.onConnect.addListener(connected); + +browser.browserAction.onClicked.addListener(function() { + portFromCS.postMessage({greeting: "they clicked the button!"}); +}); +</pre> + +<h4 id="Multiple_content_scripts">Multiple content scripts</h4> + +<p>If you have multiple content scripts communicating at the same time, you might want to store connections to them in an array.</p> + +<ul> +</ul> + +<pre class="brush: js notranslate">// background-script.js + +let ports = [] + +function connected(p) { + ports[p.sender.tab.id] = p + //... +} + +browser.runtime.onConnect.addListener(connected) + +browser.browserAction.onClicked.addListener(function() { + ports.forEach( p => { + p.postMessage({greeting: "they clicked the button!"}) + }) +}); +</pre> + +<ul> +</ul> + +<h3 id="Choosing_between_one-off_messages_and_connection-based_messaging">Choosing between one-off messages and connection-based messaging</h3> + +<p>The choice between one-off and connection-based messaging depends on how your extension expects to make use of messaging.</p> + +<p>The recommended best practices are:</p> + +<dl> + <dt>Use one-off messages when…</dt> + <dd> + <ul> + <li>Only one response is expected to a message.</li> + <li>A small number of scripts listen to receive messages ({{WebExtAPIRef("runtime.onMessage")}} calls).</li> + </ul> + </dd> + <dt>Use connection-based messaging when…</dt> + <dd> + <ul> + <li>Scripts engage in sessions where multiple messages are exchanged.</li> + <li>The extension need to know about task progress, needs to know if a task is interrupted, or may want to interrupt a task initiated using messaging.</li> + </ul> + </dd> +</dl> + +<h2 id="Communicating_with_the_web_page">Communicating with the web page</h2> + +<p>By default, content scripts don't get access to objects created by page scripts. However, they can communicate with page scripts using the DOM <code><a href="/en-US/docs/Web/API/Window/postMessage">window.postMessage</a></code> and <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">window.addEventListener</a></code> APIs.</p> + +<p>For example:</p> + +<pre class="brush: js notranslate">// page-script.js + +let messenger = document.getElementById("from-page-script"); + +messenger.addEventListener("click", messageContentScript); + +function messageContentScript() { + window.postMessage({ + direction: "from-page-script", + message: "Message from the page" + }, "*"); +} +</pre> + +<pre class="brush: js notranslate">// content-script.js + +window.addEventListener("message", function(event) { + if (event.source == window && + event.data && + event.data.direction == "from-page-script") { + alert("Content script received message: \"" + event.data.message + "\""); + } +});</pre> + +<p>For a complete working example of this, <a href="https://mdn.github.io/webextensions-examples/content-script-page-script-messaging.html">visit the demo page on GitHub</a> and follow the instructions.</p> + +<div class="warning"> +<p><strong>Be very careful when interacting with untrusted web content in this manner!</strong> Extensions are privileged code which can have powerful capabilities and hostile web pages can easily trick them into accessing those capabilities.</p> + +<p>To give a trivial example, suppose the content script code that receives the message does something like this:</p> + +<pre class="brush: js example-bad notranslate">// content-script.js + +window.addEventListener("message", function(event) { + if (event.source == window && + event.data.direction && + event.data.direction == "from-page-script") { + eval(event.data.message); + } +});</pre> + +<p>Now the page script can run any code with all the privileges of the content script.</p> +</div> + +<h2 id="Using_eval_in_content_scripts">Using <code>eval()</code> in content scripts</h2> + +<dl> + <dt>In Chrome</dt> + <dd>{{jsxref("eval")}} always runs code in the context of the <strong>content script</strong>, not in the context of the page.</dd> + <dt>In Firefox</dt> + <dd> + <p>If you call <code>eval()</code>, it runs code in the context of the <strong>content script</strong>.</p> + + <p>If you call <code>window.eval()</code>, it runs code in the context of the <strong>page</strong>.</p> + </dd> +</dl> + +<p>For example, consider a content script like this:</p> + +<pre class="brush: js notranslate">// content-script.js + +window.eval('window.x = 1;'); +eval('window.y = 2'); + +console.log(`In content script, window.x: ${window.x}`); +console.log(`In content script, window.y: ${window.y}`); + +window.postMessage({ + message: "check" +}, "*");</pre> + +<p>This code just creates some variables <code><var>x</var></code> and <code><var>y</var></code> using <code>window.eval()</code> and <code>eval()</code>, logs their values, and then messages the page.</p> + +<p>On receiving the message, the page script logs the same variables:</p> + +<pre class="brush: js notranslate">window.addEventListener("message", function(event) { + if (event.source === window && event.data && event.data.message === "check") { + console.log(`In page script, window.x: ${window.x}`); + console.log(`In page script, window.y: ${window.y}`); + } +});</pre> + +<dl> + <dt>In Chrome, this produces output like this:</dt> + <dd> + <pre class="notranslate">In content script, window.x: 1 +In content script, window.y: 2 +In page script, window.x: undefined +In page script, window.y: undefined</pre> + </dd> + <dt>In Firefox, this produces output like this:</dt> + <dd> + <pre class="notranslate">In content script, window.x: undefined +In content script, window.y: 2 +In page script, window.x: 1 +In page script, window.y: undefined</pre> + </dd> +</dl> + +<p>The same applies to <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code>, <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code>, and <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">Function()</a></code>.</p> + +<div class="blockIndicator warning"> +<p><strong>Be very careful when running code in the context of the page!</strong> </p> + +<p>The page's environment is controlled by potentially malicious web pages, which can redefine objects you interact with to behave in unexpected ways:</p> + +<pre class="brush: js example-bad notranslate">// page.js redefines console.log + +let original = console.log; + +console.log = function() { + original(true); +} +</pre> + + +<pre class="brush: js example-bad notranslate">// content-script.js calls the redefined version + +window.eval('console.log(false)'); +</pre> +</div> diff --git a/files/id/mozilla/add-ons/webextensions/index.html b/files/id/mozilla/add-ons/webextensions/index.html new file mode 100644 index 0000000000..a486f8391c --- /dev/null +++ b/files/id/mozilla/add-ons/webextensions/index.html @@ -0,0 +1,91 @@ +--- +title: WebExtensions +slug: Mozilla/Add-ons/WebExtensions +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Add-ons/WebExtensions +--- +<div>{{AddonSidebar}}</div> + +<p>WebExtensions adalah sistem cross-browser untuk mengembangkan browser add-ons. Untuk sebagian besar API tersebut kompatibel dengan <a class="external-icon external" href="https://developer.chrome.com/extensions">extension API</a> yang didukung oleh Google Chrome dan Opera. Ekstensi ditulis untuk browser ini dalam banyak kasus akan berjalan di Firefox atau <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/extensions/">Microsoft Edge</a> hanya dengan <a href="/en-US/Add-ons/WebExtensions/Porting_from_Google_Chrome">beberapa perubahan</a>. API ini juga sepenuhnya kompatibel dengan <a href="/en-US/Firefox/Multiprocess_Firefox">multiprocess Firefox</a>.</p> + +<p>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 <a href="https://mail.mozilla.org/listinfo/dev-addons">dev-addons mailing list</a> atau <a href="irc://irc.mozilla.org/webextensions">#webextensions</a> di <a href="https://wiki.mozilla.org/IRC">IRC</a>.</p> + +<div class="row topicpage-table"> +<div class="section"> +<h3 id="Memulai">Memulai</h3> + +<ul> + <li><a href="/en-US/Add-ons/WebExtensions/What_are_WebExtensions">Apa Itu WebExtensions?</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Your_first_WebExtension">WebExtension Pertama Anda</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Your_second_WebExtension">WebExtension Kedua Anda</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">Anatomi dari WebExtension</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Examples">Contoh WebExtensions</a></li> +</ul> + +<h3 id="Bagaimana">Bagaimana</h3> + +<ul> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests">Menangkap HTTP requests</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Modify_a_web_page">Merubah halaman web</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar">Menambah button ke toolbar</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Implement_a_settings_page">Implementasi pengaturan halaman</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard">Interaksi dengan clipboard</a></li> + <li>Memanipulasi tab browser</li> + <li>Akses dan modifikasi bookmarks</li> + <li>Akses dan modifikasi cookies</li> +</ul> + +<h3 id="Konsep">Konsep</h3> + +<ul> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API">Meninjau JavaScript API</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/User_interface_components">Komponen User interface</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Content_scripts">Content scripts</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Match_patterns">Match patterns</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Internationalization">Internasionalisasi</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">Content Security Policy</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Native_messaging">Native messaging</a></li> +</ul> + +<h3 id="Porting">Porting</h3> + +<ul> + <li><a href="/en-US/Add-ons/WebExtensions/Porting_from_Google_Chrome">Porting ekstensi Google Chrome</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Porting_a_legacy_Firefox_add-on">Porting legacy Firefox add-on</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Embedded_WebExtensions">Embedded WebExtensions</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Comparison_with_the_Add-on_SDK">Perbandingan dengan the Add-on SDK</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Comparison_with_XUL_XPCOM_extensions">Perbandingan dengan XUL/XPCOM extensions</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities">Chrome incompatibilities</a></li> +</ul> + +<h3 id="Alur_Kerja_Firefox">Alur Kerja Firefox</h3> + +<ul> + <li><a href="/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">Pemasangan</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Debugging">Debugging</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext">Memulai dengan web-ext</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/web-ext_command_reference">Referensi perintah web-ext</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID">WebExtensions dan Add-on ID</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension">Penerbitan WebExtension anda</a></li> +</ul> +</div> + +<div class="section"> +<h3 id="Reference">Reference</h3> + +<ul> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API">JavaScript API overview</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs">Browser compatibility tables for JavaScript APIs</a></li> +</ul> + +<h4 id="JavaScript_APIs">JavaScript APIs</h4> + +<div class="twocolumns">{{ ListSubpages ("/en-US/Add-ons/WebExtensions/API") }}</div> + +<h4 id="Manifest_keys">Manifest keys</h4> + +<div class="twocolumns">{{ ListSubpages ("/en-US/Add-ons/WebExtensions/manifest.json") }}</div> +</div> +</div> diff --git a/files/id/mozilla/add-ons/webextensions/your_first_webextension/index.html b/files/id/mozilla/add-ons/webextensions/your_first_webextension/index.html new file mode 100644 index 0000000000..27204f8504 --- /dev/null +++ b/files/id/mozilla/add-ons/webextensions/your_first_webextension/index.html @@ -0,0 +1,153 @@ +--- +title: WebExtensions Pertama Anda +slug: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension +translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension +--- +<div>{{AddonSidebar}}</div> + +<p><span id="result_box" lang="id"><span>Dalam</span> <span>artikel ini kita</span> <span>akan</span> mulai <span>menciptakan</span> <span>WebExtension</span> <span>untuk</span> <span>Firefox</span><span>,</span> <span>dari awal sampai akhir</span><span>.</span> <span>add</span><span>-on</span> ini <span>hanya menambahkan</span> <span>garis</span> <span>merah untuk</span> <span>setiap</span> <span>halaman</span> <span>yang dimuat dari</span> <span>"</span><span>mozilla.org</span><span>"</span> <span>atau</span> <span>subdomainnya</span><span>.</span></span></p> + +<p><span class="short_text" id="result_box" lang="id"><span>Kode sumber untuk</span> <span>contoh ini</span> <span>ada pada</span> <span>GitHub</span></span>: <a href="https://github.com/mdn/webextensions-examples/tree/master/borderify">https://github.com/mdn/webextensions-examples/tree/master/borderify</a>.</p> + +<p>Pertama, anda membutuhkan Firefox versi 45 atau lebih baru.</p> + +<h2 id="Menulis_sebuah_WebExtension">Menulis sebuah WebExtension</h2> + +<p>Buat sebuah directory baru dan arahkan kesana:</p> + +<pre class="brush: bash">mkdir borderify +cd borderify</pre> + +<h3 id="manifest.json">manifest.json</h3> + +<p>Sekarang buat file baru dengan nama "manifest.json" di dalam folder "borderify". Berikan kode seperti berikut:</p> + +<pre class="brush: json">{ + + "manifest_version": 2, + "name": "Borderify", + "version": "1.0", + + "description": "Adds a red border to all webpages matching mozilla.org.", + + "icons": { + "48": "icons/border-48.png" + }, + + "content_scripts": [ + { + "matches": ["*://*.mozilla.org/*"], + "js": ["borderify.js"] + } + ] + +}</pre> + +<ul> + <li>Tiga key pertama: <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/manifest_version">manifest_version</a></code>, <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/name">name</a></code>, dan <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/version">version</a></code>, <span id="result_box" lang="id"><span>adalah wajib</span> <span>dan mengandung</span> <span>metadata</span> <span>dasar</span> <span>untuk</span> <span>add</span><span>-on</span></span>.</li> + <li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/description">description</a></code> <span id="result_box" lang="id"><span>adalah</span> <span>opsional</span><span>,</span> <span>tetapi dianjurkan</span><span>:</span> <span>ini akan ditampilkan</span> <span>dalam</span> <span>Add-ons</span> Manager</span>.</li> + <li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/icons">icons</a></code> <span id="result_box" lang="id"><span>adalah opsional</span><span>,</span> <span>tetapi</span> <span>dianjurkan</span><span>:</span> <span>memungkinkan</span> <span>Anda untuk menentukan</span> <span>sebuah ikon</span> <span>untuk</span> <span>add-on</span><span>,</span> <span>yang akan ditampilkan</span> <span>dalam</span></span> Add-ons Manager.</li> +</ul> + +<p><span class="short_text" id="result_box" lang="id"><span>Kunci </span></span><span class="short_text" lang="id"><span>yang paling menarik</span> <span> di sini adalah</span></span> <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code>, <span id="result_box" lang="id"><span>yang memberitahu</span> <span>Firefox</span> <span>untuk memuat</span></span> script ke Halaman web dengan URL yang cocok dengan pola tertentu. Dalam hal ini, Kita akan meminta Firefox untuk memuat script yang di disebut "borderify.js" ke semua halaman HTTP atau HTTPS yang disajikan dari "mozilla.org" atau subdomainnya.</p> + +<ul> + <li><a href="/en-US/Add-ons/WebExtensions/Content_scripts">Learn more about content scripts.</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Match_patterns">Learn more about match patterns</a>.</li> +</ul> + +<div class="note"> +<p>Jika anda menggunakan Firefox versi 48 kebawah, <span id="result_box" lang="id"><span>Anda</span> <span>juga</span> <span>akan</span> <span>memerlukan key</span> <span>tambahan yang disebut</span></span> <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/applications">applications</a></code>:</p> + +<pre class="brush: json">"applications": { + "gecko": { + "id": "borderify@example.com", + "strict_min_version": "42.0", + "strict_max_version": "50.*", + "update_url": "https://example.com/updates.json" + } +}</pre> +</div> + +<h3 id="iconsborder-48.png">icons/border-48.png</h3> + +<p>Add-on <span id="result_box" lang="id"><span>harus memiliki</span> <span>ikon</span><span>.</span> <span>Ini</span> <span>akan ditampilkan</span> <span>di sebelah</span> <span>list add-on</span> <span>di</span></span> Add-ons Manager. Manifest.json menjanjikan <span id="result_box" lang="id"><span>bahwa kita akan memiliki</span> <span>ikon di</span></span> "icons/border-48.png".</p> + +<p>Membuat sebuah folder "ikon" pada folder "borderify". Simpan ikon dengan nama "border-48.png". Anda dapat menggunakan <a href="https://github.com/mdn/webextensions-examples/blob/master/borderify/icons/border-48.png">salah satu dari contoh kami</a>, <span id="result_box" lang="id"><span>yang</span> <span>diambil dari</span> <span>ikon</span></span> Google Material Design iconset, <span id="result_box" lang="id"><span>dan</span> <span>digunakan di bawah</span> <span>ketentuan lisensi</span></span> <a href="https://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike</a>.</p> + +<p><span id="result_box" lang="id"><span>Jika</span> <span>Anda memilih</span> <span>untuk menggunakan</span> <span>ikon</span> <span>Anda sendiri</span><span>,</span> <span>itu</span> <span>harus</span> <span>berukuran</span> <span>48x48 pixel</span><span>.</span> <span>Anda</span> <span>juga bisa menggunakan</span> <span>ikon</span> <span>96x96</span> <span>pixel</span><span>,</span> <span>untuk</span> <span>display resolusi tinggi</span><span>,</span> <span>dan jika</span> <span>Anda</span> <span>melakukan hal ini</span> <span>akan</span> <span>ditentukan</span> <span>property</span> <span>96</span> <span>milik</span> <span>ikon</span> <span>objek</span> <span>di</span> <span>manifest.json</span></span>:</p> + +<pre class="brush: json">"icons": { + "48": "icons/border-48.png", + "96": "icons/border-96.png" +}</pre> + +<p><span id="result_box" lang="id"><span>Atau, Anda bisa</span> <span>menggunakan</span> <span>file</span> <span>SVG</span><span>,</span> <span>dan itu</span> <span>akan</span> <span>ditingkatkan</span> <span>dengan benar</span><span>.</span></span></p> + +<ul> + <li><a href="/en-US/Add-ons/WebExtensions/manifest.json/icons">Learn more about specifying icons.</a></li> +</ul> + +<h3 id="borderify.js">borderify.js</h3> + +<p><span id="result_box" lang="id"><span>Akhirnya</span><span>,</span> <span>buat file dengan nama</span> <span>"</span><span>borderify.js</span><span>"</span> pada folder <span>"</span><span>borderify</span><span>"</span><span>.</span> Berikan kode seperti berikut<span>:</span></span></p> + +<pre class="brush: js">document.body.style.border = "5px solid red";</pre> + +<p><span id="result_box" lang="id"><span>Script ini</span> <span>akan dimuat</span> <span>ke dalam</span> <span>halaman</span> <span>yang cocok dengan</span> <span>pola yang diberikan</span> <span>dalam key</span> <span>content_scripts pada</span> <span>manifest.json</span><span>.</span> <span>Script</span> <span>memiliki akses langsung ke</span> <span>dokumen</span><span>,</span> <span>seperti</span> <span>script</span> <span>dimuat oleh</span> <span>halaman itu sendiri</span></span>.</p> + +<ul> + <li><a href="/en-US/Add-ons/WebExtensions/Content_scripts">Learn more about content scripts.</a></li> +</ul> + +<h2 id="Trying_it_out">Trying it out</h2> + +<p><span id="result_box" lang="id"><span>Pertama</span><span>,</span> <span>periksa</span> <span>bahwa Anda memiliki</span> <span>file</span> <span>yang tepat</span> <span>di tempat yang tepat</span><span>:</span></span></p> + +<pre>borderify/ + icons/ + border-48.png + borderify.js + manifest.json</pre> + +<h3 id="Pemasangan">Pemasangan</h3> + +<p>Buka "about:debugging" di Firefox, klik "Load Temporary Add-on" dan pilih file pada folder add-on anda:</p> + +<p>{{EmbedYouTube("cer9EUKegG4")}}</p> + +<p>Add-on <span id="result_box" lang="id"><span class="alt-edited">kini akan</span> <span>diinstal</span><span>,</span> <span>dan</span> <span>akan</span> <span class="alt-edited">tetap sampai</span> <span>Anda me-restart</span> <span>Firefox</span></span>.</p> + +<p><span id="result_box" lang="id"><span>Atau, Anda dapat</span> <span>menjalankan</span> <span>WebExtension</span> <span>dari baris perintah</span> <span>menggunakan </span></span><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext">web-ext</a> tool.</p> + +<h3 id="Testing">Testing</h3> + +<p><span id="result_box" lang="id"><span>Sekarang</span> <span>coba kunjungi</span> <span>halaman</span> <span>dengan domain</span> <span>"</span><span>mozilla.org</span><span>"</span><span>,</span> <span>dan</span> <span>Anda akan melihat</span> <span>garis merah</span> <span>melingkar pada</span> <span>halaman:</span></span></p> + +<p>{{EmbedYouTube("rxBQl2Z9IBQ")}}</p> + +<div class="note"> +<p><span id="result_box" lang="id"><span>Jangan</span> <span>mencobanya pada</span> <span>addons.mozilla.org</span><span>!</span> <span>skrip</span> <span>konten</span> <span>saat ini</span> <span>diblokir pada</span> <span>domain tersebut.</span></span>.</p> +</div> + +<p><span id="result_box" lang="id"><span>Coba</span> <span>bereksperimen</span> <span>sedikit</span><span>.</span> <span>Edit</span> script <span>konten</span> <span>untuk mengubah</span> <span>warna garis</span><span>,</span> <span>atau melakukan</span> <span>sesuatu yang lain untuk</span> <span>konten halaman</span><span>.</span> <span>Simpan</span> <span>script konten</span><span>,</span> <span>kemudian muat kembali</span> <span>file</span> <span>add</span><span>-on</span> <span>dengan mengklik</span> <span>button "</span><span>Reload</span><span>" pada</span> about<span>:</span><span>debugging</span><span>.</span> <span>Anda</span> <span>dapat</span> <span>melihat perubahan</span> <span>segera.</span></span></p> + +<p>{{EmbedYouTube("NuajE60jfGY")}}</p> + +<ul> + <li><a href="/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">Learn more about loading add-ons</a></li> +</ul> + +<h2 id="Packaging_dan_publishing">Packaging dan publishing</h2> + +<p><span id="result_box" lang="id"><span>Bagi orang lain yang akan untuk</span> <span>menggunakan</span> <span>add</span><span>-on</span><span>, Anda</span> <span>perlu memaketkan</span> <span>itu</span> <span>dan</span> <span>mengirimkannya ke</span> <span>Mozilla</span> <span>untuk</span> <span>penandaan</span><span>.</span> <span>Untuk mempelajari lebih lanjut</span> <span>tentang itu</span><span>, lihat</span></span> <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension">"Publishing your WebExtension"</a>.</p> + +<h2 id="Apa_berikutnya"><span class="short_text" id="result_box" lang="id"><span>Apa berikutnya?</span></span></h2> + +<p><span id="result_box" lang="id"><span>Sekarang</span> <span>Anda punya</span> <span>ide dari</span> <span>proses pengembangan</span> <span>WebExtension</span> <span>untuk</span> <span>Firefox</span><span>, coba:</span></span></p> + +<ul> + <li><a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">reading more about the anatomy of WebExtensions</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Your_second_WebExtension">writing a more complex WebExtension</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/API">reading about the JavaScript APIs available to WebExtensions.</a></li> +</ul> diff --git a/files/id/mozilla/connect/index.html b/files/id/mozilla/connect/index.html new file mode 100644 index 0000000000..e9d3f28280 --- /dev/null +++ b/files/id/mozilla/connect/index.html @@ -0,0 +1,95 @@ +--- +title: Connect with Mozilla +slug: Mozilla/Connect +translation_of: Mozilla/Connect +--- +<div class="summary"> +<p><span class="seoSummary"><font><font>Aktifkan, menginspirasi dan berkolaborasi untuk membuat Web platform utama yang digunakan untuk menciptakan pengalaman di semua perangkat yang terhubung.</font></font></span></p> +</div> + + +<div> +<div class="column-container dev-program-callouts dev-program-block dev-program-first dev-program-column-wrapper"> +<div class="dev-program-callout"> +<div class="callout-link-container"> +<h2 id="Blog_Hacks"><font><font>Blog Hacks</font></font></h2> + +<p><font><font>Sebuah sumber daya utama bagi orang untuk mengembangkan Open Web, blog Mozilla Hacks menawarkan berita dan diskusi tentang terbaru dalam teknologi Web dan fitur browser.</font></font></p> + +<div class="callout-link-wrapper"><a class="callout-link ignore-external" href="https://hacks.mozilla.org/" style="white-space: normal;"><font><font>Baca sekarang</font></font> </a></div> +</div> +</div> + +<div class="dev-program-callout"> +<div class="callout-link-container"> +<h2 id="Bantuan_Q_A"><font><font>Bantuan Q & A</font></font></h2> + +<p><font><font>Diskusikan Web dan Web aplikasi pada Stack Overflow, di mana Anda dapat bertukar pikiran dengan pengembang web lainnya. </font><span class="smaller"><strong><font>{{anch ("diskusi Developer", "Cari Q & A di bawah")}}</font></strong></span></font></p> + +<div class="callout-link-wrapper"><a class="callout-link ignore-external" href="http://stackoverflow.com/r/mozilla" style="white-space: normal;"><font><font>Mozilla Q & A pada Stack Overflow</font></font> </a></div> +</div> +</div> + +<div class="dev-program-callout"> +<div class="callout-link-container"> +<h2 id="Bergabunglah_MDN"><font><font>Bergabunglah MDN</font></font></h2> + +<p><font><font>Mendaftar untuk MDN! </font><font>Anda akan dapat mengedit dokumentasi di sini, membuat profil untuk memamerkan pekerjaan Anda, dan mendapatkan akses ke fitur dari waktu ke waktu seperti yang kita menggulung mereka keluar.</font></font></p> + +<div class="callout-link-wrapper"><a class="callout-link" href="/profile/edit" style="white-space: normal;"><font><font>Bergabung atau masuk</font></font> </a></div> +</div> +</div> +</div> + +<div class="dev-program-explanation dev-program-block"> +<h2 id="Terhubung_dengan_Mozilla"><font><font>Terhubung dengan Mozilla</font></font></h2> + +<p><font><font>Pengembang menciptakan masa depan dengan membangun layanan dan aplikasi untuk orang di seluruh dunia. </font><font>Tujuan Hubungan Pengembang Mozilla adalah untuk membantu pengembang untuk menggunakan teknologi web terbuka dan standar untuk berhasil dalam mencapai tujuan mereka. </font><font>Selain dokumentasi di sini di MDN, kami menawarkan bantuan dan sumber lainnya menuju tujuan ini, melalui berbagai saluran. </font><font>Kami mengundang Anda untuk menghubungkan, belajar, dan berbagi pengetahuan Anda sendiri.</font></font></p> + +<p><font><font>Kami menawarkan bantuan melalui Q & A pada Stack Overflow, untuk memecahkan masalah teknis yang spesifik dan tantangan yang mungkin Anda miliki. </font><font>Kami juga memiliki newsletter menjaga Anda informasi tentang kejadian terbaru dalam adegan web sekitar aplikasi web dan banyak lagi. </font></font><a href="https://marketplace.firefox.com/developers/#newsletter-signup"><font><font>Langganan Apps & Hacks buletin.</font></font></a></p> + +<p><font><font>Kami memiliki banyak rencana dan ide-ide untuk iteratif memperluas Hubungan Pengembang penawaran kami, dan kami ingin Anda terlibat seperti yang kita melakukannya! </font><font>Jadi, </font></font><a href="http://stackoverflow.com/r/mozilla"><font><font>ikuti tag pada Stack Overflow</font></font></a><font><font> , </font></font><a href="https://hacks.mozilla.org/"><font><font>berlangganan ke blog Hacks</font></font></a><font><font> , </font></font><a href="https://marketplace.firefox.com/developers/#newsletter-signup"><font><font>berlangganan newsletter,</font></font></a><font><font> dan </font></font><a href="/profile/edit"><font><font>mendaftar untuk sebuah account</font></font></a><font><font> !</font></font></p> +</div> + +<div class="column-container dev-program-block"> +<div class="column-half" id="Developer_discussions"> +<h2 id="Q_A_pada_Stack_Overflow_Lihat_semua_Q_A_..."><font><font>Q & A pada Stack Overflow </font></font><a class="heading-link" href="http://stackoverflow.com/r/mozilla"><font><font>Lihat semua Q & A ...</font></font></a></h2> + +<p><font><font>Kami memiliki Q & A untuk membahas tantangan dan masalah ketika mengembangkan, khususnya untuk Firefox OS dan Open Web di ponsel. </font><font>Ini tersedia di Stack Overflow di bawah URL mudah </font></font><a href="http://stackoverflow.com/r/mozilla"><font><font>http://stackoverflow.com/r/mozilla</font></font></a><font><font> .</font></font></p> + + +<div class="stack-form"><font><font>Bentuk Stack</font></font></div> + +<h3 id="Terbaru_Q_A_Topik"><font><font>Terbaru Q & A Topik</font></font></h3> +</div> + +<div class="column-half dev-program-hacks dev-program-block"> </div> +</div> + +<p class="dev-program-block"><img alt="Pengembang pada lokakarya Firefox OS di Madrid." src="https://mdn.mozillademos.org/files/7479/PhonesUp.jpg" style="display: block; height: 359px; margin: 0px auto; max-width: 100%; width: 720px;"></p> + +<div class="column-container dev-program-block"> +<div class="column-7 dev-program-events"> +<h2 id="Dimana_Mozilla_Lihat_peserta_dan_rincian_pada_halaman_Acara_kami_..."><font><font>Dimana Mozilla? </font></font><a class="heading-link" href="https://developer.mozilla.org/en/events"><font><font>Lihat peserta dan rincian pada halaman Acara kami ...</font></font> </a></h2> + +<p><font><font>Berikut ini adalah daftar peristiwa di mana perwakilan Mozilla akan berbicara. </font><font>Pastikan untuk berbicara dengan mereka!</font></font></p> +</div> + +<div class="column-5"> +<h2 id="Sumber_lainnya"><font><font>Sumber lainnya</font></font></h2> + +<ul class="no-bullets"> + <li><a href="http://www.youtube.com/user/mozhacks"><font><font>Mozilla Hacks di YouTube</font></font></a> + + <ul> + <li><a href="http://www.youtube.com/playlist?list=PLo3w8EB99pqIHIUUv08hBCHq1OgPKhdo0"><font><font>Video Firefox OS</font></font></a></li> + <li><a href="http://www.youtube.com/playlist?list=PLo3w8EB99pqLZNY22xKbTEzMfYo9PXAlm"><font><font>Firefox Developer Tools video</font></font></a></li> + </ul> + </li> + <li><a href="https://twitter.com/mozhacks"><font><font>mozhacks di Twitter</font></font></a></li> +</ul> +</div> +</div> +</div> + +<p> </p> diff --git a/files/id/mozilla/firefox/edisi_pengembang/index.html b/files/id/mozilla/firefox/edisi_pengembang/index.html new file mode 100644 index 0000000000..6f3a9a91bf --- /dev/null +++ b/files/id/mozilla/firefox/edisi_pengembang/index.html @@ -0,0 +1,57 @@ +--- +title: Edisi Pengembang +slug: Mozilla/Firefox/Edisi_Pengembang +translation_of: Mozilla/Firefox/Developer_Edition +--- +<div>{{FirefoxSidebar}}</div><p><img alt="" src="https://mdn.mozillademos.org/files/9069/firefox-dev-ed_logo-only_1024.png" style="display: block; height: 256px; margin-left: auto; margin-right: auto; width: 256px;"></p> + +<p style="text-align: center;">Sebuah versi Firefox yang dikhususkan untuk para web developer.</p> + +<p><a href=" https://www.mozilla.org/en-US/firefox/developer/" style="width: 250px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Unduh Firefox Edisi Pengembang</a></p> + +<hr> +<div class="column-container"> +<div class="column-half"> +<h3 id="Fitur_Firefox_terbaru"><strong>Fitur Firefox</strong> terbaru</h3> + +<p>Firefox Edisi Pengembang menggantikan kanal Aurora pada <a href="https://wiki.mozilla.org/Release_Management/Release_Process">Proses Rilis Firefox</a>. Seperti Aurora, fitur-fitur baru akan tersedia pada versi ini setiap enam minggu, setelah distabilkan dari Nightly build.</p> + +<p>Dengan menggunakan Edisi Pengembang, anda mendapatkan akses ke fitur peralatan dan platform 12 minggu lebih awal dari rilis Firefox utama.</p> + +<p><a href="/en-US/Firefox/Releases/35">Temukan apa yang baru dalam Edisi Pengembang</a>.</p> +</div> + +<div class="column-half"> +<h3 id="Peralatan_pengembang_eksperimental"><strong>Peralatan pengembang eksperimental</strong></h3> + +<p>Kami akan memasukkan fitur-fitur eksperimental yang belum masuk di versi biasa.</p> + +<p>Sebagai contoh, Edisi Pengembang memasukkan <a href="/en-US/docs/Tools/Firefox_Tools_Adapter">Firefox Tools Adapter</a>, yang dapat membuat anda terhubung dengan<a href="/en-US/docs/"> peralatan pengembang Firefox</a> ke browser lain seperti Chrome pada Android atau Safari di iOS.</p> +</div> +</div> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Profil_terpisah"><strong>Profil terpisah</strong></h3> + +<p>Firefox Edisi Pengembang menggunakan profil terpisah dari versi Firefox lain yang terinstall di komputer anda. Artinya, anda bisa menjalankan Edisi Pengembang bersamaan dengan Firefox versi biasa atau Beta.</p> +</div> + +<div class="column-half"> +<h3 id="Dibuat_untuk_pengembang_web"><strong>Dibuat untuk pengembang web</strong></h3> + +<p>Kami telah mengatur beberapa pengaturan untuk pengembang web. Sebagai contoh, chrome dan debug remote telah diaktifkan dari awal.</p> +</div> +</div> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Tema_tersendiri"><strong>Tema tersendiri</strong></h3> + +<p>Termasuk di dalamnya akses cepat ke fitur pengembang.</p> +</div> + +<div class="column-half"> </div> +</div> + +<p> </p> diff --git a/files/id/mozilla/firefox/index.html b/files/id/mozilla/firefox/index.html new file mode 100644 index 0000000000..cf3e7acc66 --- /dev/null +++ b/files/id/mozilla/firefox/index.html @@ -0,0 +1,75 @@ +--- +title: Firefox +slug: Mozilla/Firefox +tags: + - Firefox + - Landing + - Mozilla +translation_of: Mozilla/Firefox +--- +<div>{{FirefoxSidebar}}</div> + +<p><span class="short_text" id="result_box" lang="id"><span class="hps"><a href="https://www.mozilla.org/firefox/">Firefox</a></span> <span class="hps">adalah peramban</span> <span class="hps">populer</span> milik <span class="hps">Mozilla</span></span>, tersedia untuk berbagai platforms, termasuk Windows, Mac OS X dan Linux pada desktop dan perangkat mobile Android. Dengan kompatibilitas luas, teknologi Web terbaru dan alat pengembangan yang kuat, <span id="result_box" lang="id"><span class="hps">Firefox</span> <span class="hps">adalah yang terbesar</span> <span class="hps">untuk </span><span class="hps">pengguna </span><span class="hps">dan pengembang</span> <span class="hps">web</span></span>.</p> + +<p>Firefox adalah sebuah proyek open sorce, <span id="result_box" lang="id"><span class="hps">sebagian besar</span> <span class="hps">kode ini</span> <span class="hps">disumbangkan oleh</span></span> komunitas besar relawan kami. <span id="result_box" lang="id"><span class="hps">Di sini Anda</span> <span class="hps">akan</span> <span class="hps">belajar cara</span> <span class="hps">untuk berkontribusi pada</span> <span class="hps">proyek</span> <span class="hps">Firefox</span> <span class="hps">dan Anda juga</span> <span class="hps">akan menemukan link ke</span> <span class="hps">informasi tentang</span> <span class="hps">pembuatan</span> <span id="result_box" lang="id"><span class="hps">add-ons</span></span> <span class="hps">Firefox</span></span>, memakai alat pengembang Firefox, dan tugas lainnya.</p> + +<div class="summary"> +<p><span class="short_text" id="result_box" lang="id"><span class="hps">Pelajari cara membuat</span> <span class="hps">add</span><span class="atn">-</span><span>ons</span> <span class="hps">Firefox</span></span>, <span id="result_box" lang="id"><span class="hps">cara mengembangkan</span> <span class="hps">dan membuat</span> <span class="hps">Firefox</span> <span class="hps">sendiri</span></span>, dan cara <span id="result_box" lang="id"><span class="hps">internal dari</span> <span class="hps">Firefox</span> <span class="hps">dan</span> <span class="hps">subproyek-nya</span> <span class="hps">bekerja</span></span>.</p> +</div> + +<ul class="card-grid"> + <li><span>Catatan rilis pengembang</span> + + <p><a href="https://developer.mozilla.org/en-US/Firefox/Releases">Catatan rilis pengembang terfokus</a>; <span id="result_box" lang="id"><span class="hps">mempelajari </span><span class="hps">kemampuan baru untuk</span><span class="hps"> situs</span> <span class="hps">web</span> <span class="atn hps">dan add-</span><span>ons</span> <span class="hps">di</span> <span class="hps">setiap versi</span> <span class="hps">Firefox</span></span>.</p> + </li> + <li><span>Documentasi proyek</span> + <p><span id="result_box" lang="id"><span class="hps">Dapatkan</span> <span class="hps">informasi rinci</span> <span class="hps">tentang <a href="https://developer.mozilla.org/en-US/docs/Mozilla">internal</a></span><a href="https://developer.mozilla.org/en-US/docs/Mozilla"> <span class="hps">Firefox</span></a> <span class="hps">dan</span> <span class="hps"><em>build system</em>-nya</span></span>, <span id="result_box" lang="id"><span class="hps">sehingga Anda bisa</span> <span class="hps">menemukan jalan di sekitar</span><span class="hps"> kode</span></span>.</p> + </li> + <li><span>Panduan pengembang</span> + <p><a href="https://developer.mozilla.org/en-US/docs/Developer_Guide">Panduan pengembang</a> kami <span id="result_box" lang="id"><span class="hps">memberi</span> <span class="hps">rincian tentang bagaimana</span><span class="hps"> mendapatkan</span> <span class="hps">dan</span> <span class="hps">mengkompilasi source code </span></span>Firefox, <span id="result_box" lang="id"><span class="hps">bagaimana menemukan</span> <span class="hps">jalan anda</span></span>, dan <span class="short_text" id="result_box" lang="id"><span class="hps">bagaimana</span> <span class="hps">berkontribusi pada proyek</span></span>.</p> + </li> +</ul> + +<h2 id="sect1"></h2> + +<h2 id="Channel_Firefox">Channel Firefox</h2> + +<p>Firefox tersedia dalam lima <strong>channel</strong>.</p> + +<h3 id="Firefox_Nightly">Firefox Nightly</h3> + +<p>Each night we build Firefox from the latest code in <a href="/en-US/docs/mozilla-central">mozilla-central</a>. These builds are for Firefox developers or those who want to try out the very latest cutting edge features while they're still under active development.</p> + +<p><a href="https://nightly.mozilla.org/" style="width: 250px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Download Firefox Nightly</a></p> + +<h3 id="Firefox_Developer_Edition">Firefox Developer Edition</h3> + +<p>This is a version of Firefox tailored for developers. Every six weeks, we take the features in Firefox Nightly that are stable enough and create a new version of Firefox Developer Edition. We also add some extra features for developers that are only available in this channel.</p> + +<p><a href="/en-US/Firefox/Developer_Edition">Learn more about Firefox Developer Edition</a>.</p> + +<p><a href="https://www.mozilla.org/firefox/developer/" style="width: 250px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Download Firefox Developer Edition</a></p> + +<h3 id="Firefox_Beta">Firefox Beta</h3> + +<p>After spending six weeks in Firefox Developer Edition, we take the features that are stable enough, and create a new version of Firefox Beta. Firefox Beta builds are for Firefox enthusiasts to test what's destined to become the next released Firefox version.</p> + +<p><a href="https://www.mozilla.org/firefox/channel/#beta" style="width: 250px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Download Firefox Beta</a></p> + +<h3 id="Firefox">Firefox</h3> + +<p>After stabilizing for another six weeks in Beta, we're ready to ship the new features to hundreds of millions of users in a new release version of Firefox.</p> + +<p><a href="https://www.mozilla.org/firefox/channel/#firefox" style="width: 250px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Download Firefox</a></p> + +<h3 id="Firefox_Extended_Support_Release_(ESR)">Firefox Extended Support Release (ESR)</h3> + +<p>Firefox ESR is the long-term support edition of Firefox for desktop for use by organizations including schools, universities, businesses and others who need extended support for mass deployments.</p> + +<p><a href="/en-US/Firefox/Firefox_ESR">Learn more about Firefox Extended Support Release</a>.</p> + +<p><a href="https://www.mozilla.org/firefox/organizations/all/" style="width: 250px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Download Firefox ESR</a></p> + +<h2 id="Firefox_profiles">Firefox profiles</h2> + +<p>If you find yourself using multiple Firefox channels—or just multiple configurations—on a regular basis, you should read how to <a href="/en-US/docs/Mozilla/Firefox/Multiple_profiles">use multiple Firefox profiles</a> by turning Firefox's Profile Manager and other profile management tools to your advantage.</p> diff --git a/files/id/mozilla/firefox/privacy/index.html b/files/id/mozilla/firefox/privacy/index.html new file mode 100644 index 0000000000..fe82422987 --- /dev/null +++ b/files/id/mozilla/firefox/privacy/index.html @@ -0,0 +1,22 @@ +--- +title: Privacy +slug: Mozilla/Firefox/Privacy +tags: + - NeedsTranslation + - Privacy + - Security + - TopicStub +translation_of: Mozilla/Firefox/Privacy +--- +<div>{{FirefoxSidebar}}</div> + +<p class="summary">This document lists privacy-related documentation.</p> + +<p>{{ ListSubpages () }}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://support.mozilla.org/en-US/products/firefox/privacy-and-security">Privacy and security settings</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Security">Web Security</a></li> +</ul> diff --git a/files/id/mozilla/firefox/privacy/storage_access_policy/errors/cookieblockedtracker/index.html b/files/id/mozilla/firefox/privacy/storage_access_policy/errors/cookieblockedtracker/index.html new file mode 100644 index 0000000000..f4415aedc2 --- /dev/null +++ b/files/id/mozilla/firefox/privacy/storage_access_policy/errors/cookieblockedtracker/index.html @@ -0,0 +1,33 @@ +--- +title: 'Blocked: Storage access requests from trackers' +slug: Mozilla/Firefox/Privacy/Storage_access_policy/Errors/CookieBlockedTracker +translation_of: Mozilla/Firefox/Privacy/Storage_access_policy/Errors/CookieBlockedTracker +--- +<div>{{FirefoxSidebar}}</div> + +<h2 id="back_up_from_last_user">back up from last user</h2> + +<h2 id="What_went_wrong">What went wrong?</h2> + +<p>A request to access cookies or storage was blocked because the browser identified it as coming from a tracker and content blocking is enabled.</p> + +<p>The permission can be changed or removed by:</p> + +<ul> + <li>Going to <em>Preferences > Content Blocking </em>and either + + <ul> + <li>adding an exception with the <em>Manage Exceptions</em>… button</li> + <li>choosing the <em>Custom</em> Content Blocking and unchecking the <em>Tracker</em> checkbox</li> + </ul> + </li> +</ul> + +<p>If the blocked resource doesn't need authentication, you can fix the warning message by adding a <code>crossorigin="anonymous"</code> attribute to the relevant element.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://support.mozilla.org/en-US/kb/content-blocking">Content </a><a href="https://support.mozilla.org">support.mozilla.org</a></li> + <li><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">The <code>crossorigin</code> attribute</a></li> +</ul> diff --git a/files/id/mozilla/firefox/privacy/storage_access_policy/errors/index.html b/files/id/mozilla/firefox/privacy/storage_access_policy/errors/index.html new file mode 100644 index 0000000000..a1e1f54a75 --- /dev/null +++ b/files/id/mozilla/firefox/privacy/storage_access_policy/errors/index.html @@ -0,0 +1,24 @@ +--- +title: Errors +slug: Mozilla/Firefox/Privacy/Storage_access_policy/Errors +tags: + - Cookies + - Errors + - NeedsTranslation + - Storage + - TopicStub + - storage access policy +translation_of: Mozilla/Firefox/Privacy/Storage_access_policy/Errors +--- +<div>{{FirefoxSidebar}}</div> + +<p>This page lists the errors that can be raised due to Firefox's anti-tracking functionality, governed by the <a href="/en-US/docs/Mozilla/Firefox/Privacy/Storage_access_policy">Storage access policy</a>. You can find further information about them by clicking on the links below:</p> + +<p>A request to access cookies or storage was blocked because</p> + +<ul> + <li><a href="/en-US/docs/Mozilla/Firefox/Privacy/Storage_access_policy/Errors/CookieBlockedByPermission">of custom cookie permission</a></li> + <li><a href="/en-US/docs/Mozilla/Firefox/Privacy/Storage_access_policy/Errors/CookieBlockedTracker">it came from a tracker and content blocking is enabled</a></li> + <li><a href="/en-US/docs/Mozilla/Firefox/Privacy/Storage_access_policy/Errors/CookieBlockedAll">we are blocking all storage access requests</a></li> + <li><a href="/en-US/docs/Mozilla/Firefox/Privacy/Storage_access_policy/Errors/CookieBlockedForeign">we are blocking all third-party storage access requests and content blocking is enabled</a></li> +</ul> diff --git a/files/id/mozilla/firefox/privacy/storage_access_policy/index.html b/files/id/mozilla/firefox/privacy/storage_access_policy/index.html new file mode 100644 index 0000000000..801d5bfad1 --- /dev/null +++ b/files/id/mozilla/firefox/privacy/storage_access_policy/index.html @@ -0,0 +1,261 @@ +--- +title: 'Storage access policy: Block cookies from trackers' +slug: Mozilla/Firefox/Privacy/Storage_access_policy +tags: + - NeedsTranslation + - Privacy + - TopicStub + - storage access policy + - tracking protection +translation_of: Mozilla/Firefox/Privacy/Storage_access_policy +--- +<div>{{FirefoxSidebar}}</div> + +<p class="summary">Firefox includes a new storage access policy that blocks cookies and other site data from third-party tracking resources. This policy is designed as an alternative to the <a href="/en-US/docs/Mozilla/Cookies_Preferences">older cookie policies</a>, which have been available in Firefox for many years. This policy protects against cross-site tracking while minimizing the site breakage associated with traditional cookie blocking. This article explains how the policy works and how you can test it.</p> + +<h2 id="Testing_in_Firefox">Testing in Firefox</h2> + +<p>This cookie policy has been available in Firefox since version 63. This documentation describes the policy that we intend to ship to Firefox Release users, but may not match what is implemented in the current Release version of Firefox. That's because we document new aspects of the policy as soon as they land in <a href="https://www.mozilla.org/en-US/firefox/channel/desktop/#nightly">Firefox Nightly</a>, our pre-release channel. Firefox Nightly may also contain experimental features that we don't yet plan to ship to Release users; experimental features will not be included in this documentation, but may nevertheless impact the functionality of domains classified as trackers.</p> + +<p>We recommend sites test with <a href="https://www.mozilla.org/en-US/firefox/channel/desktop/#nightly">Firefox Nightly</a>, as this includes the newest version of our protections. As described above, note that Nightly may include additional protections that end up getting removed or changed before they reach our Release users. We’ll keep this page updated with the newest information as we strengthen our protections.</p> + +<p>These protections are on by default in Nightly. The cookie policy can be enabled in other versions of Firefox through the <a href="https://support.mozilla.org/en-US/kb/content-blocking">Content Blocking settings</a> (these steps will vary by version; the linked documentation includes a dropdown to select the appropriate Firefox version).</p> + +<h3 id="Report_Broken_Sites">Report Broken Sites</h3> + +<p>If you find a website broken as a result of this change, file a bug under the Tracking Protection component within the Firefox product on <a href="https://bugzilla.mozilla.org/enter_bug.cgi?assigned_to=nobody%40mozilla.org&blocked=1480137&bug_file_loc=http%3A%2F%2F&bug_ignored=0&bug_severity=normal&bug_status=NEW&cf_fx_iteration=---&cf_fx_points=---&cf_platform_rel=---&cf_status_firefox62=---&cf_status_firefox63=---&cf_status_firefox64=---&cf_status_firefox_esr60=---&cf_status_geckoview62=---&cf_tracking_firefox62=---&cf_tracking_firefox63=---&cf_tracking_firefox64=---&cf_tracking_firefox_esr60=---&cf_tracking_firefox_relnote=---&cf_tracking_geckoview62=---&component=Tracking%20Protection&contenttypemethod=list&contenttypeselection=text%2Fplain&defined_groups=1&flag_type-203=X&flag_type-37=X&flag_type-41=X&flag_type-5=X&flag_type-607=X&flag_type-721=X&flag_type-737=X&flag_type-748=X&flag_type-787=X&flag_type-799=X&flag_type-800=X&flag_type-803=X&flag_type-835=X&flag_type-846=X&flag_type-855=X&flag_type-864=X&flag_type-914=X&flag_type-916=X&flag_type-929=X&flag_type-930=X&flag_type-933=X&form_name=enter_bug&maketemplate=Remember%20values%20as%20bookmarkable%20template&op_sys=Unspecified&priority=--&product=Firefox&rep_platform=Unspecified&target_milestone=---&version=unspecified">Bugzilla</a>. Alternatively you can report broken sites directly in Firefox by clicking "Report a Problem" in the Content Blocking section of the <a href="https://support.mozilla.org/en-US/kb/control-center-site-privacy-and-security-firefox">Control Center</a> (this shortcut may not be available in all versions of Firefox).</p> + +<h2 id="Tracking_protection_explained">Tracking protection explained</h2> + +<p>How does Firefox determine which resources are tracking resources?</p> + +<p>Firefox uses the Tracking Protection list to determine which resources are tracking resources. The Tracking Protection list is <a href="https://github.com/disconnectme/disconnect-tracking-protection/issues">maintained by Disconnect</a>. When the list is applied in Firefox, we make two important changes:</p> + +<ul> + <li>First, we only use the "Basic Protection" version of the list, which <a href="https://github.com/mozilla-services/shavar-prod-lists#blacklist">excludes some categories of trackers</a>. In the future, we may expand our protections to use the "Strict Protection" version of the list.</li> + <li>Second, Firefox uses an additional "<a href="https://github.com/mozilla-services/shavar-prod-lists/blob/master/disconnect-entitylist.json">entity list</a>", which prevents <a href="https://github.com/mozilla-services/shavar-prod-lists#entity-list">domains from being classified as trackers when they are loaded on a top-level site owned by the same organization</a>.</li> +</ul> + +<p>Firefox uses the built-in <a href="https://support.mozilla.org/en-US/kb/tracking-protection">Tracking Protection</a> URL classifier to determine which resources match the tracking protection list. Domains are matched against the list in accordance with the <a href="https://developers.google.com/safe-browsing/v4/urls-hashing#suffixprefix-expressions">SafeBrowsing v4 specification</a>. Specifically, we check the exact hostname of the resource against the list, as well as the last four hostnames formed by starting with the last five components and successively removing the leading component. Consider the following examples:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Hostname on the list</th> + <th scope="col">Hostname of resource</th> + <th scope="col">Matched</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>example.com</code></td> + <td><code>example.com</code></td> + <td>Yes</td> + </tr> + <tr> + <td><code>example.com</code></td> + <td><code>a.b.example.com</code></td> + <td>Yes</td> + </tr> + <tr> + <td><code>blah.example.com</code></td> + <td><code>example.com</code></td> + <td>No</td> + </tr> + <tr> + <td><code>a.b.example.com</code></td> + <td><code>c.d.example.com</code></td> + <td>No</td> + </tr> + <tr> + <td><code>blah.example.com</code></td> + <td><code>foo.blah.example.com</code></td> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="What_does_the_storage_access_policy_block">What does the storage access policy block?</h2> + +<p>The storage access policy blocks resources identified as trackers from accessing their cookies and other site storage when they are loaded in a third-party context. This prevents those resources from retrieving tracking identifiers stored in cookies or site storage and using them to identify users across visits to multiple first parties. Specifically, Firefox does this by imposing the following restrictions:</p> + +<p>Cookies:</p> + +<ul> + <li>Block {{httpheader("Cookie")}} request headers and ignore {{httpheader("Set-Cookie")}} response headers.</li> + <li>Return an empty string for calls to {{domxref("Document.cookie")}} and ignore requests to set cookies via <code>Document.cookie</code>.</li> +</ul> + +<p>DOM Storage:</p> + +<ul> + <li><a href="/en-US/docs/Web/API/Web_Storage_API">localStorage</a>: <code><a href="/en-US/docs/Web/API/Window/localStorage">Window.localStorage</a></code>: read and write attempts throw a <code>SecurityError</code> exception. Prior to Firefox 70: <code><a href="/en-US/docs/Web/API/Window/localStorage">Window.localStorage</a></code> is <code>null</code>. Thus, attempts to read and write using this object will throw a <code>TypeError</code> exception.</li> + <li><a href="/en-US/docs/Web/API/Web_Storage_API">sessionStorage</a>: read and write attempts are permitted.</li> + <li><a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>: read and write attempts throw a <code>SecurityError</code> exception.</li> +</ul> + +<p>Messaging and Workers:</p> + +<ul> + <li><a href="/en-US/docs/Web/API/Broadcast_Channel_API">Broadcast Channel</a>: attempts to create a new {{domxref("BroadcastChannel")}} will throw a <code>SecurityError</code> exception.</li> + <li><a href="/en-US/docs/Web/API/Web_Workers_API">Shared Worker</a>: attempts to create a new {{domxref("SharedWorker")}} will throw a <code>SecurityError</code> exception.</li> + <li><a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker</a>: attempts to create a new {{domxref("ServiceWorker")}} will throw a <code>SecurityError</code> exception.</li> +</ul> + +<p>DOM Cache:</p> + +<ul> + <li>Calls to {{domxref("CacheStorage")}} will always reject with a <code>SecurityError</code>.</li> +</ul> + +<p>Browser caches:</p> + +<ul> + <li>The <a href="/en-US/docs/Mozilla/HTTP_cache">HTTP cache</a>, the Image cache, and the <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Alt-Svc">Alternative Services (Alt-Svc) cache</a> are all partitioned for tracking resources, such that each top-level origin will have a separate partition and tracking resources on different top-level origins will be cached separate from each other.</li> +</ul> + +<p>Network connections:</p> + +<ul> + <li><a href="https://wiki.mozilla.org/Security/Server_Side_TLS#Session_Resumption">TLS sessions</a> will not be resumed using a session ticket when an HTTPS connection is made to an embedded third-party resource that is classified as a tracker.</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Connection_management_in_HTTP_1.x#Persistent_connections">HTTP connection reuse</a> by domains classified as trackers is limited to requests that occur under the same top-level origin. For example, a request for content from tracker.example on news.example will not reuse an HTTP connection with a request for content from tracker.example on shopping.example or with requests that occur when tracker.example is visited directly (i.e., as a first party).</li> +</ul> + +<h3 id="What_is_not_blocked_by_the_policy">What is not blocked by the policy?</h3> + +<ol> + <li>This policy does not currently restrict third-party storage access for resources that are not classified as tracking resources. We may choose to apply additional restrictions to third-party storage access in the future.</li> + <li>The restrictions applied by the policy will not prevent third-party scripts classified as tracking resources from accessing storage in the main context of the page. These scripts can continue to use storage scoped to the top-level origin.</li> + <li>Origins classified as trackers will have access to their own storage when they are loaded in a first-party context.</li> + <li>Cross-origin resources loaded from the same eTLD+1 as the top-level context will still have access to their storage.</li> + <li>Origins normally classified as trackers will <a href="https://github.com/mozilla-services/shavar-prod-lists#entity-list">not be blocked if the top-level page origin is determined to be from the same organization as them</a>.</li> +</ol> + +<h2 id="Storage_access_grants">Storage access grants</h2> + +<p>In order to improve web compatibility and permit third-party integrations that require storage access, Firefox will grant storage access scoped to the first party for a particular third-party origin as described in this section. Currently, Firefox includes some web compatibility heuristics that grant storage access to third-party resources classified as trackers when a user interacts with those third parties. We do this when we expect that not granting access would cause the web page to break. We also support an initial implementation of the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Storage_Access_API">Storage Access API</a>, through which embedded {{htmlelement("iframe")}}s can request storage access by calling {{domxref("Document.requestStorageAccess()")}}. Although both of these approaches provide the same level of storage access, we recommend third parties switch to using the Storage Access API in order to guarantee their access to storage.</p> + +<h3 id="Automatic_storage_access_upon_interaction">Automatic storage access upon interaction</h3> + +<p>In order to improve web compatibility, Firefox currently includes some heuristics to grant storage access automatically to third parties that receive user interaction. These heuristics are intended to allow some third-party integrations that are common on the web to continue to function. They are intended to be temporary and will be removed in a future version of Firefox. They should not be relied upon for current and future web development.</p> + +<p>Third-party storage access may be granted to resources that have been classified as tracking resources when a user gesture triggers a pop-up window that has <a href="/en-US/docs/Web/API/Window/opener">opener access</a> to the originating document. When that occurs, there are two possible ways a third-party origin can be granted access:</p> + +<ul> + <li>The origin of the resource that is initially loaded in the pop-up window is granted storage access on the opener document if that origin has received user interaction as a first party within the past 30 days.</li> + <li>After the initial resource is loaded in the pop-up window, the window may go through a series of redirects to other hosts. If a user interacts with the pop-up window following a redirect, the origin of the content loaded in the pop-up window is given storage access on the opener document.</li> +</ul> + +<h3 id="Scope_of_storage_access">Scope of storage access</h3> + +<p>When storage access is granted, it is scoped to the origin of the opener document or subdomains of that origin. Access that is granted on the subdomain of an origin does not extend to the top-level origin. As an example, if a resource from <code>tracker.example</code> is granted storage access on <code>foo.example.com</code>, then <code>tracker.example</code> will be able to access its cookies on <code>bar.foo.example.com</code> but not <code>example.com</code>. Instead, if <code>tracker.example</code> were granted access on <code>example.com</code> it would be able to access its storage on <code>bar.foo.example.com</code>, <code>foo.example.com</code>, and <code>example.com</code>.</p> + +<p>When storage access is granted to <code>tracker.example</code> on <code>example.com</code>, all resources loaded from <code>tracker.example</code> on any top-level document loaded from <code>example.com</code> are immediately given storage access. This includes all resources loaded in the main context of the page, embedded <code><iframe></code>s, and resources loaded within embedded <code><iframe></code>s. Storage access is not extended to other resources loaded on <code>example.com</code> (e.g. <code>other-tracker.example</code>), nor to other first parties on which <code>tracker.example</code> is embedded (e.g. <code>example.org</code>).</p> + +<p>Storage access grants extend into the first level of nested contexts, but no further. This means that <code><iframe></code>s embedded in the main context of the page and loaded from a domain classified as a tracker will have full access to all storage locations accessible through JavaScript. Similarly, requests for resources loaded in <code><iframe></code>s embedded in the main context of the page will have access to HTTP cookies. However, further nested contexts, including but not limited to those from the origin classified as a tracker, will not be granted storage access.</p> + +<p>Consider the following embedding scenarios on a top-level page loaded from <code>example.com</code> on which <code>tracker.example</code> has been granted storage access.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Embedding</th> + <th scope="col">tracker.example resource storage access</th> + </tr> + </thead> + <tbody> + <tr> + <td>An image is loaded from <code>tracker.example</code> and embedded in the main context of <code>example.com</code>.</td> + <td>HTTP: Yes<br> + JS: N/A</td> + </tr> + <tr> + <td><code>example.com</code> embeds an <code><iframe></code> from <code>example.org</code>. That <code><iframe></code> goes on to load an image from <code>tracker.example</code>.</td> + <td>HTTP: Yes<br> + JS: N/A</td> + </tr> + <tr> + <td><code>example.com</code> embeds an <code><iframe></code> from <code>example.org</code>. That <code><iframe></code> goes on to embed an <code><iframe></code> from <code>tracker.example</code>.</td> + <td>HTTP: Yes<br> + JS: No</td> + </tr> + <tr> + <td><code>example.com</code> embeds an <code><iframe></code> from <code>tracker.example</code>.</td> + <td>HTTP: Yes<br> + JS: Yes</td> + </tr> + <tr> + <td><code>example.com</code> embeds an <code><iframe></code> from <code>example.com</code> (same origin). The nested <code><iframe></code> embeds an <code><iframe></code> from <code>tracker.example</code>.</td> + <td>HTTP: Yes<br> + JS: No</td> + </tr> + </tbody> +</table> + +<h3 id="Storage_access_expiration">Storage access expiration</h3> + +<p>The storage access grant expires after 30 days. Domains classified as tracking resources may be granted third-party storage access on multiple first parties, and the storage permission for each party expires independently. The above heuristics will also serve to extend the lifetime of a third-party storage permission on origins that have already been granted access. Each time the heuristic is activated, or a success call to the Storage Access API is made, the pre-existing storage access expiration will be extended by 30 days, counting from the time the previous access was granted.</p> + +<p>Please note that in the future we expect to make changes to how long storage access will remain valid for. As mentioned before, the way to know that you will be able to use storage as a third-party going forward will be using the Storage Access API.</p> + +<h2 id="Debugging">Debugging</h2> + +<p>We encourage site owners to test their sites, particularly those that rely on third-party content integrations. We’ve added several new features to Firefox to make testing easier.</p> + +<h3 id="Developer_Tools_notifications">Developer Tools notifications</h3> + +<p>The <a href="/en-US/docs/Tools/Network_Monitor">Network Monitor</a> in Firefox Developer Tools now includes an indicator for all resource requests that have been classified as tracking resources. This indicator is shown as a shield icon in the domain column. In the sample image below, <code>trackertest.org</code> is classified as a tracking resource, while the request to example.com is not.</p> + +<p><img alt="network requests in Firefox devtools indicating which ones are tracking resources with a small shield icon" src="https://mdn.mozillademos.org/files/16181/Screen_Shot_2018-09-21_at_10.34.22_AM.png" style="border-style: solid; border-width: 1px; display: block; height: 57px; margin: 0px auto; width: 600px;"></p> + +<h3 id="Adding_custom_domains_to_the_Tracking_Protection_list">Adding custom domains to the Tracking Protection list</h3> + +<p>Curious how things will work if a third-party domain on your site were classified as a tracker? We’ve added a preference that allows you to add custom domains to the Tracking Protection URL classifier. To do so:</p> + +<ol> + <li>Type <code>about:config</code> in your address bar. If you are presented with a page that warns you "This may void your warranty!", click "I accept the risk!"</li> + <li>Right click on the next page and click "New" > "String".</li> + <li>For the preference name enter "urlclassifier.trackingAnnotationTable.testEntries".</li> + <li>For the preference value enter comma separated origins that you’d like to have classified as trackers. E.g. "example.net,example.org".</li> +</ol> + +<div class="warning"> +<p><strong>Warning</strong>: Be sure to remove these entries after you have finished testing.</p> +</div> + +<h2 id="FAQ">FAQ</h2> + +<p>This cookie policy has the potential to lead to site breakage, but has been designed to allow common third-party integrations to continue to work while preventing cross-site tracking. In this section we describe the functionality you can expect in different integration scenarios.</p> + +<h3 id="Will_this_storage_access_policy_block_ads_from_displaying_on_my_website">Will this storage access policy block ads from displaying on my website?</h3> + +<p>No — this feature only restricts access to cookies and site data that can be used to track users across websites. Blocking tracking identifiers does not prevent the display of advertisements.</p> + +<h3 id="I_use_a_third-party_analytics_service_that_is_classified_as_a_tracker._Will_I_still_receive_analytics_data">I use a third-party analytics service that is classified as a tracker. Will I still receive analytics data?</h3> + +<p>This depends on how the third-party analytics service is implemented. Third-party analytics providers will no longer be able to user their third-party storage to collect data. This means that providers using cookies which are scoped to their third-party domain, or local storage and other site data stored under their origin, will no longer have access to those identifiers across other websites.</p> + +<p>If these services are embedded into the main context of the page, they can continue to use first-party cookies and site storage to track users across page visits on that specific first-party domain.</p> + +<h3 id="I_use_third-party_services_for_social_login_like_and_share_button_integration._Will_my_users_still_be_able_to_make_use_of_these_services">I use third-party services for social login, like, and share button integration. Will my users still be able to make use of these services?</h3> + +<p>This depends on how the social integration is implemented. We expect that many of the popular social integrations will continue to function as they do under Firefox’s current cookie policy with some minor differences in the user experience.</p> + +<p>A social content provider that is classified as a tracker will not have access to their third-party cookies when the user first visits a new first party. Thus, the user may appear logged out to the service despite being logged in when they visit the provider’s website directly. Depending on the type of integration, the user may have to take some action to interact with the social content provider before the provider is given access to their cookies. For example:</p> + +<ul> + <li>For social login, the user may have to click a login button on the first party.</li> + <li>For social like or share buttons, the user will have to first interact with the button in a logged-out state. Once they do, many social content providers will prompt them to log in.</li> +</ul> + +<p>After these interactions, the provider will receive third-party storage access if they prompt the user in a way that is captured by the storage access activation heuristics described above. These providers should consider switching to explicitly request storage access through the Storage Access API as soon as possible. An <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1469714">initial implementation of this API</a> is currently available in Nightly.</p> + +<h3 id="I_use_third-party_pixels_and_other_tools_to_measure_the_effectiveness_of_my_ad_campaigns._Will_I_still_be_able_to_measure_the_conversion_rate_of_my_ads">I use third-party pixels and other tools to measure the effectiveness of my ad campaigns. Will I still be able to measure the conversion rate of my ads?</h3> + +<p>This depends on how the third party has implemented the measurement tool, but generally ad conversion measurement will be more difficult. Consider the following examples:</p> + +<ol> + <li>You run an ad on a social media website that is seen several times by a user, but never clicked. That user later visits your website, which includes a conversion tracking tag from the same social media website. This type of conversion is often referred to as a “view-through conversion.” Since the social media website does not have access to their third-party storage, they will not recognize the user as the same user that saw the advertisements on their website and the conversion will not be tracked. We expect that most view-through conversion tracking techniques will no longer work, including those offered by display networks.</li> + <li>You run an ad on a display network or social media website that is clicked by a user. That user lands on your website, which includes a conversion tracking tag from the same website that displayed your ad. This type of conversion is often referred to as a “click-through conversion.” Since the social media site or display network will not have access to their third-party storage, they will not recognize the user as the same user that saw the advertisements on their website and the conversion will not be tracked. We expect that this version of click-through conversion will no longer work.</li> + <li>You run an ad that appears on a social media website. A user clicks on your advertisement and is taken to a landing page that contains a conversion tracking tag from the third-party network. On the social media website, the network annotates the advertisement landing page URL with a query parameter that signals that the visit was the result of a click on an advertisement. On your website, the display network’s tag checks the URL query parameters and saves any ad tracking parameters to first-party storage. If a user later completes a conversion event, the network’s tag checks first-party storage to determine which click (or clicks) was responsible for the visit. We expect that click-through conversion implemented in this way will continue to work.</li> +</ol> diff --git a/files/id/mozilla/firefox/releases/index.html b/files/id/mozilla/firefox/releases/index.html new file mode 100644 index 0000000000..af6a0b7c7a --- /dev/null +++ b/files/id/mozilla/firefox/releases/index.html @@ -0,0 +1,12 @@ +--- +title: Firefox developer release notes +slug: Mozilla/Firefox/Releases +tags: + - Firefox + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Firefox/Releases +--- +<div>{{FirefoxSidebar}}</div><p>Dibawah ini anda bisa menemukan link ke catatan rilis pengembang untuk setiap rilis Firefox. Catatan yang ditulis dengan cinta ini memberikan detail tentang fitur dan API yang ditambahkan dan di tingkatkan serta bug yang disingkirkan pada setiap versi Firefox. Semuanya ditulis untuk memberikan informasi yang diperlukan oleh pengembang. Terima kasih.</p> + +<div class="multiColumnList">{{ListSubpages("",1,1,1)}}</div> diff --git a/files/id/mozilla/gecko/index.html b/files/id/mozilla/gecko/index.html new file mode 100644 index 0000000000..a2fb0f60ab --- /dev/null +++ b/files/id/mozilla/gecko/index.html @@ -0,0 +1,69 @@ +--- +title: Gecko +slug: Mozilla/Gecko +translation_of: Mozilla/Gecko +--- +<div class="summary"> + <p><span class="seoSummary"><strong>Gecko</strong> adalah nama dari pengatur tata letak yang dikembangkan oleh Proyek Mozilla. It was originally named NGLayout. Gecko's function is to read web content, such as <a href="/en-US/docs/HTML" title="HTML">HTML</a>, <a href="/en-US/docs/CSS" title="CSS">CSS</a>, <a href="/en-US/docs/XUL" title="XUL">XUL</a>, <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>, and render it on the user's screen or print it. In XUL-based applications Gecko is used to render the application's user interface as well.</span></p> +</div> +<p>Gecko di gunakan di banyak aplikasi, termasuk beberapa peramban (browsers), contohnya Firefox, SeaMonkey, dll. (for a complete list, please refer to <a class="external" href="http://en.wikipedia.org/wiki/Gecko_%28layout_engine%29#Web_browsers" rel="external" title="http://en.wikipedia.org/wiki/Gecko_(layout_engine)#Web_browsers">Wikipedia's article on Gecko</a>.) Products using the same version of Gecko have identical support for standards.</p> +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Documentation">Documentation</h2> + <dl> + <dt> + <a href="/en-US/docs/Gecko_FAQ" title="Gecko_FAQ">Gecko FAQ</a></dt> + <dd> + Frequently asked questions about Gecko.</dd> + <dt> + <a href="/en-US/docs/Gecko_DOM_Reference" title="https://developer.mozilla.org/en-US/docs/Gecko_DOM_Reference">Gecko DOM reference</a></dt> + <dd> + Reference to the DOM.</dd> + <dt> + <a href="/en-US/docs/Gecko-Specific_DOM_Events" title="Gecko/Gecko event reference">Gecko event reference</a></dt> + <dd> + Reference to events used within Gecko and Mozilla applications; for web-standard DOM events, see the <a href="/en-US/docs/DOM/DOM_event_reference" title="DOM/DOM event reference">DOM event reference</a>.</dd> + <dt> + <a href="/en-US/docs/Gecko/Versions" title="Gecko/Versions">Gecko versions and application versions</a></dt> + <dd> + Versions of Gecko and the applications they're used in.</dd> + <dt> + <a class="external" href="/en-US/docs/Introduction_to_Layout_in_Mozilla" title="https://developer.mozilla.org/en-US/docs/Introduction_to_Layout_in_Mozilla">Introduction to Layout in Mozilla</a></dt> + <dd> + Tech Talk on layout.</dd> + <dt> + <a href="/en-US/docs/Embedding_Mozilla" title="Embedding_Mozilla">Embedding Mozilla</a></dt> + <dd> + Using Gecko in your own application.</dd> + <dt> + <a href="/en-US/docs/Character_Sets_Supported_by_Gecko" title="Character Sets Supported by Gecko">Character sets supported by Gecko</a></dt> + <dd> + A list of the character sets supported by Gecko.</dd> + <dt> + <a href="/en-US/docs/Gecko/HTML_parser_threading" title="Gecko/HTML_parser_threading">HTML parser threading</a></dt> + <dd> + Description of multithreading in the HTML parser.</dd> + <dt> + {{interwiki('wikimo', 'Gecko:Home_Page', 'Gecko Homepage on MozillaWiki')}}</dt> + <dd> + Home for the active developers. Roadmaps and more up-to-date resources.</dd> + </dl> + <p><span class="alllinks"><a href="/en-US/docs/tag/Gecko" title="tag/Gecko">View All...</a></span></p> + </td> + <td> + <h2 class="Community" id="Community">Community</h2> + <ul> + <li>View Mozilla forums... {{DiscussionList("dev-tech-layout", "mozilla.dev.tech.layout")}}</li> + </ul> + <h2 class="Related_Topics" id="Related_Topics">Related Topics</h2> + <dl> + <dd> + <a href="/en-US/docs/Web_Standards" title="Web_Standards">Web Standards</a>, <a href="/en-US/docs/XUL" title="XUL">XUL</a>, <a href="/en-US/docs/Embedding_Mozilla" title="Embedding_Mozilla">Embedding Mozilla</a>, <a href="/en-US/docs/Developer_Guide" title="Developing_Mozilla">Developing Mozilla</a></dd> + </dl> + </td> + </tr> + </tbody> +</table> +<p> </p> diff --git a/files/id/mozilla/index.html b/files/id/mozilla/index.html new file mode 100644 index 0000000000..ecbabce71c --- /dev/null +++ b/files/id/mozilla/index.html @@ -0,0 +1,13 @@ +--- +title: Mozilla +slug: Mozilla +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla +--- +<div> + {{draft}}</div> +<p>This will soon be an awesome landing page for Mozilla internals. For now, it's not.</p> +<div> + {{LandingPageListSubpages}}</div> diff --git a/files/id/mozilla/localization/index.html b/files/id/mozilla/localization/index.html new file mode 100644 index 0000000000..ea5809653c --- /dev/null +++ b/files/id/mozilla/localization/index.html @@ -0,0 +1,30 @@ +--- +title: Pelokalan di Mozilla +slug: Mozilla/Localization +tags: + - ButuhPenerjemahan + - Landing + - Localization + - Mozilla + - NeedsTranslation + - Pelokalan + - Pendaratan + - Penerjemahan + - RintisanTopik + - TopicStub + - Translation + - l10n +translation_of: Mozilla/Localization +--- +<p><span class="seoSummary"><strong>Pelokalan</strong> (L10n) adalah proses menerjemahkan antarmuka pengguna sebuah perangkat lunak dari satu bahasa ke bahasa yang lain, dan menyesuaikannya agar sesuai dengan kultur setempat. Semua sumber daya tersedia bagi siapa saja yang berminat dalam aspek teknis untuk terlibat dalam pelokalan, bagi para pengembang dan semua kontributor.</span></p> + +<h2 id="Lihat_pula">Lihat pula</h2> + +<dl> + <dt><a href="/id/docs/Project:MDN/Localizing" title="/en-US/docs/Project:MDN/Localizing">Pelokalan MDN</a></dt> + <dd>Sumber daya ini mencakup pelokalan dokumentasi di MDN.</dd> + <dt><a href="/id/Apps/Build/Localization">Pelokalan aplikasi</a></dt> + <dd>Kumpulan dokumen ini secara khusus digunakan untuk pelokalan aplikasi, termasuk aplikasi Firefox OS.</dd> + <dt><a href="/en-US/docs/Web/API/L10n">L10n</a></dt> + <dd>Dokumen referensi untuk API L10n yang digunakan Mozilla dalam pelokalan Firefox OS.</dd> +</dl> diff --git a/files/id/mozilla/localization/localizing_with_verbatim/index.html b/files/id/mozilla/localization/localizing_with_verbatim/index.html new file mode 100644 index 0000000000..14e7d665b6 --- /dev/null +++ b/files/id/mozilla/localization/localizing_with_verbatim/index.html @@ -0,0 +1,158 @@ +--- +title: Pelokalan dengan Verbatim +slug: Mozilla/Localization/Localizing_with_Verbatim +translation_of: Mozilla/Localization/Localizing_with_Pontoon +--- +<p><span class="seoSummary">Verbatim adalah suatu alat berbasis web (khususnya Pootle yang dihosting Mozilla) untuk melokalkan konten web Mozilla. Alat tersebut dapat digunakan untuk melokalkan berbagai proyek Mozilla dan mampu mendukung bahasa apa saja. Panduan ini akan membantu Anda melakukan pelokalan proyek Mozilla pada umumnya.</span> Tutorial yang disediakan di sini akan memberi Anda landasan yang bermanfaat dalam penggunaan Verbatim untuk melokalkan setiap proyek Mozilla yang ingin Anda ikut sertakan dalam upaya komunitas pelokalan Anda. Kita akan membahas proyek-proyek khusus yang sedang menggunakan Verbatim, cara untuk mulai menggunakan Verbatim, dan pekerjaan-pekerjaan yang umumnya dapat diselesaikan dengan Verbatim.</p> + +<h2 id="Mulai_menggunakan_Verbatim">Mulai menggunakan Verbatim</h2> + +<p>Being that it is web-based, localizers must be online to use Verbatim. There are essentially two ways to get started with Verbatim: start a new localization or join an existing localization community's efforts. Either way, you will need to follow these steps to start working on a Verbatim project.</p> + +<table style="border-color: #000000; border-style: solid; width: 100%;"> + <thead> + <tr style="text-align: center;"> + <th scope="col" style="text-align: center;"><strong>Start a new localization on Verbatim</strong></th> + <th scope="col" style="text-align: center;"><strong>Join an existing localization on Verbatim</strong></th> + </tr> + </thead> + <tbody> + <tr> + <td> + <ol> + <li>Point your browser to <a class="external" href="http://localize.mozilla.org/">http://localize.mozilla.org</a>. This is where Verbatim is hosted.</li> + </ol> + </td> + <td> + <ol> + <li>Point your browser to <a class="external" href="http://localize.mozilla.org/">http://localize.mozilla.org</a>. This is where Verbatim is hosted.</li> + </ol> + </td> + </tr> + <tr> + <td> + <ol start="2"> + <li>If you have a Mozilla LDAP account, simply sign in using your LDAP credentials. If not, register for an account and sign in once you've completed registration. The links for both are located in the upper right-hand corner of the page.</li> + </ol> + </td> + <td> + <ol start="2"> + <li>If you have a Mozilla LDAP account, simply sign in using your LDAP credentials. If not, register for an account and sign in once you've completed registration. The links for both are located in the upper right-hand corner of the page.</li> + </ol> + </td> + </tr> + <tr> + <td> + <ol start="3"> + <li>File a <a class="link-https" href="https://bugzilla.mozilla.org/enter_bug.cgi?alias=&assigned_to=nobody%40mozilla.org&blocked=&bug_file_loc=https%3A%2F%2Flocalize.mozilla.org%2F&bug_severity=normal&bug_status=NEW&cf_blocking_191=---&cf_blocking_192=---&cf_status_191=---&cf_status_192=---&cf_status_firefox10=---&cf_status_firefox11=---&cf_status_firefox8=---&cf_status_firefox9=---&cf_tracking_firefox10=---&cf_tracking_firefox11=---&cf_tracking_firefox8=---&cf_tracking_firefox9=---&comment=I%20would%20like%20to%20request%20that%20you%20add%20the%20%5Binsert%20your%20locale%20code%20here%5D%20as%20a%20new%20localization%20in%20Verbatim.%0D%0A%0D%0A%5BAdd%20any%20other%20comments%20you%20may%20have%20here.%5D&component=Verbatim&contenttypeentry=&contenttypemethod=autodetect&contenttypeselection=text%2Fplain&data=&defined_groups=1&dependson=&description=&flag_type-4=X&flag_type-607=X&form_name=enter_bug&keywords=&maketemplate=Remember%20values%20as%20bookmarkable%20template&op_sys=All&priority=--&product=Webtools&qa_contact=verbatim%40webtools.bugs&rep_platform=All&requestee_type-325=&requestee_type-4=&requestee_type-607=&short_desc=Request%20for%20new%20localization%20on%20Verbatim&status_whiteboard=&target_milestone=---&version=Trunk" title="https://bugzilla.mozilla.org/enter_bug.cgi?alias=&assigned_to=nobody%40mozilla.org&blocked=&bug_file_loc=https%3A%2F%2Flocalize.mozilla.org%2F&bug_severity=normal&bug_status=NEW&cf_blocking_191=---&cf_blocking_192=---&cf_status_191=---&cf_status_192=---&cf_status_firefox10=---&cf_status_firefox11=---&cf_status_firefox8=---&cf_status_firefox9=---&cf_tracking_firefox10=---&cf_tracking_firefox11=---&cf_tracking_firefox8=---&cf_tracking_firefox9=---&comment=I%20would%20like%20to%20request%20that%20you%20add%20the%20%5Binsert%20your%20locale%20code%20here%5D%20as%20a%20new%20localization%20in%20Verbatim.%0D%0A%0D%0A%5BAdd%20any%20other%20comments%20you%20may%20have%20here.%5D&component=Verbatim&contenttypeentry=&contenttypemethod=autodetect&contenttypeselection=text%2Fplain&data=&defined_groups=1&dependson=&description=&flag_type-4=X&flag_type-607=X&form_name=enter_bug&keywords=&maketemplate=Remember%20values%20as%20bookmarkable%20template&op_sys=All&priority=--&product=Webtools&qa_contact=verbatim%40webtools.bugs&rep_platform=All&requestee_type-325=&requestee_type-4=&requestee_type-607=&short_desc=Request%20for%20new%20localization%20on%20Verbatim&status_whiteboard=&target_milestone=---&version=Trunk">bug</a> using this prefilled bugzilla template. Add your locale code and language name to the description field, as well as any other information you'd like to share. See the following example.</li> + </ol> + + <div class="note"><strong>Example</strong>: I would like to request that you add the <em><strong>en-US</strong></em> as a new localization in Verbatim. The langauge is <em><strong>English</strong></em>. Also, I like cookies. Lots and lots of cookies. I can easily be motivated by any and all baked goods.</div> + </td> + <td> + <ol start="3"> + <li><a class="link-https" href="https://wiki.mozilla.org/Category:L10n_Teams" title="https://wiki.mozilla.org/Category:L10n_Teams">Contact the community</a> to find out which projects they need you to concentrate your efforts on. See the following example for what you could include in your email to the community leaders.</li> + </ol> + + <div class="note"><strong>Example</strong>: I would like to join your localization efforts on Verbatim for this locale. Where would be the best place for me to begin? Also, I would like to buy you a drink to encourage you to let me join the team!</div> + </td> + </tr> + </tbody> +</table> + +<p>Now that you're registered and logged in, we'll outline the general translation workflow, using the <a class="link-https" href="https://localize.mozilla.org/projects/mdn" title="https://localize.mozilla.org/projects/mdn/">MDN project page</a> as our example.</p> + +<h2 id="Translating">Translating</h2> + +<p>First thing's first, you need to find untranslated source strings to translate.</p> + +<ol> + <li>Navigate to the <a class="link-https" href="https://localize.mozilla.org/projects/mdn" title="https://localize.mozilla.org/projects/mdn/">MDN project page</a>.</li> + <li>Select your language from the <strong>Overview</strong> tab.</li> + <li>Now click on the the <strong>Translate</strong> tab. This tab will display the directories for the MDN user interface.</li> + <li>Select the <strong>LC Messages</strong> directory. This is where the project's <code>.po</code> files containing translatable strings are located. You will now see an overview of each <code>.po</code> file.</li> + <li>In the summary column, the number of words untranslated will be shown as a link. Click on that link to be taken directly to the first string that needs to be translated.</li> +</ol> + +<p>Now you're ready to contribute translations and you won't believe how easy it is. Check it out, you can contribute translations in two simple steps:</p> + +<ol> + <li>Simply type your translation in the box to below the English string</li> + <li>Select <strong>Suggest</strong>. If you have approval permission, select <strong>Submit</strong>. You will then be taken to the next string that needs translating.</li> + <li>Hooray! You're translating! Repeat steps one and two for the remainder of the untranslated strings.</li> +</ol> + +<div class="note"><strong>Note</strong>: If you come across a string that already has a suggested translation, you can still suggest your own translation if you feel it is more accurate.</div> + +<h3 id="Some_extra_cool_features_on_Verbatim">Some extra cool features on Verbatim</h3> + +<p>Here are a few additional items about the Verbatim interface that you should be aware of. Some of these can be seen in the screen shot below.</p> + +<p><a href="/@api/deki/files/5930/=Translate_Tab.png" title="Translate Tab.png"><img alt="Translate Tab.png" class="default internal" src="/@api/deki/files/5930/=Translate_Tab.png" style="height: 221px; width: 1113px;"></a></p> + +<ul> + <li>You can copy the English string over to the translation box by clicking the <strong>Copy</strong> icon.</li> + <li>You can use machine translation by clicking on the <strong>Google Translate</strong> icon.</li> + <li>You can move forward and back through the strings by clicking the <strong>Next</strong> and <strong>Previous</strong> buttons.</li> + <li>You can navigate directly to a particular string by clicking it's string number on the far left.</li> + <li>You can mark a translation as <strong>Fuzzy</strong> if you think there could be a better way to say something. This will mark it so it can be found and updated later. Remember that only submitted strings will be commited to the localization's repository, not fuzzy strings. If strings remain marked as fuzzy, the source string will appear in your localized version instead of a translated string.</li> + <li>You can add notes about a particular string in the <strong>Translator Comments</strong> section.</li> + <li>When translating a string with both singular and plural forms you will see two boxes on the right hand side. The box for the singular form is labeled <strong>Plural Form 0</strong> and the box for the plural form is labeled <strong>Plural Form 1</strong>.</li> +</ul> + +<h2 id="Additional_tasks">Additional tasks</h2> + +<p>If you are a localizer with approval priviledges, here are a few more tasks that you should be aware of.</p> + +<h3 id="Review_suggested_translations">Review suggested translations</h3> + +<ol start="1"> + <li>Click on the <strong>Review</strong> tab. It will show how many strings are waiting for review for each <code>.po</code> file.<a href="/@api/deki/files/5931/=Review_Tab1.png" title="Review Tab1.png"><img alt="Review Tab1.png" class="internal rwrap" src="/@api/deki/files/5931/=Review_Tab1.png?size=webview" style="float: right; height: 145px; width: 274px;"></a></li> + <li>Select <strong style="font-weight: bold;">Review</strong><strong> suggestions</strong> to start approving suggestions. It will take you to the first string that needs to be reviewed.</li> + <li>You can accept the suggestion by clicking the green checkmark or reject the suggestion by clicking the red X (see the screen shot from the previous section).</li> +</ol> + +<p>It is important to note that <em>only</em> submitted strings will appear in your localized pages. Neither suggestions nor fuzzy strings will appear. Before commiting your final localized product, make sure all strings have been submitted.</p> + +<h3 id="Using_VCS_on_Verbatim">Using VCS on Verbatim</h3> + +<p>VCS (<strong>V</strong>ersion <strong>C</strong>ontrol <strong>S</strong>ystem) is the repository system we use to update the project's strings as well as push your translated content onto the web. The difference between the two tasks is simply a matter of which link to click.</p> + +<p><img alt="VCS.png" class="internal rwrap" src="/@api/deki/files/5925/=VCS.png" style="float: right;">To push your strings onto the web and see your changes, simply select the <strong>Commit to VCS</strong> link underneath each file name. It usually takes about an hour before you can see your changes on the project site.</p> + +<p>To update your <code>.po</code> files with new untranslated strings, simple select the <strong>Update from VCS</strong> link underneath each file name.</p> + +<p> </p> + +<div class="note"><br> +<strong>Note</strong>: Some projects are automatically updated nightly while others require you to manually update them to receive new source content. Be sure to pay close attention to this, as it can alter your workflow.</div> + +<h2 id="Translating_Verbatim_files_with_an_external_application">Translating Verbatim files with an external application</h2> + +<p>While in the <strong>Translate</strong> tab, you have the option to export the <code>.po </code>and <code>.xliff</code> files and translate the strings with an external application (i.e., a text editor or translation memory tool).</p> + +<ol> + <li>To download the <code>.po</code> file, select the <strong>Download</strong> link found underneath each file name. To download the .<code>xliff</code> file, select the <strong>Download XLIFF</strong> link.</li> + <li>Proceed to translate the strings using your selected tool.</li> +</ol> + +<p>Once you've finished your translations, you'll need to upload your file to Verbatim. You can do this from the <strong>Translate</strong> tab.</p> + +<ol> + <li>Navigate to the bottom of the files list to the <strong>Upload File</strong> section.</li> + <li>Click on the <strong>Browse</strong> button and select the file you wish to upload.</li> + <li>Select an upload setting from the options provided.</li> + <li>Once your upload setting has been selected, click <strong>Upload</strong>.</li> +</ol> + +<div class="warning"> +<p class="warning"><strong>Important</strong>: There have been some problems in the past with community members updating their source strings while others are in the process of localizing the previous updated files. This can cause community members to overlook new source strings, producing untranslated strings in a localized project. Be sure to coordinate these manual updates within your community to avoid this problem.</p> +</div> + +<h2 id="You're_ready_to_go!">You're ready to go!</h2> + +<p>Whew! You've arrived at the end! Time to take what you've learned and put it to good use spreading Mozilla to everyone in your region. Have fun and <a class="link-mailto" href="mailto:l10n-drivers@mozilla.com" title="l10n-drivers@mozilla.com">let us know</a> if you run into any difficulties. We'll be happy to help in any way we can.</p> + +<p> </p> + +<p><a href="/en/Localization_Quick_Start_Guide:_Translation" title="Localization Quick Start Guide: Translation">Back: Quick Start Guide</a></p> diff --git a/files/id/mozilla/localization/quick_start_guide/index.html b/files/id/mozilla/localization/quick_start_guide/index.html new file mode 100644 index 0000000000..216207c9c4 --- /dev/null +++ b/files/id/mozilla/localization/quick_start_guide/index.html @@ -0,0 +1,50 @@ +--- +title: Panduan memulai cepat pelokalan +slug: Mozilla/Localization/Quick_start_guide +tags: + - ButuhPenerjemahan + - Guide + - Localization + - Mozilla + - NeedsTranslation + - Panduan + - Pelokalan + - Penerjemahan + - RintisanTopik + - TopicStub + - Translation +translation_of: Mozilla/Localization/Quick_start_guide +--- +<p>Selamat datang di pelokalan Mozilla (singkatnya L10n)!</p> + +<p>Entah Anda berada di sini untuk memulai pelokalan Anda sendiri dalam proyek Mozilla ataupun untuk bergabung dalam upaya pelokalan yang sedang berlangsung, Anda datang ke tempat yang tepat! <span class="seoSummary">Panduan ini memuat semua informasi dasar dan teknis yang Anda perlukan untuk terlibat dalam program L10n Mozilla.</span> Kami akan menunjukkan kepada Anda langkah-langkah untuk memulainya, dari pengaturan awal hingga pengetesan dan perilisan pelokalan Anda sendiri. Dalam prosesnya, Anda akan mempelajari berbagai proyek yang di dalamnya Anda dapat berkontribusi dan semua alat yang digunakan untuk pelokalan.</p> + +<p>Bilamana kita berhadapan dengan kasus-kasus khusus, kita mengambilnya dari proyek Firefox sebagai proyek yang paling banyak dilakukan pelokalan di Mozilla. Dan ketika Anda hampir menyelesaikan panduan ini, Anda seharusnya mampu melakukan perubahan pada pengaturan lokal Firefox Anda dan menyaksikan perubahan pada antarmukanya. Akhir kata, setelah Anda menyelesaikan panduan ini, Anda akan memiliki semua alat yang diperlukan untuk mulai berkontribusi!</p> + +<p>Ingat, panduan ini hanya memuat instruksi seputar aspek teknis L10n Mozilla saja. Kunjungi halaman <a class="link-https" href="https://wiki.mozilla.org/L10n:Localization_Process" title="https://wiki.mozilla.org/L10n:Overview">Proses L10n</a> untuk mempelajari keseluruhan prosesnya.</p> + +<div style="width: 25%; background-color: #4AA02C; float: left; display: block; margin: 1.5%; border: 1px solid #C4C295; text-align: center; padding: 2.5%; padding-top: 0px;"> +<h2 id="Pengaturan_awal"><a href="/id/docs/Mozilla/Localization/Quick_start_guide/Initial_setup" title="id/Localization_Quick_Start_Guide/Initial_setup">Pengaturan awal</a></h2> +Persiapan teknis sebelum melakukan pelokalan.</div> + +<div style="width: 25%; background-color: #A2BFF4; float: left; display: block; margin: 1.5%; border: 1px solid #C4C295; text-align: center; padding: 2.5%; padding-top: 0px;"> +<h2 id="Tahap_penerjemahan"><a href="/en-US/docs/Mozilla/Localization/Quick_start_guide/Translation_phase" title="id/Localization_Quick_Start_Guide/Translation_phase">Tahap penerjemahan</a></h2> +Tutorial penggunaan alat L10n untuk penerjemahan.</div> + +<div style="width: 25%; background-color: orange; float: left; display: block; margin: 1.5%; border: 1px solid #C4C295; text-align: center; padding: 2.5%; padding-top: 0px;"> +<h2 id="Tahap_QA"><a href="/id/docs/Mozilla/Localization/Quick_start_guide/QA_phase" title="id/Localization_Quick_Start_Guide/QA_phase">Tahap QA</a></h2> +Tutorial pengetesan L10n.</div> + +<div style="width: 92%; background-color: #C0C0C0; float: left; display: block; margin: 1.5%; border: 1px solid #C4C295; text-align: center; padding: 2.5%; padding-top: 0px;"> +<h2 id="Tahap_perilisan"><a href="/id/docs/Mozilla/Localization/Quick_start_guide/Release_phase" title="id/Localization_Quick_Start_Guide/Release_phase">Tahap perilisan</a></h2> +Langkah-langkah mengirimkan pekerjaan pelokalan Anda.</div> + +<div style="background-color: white; border: 3px solid; display: block; padding: 20px; margin-top: 20px;">Keempat tahap ini merupakan sisi teknis dari program L10n. Untuk mempelajari lebih lanjut tentang semua ini, silakan klik salah satu tautan di atas. Untuk mendapatkan gambaran besarnya, kami sarankan Anda memulai dengan boks hijau dan melanjutkannya secara bertahap.</div> + +<p> </p> + +<div class="note"><strong>Note</strong>: This guide is written for two types of contributors: those starting a new localization and those joining an existing localization. It is important to know which information applies to which type of contributor. To help you filter through to the most applicable information, note that all information that is unique to those starting a new localization will be in <span style="color: #daa520;">orange font</span>. All information that is unique to those joining an existing localization will be in <span style="color: #0000ff;">blue font</span>.</div> + +<p class="note"> </p> + +<p>{{ Next("Localization_Quick_Start_Guide/Initial_setup") }}</p> diff --git a/files/id/mozilla/localization/quick_start_guide/qa_phase/index.html b/files/id/mozilla/localization/quick_start_guide/qa_phase/index.html new file mode 100644 index 0000000000..0ee69f43e4 --- /dev/null +++ b/files/id/mozilla/localization/quick_start_guide/qa_phase/index.html @@ -0,0 +1,197 @@ +--- +title: Tahap QA +slug: Mozilla/Localization/Quick_start_guide/QA_phase +translation_of: Mozilla/Localization/Quick_start_guide/QA_phase +--- +<p>Setelah hasil kerja keras anda dalam melokalisasi kami yakin bahwa anda tidak hanya ingin melihat hasil kerja anda tapi juga ingin memastikan bahwa itu tepat! Jika anda tidak begitu awam dengan kode, anda pasti khawatir akan merusak sesuatu (oops!). Sekarang kami akan menuntun anda melakukan test kualitas pekerjaan anda untuk memastikan anda berada di jalur yang tepat.</p> + +<p>Jika anda melokalisasi halaman Mozilla, hasil pekerjaan anda akan ditampilkan<strong> </strong>segera setelah anda menyelesaikannya tanpa membutuhkan paket bahasa. Seperti halnya kasus ini, bagian dari pedoman ini tidak sepenuhnya dapat di aplikasikan oleh anda. Silahkan tekan tombol <strong>Next </strong>pada bagian paling bawah laman jika anda ingin melewati.</p> + +<p>Untuk melihat hasil pekerjaan anda di Firefox (atau dalam aplikasi Mozilla yang lain), anda butuh paket bahasa yang terinstal pada direktori anda.</p> + +<h2 id="Manual_automated_builds">Manual & automated builds</h2> + +<p>Dengan menekan tombol, beberapa alat L10n (seperti Narro and Koala) secara otomatis membuat paket bahasa untuk anda. Jika anda menggunakan salah satu dari alat tersebut, silahkan menuju ke bagian <a href="https://developer.mozilla.org/en/Localization_Quick_Start_Guide:_QA#Seeing_your_work">Melihat pekerjaan anda</a>, Sekarang mari menuju ke pembuatan paket bahasa anda sendiri secara manual.</p> + +<div class="note"><strong>Note</strong>: Remember all of those pre-requisite tools we asked you to install in the <a href="/en/Localization_Quick_Start_Guide#Local_environment_tools" title="https://developer.mozilla.org/en/Localization_Quick_Start_Guide#Local_environment_tools">initial setup</a>? Here's where you'll need almost all of them. If you haven't installed them yet, <em>now</em> is the time to do it.</div> + +<h3 id="Persiapan">Persiapan</h3> + +<p>Kita akan menggunakan file direktori berikut sebagai contoh:</p> + +<pre style="margin-left: 40px;">your working directory <em>(root)/</em> + mozilla-aurora <em>(en-US source, pulled from <a class="external" href="http://hg.mozilla.org/releases/mozilla-aurora" rel="external" title="http://hg.mozilla.org/releases/mozilla-aurora">http://hg.mozilla.org/releases/mozilla-aurora</a></em> <em>)</em>/ + l10n-central <em>(directory for L10n directories, one per L10n; often referred to as "l10n base")/</em> + your-locale-code <em>(a directory with your L10n files, in this example we'll use x-testing)</em> + +<strong>Example</strong>: <code>root/mozilla-aurora</code> & <code>root/l10n-central/x-testing</code> +</pre> + +<p>Additionally, you will need to c</p> + +<p>Please either follow the above structure closely or adjust the commands below according to your custom setup.</p> + +<p>To copy this file to the appropriate directory, do the following:</p> + +<ol> + <li>Navigate to your working directory from your command-line terminal (i.e., where you created the folder structure described above).</li> + <li>Enter the following commands:</li> +</ol> + +<pre style="margin-left: 40px;">mkdir -p l10n-central/x-testing/toolkit/ + +cp mozilla-aurora/toolkit/locales/en-US/defines.inc l10n-central/x-testing/toolkit/defines.inc +</pre> + +<p>Tah-dah! Copied!</p> + +<p>Finally, you will need a file called <code>.mozconfig</code> to proceed with manual builds. This file contains the necessary build instructions.</p> + +<p>To create and configure this file, follow these instructions:</p> + +<ol> + <li>Update the Mozilla source code:</li> +</ol> + +<p style="margin-left: 40px;"><code>$ cd mozilla-aurora<br> + $ hg pull -u</code></p> + +<ol start="2" style="list-style-type: decimal;"> + <li>Enter the following command to create the <code>.mozconfig</code> file: <code>$ nano -w .mozconfig</code></li> + <li>Enter the following lines in your <code>.mozconfig</code> file:</li> +</ol> + +<pre style="margin-left: 40px;">mk_add_options MOZ_OBJDIR=@TOPSRCDIR@/../firefox-build +ac_add_options --disable-compile-environment +ac_add_options --with-l10n-base=../l10n-central # path relative to MOZ_OBJDIR +ac_add_options --enable-application=[<em>browser or mail</em>] +</pre> + +<p style="margin-left: 40px;">You will need to specify which application you're localizing in the fourth line (e.g., for Firefox, that's <code>browser</code>, Thunderbird would be <code>mail</code>).</p> + +<ol start="4" style="list-style-type: decimal;"> + <li>Enter the following command to perform the configuration: <code>$ mach configure</code></li> + <li>Once your command-line finishes spitting out the config command's output, navigate to the newy created directory:<code> $ cd ../firefox-build/browser/locales</code></li> +</ol> + +<p>Now you're ready to build! At this point you can choose between two build options. You can either:</p> + +<ul> + <li><a href="/en/Creating_a_Language_Pack#Creating_a_langpack" title="https://developer.mozilla.org/en/Creating_a_Language_Pack#Creating_a_langpack">Create a langpack</a>, which is installed <em>on top of</em> your Mozilla application, or</li> + <li><a href="/en/Creating_a_Language_Pack#L10n_binary_repack" title="https://developer.mozilla.org/en/Creating_a_Language_Pack#L10n_binary_repack">Repack the application's binary</a> (aka, a L10n repack), which allows you to install <em>next</em> to your existing Mozilla application installation and use separately.</li> +</ul> + +<p>Visit the links above to learn how to make these testing builds.</p> + +<h2 id="Testing_your_L10n_seeing_your_work">Testing your L10n & seeing your work</h2> + +<p>Now that you have your langpack or L10n repack, let's discuss seeing your work and testing it in the application.</p> + +<p>Testing the langpack will put you one step closer to having your localization added to the L10n releases. Follow the steps below to test your localization:</p> + +<ol> + <li>Install Aurora in your preferred language.</li> + <li>Install the <code>.xpi</code> langpack you just created (or exported).</li> + <li>Set your language using the Quick Locale Switcher or Locale Switcher add-ons by navigating to Tools->Language->Your localization's language code.</li> + <li>Restart your browser and start testing!</li> +</ol> + +<p>Now you should be able to see all of your work up to this point. Click <a class="link-https" href="https://wiki.mozilla.org/MozillaQualityAssurance:l10n_checklist" title="https://wiki.mozilla.org/MozillaQualityAssurance:l10n_checklist">here</a> for guidelines on how to test your localization.</p> + +<h2 id="Don't_lose_your_work!">Don't lose your work!</h2> + +<p>You're work is <em>SO</em> important! We would really hate to see you lose any of it. After you test your localization, you should send it to a remote repository, which will serve as a backup for your work and will let others follow your progress. We're going to go through the process below.</p> + +<p>The official localization teams use repositories at <a class="external" href="http://hg.mozilla.org/" rel="external" title="http://hg.mozilla.org/">hg.mozilla.org</a>. Before a team becomes official, we like to get the localizers comfortable with the Hg commands that allow for cloning, pulling, committing, and pushing work to an experimental repository. We use a web service called <a class="external" href="http://www.bitbucket.org/" rel="external" title="http://www.bitbucket.org/">Bit Bucket</a> to start the learning process.</p> + +<div class="note"><strong>Note</strong>: You must have Mercurial configured before you begin. That step is back on the initial setup page. If you haven't done that yet, don't worry, we'll wait for you!</div> + +<h3 class="note" id="Pushing_to_your_repository">Pushing to your repository</h3> + +<p>There are a couple of things you should take note of before you push to your repository:</p> + +<ul> + <li>Make sure that your files have been encoded in Unicode without BOM (byte order mark).</li> + <li>Remember that here you are pushing an entire directory, not a <code>.zip</code> archive file or an <code>.xpi</code> lang pack.</li> +</ul> + +<p>The instructions below will help you learn how to use your Hg repository.</p> + +<ol> + <li><span style="color: #daa520;">After your new repository is created by the l10n-drivers</span>, please visit the URL for your repo. We'll use x-testing here for our example. You can do this by entering the following URL into your browser: <code><a class="external" href="http://hg.mozilla.org/l10n-central/x-testing" rel="freelink">http://hg.mozilla.org/l10n-central/x-testing</a></code></li> + <li>Now, navigate to your locale's directory on your local machine.</li> +</ol> + +<p style="margin-left: 40px;">If you're using Koala, this should be located at <code>/path/to/your/koala.project/locale/3.6/x-testing</code>, otherwise, it should be located at <code>/path/to/your/working_dir/l10n_base/x-testing</code>.</p> + +<p style="margin-left: 40px;">In this directory, you should have an hg repository. You might have created it yourself by running <code>hg init</code> or <code>hg clone</code> or you might have had it created by Koala when you were setting up a new localization project. Also at this point, you shouldn't have any uncommitted changes (i.e., running the <code>hg status </code>command should show nothing). Let's see what the last revision in this repository is.</p> + +<ol start="3" style="list-style-type: decimal;"> + <li style="">Enter the following command: <code>$ hg log -l 1</code></li> +</ol> + +<p style="margin-left: 40px;">You should see an output similar to the one below:</p> + +<pre style="margin-left: 40px;">changeset: 0:7c543e8f3a6a +tag: tip +user: Your Name <email@example.com> +date: Mon Nov 23 18:08:25 2009 +0100 +summary: Added search bar strings +</pre> + +<ol start="4" style="list-style-type: decimal;"> + <li>Now compare the local repository on your machine with the remote Hg repository by entering this command: <code>$ hg outgoing <a class="external" href="http://hg.mozilla.org/l10n-central/x-testing" rel="freelink">http://hg.mozilla.org/l10n-central/x-testing</a></code></li> +</ol> + +<p style="margin-left: 40px;">The <code>hg outgoing</code> command compares the two repositories and lists all changesets that are present locally, but not in the remote repository. These changesets will need to be "pushed" to the remote repository. You can expect to see output like this:</p> + +<pre style="margin-left: 40px;">comparing with http://hg.mozilla.org/l10n-central/x-testing +searching for changes + +changeset: 0:7c543e8f3a6a +tag: tip +user: Your Name <email@example.com> +date: Mon Nov 23 18:08:25 2009 +0100 +summary: Added search bar strings +</pre> + +<ol start="5" style="list-style-type: decimal;"> + <li>Let's now push this changeset. Enter the following command:<code> hg push <a class="external" href="http://hg.mozilla.org/l10n-central/x-testing" rel="freelink">http://hg.mozilla.org/l10n-central/x-testing</a></code></li> + <li>Mercurial will connect to your repo and ask you to provide your account information (i.e., the username and the password).</li> +</ol> + +<pre style="margin-left: 40px;">real URL is http://hg.mozilla.org/l10n-central/x-testing +pushing to http://hg.mozilla.org/l10n-central/x-testing +searching for changes +http authorization required +realm: hg.mozilla.org HTTP +user: your_id +password: +</pre> + +<p style="margin-left: 40px;">After you enter your account information, the changeset will be pushed.</p> + +<pre style="margin-left: 40px;">adding changesets +adding manifests +adding file changes +added 1 changesets with 2 changes to 2 files +bb/acl: your_id is allowed. accepted payload. +quota: 979.7 KB in use, 150.0 MB available (0.64% used) +</pre> + +<p>Your changeset has been successfully pushed to your repository!</p> + +<p>As you begin to move through your translations, you should <code>commit</code> the changes locally and <code>push</code> your work to this experimental repository. For instance, if you have finished translating all the <code>.dtd</code> and <code>.properties</code> files in your <code>x-testing/browser/chrome/browser/</code> directory, then you should run these commands:</p> + +<pre style="">$ hg status +$ hg commit -m "Translated browser/chrome/browser/" +$ hg outgoing +$ hg push http://hg.mozilla.org/l10n-central/x-testing</pre> + +<p>Note that due to the distributed nature of Hg, <code>hg commit</code> saves the changes locally (i.e., in your computer's Hg repository). You can see the history of commits with <code>hg log</code>. After doing <code>hg commit</code>, you still need to send the changes to the remote repository. This is where <code>hg push</code> comes in. This sends your commits to the remote repository.</p> + +<p>Now you're ready to proceed to the release phase!</p> + +<p> </p> + +<p>{{ PreviousNext("Localization_Quick_Start_Guide/Translation_phase", "Localization_Quick_Start_Guide/Release_phase") }}</p> diff --git a/files/id/mozilla/localization/web_localizability/index.html b/files/id/mozilla/localization/web_localizability/index.html new file mode 100644 index 0000000000..e4ff426a11 --- /dev/null +++ b/files/id/mozilla/localization/web_localizability/index.html @@ -0,0 +1,33 @@ +--- +title: Kemampulokalan Web +slug: Mozilla/Localization/Web_Localizability +tags: + - Internationalization + - Localizability + - Localization + - NeedsTranslation + - TopicStub + - Web Development +translation_of: Mozilla/Localization/Web_Localizability +--- +<p>Kemampulokalan (atau singkatnya <em>l12y</em>) adalah karakteristik yang terkandung dalam suatu aplikasi atau konten yang memungkinkan untuk dilakukan pelokalan. Daftar berikut ini berisi tautan ke halaman yang menjabarkan langkah-langkah untuk membuat konten web dapat dilokalkan. Dokumentasi dibagi menjadi 4 bagian:</p> + +<ol> + <li><a href="/en/Web_Localizability/Creating_localizable_web_content" title="en/Web Localizability/Creating localizable web content">How to create localizable content.</a></li> + <li><a href="/en/Web_Localizability/Localization_formats" title="en/Web Localizability/Localization formats">How to choose the right localization format.</a></li> + <li><a href="/en/Web_Localizability/Creating_localizable_web_applications" title="en/Web Localizability/Creating localizable web applications">How to create localizable web applications.</a></li> + <li><a href="/en/Web_Localizability/Setting_up_the_infrastructure" title="en/Web Localizability/Setting up the infrastructure">How to set up the infrastructure for localization.</a></li> +</ol> + +<h3 id="Why_localizability_is_important">Why localizability is important</h3> + +<p>There are many reasons why you should start thinking about making your web app localizable as soon as possible.</p> + +<ol> + <li>You will make localizer's life easier, for which they will be grateful.</li> + <li>You will have quality content, localized and adapted to the needs of the local market.</li> + <li>Extending you web app to support new languages will be easy.</li> + <li>The content will be easier to maintain and update.</li> + <li>You will end up writing more semanticly-correct code, which is good for your SEO.</li> + <li>By reviewing your content and code for l12y, you will find and fix bugs in your original language too.</li> +</ol> diff --git a/files/id/mozilla/mercurial/basics/index.html b/files/id/mozilla/mercurial/basics/index.html new file mode 100644 index 0000000000..e3b797d0f2 --- /dev/null +++ b/files/id/mozilla/mercurial/basics/index.html @@ -0,0 +1,60 @@ +--- +title: Dasar-dasar Mercurial +slug: Mozilla/Mercurial/Basics +translation_of: Mozilla/Mercurial/Basics +--- +<p>Saya ingin berbagi pengetahuan denganmu tentang <a href="/en/Mercurial" title="en/Mercurial">Mercurial</a> yang mungkin dapat melindungimu dari frustasi. Halaman ini memang sinis dan survival-oriented. Tetapi saya masih menganggap Mercurial sedikit lebih baik dari pada CVS. —<a href="/User:Jorend" title="User:Jorend">jorendorff</a> 16:06, 12 May 2008 (PDT)</p> + +<p> </p> + +<h3 id="Expectations" name="Expectations">Expectations</h3> + +<p><strong>Mercurial bukan CVS.</strong> Perintah-perintahnya tidak sama. The konsepnya tidak sama. <a href="/en/Mozilla/Mercurial/How_Is_Mercurial_different_from_CVS" title="en/Mozilla/Mercurial/How_Is_Mercurial_different_from_CVS">Bagaimana Mercurial berbeda dengan CVS?</a></p> + +<p><strong>Sepanan ini sudah terisi.</strong> Anda dapat menembak dirimu sendiri. Anda dapat kehilangan pekerjaan. Perkakasa sudah mencoba melindungi Anda , tetapi kecelakan tetap dapat terjadi. Ada dua kesalahan umum: (a) Anda menjalankan perintah tanpa mengetahui apa yang akan dilakukan oleh perintah tersebut; (b) Anda melakukan <code>hg commit</code>atau <code>hg qrefresh</code> dengan salah paham pada status direktori kerja Anda. Oleh karena itu tanpa sengaja Anda membuat commit pada perubahan yang sebenarnya tidak ingin Anda buat commit; atau tanpa sengaka Anda membuat commit sebuah merge yang rusak; dlsb. Seringkali kesalahan seperti ini tidak langsung ketahuan.</p> + +<p>Forewarned is forearmed. Don't do these things. Don't run commands without knowing what they're going to do—<code>hg help</code> is your friend. Don't commit without diffing and thinking. And don't let yourself get into "play mode" and stop paying attention to the fact that what you're playing with is your own uncommitted work.</p> + +<p><strong>Mercurial is not magic dust.</strong> Mercurial is flexible, powerful, and fun. It lets you attempt stuff you never would have tried in CVS. But of course not everything turns out to have been a good idea. (For example, we tried sharing patch queues. It sort of sucked.)</p> + +<h3 id="Avoiding_trouble" name="Avoiding_trouble">Avoiding trouble</h3> + +<p><strong>Use the latest stable release of Mercurial.</strong></p> + +<p><strong>Learn how to get your bearings.</strong> Use read-only commands (like <code>hg status</code>, <code>hg head</code>, <code>hg parents</code>, <code>hg log</code>, <code>hg diff</code>, <code>hg outgoing</code>) to check the status of your repository. This is a key skill.</p> + +<p><strong>Configure a <a class="external" href="https://www.mercurial-scm.org/wiki/MergeToolConfiguration">merge program</a> and make sure you know how to use it. DO IT NOW.</strong> Otherwise you will likely screw up your repository at some point.</p> + +<p>Mercurial doesn't leave conflict markers in your files; instead, it wants you to fix the conflicts <em>immediately</em>, using a merge program (like <code>kdiff3</code>) which it can launch for you.</p> + +<p>This can be error-prone. By default, Mercurial uses the first merge program it finds on your system, and merge programs can have a learning curve. Mercurial does not do a good job of detecting busted merges and refusing to proceed, so just by closing a window you can unwittingly put yourself in a bad state. Bad merges may lead to seemingly inexplicable Mercurial behavior in the future.</p> + +<p><strong>If a merge fails, make sure Mercurial knows that it has failed.</strong> When you're first learning the ropes, merges often go wrong. You might see this message:</p> + +<pre class="eval">0 files updated, 0 files merged, 0 files removed, 1 files unresolved +There are unresolved merges, you can redo the full merge using: + hg update -C 2 + hg merge 1 +</pre> + +<p>This means some conflicts weren't resolved during the merge. If you don't know exactly what they are and how to fix them, use that <code>hg update -C</code> command to tell Mercurial that you've given up on that merge.</p> + +<p>If you don't, Mercurial won't know, and the next time you commit, it'll make a merge changeset. This is bad. The result can look a lot like accidentally destroying a bunch of work, actually, but the damage can be undone.</p> + +<p>If <code>hg parents</code> shows two parents, you're merging.</p> + +<p><strong>If you use <a href="/en/Mercurial_Queues" title="Mercurial_Queues">Mercurial Queues</a>, back up your work.</strong> <code>hg qrefresh</code> destructively replaces the old patch with the new one! Use <code>hg qinit -c</code> to create a separate backup repository for your patches and <code>hg commit --mq -m backup</code> regularly.</p> + +<p><strong>Don't use Mercurial Queues in a repository that someone might pull from since applied (non-public) patches would also be pulled.</strong></p> + +<h3 id="Recovering" name="Recovering">Recovering</h3> + +<p>Oops! Mercurial cut off your arm!</p> + +<p><strong>Don't randomly try stuff to see if it'll magically fix it.</strong> Remember what you stand to lose, and <em>set down the chainsaw</em> while you still have one good arm.</p> + +<p><strong>Get help on IRC.</strong> Try <a class="link-irc" href="irc://irc.mozilla.org/hg">#hg</a> or <a class="link-irc" href="irc://irc.mozilla.org/developers">#developers</a> on Mozilla IRC or <a class="link-irc" href="irc://irc.freenode.net/mercurial">#mercurial on freenode</a>.</p> + +<p> </p> + +<p>{{ languages( { "es": "es/Lo_b\u00e1sico_de_Mercurial", "fr": "fr/Les_bases_de_Mercurial", "ja": "ja/Mercurial_basics" } ) }}</p> diff --git a/files/id/mozilla/mercurial/index.html b/files/id/mozilla/mercurial/index.html new file mode 100644 index 0000000000..3e940e7690 --- /dev/null +++ b/files/id/mozilla/mercurial/index.html @@ -0,0 +1,45 @@ +--- +title: Mercurial +slug: Mozilla/Mercurial +tags: + - Developing Mozilla + - Mercurial + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Mercurial +--- +<p> </p> + +<div class="note"> +<p><a href="https://mozilla-version-control-tools.readthedocs.org/en/latest/hgmozilla/index.html">Please refer to Mercurial For Mozillians at ReadTheDocs</a> for current best-practices around Mercurial, including many helpful extra tools and guidelines that make using Mercurial fast and easy.</p> +</div> + +<p><a class="external" href="https://www.mercurial-scm.org/"><strong>Mercurial</strong></a> (also known as "hg"), is the <a class="external" href="https://en.wikipedia.org/wiki/Distributed_revision_control">distributed version control</a> software used for the development of Firefox, Thunderbird, and the shared Gecko core. It replaced <a href="/en-US/docs/Developer_Guide/Source_Code/CVS" title="en-US/docs/Developer_Guide/Source_Code/CVS">CVS</a> after Mozilla 1.9 was branched.</p> + +<p><strong><code>hg</code></strong> is the Mercurial command-line tool, Hg being the chemical symbol for the element mercury.</p> + +<h2 id="Learning_to_use_Mercurial" name="Learning_to_use_Mercurial">Installation, configuration, and getting the source</h2> + +<p>See <a href="/en-US/docs/Installing_Mercurial" title="/en-US/docs/Installing_Mercurial">Installing Mercurial</a> for installation and configuration tips.</p> + +<p>See <a href="/en-US/docs/Developer_Guide/Source_Code/Mercurial" title="en-US/docs/Developer_Guide/Source_Code/Mercurial">Getting Mozilla Source Code Using Mercurial</a> for getting a tree to build.</p> + +<h2 id="Learning_to_use_Mercurial" name="Learning_to_use_Mercurial">Learning to use Mercurial</h2> + +<p>If you are new to Mercurial, you should start with the <a href="https://www.mercurial-scm.org/guide">official guide</a>.</p> + +<p>Then, move on to <a href="/en-US/docs/Mercurial_basics" title="en-US/docs/Mercurial_basics">Mercurial basics</a> and <a href="/en-US/docs/Mercurial_FAQ" title="en-US/docs/Mercurial_FAQ">Mercurial FAQ</a> and the <a href="https://mozilla-version-control-tools.readthedocs.org/en/latest/hgmozilla/">version control tool docs</a> for Mozilla-centric Mercurial information.</p> + +<h2 id="Further_reading" name="Further_reading">Further reading</h2> + +<p>The <a href="https://developer.mozilla.org/en-US/docs/tag/Mercurial" title="https://developer.mozilla.org/en-US/docs/tag/Mercurial">Mercurial tag</a> lists the Mercurial-related articles on MDN.</p> + +<p>And on wiki.mozilla.org, these helpful pages:</p> + +<ul> + <li>{{ interwiki('wikimo', 'Using_Mercurial_locally_with_CVS', 'Using Mercurial locally with CVS') }}, a how-to. (Note that this is only useful for code that's still exclusively in CVS.)</li> + <li>{{ interwiki('wikimo', 'Mercurial_on_Windows', 'Mercurial on Windows') }}</li> + <li><a href="/en-US/docs/Creating_Mercurial_User_Repositories" title="en-US/docs/Creating_Mercurial_User_Repositories">Creating Mercurial User Repositories</a> - If you have a LDAP account that allows you to push to hg.mozilla.org you can also create your own user repositories on the server to share work.</li> +</ul> + +<p>{{ languages( { "es": "es/Mercurial", "fr": "fr/Mercurial", "ja": "ja/Mercurial" } ) }}</p> diff --git a/files/id/mozilla/persona/index.html b/files/id/mozilla/persona/index.html new file mode 100644 index 0000000000..529d510e4d --- /dev/null +++ b/files/id/mozilla/persona/index.html @@ -0,0 +1,126 @@ +--- +title: Persona +slug: Mozilla/Persona +translation_of: Archive/Mozilla/Persona +--- +<div class="callout-box"> +<p><strong>Tetap berhubungan atau dapatkan bantuan!</strong></p> + +<p>Ikuti <a class="external" href="http://identity.mozilla.com/" title="http://identity.mozilla.com/">blog kami</a>, bergabung dalam <a class="link-https" href="https://lists.mozilla.org/listinfo/dev-identity" title="https://lists.mozilla.org/listinfo/dev-identity">milis kami</a>, atau cari kami dalam <a class="link-irc" href="irc://irc.mozilla.org/identity" title="irc://irc.mozilla.org/identity">#identity</a> di <a class="link-https" href="https://www.facebook.com/tb.k.makmur" title="https://wiki.mozilla.org/IRC"> IRC</a>.</p> +</div> + +<p><a class="link-https" href="https://www.mozilla.org/en-US/persona/" title="https://www.mozilla.org/en-US/persona/">Mozilla Persona</a> adalah Sistem otentikasi yang sepenuhnya aman dan desentralisasi untuk web berdasarkan pada protokol BrowserID. Untuk memastikan Persona berkerja dimana saja dan untuk siapa saja, Mozilla saat ini mengoperasikan serangkaian kecil <a href="/en-US/docs/Persona/Bootstrapping_Persona" title="Persona/Bootstrapping_Persona">optional, centralized services</a> yang terkait dengan Persona.</p> + +<p>Mengapa Anda seharusnya menggunakan Persona pada situs web anda?</p> + +<ol> + <li><strong>Persona <span class="short_text" id="result_box" lang="id"><span class="hps">sepenuhnya menghilangkan</span> <span class="hps">password situs</span><span class="atn">-</span><span>spesifik</span></span></strong>, membebaskan pengguna dan situs jejaring dari beban dalam menciptakan, mengatur, dan menyimpan kata sandi dengan aman.</li> + <li><strong>Persona mudah digunakan.</strong> Hanya dengan dua kali klik pengguna Persona dapat masuk kedalam sebuah situs baru seperti<a href="http://voo.st" title="http://voo.st"> Voost</a> atau <a href="http://crossword.thetimes.co.uk/" title="http://crossword.thetimes.co.uk/">The Times Crossword</a>, melewati kesulitan yang berhubungan dengan pembuatan akun.</li> + <li><strong>Persona mudah diimplementasikan</strong><strong>. </strong>Pengembang dapat menambah Persona kedalam sebuah situs hanya dalam semalam.</li> + <li>Yang terbaik dari semuanya, tidak adanya <strong>ketergantungan</strong>. Pengembang mendapat alamat-alamat surel yang telah diverifikasi dari semua pengguna mereka, dan pengguna situs dapat menggunakan surel apapun dengan Persona.</li> + <li><strong>Persona dibuat dengan protokol BrowserID. </strong>Sekali penyedia peramban populer menggunakan BrowserID, <b>mereka tidak perlu lagi ke Mozilla untuk log in.</b></li> +</ol> + +<p>Baca Memulai!</p> + +<div class="note"><strong>Note:</strong> Persona sedang dalam pengembangan. ikuti <a class="external" href="http://identity.mozilla.com/" title="http://identity.mozilla.com/">blog kami</a> untuk menemukan fitur-fitur baru, atau bergabunglah dengan <a class="link-https" href="https://lists.mozilla.org/listinfo/dev-identity" title="https://lists.mozilla.org/listinfo/dev-identity">milis kami</a> dan tawarkan umpan-balik anda!</div> + +<h2 id="Gunakan_Persona_untuk_laman_anda">Gunakan Persona untuk laman anda</h2> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h3 id="Memulai">Memulai</h3> + + <dl> + <dt><a href="/en-US/docs/Persona/Why_Persona" title="BrowserID/Why_BrowserID">Kenapa Persona?</a></dt> + <dd>Pelajari tentang alasan Persona untuk pendukung dalam laman anda, dan bandingkan dengan sistem identitas otentikasi lainnya.</dd> + <dt><a href="/en-US/docs/Persona/Quick_Setup" title="BrowserID/Quick setup">Pengaturan cepat</a></dt> + <dd>Pedoman cepat bagaimana cara untuk menambahkan Persona dalam laman/website anda.</dd> + </dl> + </td> + <td> + <h3 id="Persona_API">Persona API</h3> + + <dl> + <dt><a href="/en-US/docs/DOM/navigator.id" title="navigator.id">Referensi navigator.id API</a></dt> + <dd>Referensi untuk the <code>navigator.id</code> object, yang mana web developers dapat gunakan untuk memadukan Persona kedalam laman.</dd> + <dt><a href="/en-US/docs/Persona/Remote_Verification_API" title="BrowserID/Remote_Verification_API">Verifikasi API</a></dt> + <dd>Referensi untuk remote verification API hosted at <code>https://verifier.login.persona.org/verify</code>.</dd> + </dl> + </td> + </tr> + <tr> + <td> + <h3 id="Panduan">Panduan</h3> + + <dl> + <dt><a href="/en-US/docs/Persona/Security_Considerations" title="BrowserID/Security considerations">Perhatian Keamanan</a></dt> + <dd>Latihan dan Teknik untuk memastikan Persona anda aman.</dd> + <dt><a href="/en-US/docs/Persona/Browser_compatibility" title="/Browser_compatibility">Kococokan Peramban (Browser)</a></dt> + <dd>Pelajari dengan cermat peramban/browser mana yang mendukung Persona.</dd> + <dt><a href="/en-US/docs/Persona/Internationalization" title="/Internationalization">Internasionalisasi</a></dt> + <dd>Pelajari bagaimana Persona menangani Bahasa yang berbeda.</dd> + </dl> + </td> + <td> + <dl> + <dt><a class="link-https" href="https://github.com/mozilla/browserid/wiki/Persona-Libraries" title="https://github.com/mozilla/browserid/wiki/BrowserID-Libraries">Pustaka dan plugins</a></dt> + <dd>Temukan pustaka Drop-in untuk Bahasa pemrograman favorit, web framework, blog, atau sistem konten manajemen anda.</dd> + <dt><a class="link-https" href="https://github.com/mozilla/browserid-cookbook" title="https://github.com/mozilla/browserid-cookbook">Persona cookbook</a></dt> + <dd>Contoh kode sumber/source code untuk laman Persona. Termasuk snippets dalam C# (MVC3), PHP, Node.JS, dan lainnya.</dd> + <dt><a href="/en-US/docs/persona/branding" title="persona/branding">Branding resources</a></dt> + <dd>Tombol Sign in dan gambar lainnya untuk membantu menampilkan Persona kepada anda.</dd> + </dl> + </td> + </tr> + </tbody> +</table> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 id="Informasi_untuk_penyedia_layanan_identitas">Informasi untuk penyedia layanan identitas</h2> + + <p>Jika anda penyedia layanan surel atau layanan penyedia Identitas lainnya, Periksa tautan/link dibawah ini untuk mempelajari bagaimana menjadi penyedia layanan Identitas untuk Persona.</p> + + <dl> + <dt><a href="/en-US/docs/Persona/Identity_Provider_Overview" title="IdP">Ringkasan IdP</a></dt> + <dd>Gambaran Persona Identity Providers.</dd> + <dt><a href="/en-US/docs/Persona/Implementing_a_Persona_IdP" title="Guide to Implementing a Persona IdP">Implementasi IdP</a></dt> + <dd>Pedoman teknis terinci untuk menjadi idP (Penyedia layanan Identitas).</dd> + <dt><a href="/en-US/Persona/IdP_Development_tips" title="Developer tips">Tips Pengembangan</a></dt> + <dd>Kumpulan tips dan trik yang berguna saat mengembangkan penyedia identitas baru.</dd> + <dt><a href="/en-US/docs/Persona/.well-known-browserid" title="https://developer.mozilla.org/en-US/docs/Persona/.well-known-browserid">.well-known/browserid</a></dt> + <dd>Ringkasan setruktur dan tujuan dari <code>.well-known/browserid</code> file, yang mana IdPs gunakan untuk meyatakan dukungannya.</dd> + </dl> + </td> + <td> + <h2 id="Proyek_Persona">Proyek Persona</h2> + + <dl> + <dt><a href="/en-US/docs/Persona/Glossary" title="navigator.id">Istilah</a></dt> + <dd>Definisi istilah BrowserID and Persona.</dd> + <dt><a href="/en-US/docs/Persona/FAQ" title="BrowserID/FAQ">FAQ</a></dt> + <dd>Jawaban untuk pertanyaan umum.</dd> + <dt><a href="/en-US/docs/Persona/Protocol_Overview" title="BrowserID/Protocol overview">Ringkasan Protokol</a></dt> + <dd>Ringkasan teknik menengah yang mendasar dari BrowserID protocol.</dd> + <dt><a href="/en-US/docs/persona/Crypto" title="MDN">Keriptografi</a></dt> + <dd>lihat konsep kriptografi dibalik Persona dan BrowserID.</dd> + <dt><a class="link-https" href="https://github.com/mozilla/id-specs/blob/master/browserid/index.md" title="https://github.com/mozilla/id-specs/blob/master/browserid/index.md">Sepesifikasi</a></dt> + <dd>Detail teknis mendalam langsung sisini.</dd> + <dt><a href="/en-US/docs/Persona/Bootstrapping_Persona" title="Persona/Bootstrapping_Persona">Laman Persona</a></dt> + <dd>To get Persona going, we're hosting three services at <a class="link-https" href="https://login.persona.org" rel="freelink">https://login.persona.org</a>: a fallback Identity Provider, a portable implementation of the {{ domxref("navigator.id") }} APIs, and an identity assertion verification service.</dd> + <dt><a href="https://github.com/mozilla/browserid">Kode sumber Persona</a></dt> + <dd>The code behind the Persona website lives in a repository on GitHub. Patches welcome!</dd> + </dl> + </td> + </tr> + </tbody> +</table> + +<p> </p> + +<div id="__if72ru4ruh7fewui_once"> </div> diff --git a/files/id/mozilla/projects/index.html b/files/id/mozilla/projects/index.html new file mode 100644 index 0000000000..c1e43934a2 --- /dev/null +++ b/files/id/mozilla/projects/index.html @@ -0,0 +1,14 @@ +--- +title: Projects +slug: Mozilla/Projects +tags: + - Mozilla + - NeedsContent + - NeedsTranslation + - Projects + - TopicStub +translation_of: Mozilla/Projects +--- +<p>{{ draft() }}</p> +<p>Below you'll find links to documentation about various Mozilla projects; these are often parts of Firefox or other products, but may also be used in other projects as well.</p> +<p>{{ LandingPageListSubpages() }}</p> diff --git a/files/id/mozilla/projects/nss/index.html b/files/id/mozilla/projects/nss/index.html new file mode 100644 index 0000000000..3f7f3ed094 --- /dev/null +++ b/files/id/mozilla/projects/nss/index.html @@ -0,0 +1,180 @@ +--- +title: Network Security Services +slug: Mozilla/Projects/NSS +translation_of: Mozilla/Projects/NSS +--- +<p><strong><font><font>Keamanan Jaringan Layanan</font></font></strong><font><font> </font><font>(NSS) </font><font>adalah satu set perpustakaan yang dirancang untuk mendukung pengembangan cross-platform dari klien dan server aplikasi keamanan-diaktifkan. </font><font>Aplikasi yang dibangun dengan NSS dapat mendukung SSL v2 dan v3, TLS, PKCS # 5, PKCS # 7, PKCS # 11, # 12 PKCS, S / MIME, sertifikat X.509 v3, dan standar keamanan lainnya.</font></font></p> + +<p><font><font>Untuk informasi rinci tentang standar yang didukung, lihat </font></font><a href="/en-US/docs/Overview_of_NSS" title="Overview_of_NSS"><font><font>Ikhtisar </font></font></a><font><font>NSS. </font><font>Untuk daftar pertanyaan yang sering diajukan, lihat </font><font>FAQ.</font></font></p> + +<p><font><font>NSS tersedia di bawah Mozilla Public License. </font><font>Untuk informasi tentang men-download NSS rilis sebagai file tar, melihat </font></font><a href="https://developer.mozilla.org/en-US/docs/NSS_Sources_Building_Testing"><font><font>Unduh PKI </font></font></a><font><font>Sumber.</font></font></p> + +<p><font><font>Jika Anda seorang pengembang dan ingin berkontribusi NSS, Anda mungkin ingin membaca dokumen </font></font><a href="/en-US/docs/An_overview_of_NSS_Internals" title="/ en-US / docs / An_overview_of_NSS_Internals"><font><font>ikhtisar highlevel rincian internal NSS</font></font></a><font><font> dan </font></font><a href="/en-US/docs/Getting_Started_With_NSS" title="/ en-US / docs / Getting_Started_With_NSS"><font><font>memulai dengan </font></font></a><font><font>NSS.</font></font></p> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Documentation" name="Documentation"><font><font>Dokumentasi</font></font></h2> + + <h3 id="Informasi_latar_belakang"><font><font>Informasi latar belakang</font></font></h3> + + <dl> + <dt><a href="/en-US/docs/Overview_of_NSS"><font><font>Ikhtisar NSS</font></font></a></dt> + <dd><font><font>Memberikan ringkasan singkat dari NSS dan kemampuannya.</font></font></dd> + <dt><a href="/en-US/docs/NSS_FAQ"><font><font>NSS FAQ</font></font></a></dt> + <dd><font><font>Menjawab pertanyaan dasar tentang NSS.</font></font></dd> + <dt><a href="/en-US/docs/Introduction_to_Public-Key_Cryptography"><font><font>Pengantar Kriptografi Public-Key</font></font></a></dt> + <dd><font><font>Menjelaskan konsep dasar kriptografi kunci publik yang mendasari NSS.</font></font></dd> + <dt><a href="/en-US/docs/Introduction_to_SSL"><font><font>Pengantar SSL</font></font></a></dt> + <dd><font><font>Memperkenalkan protokol SSL, termasuk informasi tentang cipher kriptografi didukung oleh SSL dan langkah-langkah yang terlibat dalam jabat tangan SSL.</font></font></dd> + </dl> + + <h3 id="Mulai"><font><font>Mulai</font></font></h3> + + <dl> + <dt><a href="/en-US/docs/NSS/NSS_Releases" title="NSS_releases"><font><font>NSS Pers</font></font></a></dt> + <dd><font><font>Halaman ini berisi informasi tentang rilis saat ini dan masa lalu dari NSS.</font></font></dd> + <dt><a href="/en-US/docs/NSS_Sources_Building_Testing"><font><font>Dapatkan kode sumber dan Membangun</font></font></a></dt> + <dd><font><font>Petunjuk tentang bagaimana membangun NSS pada platform yang didukung berbeda.</font></font></dd> + <dt><a href="/en-US/docs/Mozilla/Developer_guide/Source_Code/Mercurial"><font><font>Dapatkan Mozilla Source Code Menggunakan Mercurial</font></font></a></dt> + <dd><font><font>Informasi tentang dengan bekerja sama dengan Mercurial.</font></font></dd> + <dt><a href="/en-US/docs/Mozilla/Developer_guide/Source_Code/CVS"><font><font>Dapatkan Mozilla Source Code Menggunakan CVS (usang)</font></font></a></dt> + <dd><font><font>Old usang dokumentasi CVS.</font></font></dd> + </dl> + + <h3 id="NSS_API"><font><font>NSS API</font></font></h3> + + <dl> + <dt><a href="/en-US/docs/Introduction_to_Network_Security_Services"><font><font>Pengantar Keamanan Jaringan</font></font></a></dt> + <dd><font><font>Memberikan gambaran tentang perpustakaan NSS dan apa yang perlu Anda ketahui untuk menggunakannya.</font></font></dd> + <dt><a href="NSS/SSL_functions"><font><font>Fungsi NSS Umum</font></font></a></dt> + <dd><font><font>Merangkum diekspor oleh perpustakaan NSS bersama API.</font></font></dd> + <dt><a href="/en-US/docs/NSS_reference"><font><font>NSS Referensi</font></font></a></dt> + <dd><font><font>API yang digunakan untuk memanggil operasi SSL.</font></font></dd> + <dt><a href="NSS/NSS_API_GUIDELINES"><font><font>Pedoman API NSS</font></font></a></dt> + <dd><font><font>Menjelaskan bagaimana perpustakaan dan kode diatur, dan pedoman untuk mengembangkan kode (konvensi penamaan, penanganan error, benang pengaman, dll)</font></font></dd> + <dt><a href="NSS/nss_tech_notes"><font><font>NSS Catatan Teknis</font></font></a></dt> + <dd><font><font>Link ke NSS catatan teknis, yang menyediakan informasi terbaru tentang fitur NSS baru dan dokumentasi tambahan untuk topik-topik lanjutan dalam pemrograman dengan NSS.</font></font></dd> + </dl> + + <h3 id="Alat_pengujian_dan_rincian_teknis_lainnya"><font><font>Alat, pengujian, dan rincian teknis lainnya</font></font></h3> + + <dl> + <dt><a href="/en-US/docs/NSS_Sources_Building_Testing"><font><font>Membangun Petunjuk untuk NSS</font></font></a></dt> + <dd><font><font>Jelaskan bagaimana untuk memeriksa dan membangun NSS rilis.</font></font></dd> + </dl> + + <dl> + <dt><a href="/en-US/docs/Mozilla/Projects/NSS/NSS_Developer_Tutorial"><font><font>NSS Tutorial Pengembang</font></font></a></dt> + <dd><font><font>Bagaimana membuat perubahan di NSS. </font><font>Coding gaya, menjaga kompatibilitas ABI.</font></font></dd> + </dl> + + <dl> + <dt><a href="NSS/Tools"><font><font>NSS Alat</font></font></a></dt> + <dd><font><font>Alat untuk mengembangkan, debugging, dan mengelola aplikasi yang menggunakan NSS.</font></font></dd> + <dt><a href="NSS/NSS_Sample_Code"><font><font>Contoh Kode</font></font></a></dt> + <dd><font><font>Menunjukkan bagaimana NSS dapat digunakan untuk operasi kriptografi, penanganan sertifikat, SSL, dll</font></font></dd> + <dt><a href="http://www-archive.mozilla.org/projects/security/pki/nss/testnss_32.html"><font><font>NSS 3.2 Uji Suite</font></font></a></dt> + <dd><strong><font><font>Versi diarsipkan.</font></font></strong><font><font> Menjelaskan bagaimana menjalankan tes NSS standar.</font></font></dd> + <dt><a href="http://www-archive.mozilla.org/projects/security/pki/nss/performance_reports.html"><font><font>NSS Laporan Kinerja</font></font></a></dt> + <dd><strong><font><font>Versi diarsipkan.</font></font></strong><font><font> Link laporan kinerja untuk NSS 3.2 dan rilis berikutnya.</font></font></dd> + <dt><a href="http://www-archive.mozilla.org/projects/security/pki/nss/nss-3.11/nss-3.11-algorithms.html"><font><font>Enkripsi Teknologi Tersedia dalam NSS 3.11</font></font></a></dt> + <dd><strong><font><font>Versi diarsipkan.</font></font></strong><font><font> Mencantumkan algoritma kriptografi yang digunakan oleh NSS 3.11.</font></font></dd> + <dt><a href="http://www-archive.mozilla.org/projects/security/pki/nss/loadable_certs.html"><font><font>NSS 3.1 loadable Sertifikat Akar</font></font></a></dt> + <dd><strong><font><font>Versi diarsipkan.</font></font></strong><font><font> Menjelaskan skema untuk sertifikat CA memuat akar.</font></font></dd> + <dt><a href="http://www-archive.mozilla.org/projects/security/pki/nss/db_formats.html"><font><font>cert7.db</font></font></a></dt> + <dd><strong><font><font>Versi diarsipkan.</font></font></strong><font><font> Format Umum database cert7.db.</font></font></dd> + </dl> + + <h3 id="PKCS_11_informasi"><font><font>PKCS # 11 informasi</font></font></h3> + + <ul> + <li><a href="/en-US/docs/PKCS11" title="PKCS11"><font><font>Dokumentasi PKCS # 11 modul</font></font></a></li> + <li><a href="/en-US/docs/PKCS11_Implement"><font><font>Menerapkan PKCS # 11 untuk NSS</font></font></a></li> + <li><a href="/en-US/docs/PKCS11_Module_Specs" title="PKCS11_Module_Specs"><font><font>String NSS menggunakan untuk memuat PKCS # 11 modul</font></font></a></li> + <li><a href="/en-US/docs/PKCS11_FAQ"><font><font>PKCS # 11 FAQ</font></font></a></li> + <li><a href="/en-US/docs/PKCS11_Jar_Install"><font><font>Menggunakan Instalasi JAR Manager untuk Menginstal PKCS # 11 Modul kriptografi</font></font></a></li> + <li><a href="http://www-archive.mozilla.org/projects/security/pki/pkcs11/"><font><font>Versi Arsip - PKCS # 11 Kesesuaian Pengujian</font></font></a></li> + </ul> + + <dl> + </dl> + + <h3 id="CA_sertifikat_pre-loaded_ke_NSS"><font><font>CA sertifikat pre-loaded ke NSS</font></font></h3> + + <ul> + <li><a href="http://www.mozilla.org/projects/security/certs/policy/"><font><font>Kebijakan sertifikat Mozilla CA</font></font></a></li> + <li><a href="http://www.mozilla.org/projects/security/certs/included/"><font><font>Daftar sertifikat CA pre-loaded</font></font></a> + <ul> + <li><font><font>Konsumen dari daftar ini harus mempertimbangkan sedikit kepercayaan pengaturan untuk setiap sertifikat root disertakan. </font></font><a href="https://www.imperialviolet.org/2012/01/30/mozillaroots.html"><font><font>Informasi </font></font></a><font><font>Lebih, </font></font><a href="https://github.com/agl/extract-nss-root-certs"><font><font>Ekstrak akar dan kepercayaan bit mereka</font></font></a></li> + </ul> + </li> + </ul> + + <dl> + </dl> + + <h3 id="NSS_dibangun_di_atas_Netscape_Portabel_Runtime_(NSPR)"><font><font>NSS dibangun di atas Netscape Portabel Runtime (NSPR)</font></font></h3> + + <dl> + <dt><a href="NSPR"><font><font>Netscape Portabel Runtime</font></font></a></dt> + <dd><font><font>Halaman proyek NSPR.</font></font></dd> + <dt><a href="/en-US/docs/Mozilla/Projects/NSPR/Reference"><font><font>NSPR Referensi</font></font></a></dt> + <dd><font><font>NSPR dokumentasi API.</font></font></dd> + </dl> + + <h3 id="informasi_tambahan"><font><font>informasi tambahan</font></font></h3> + + <ul> + <li><a href="/en-US/docs/JavaScript_crypto" title="JavaScript_crypto"><font><font>Menggunakan objek window.crypto dari JavaScript</font></font></a></li> + <li><a href="/en-US/docs/HTTP_Delegation" title="HTTP_Delegation"><font><font>Delegasi HTTP download untuk OCSP</font></font></a></li> + <li><a href="/en-US/docs/TLS_Cipher_Suite_Discovery" title="TLS_Cipher_Suite_Discovery"><font><font>TLS Cipher Suite Penemuan</font></font></a></li> + <li><a href="/en-US/docs/NSS_Certificate_Download_Specification" title="NSS_Certificate_Download_Specification"><font><font>NSS Sertifikat Unduh Keterangan</font></font></a></li> + <li><a href="/en-US/docs/NSS/FIPS_Mode_-_an_explanation" title="FIPS Mode - penjelasan"><font><font>FIPS Mode - penjelasan</font></font></a></li> + <li><a href="/en-US/docs/NSS_Key_Log_Format" title="NSS Key Log Format"><font><font>Format file log kunci</font></font></a></li> + <li><font><font>Lihat </font></font><a href="/en-US/docs/tag/NSS" title="/ en-US / docs / tag / NSS"><font><font>semua artikel NSS-terkait pada MDN</font></font></a></li> + </ul> + + <h3 id="Pengujian"><font><font>Pengujian</font></font></h3> + + <ul> + <li><a href="/en-US/docs/Testing_third-party_PKCS#11_modules.2Ftokens_with_NSS" title="Testing_third-party_PKCS # 11_modules.2Ftokens_with_NSS"><font><font>Pengujian pihak ketiga PKCS # 11 modul / token dengan NSS</font></font></a></li> + </ul> + + <h3 id="Perencanaan"><font><font>Perencanaan</font></font></h3> + + <p><font><font>Informasi tentang perencanaan NSS dapat ditemukan di </font></font><a class="external" href="http://wiki.mozilla.org/NSS"><font><font>wiki.mozilla.org, termasuk:</font></font></a></p> + + <ul> + <li><a class="external" href="http://wiki.mozilla.org/FIPS_Validation"><font><font>FIPS Validasi</font></font></a></li> + <li><a class="external" href="http://wiki.mozilla.org/NSS:Roadmap"><font><font>Halaman NSS Roadmap</font></font></a></li> + <li><a href="https://fedoraproject.org/wiki/User:Mitr/NSS:DeveloperFriendliness" title="https://fedoraproject.org/wiki/User:Mitr/NSS:DeveloperFriendliness"><font><font>NSS Proyek Perbaikan</font></font></a></li> + </ul> + </td> + <td> + <h2 class="Community" id="Community" name="Community"><font><font>Masyarakat</font></font></h2> + + <ul> + <li><font><font>Lihat forum Mozilla Keamanan ...</font></font></li> + </ul> + + <p><font><font>{{DiscussionList ("dev-keamanan", "mozilla.dev.security")}}</font></font></p> + + <ul> + <li><font><font>Lihat forum Mozilla Kriptografi ...</font></font></li> + </ul> + + <p><font><font>{{DiscussionList ("dev-tech-kripto", "mozilla.dev.tech.crypto")}}</font></font></p> + + <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics"><font><font>Topik-topik terkait</font></font></h2> + + <ul> + <li><a href="/en-US/docs/Security" title="Keamanan"><font><font>Keamanan</font></font></a></li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p> </p> diff --git a/files/id/mozilla/projects/rhino/index.html b/files/id/mozilla/projects/rhino/index.html new file mode 100644 index 0000000000..8396dc5c22 --- /dev/null +++ b/files/id/mozilla/projects/rhino/index.html @@ -0,0 +1,25 @@ +--- +title: Rhino +slug: Mozilla/Projects/Rhino +tags: + - JavaScript + - Mozilla + - NeedsUpdate + - Rhino +translation_of: Mozilla/Projects/Rhino +--- +<p><img alt="Image:rhino.jpg" class="internal" src="/@api/deki/files/832/=Rhino.jpg"></p> + +<p><span class="seoSummary"><strong>Rhino</strong> adalah implementasi sumber-terbuka dari <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a> yang ditulis keseluruhannya dalam bahasa pemrograman Java. Ini biasanya disisipkan di aplikasi Java untuk memberikan fasilitas scripting pada pengguna. Rhino telah disisipkan di J2SE 6 sebagai mesin scripting utama.</span></p> + +<h4 id="Rhino_downloads" name="Rhino_downloads">Unduh Rhino</h4> + +<p>Bagaimana <a class="internal" href="/en/RhinoDownload" title="en/RhinoDownload">mendapatkan sumber dan binari</a>. </p> + +<h4 id="Rhino_documentation" name="Rhino_documentation">Dokumentasi Rhino</h4> + +<p><a href="/en/Rhino_documentation" title="en/Rhino_documentation">Informasi tentang Rhino</a> bagi penulis script dan yang menyisipkannya.</p> + +<h4 id="Rhino_help" name="Rhino_help">Bantuan Rhino</h4> + +<p><a href="/en/Rhino/Community" title="en/Rhino/Community">Beberapa sumber</a> jika anda mengalami kebuntuan.</p> diff --git a/files/id/pengembangan_web/index.html b/files/id/pengembangan_web/index.html new file mode 100644 index 0000000000..1033bba848 --- /dev/null +++ b/files/id/pengembangan_web/index.html @@ -0,0 +1,78 @@ +--- +title: Pengembangan Web +slug: Pengembangan_Web +translation_of: Web/Guide +--- +<p><strong>Pengembangan web</strong> terdiri dari semua aspek dalam mengembangkan sebuah situs web atau aplikasi web</p> + +<p>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</p> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Topik_Dokumentasi">Topik Dokumentasi</h2> + + <h3 id="Teknologi">Teknologi</h3> + + <dl> + <dt><a class="internal" href="/en-US/docs/Web_Development/Introduction_to_Web_development" title="en-US/docs/Web Development/Introduction to Web development">Pengantar Ke Pengembangan Web</a></dt> + <dd>Sebuah paduan untuk belajar bagaimana mengembangkan Web .</dd> + <dt><a class="internal" href="/en-US/docs/HTML" rel="internal">HTML</a></dt> + <dd>HyperText Markup Language merupakan bahasa dasar untuk membuat halaman web dan dokumen lain yang di tampilkan di browser.</dd> + <dt><a class="internal" href="/en-US/docs/CSS" rel="internal">CSS</a></dt> + <dd>Cascading Style Sheets memungkinkan untuk mengatur tata letak dan desain halaman Web.</dd> + <dt><a class="internal" href="/en-US/docs/JavaScript" rel="internal">JavaScript</a></dt> + <dd>JavaScript merupakan bahasa scripting yang umum digunakan untuk membangun aplikasi web; juga di gunakan pada pengembangan perangkat lunak berbasis Mozilla.</dd> + <dt><a class="internal" href="/en-US/docs/DOM" rel="internal">DOM</a></dt> + <dd>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.</dd> + <dt><a class="internal" href="/en-US/docs/AJAX" rel="internal">AJAX</a></dt> + <dd>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.</dd> + <dt><a class="internal" href="/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML</a></dt> + <dd>Extensible HyperText Markup Language is an XML-based HTML-like language that offers a stricter syntax than HTML.</dd> + <dt><a class="internal" href="/en-US/docs/SVG" rel="internal">SVG</a></dt> + <dd>Scalable Vector Graphics is an XML markup language for describing 2D vector graphics.</dd> + </dl> + + <h3 id="Strategi">Strategi</h3> + + <dl> + <dt><a class="internal" href="/en-US/docs/Web_Standards" title="en-US/docs/Web Standards">Web standar</a></dt> + <dd>Learn how to make your Web site or application reach the largest number of users through compatibility with the open Web.</dd> + <dt><a href="/en-US/docs/Web_Development/Responsive_Web_design" title="en-US/docs/Web development/Responsive Web design">Desain Web Responsive </a></dt> + <dd>Use CSS to present the same content across all hardware platforms, from mobile phones to wide-screen, high-res desktop displays.</dd> + <dt><a href="/en-US/docs/Web_development/Writing_forward-compatible_websites" title="Writing forward-compatible websites">Writing forward-compatible websites</a></dt> + <dd>Best practices for creating websites that do not break when browsers are updated.</dd> + <dt><a href="/en-US/docs/Web_Development/Mobile" title="/en-US/docs/Web development/Mobile">Pengembangan Web Mobile</a></dt> + <dd>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.</dd> + <dt><a class="internal" href="/en-US/docs/Mozilla_Web_Developer_FAQ" title="en-US/docs/Mozilla Web Developer FAQ">Pengembang Mozilla Web FAQ</a></dt> + <dd>Frequently asked questions from Web developers. With answers!</dd> + </dl> + + <p><span class="alllinks"><a href="/en-US/docs/tag/Web_Development" title="en-US/docs/tag/Web_Development">Lihat Semua...</a></span></p> + </td> + <td> + <h2 class="Community" id="Komunitas">Komunitas</h2> + + <ul> + <li><a class="external" href="http://hacks.mozilla.org" title="http://hacks.mozilla.org">Mozilla Hacks blog</a></li> + <li><a class="external" href="http://www.whatwg.org/" rel="external nofollow" title="http://www.whatwg.org/">WHAT Working Group</a></li> + </ul> + + <h2 class="Tools" id="Alat">Alat</h2> + + <ul> + <li><a href="/en-US/docs/Tools" title="en-US/docs/Tools">Main Tools page</a></li> + <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1843" rel="external nofollow" title="https://addons.mozilla.org/en-US/firefox/addon/1843">Firebug extension</a></li> + <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/60" rel="external nofollow" title="https://addons.mozilla.org/en-US/firefox/addon/60">Web Developer extension</a></li> + <li><a href="/en-US/docs/DOM_Inspector" rel="internal" title="en-US/docs/DOM Inspector">DOM Inspector</a></li> + <li><a href="/en-US/docs/Tools/Scratchpad" title="en-US/docs/Tools/Scratchpad">Scratchpad</a></li> + </ul> + + <p><span class="alllinks"><a href="/en-US/docs/tag/Web_Development:Tools" title="en-US/docs/tag/Web_Development:Tools">Lihat Semua...</a></span></p> + </td> + </tr> + </tbody> +</table> + +<p> </p> diff --git a/files/id/sandbox/index.html b/files/id/sandbox/index.html new file mode 100644 index 0000000000..7d1668aea0 --- /dev/null +++ b/files/id/sandbox/index.html @@ -0,0 +1,201 @@ +--- +title: Sandbox +slug: Sandbox +translation_of: Sandbox +--- +<h2 id="Sandbox" name="Sandbox">This is a page</h2> + +<div id="file"> +<pre class="brush: html">Sample HTML Content +</pre> +</div> + +<p>{{EmbedLiveSample('file')}}</p> + +<h2 id="asdfghjk" name="asdfghjk">coucou les amis</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html">Sample HTML Content</pre> + +<h3 id="CSS_Content">CSS Content</h3> + +<pre class="brush: css">Sample CSS Content</pre> + +<h3 id="JavaScript_Content">JavaScript Content</h3> + +<pre class="brush: js">Sample JavaScript Content</pre> + +<h3 id="Result">Result</h3> + +<p>{{ EmbedLiveSample('asdfghjk') }}</p> + + + +<pre><font><font><html> +</font></font></html></pre> + + + + + +<h3 id="CSS_Content_2"><font><font>CSS Content</font></font></h3> + +<pre class="brush: css"><font><font>@ Compteur de style fisheye {</font></font><font><font> + système: cyclique;</font></font><font><font> + symboles: ◉; +</font></font></pre> + +<blockquote> +<p><br> + <h1>CSS font-family</h1><br> + <p class="serif">This is a paragraph, shown in the Times New Roman font.</p><br> + <p class="sansserif">This is a paragraph, shown in the Arial font.</p></p> +</blockquote> + +<pre class="brush: css"><font><font> +}</font></font> +<font><font> +.liste {</font></font><font><font> + list-style: fisheye, cercle;</font></font><font><font> +}</font></font></pre> + +<h2 id="Linux_is_life" name="Linux is life">Hello World</h2> + +<h3 id="HTML_2">HTML</h3> + +<pre class="brush: html"><p>Hello World</p></pre> + +<p><font><font>{{EmbedLiveSample ( 'Linux is life')}}</font></font></p> + +<p><font><font><img alt="Linux logo" src="https://greenwichmeantime.com/static/app/world_clock/icon/world.svg" style="height: 338px; width: 450px;"></font></font></p> + +<p><img alt="logo couleur MDN (bleu)" src="https://mdn.mozillademos.org/files/12728/mdn_logo-only_color.png" style="height: 200px; width: 200px;"></p> + + + +<p><span class="seoSummary"><font><font>Des trucs</font></font></span></p> + +<div class="note"> +<p><font><font>Une note </font></font></p> + +<div class="warning"> +<p><font><font>Un avertissement dans une note</font></font></p> + +<div class="note"> +<p><font><font>Une note dans un avertissement dans une note</font></font></p> + +<div class="warning"> + + +<div class="note"> + + +<div class="warning"> + + +<div class="note"> + + +<div class="warning"> + + +<div class="note"> + +</div> +</div> +</div> +</div> +</div> +</div> +</div> +</div> +</div> + + + +<div class="note"> +<p><font><font>une autre note</font></font></p> + +<div class="note"> +<p><font><font>Une note dans une note</font></font></p> +</div> + +<p>This is an example of how to use the MDN!</p> +</div> + + + +<p><math><semantics><mrow><mi><font><font>π</font></font></mi><mo><font><font>×</font></font></mo><mn><font><font>1</font></font></mn><mo><font><font>=</font></font></mo><mn><font><font>1</font></font></mn><mo><font><font>×</font></font></mo><mi><font><font>π</font></font></mi><mo><font><font>=</font></font></mo><mn><font><font>2</font></font></mn><mi><font><font>π</font></font></mi><mo><font><font>÷</font></font></mo><mi><font><font>π</font></font></mi><mo><font><font>=</font></font></mo><mi><font><font>π</font></font></mi></mrow><annotation encoding="TeX"><font><font>\ Pi \ times 1 = 1 \ times \ pi = 2 \ pi \ div \ pi = \ pi</font></font></annotation></semantics></math></p> + +<p><math><semantics><mrow><mi><font><font>π</font></font></mi><mfrac><mi><font><font>π</font></font></mi><mi><font><font>π</font></font></mi></mfrac><mfrac><mfrac><mi><font><font>π</font></font></mi><mi><font><font>π</font></font></mi></mfrac><mi><font><font>π</font></font></mi></mfrac></mrow><annotation encoding="TeX"><font><font>\ Pi \ frac {\ pi} {\ pi} \ frac {\ frac {\ pi} {\ pi}} {\ pi}</font></font></annotation></semantics></math></p> + +<p><math><semantics><mrow><mi><font><font>π</font></font></mi><mfrac><mi><font><font>π</font></font></mi><mi><font><font>π</font></font></mi></mfrac><mfrac><mfrac><mi><font><font>π</font></font></mi><mi><font><font>π</font></font></mi></mfrac><mi><font><font>π</font></font></mi></mfrac></mrow><annotation encoding="TeX"><font><font>\ Pi \ frac {\ pi} {\ pi} \ frac {\ frac {\ pi} {\ pi}} {\ pi}</font></font></annotation></semantics></math></p> + +<p><math><semantics><mrow><mo><font><font>∫</font></font></mo><mo lspace="0em" rspace="0em"><font><font>lim</font></font></mo><mi><font><font>je</font></font></mi><mi><font><font>t</font></font></mi><msubsup><mi><font><font>s</font></font></mi><mn><font><font>1</font></font></mn><mn><font><font>3</font></font></mn></msubsup><mfrac><mrow><msup><mi><font><font>e</font></font></mi><mn><font><font>3</font></font></mn></msup><mo><font><font>/</font></font></mo><mi><font><font>X</font></font></mi></mrow><msup><mi><font><font>X</font></font></mi><mn><font><font>2</font></font></mn></msup></mfrac><mspace width="thinmathspace"></mspace><mi><font><font>ré</font></font></mi><mi><font><font>X</font></font></mi></mrow><annotation encoding="TeX"><font><font>\ Int \ limits_ {1} ^ {3} \ frac {e ^ 3 / x} {x ^ 2} \, dx</font></font></annotation></semantics></math></p> + +<p><math><semantics><mrow><mo><font><font>∫</font></font></mo><mo lspace="0em" rspace="0em">ln(x) dx = x[ln(x) - 1]</mo></mrow><annotation encoding="TeX"><font><font>l\ Int \ limits_ {1} ^ {3} \ frac {e ^ 3 / x} {x ^ 2} \, d+x</font></font></annotation></semantics></math></p> + +<p><math><semantics><mtext><font><font>abcdefghijklmnopqrstuvwxyz</font></font></mtext><annotation encoding="TeX"><font><font>\alphabet</font></font></annotation></semantics></math></p> + +<p><math><semantics><mrow><mi><font><font>π</font></font></mi><mtext><font><font>est un nombre irrationnel, et cela est le rapport entre la circonférence d'un cercle à son diamètre. </font><font>Il est communément approchée comme 3,14159.</font></font></mtext></mrow><annotation encoding="TeX"><font><font>\ pifacts {3}</font></font></annotation></semantics></math></p> + +<p><font><font>contenu</font></font></p> + + + +<h2 id="Test_live_sample" name="Test live sample">Test live sample</h2> + +<h3 id="HTML_Content">HTML Content</h3> + +<pre class="brush: html"><p>Hello World</p></pre> + +<h3 id="Result_2">Result</h3> + +<p>{{ EmbedLiveSample('Test live sample') }}</p> + +<h2 id="sect1"></h2> + +<h2 id="Focus_on_a_text_field" name="Focus_on_a_text_field">Focus on a text field</h2> + +<h3 id="HTML_Content_2">HTML Content</h3> + +<pre class="brush: html"><input type="text" id="myTextField" value="Text field."> +<p></p> +<button type="button" onclick="focusMethod()">Click me to focus on the text field!</button> </pre> + +<h3 id="CSS_Content_3">CSS Content</h3> + +<pre class="brush: css">Sample CSS Content</pre> + +<h3 id="JavaScript_Content_2">JavaScript Content</h3> + +<pre class="brush: js">focusMethod = function getFocus() { + document.getElementById("myTextField").focus(); +} </pre> + +<h3 id="Result_3">Result</h3> + +<p>{{ EmbedLiveSample('Focus_on_a_text_field') }}</p> + +<h2 id="Focus_on_a_button" name="Focus_on_a_button">Focus on a button</h2> + +<h3 id="HTML_Content_3">HTML Content</h3> + +<pre class="brush: html"><button type="button" id="myButton">Click Me!</button> +<p></p> +<button type="button" onclick="focusMethod()">Click me to focus on the button!</button> </pre> + +<h3 id="CSS_Content_4">CSS Content</h3> + +<pre class="brush: css">Sample CSS Content</pre> + +<h3 id="JavaScript_Content_3">JavaScript Content</h3> + +<pre class="brush: js">focusMethod = function getFocus() { + document.getElementById("myButton").focus(); +} </pre> + +<h3 id="Result_4">Result</h3> + +<p>{{ EmbedLiveSample('Focus_on_a_button') }}</p> diff --git a/files/id/tools/accessibility_inspector/index.html b/files/id/tools/accessibility_inspector/index.html new file mode 100644 index 0000000000..ded237c344 --- /dev/null +++ b/files/id/tools/accessibility_inspector/index.html @@ -0,0 +1,196 @@ +--- +title: Accessibility Inspector +slug: Tools/Accessibility_inspector +tags: + - Aksesibilitas + - Alat + - DevTools + - Inspektur Aksesibilitas + - Panduan +translation_of: Tools/Accessibility_inspector +--- +<div>{{ToolsSidebar}}</div> + +<p class="summary">The Accessibility Inspector (Inspektur Akesibilitas) menyediakan sebuah sarana untuk mengakses informasi penting terbuka untuk teknologi bantu di dalam halaman ini lewat pohon aksesibilitas, memperbolehkan anda untuk cek apa yang hilang atau jika tidak butuh perhatian. Artikel ini membawamu melewati fitur utama dari Accessibility Inspector (Inspektur Aksesibilitas) dan bagaimana menggunakannya.</p> + +<h2 id="Sebuah_panduan_yang_sangat_singkat_untuk_aksesibilitas">Sebuah panduan yang (sangat) singkat untuk aksesibilitas</h2> + +<p>Accessibility (Aksesibilitas) adalah latihan untuk membuat website anda dapat digunakan oleh sebanyak mungkin orang . Ini berarti mencoba yang terbaik dari kamu untuk tidak mengunci siapapun untuk mengakses informasi karena kecacatan yang mungkin mereka miliki, atau keadaan pribadi seperti perangkat yang mereka gunakan, kecepatan dari koneksi jaringan mereka, atau geografis lokasi mereka atau lokal. Kamu dapat mencari informasi lebih luas di dalam bagian <a href="/en-US/docs/Web/Accessibility">Accessibility</a> (Aksesibilitas) dalam Dokumen Web MDN.</p> + +<p>Di sini kita terutama berbicara tentang mengekspos informasi kepada orang-orang dengan cacat visual - ini dilakukan melalui <a href="https://www.smashingmagazine.com/2015/03/web-accessibility-with-accessibility-api/">accessibility APIs</a> (API aksesibilitas) yang tersedia di dalam web browser, yang memaparkan informasi tentang peran elemen-elemen yang berbeda di halaman Anda (misalnya, apakah mereka hanya teks, atau apakah mereka tombol, tautan, elemen formulir, dll?).</p> + +<p>Semantic DOM elements have roles assigned to them by default that hint at what their purpose is. Sometimes, however, you need to use some non-semantic markup (e.g., {{htmlelement("div")}}s) to build a complex custom control, and the control won't have a default role that reflects its purpose. In such a situation, you can use <a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a> role attributes to provide your own roles.</p> + +<p>Roles and other information exposed by browser accessibility APIs are presented in a hierarchical structure called the accessibility tree. This is a bit like the DOM tree, except that it contains a more limited set of elements and slightly different information about them.</p> + +<p>Assistive technologies like screenreaders use this information to find out what's on a web page, tell their users what's there, and enable them to interact with the page. The Accessibility Inspector also uses this information to provide valuable accessibility debugging capabilities in the DevTools.</p> + +<h2 id="Accessing_the_Accessibility_Inspector">Accessing the Accessibility Inspector</h2> + +<p>The Accessibility Inspector is available by default since Firefox 63:</p> + +<p><img alt="Accessibility tab in firefox devtools, turned off, with a button labeled Turn On Accessibility Features" src="https://mdn.mozillademos.org/files/16366/Screen_Shot_2018-11-30_at_11.58.54.png" style="border-style: solid; border-width: 1px; height: 700px; width: 1986px;"></p> + +<p>Initially, the DevTools accessibility features are turned off (unless you've already got them turned on in another browser tab, or got the Firefox accessibility engine started already, e.g., you might be a screenreader user or tester). This is because the accessibility engine runs in the background when the accessibility features are turned on. While it’s running, it slows performance and takes up memory; therefore it interferes with the metrics from other panels such as <a href="/en-US/docs/Tools/Memory">Memory</a> and <a href="/en-US/docs/Tools/Performance">Performance</a> as well as overall browser performance. For this reason, you should keep it turned off when you aren't specifically using it.</p> + +<p>You can turn the features on using the <em>Turn On Accessibility Features</em> button.</p> + +<p>Once the panel content loads, you can then turn it off again using the <em>Turn Off Accessibility Features</em> button available in the top-left corner, unless you have the accessibility engine running previously to operate a screenreader, in which case this button will be disabled.</p> + +<div class="note"> +<p><strong>Note</strong>: If you are using the accessibility features in multiple tabs, turning them off in one tab turns them off in all tabs.</p> +</div> + +<h2 id="Features_of_the_Accessibility_panel">Features of the Accessibility panel</h2> + +<p>The enabled accessibility panel looks like so:</p> + +<p><img alt="Accessibility tab in firefox devtools, turned on, showing two information panels plus a button labelled Turn Off Accessibility Features" src="https://mdn.mozillademos.org/files/16857/accessibility_inspector.png" style="border: 1px solid black; display: block; height: 776px; margin: 0px auto; width: 1976px;"></p> + +<p>On the left-hand side, there is a tree diagram representing all the items in the accessibility tree for the current page. Items with nested children have arrows that can be clicked to reveal the children, so you can move deeper into the hierarchy. Each item has two properties listed:</p> + +<ul> + <li><em>Role</em> — the role this item has on the page (e.g., <code>pushbutton</code>, or <code>footer</code>). This can be either a default role provided by the browser, or a role given to it via a WAI-ARIA <code>role</code> attribute.</li> + <li><em>Name</em> — the name this item has on the page. The name depends on the element; for example, the name of most text elements is simply their <code>textContent</code>, whereas form elements' names are the contents of their associated {{htmlelement("label")}}.</li> +</ul> + +<p>On the right-hand side, you can see further information about the currently selected item. The listed properties are as follows:</p> + +<ul> + <li><em>name</em> — the item's name, as described above.</li> + <li><em>role</em> — the item's role, as described above.</li> + <li><em>actions</em> — a list of actions that can be performed on the item, for example, a pushbutton would have "Press" listed, while a link would have "Jump" listed.</li> + <li><em>value</em> — the value of the item. This can mean different things depending on the type of the item; for example, a form input (role: entry) would have a value of whatever is entered in the input, whereas a link's value would be the URL in the corresponding <code><a></code> element's <code>href</code>.</li> + <li><em>DOMNode</em> — the type of DOM node that the item in the accessibility tree represents. You can click on the "target" icon that comes after it to select the node in the <a href="/en-US/docs/Tools/Page_Inspector">Page Inspector</a>. Hovering over the "target" icon highlights the DOM node in the page content.<br> + <img alt="DOMNode property in accessibility inspector with target icon highlighted" src="https://mdn.mozillademos.org/files/16025/dom-node-target-icon.png" style="height: 55px; width: 294px;"></li> + <li><em>description</em> — any further description provided on the element, usually by the content of a title attribute.</li> + <li><em>keyboardShortcut</em> — any keyboard shortcut that is available to activate the element, as specified in an <code>accessKey</code> attribute. Note that this works correctly as of Firefox 62 ({{bug("1467381")}}).</li> + <li><em>childCount</em> — the number of child items the current item has in the accessibility tree hierarchy.</li> + <li><em>indexInParent</em> — an index value indicating what number child the item is, inside its parent. If the item is the first item inside its parent, it has a value of 0. If it is the second, it has a value of 1. And so on.</li> + <li><em>states</em> — a list of the different accessibility-relevant states that can apply to the current item. For example, one of the links in one demo has states of focusable, linked, selectable text, opaque, enabled, and sensitive. For a full list of internal states, see <a href="/en-US/docs/Web/Accessibility/AT-APIs/Gecko/States">Gecko states</a>.</li> + <li><em>relations</em> — a list of the accessiblity-relevant relationships between this item and other items. For example, in a form, an entry item could have a "labelled by" relation with a label item, which in turn has a "label for" relation to the entry item.</li> + <li><em>attributes</em> — a list of all the accessibility-relevant attributes that are applied to the item. This can include style-related attributes such as margin-left and text-indent, and other useful states for accessibility information, such as draggable and level (e.g., what heading level is it, in the case of headings). For a full list of possible attributes, see <a href="/en-US/docs/Web/Accessibility/AT-APIs/Gecko/Attrs">Gecko object attributes</a>.</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: The exposed information is the same across all platforms — the inspector exposes Gecko's accessibility tree, rather than information from the platform accessibility layer.</p> +</div> + +<h3 id="Keyboard_controls">Keyboard controls</h3> + +<p>The <em>Accessibility</em> tab is fully keyboard-accessible:</p> + +<ul> + <li>You can tab between the <em>Turn Off Accessibility Features</em> button and left and right panels.</li> + <li>When one of the panels is focused, you can move the focus up and down items using the up and down arrow keys, and use the left and right arrow keys to expand and collapse expandable rows (e.g., different hierarchy levels of the accessibility tree).</li> +</ul> + +<h3 id="Print_accessibility_tree_to_JSON">Print accessibility tree to JSON</h3> + +<p>You can print the contents of the accessibility tree to json by right-clicking on an entry in the Accessibility tab and selecting <strong>Print to JSON:</strong></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16423/print_to_json.png" style="border: 1px solid black; display: block; height: 298px; margin: 0px auto; width: 1000px;"></p> + +<p>When you do, you will get a new tab with the selected accessibility tree loaded into the JSON viewer:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16424/accessibility_json.png" style="display: block; height: 586px; margin: 0px auto; width: 800px;"></p> + +<p>Once opened, you can save or copy the data as necessary. The JSON viewer can also show you the raw JSON data on a separate tab in the viewer.</p> + +<h3 id="Check_for_accessibility_issues">Check for accessibility issues</h3> + +<p>You can check for accessibility issues by clicking the drop-down menu next to: <strong>Check for issues</strong>. The available menu items include:</p> + +<ul> + <li><strong>None</strong> — Don't show the possible list of issues</li> + <li><strong>All Issues</strong> — Check for all types of issues</li> + <li><strong>Contrast</strong> — Check for issues with visual contrast</li> + <li><strong>Text Labels</strong> — Check for issues with missing text labels</li> +</ul> + +<p>When you one of the menu items, Firefox scans your document for the type of issues you selected. Depending on the size and complexity of your document, this may take a few seconds. When the scan is complete, the left side of the Accessibility Inspector panel displays only the items that have that type of issue. In the right side of the panel, the <em>Checks</em> subpanel lists the specific issue with the selected node. For each type of issue, there is a <strong>Learn more</strong> link to further information on <em>MDN Web Docs</em> about the issue.</p> + +<p><img alt='Check for "all" issues, with "contrast" and "text labels" selected' src="https://mdn.mozillademos.org/files/16863/check_for_issues_menu.png" style="border: 1px solid black; display: block; height: 325px; margin: 0px auto; width: 918px;"></p> + +<p>The menu items act as toggles. Select the item to view that type of issue; select the item again to clear the display of issues of that type.</p> + +<p>Issues with a particular item are always displayed in the <em>Checks</em> subpanel as you browse the tree. The <strong>Check for issues</strong> buttons are a quick way to view all and only those items that have issues.</p> + +<h2 id="Notable_related_features">Notable related features</h2> + +<p>When the accessibility features are turned on, there are a number of useful additional features available in the DevTools, which are detailed below:</p> + +<h3 id="Context_menu_options">Context menu options</h3> + +<p>An extra context menu option is added, both for the general context menu on the web page when right/<kbd>Ctrl</kbd> + clicking a UI feature, and the HTML pane of the page inspector when right/<kbd>Ctrl</kbd> + clicking a DOM element:</p> + +<p><img alt="context menu in the browser viewport, with a highlighted option: Inspect Accessibility Properties" src="https://mdn.mozillademos.org/files/16028/web-page-context-menu.png" style="border-style: solid; border-width: 1px; height: 798px; width: 1200px;"></p> + +<p><img alt="context menu in the DOM inspector, with a highlighted option: Show Accessibility Properties" src="https://mdn.mozillademos.org/files/16020/dom-inspector-context-menu.png" style="border-style: solid; border-width: 1px; height: 803px; width: 1200px;"></p> + +<p>When you choose the <em>Inspect Accessibility Properties</em>/<em>Show Accessibility Properties</em> context menu options, the <em>Accessibility</em> tab is immediately opened to show the corresponding accessibility tree item and its properties.</p> + +<div class="note"> +<p><strong>Note</strong>: Some DOM elements do not have accessibility properties — in that case, the <em>Inspect Accessibility Properties</em>/<em>Show Accessibility Properties</em> context menu item is grayed out.</p> +</div> + +<h3 id="Highlighting_of_UI_items">Highlighting of UI items</h3> + +<p>In the Accessibility tab, when the mouse hovers over accessibility items, you can see a semi-transparent highlight appear over the UI items they relate to, if appropriate. The role and name of the item will be shown in a small information bar along with color contrast information if appropriate. This is useful for determining how the items in the accessibility tree relate to the UI items on the actual page.</p> + +<p>In the following example, you can see that the image has been highlighted and its role, graphic, name, "Road, Asphalt, Sky, Clouds, Fall", and the color contrast ratio, 3.46, appears in the information bar above it.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16302/image_accessibility.png" style="border: 1px solid black; display: block; height: 347px; margin: 0px auto; width: 451px;"></p> + +<h4 id="Color_contrast">Color contrast</h4> + +<p>Contrast ratio information is particularly useful when you are designing the color palette for your website because if the contrast is not sufficient, readers with visual impairments such as low vision or color blindness will be unable to read the text. See <a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast">Color contrast</a> for details about recommended contrast ratios.</p> + +<p>For example:</p> + +<p><img alt="A screenshot of colour contrast highlighter where text contrast if below the AA WCAG threshold." src="https://mdn.mozillademos.org/files/16459/Screen_Shot_2019-01-29_at_10.11.13.png" style="display: block; height: 237px; margin: 0px auto; width: 357px;"></p> + +<p>The color contrast in the image above is 2.86, so potentially not enough contrast to make it easy to read. Notice the warning symbol that indicates that the contrast fails to meet the acceptable contrast ratio.</p> + +<p>As of Firefox 65, viewing this information for some foreground text that has a complex background image (e.g. a gradient) gives you a range of color contrast values. For example:</p> + +<p><img alt="A screenshot of colour contrast highlighter where for text over gradient background with contrast satisfying the AAA WCAG guidelines." src="https://mdn.mozillademos.org/files/16460/Screen_Shot_2019-01-29_at_10.21.07.png" style="display: block; height: 434px; margin: 0px auto; width: 1484px;"></p> + +<p>In this example, the contrast ranges from 4.72 to 5.98. The numbers are followed by AAA and a checkmark in green, indicating that the large text has a contrast ratio of 4.5:1 or more, meeting the criteria for enhanced contrast, or Level AAA.</p> + +<p>See <a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast">Color contrast</a> for more information on color contrast.</p> + +<h3 id="Accessibility_picker">Accessibility picker</h3> + +<p>Like the element picker button on the <a href="/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element#With_the_node_picker">Page Inspector</a>, the <em>Accessibility</em> tab's element picker button allows you to hover and select UI items on the current page highlight objects in the accessibility tree.</p> + +<p>The accessibility tab element picker looks slightly different from the Page Inspector HTML pane picker, as shown below:</p> + +<p><img alt="highlighted dom inspector picker button, with a tooltip saying Pick an element from the page" src="https://mdn.mozillademos.org/files/16024/dom-inspector-picker.png" style="border-style: solid; border-width: 1px; height: 677px; width: 1716px;"></p> + +<p><img alt="highlighted accessibility inspector button, with a tooltip saying Pick accessible object from the page" src="https://mdn.mozillademos.org/files/16023/accessibility-inspector-picker.png" style="border-style: solid; border-width: 1px; height: 677px; width: 1717px;"></p> + +<p>When you "perform a pick", you see the accessibility object highlighted in the accessibility tree, and the picker is then deactivated. Note, however, that if you hold the <kbd>Shift</kbd> key down when "performing a pick", you can "preview" the accessibility object in the tree (and its properties in the right-hand pane), but then continue picking as many times as you like (the picker does not get cancelled) until you release the <kbd>Shift</kbd> key.</p> + +<p>When the picker is activated, you can also deactivate it by pressing the picker button a second time, or pressing the <kbd>Esc</kbd> key.</p> + +<h2 id="Typical_use_cases">Typical use cases</h2> + +<p>The Accessibility Inspector is very useful for spotting accessibility problems at a glance. For a start, you can investigate items that don't have a proper text equivalent — images without <code>alt</code> text and form elements without proper labels have a <code>name</code> property of <code>null</code>, for example.</p> + +<p><img alt="A form input highlighted in the UI, with information about it shown in the accessibility inspector to reveal that it has no label — it has a name property of null" src="https://mdn.mozillademos.org/files/16027/use-case-no-label.png" style="border-style: solid; border-width: 1px; height: 1180px; width: 1182px;"></p> + +<p>It is also very handy for verifying semantics — you can use the <em>Inspect Accessibility Properties</em> context menu option to quickly see whether an item has the correct role set on it (e.g., whether a button is really a button, or a link is really a link).</p> + +<p><img alt="A UI element that looks like a button, with information about it shown in the accessibility inspector to reveal that it isn't a button, it is a section element. It has a name property of null" src="https://mdn.mozillademos.org/files/16026/use-case-fake-button.png" style="border-style: solid; border-width: 1px; height: 1180px; width: 1182px;"></p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Learn/Accessibility">Accessibility tutorials</a></li> + <li><a href="/en-US/docs/Web/Accessibility">Web accessibility overview</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Practical debugging information</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG">Understanding WCAG</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li> + <li><a href="https://www.smashingmagazine.com/2015/03/web-accessibility-with-accessibility-api/">Accessibility APIs: A Key To Web Accessibility</a> by Léonie Watson</li> +</ul> diff --git a/files/id/tools/debugger/index.html b/files/id/tools/debugger/index.html new file mode 100644 index 0000000000..c1f0d2c11e --- /dev/null +++ b/files/id/tools/debugger/index.html @@ -0,0 +1,49 @@ +--- +title: Debugger +slug: Tools/Debugger +translation_of: Tools/Debugger +--- +<div>{{ToolsSidebar}}</div><p>The JavaScript Debugger enables you to step through JavaScript code and examine or modify its state to help track down bugs.</p> + +<p>You can use it to debug code running locally in Firefox or running remotely, for example in a Firefox OS device or Firefox on Android. See <a href="/en-US/docs/Tools/Remote_Debugging">remote debugging </a>to learn how to connect the debugger to a remote target.</p> + +<p>{{EmbedYouTube("sK8KU8oiF8s")}}</p> + +<hr> +<h2 id="User_Interface_Tour">User Interface Tour</h2> + +<p>To find your way around the debugger, here's a <a href="/en-US/docs/Tools/Debugger/UI_Tour">quick tour of the UI</a>.</p> + +<hr> +<h2 id="How_to">How to</h2> + +<p>To find out what you can do with the debugger, see the following how-to guides:</p> + +<div class="twocolumns"> +<ul> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Open_the_debugger">Open the debugger</a></li> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Set_a_breakpoint">Set a breakpoint</a></li> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Disable_breakpoints">Disable breakpoints</a></li> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Step_through_code">Step through code</a></li> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Break_on_a_DOM_event">Break on a DOM event</a></li> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Highlight_and_inspect_DOM_nodes">Highlight and inspect DOM nodes</a></li> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Pretty-print_a_minified_file">Pretty-print a minified file</a></li> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Search_and_filter">Search and filter</a></li> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">Set a conditional breakpoint</a></li> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Examine,_modify,_and_watch_variables">Examine, modify, and watch variables</a></li> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Use_a_source_map">Use a source map</a></li> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Black_box_a_source">Black box a source</a></li> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Debug_eval_sources">Debug eval sources</a></li> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Access_debugging_in_add-ons">Access debugging in add-ons</a></li> +</ul> +</div> + +<hr> +<h2 id="Reference">Reference</h2> + +<div class="twocolumns"> +<ul> + <li><a href="/en-US/docs/Tools/Debugger/Keyboard_shortcuts">Keyboard shortcuts</a></li> + <li><a href="/en-US/docs/Tools/Debugger/Settings">Settings</a></li> +</ul> +</div> diff --git a/files/id/tools/index.html b/files/id/tools/index.html new file mode 100644 index 0000000000..1b8f7b5fa8 --- /dev/null +++ b/files/id/tools/index.html @@ -0,0 +1,189 @@ +--- +title: Alat +slug: Tools +tags: + - Mengembangkan Mozilla + - Panduan + - Pengembangan Web + - 'Pengmbang Web: Alat' +translation_of: Tools +--- +<p class="summary">Uji, ubah, dan <em>debug</em> HTML, CSS, dan JavaScript di desktop dan di ponsel.</p> + + + +<hr> +<div class="column-container"> +<div class="column-third"></div> + +<div class="column-third"> +<p><img alt="" src="https://mdn.mozillademos.org/files/15588/logo-developer-quantum.png" style="display: block; margin: 0px auto;"></p> + +<p style="text-align: center;">Untuk alat dan fitur terbaru, cobalah Firefox Edisi Pengembang, Cobalah Firefox Developer Edition.</p> + +<p><a href="https://www.mozilla.org/id/firefox/developer/" style="width: 280px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Unduh Firefox Developer Edition</a></p> +</div> +</div> + +<h2 id="Peralatan_Inti">Peralatan Inti</h2> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Pemeriksa_Laman">Pemeriksa Laman</h3> + +<p><a href="/en-US/docs/Tools/Page_Inspector"><img alt="The all-new Inspector panel in Firefox 57." src="https://mdn.mozillademos.org/files/15481/57-inspector.png" style="display: block; height: 243px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>Lihat dan ubah konten dan tata letak laman. Visualisasikan banyak aspek laman termasuk <em>box model</em>, animasi dan tata letak <em>grid</em>.</p> +</div> + +<div class="column-half"> +<h3 id="Konsol_Web">Konsol Web</h3> + +<p><a href="/en-US/docs/Tools/Web_Console"><img alt="The all-new Console in Firefox 57." src="https://mdn.mozillademos.org/files/15483/57-console.png" style="display: block; height: 239px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>Lihat pesan yang dicatat oleh laman web dan interaksi dengan laman menggunaan JavaScript.</p> +</div> +</div> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Pen-debug_JavaScript">Pen-<em>debug </em>JavaScript</h3> + +<p><a href="/en-US/docs/Tools/Debugger"><img alt="The all-new Firefox 57 Debugger.html" src="https://mdn.mozillademos.org/files/15485/57-debugger.png" style="display: block; height: 239px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>Berhenti, melangkah melalui, uji, dan modifikasi JavaScript yang berjalan dalam sebuah laman.</p> +</div> + +<div class="column-half"> +<h3 id="Monitor_Jaringan">Monitor Jaringan</h3> + +<p><a href="/en-US/docs/Tools/Network_Monitor"><img alt="The Network panel in Firefox 57 DevTools." src="https://mdn.mozillademos.org/files/15487/57-network.png" style="display: block; height: 239px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>Lihat permintaan jaringan yang dibuat ketika sebuah laman dimuat.</p> +</div> +</div> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Alat_Kinerja">Alat Kinerja</h3> + +<p><a href="/en-US/docs/Tools/Performance"><img alt="" src="https://mdn.mozillademos.org/files/14536/performance.png" style="display: block; height: 1026px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>Analisa kinerja responsif, JavaScript, dan tata letak situs Anda.</p> +</div> + +<div class="column-half"> +<h3 id="Mode_Desain_Responsif">Mode Desain Responsif</h3> + +<p><a href="/en-US/docs/Tools/Responsive_Design_Mode"><img alt="Responsive Design mode in Firefox 57." src="https://mdn.mozillademos.org/files/15491/57-rdm.png" style="display: block; height: 266px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>Lihat bagaimana situs atau aplikasi Anda akan terlihat dan berperilaku pada perangkat dan jenis jaringan yang berbeda.</p> +</div> +</div> + +<hr> +<h2 id="Alat_Lainnya">Alat Lainnya</h2> + +<p>Alat pengembang ini juga dibuat ke dalam Firefox. Tidak seperti "Alat Inti" di atas, mungkin Anda tidak menggunakannya setiap hari.</p> + +<div class="twocolumns"> +<dl> + <dt><a href="/en-US/docs/Tools/Memory">Memori</a></dt> + <dd>Cari tahu objek mana yang sedang menyimpan memori yang digunakan.</dd> + <dt><a href="/en-US/docs/Tools/Storage_Inspector">Pemeriksa Penyimpanan</a></dt> + <dd>Memeriksa kuki, penyimpan lokal, <em>indexedDB</em>, dan Inspect cookies, local storage, indexedDB, dan penyimpanan sesi kini pada sebuah laman.</dd> + <dt><a href="/en-US/docs/Tools/DOM_Property_Viewer">DOM </a><em><a href="/en-US/docs/Tools/DOM_Property_Viewer">Property Viewer</a></em></dt> + <dd>Memeriksa properti DOM laman, fungsi, dan lain-lain.</dd> + <dt><a href="/en-US/docs/Tools/GCLI">Toolbar Pengembang</a></dt> + <dd>Sebuah antarmuka <em>command-line</em> untuk alat pengembang.</dd> + <dt><em><a href="/en-US/docs/Tools/Eyedropper">Eyedropper</a></em></dt> + <dd>Memilih warna dari laman.</dd> + <dt><em><a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a></em></dt> + <dd>Sebuah editor teks yang dibuat ke dalam Firefox yang memungkinkan Anda menulis dan menjalankan JavaScript</dd> + <dt><a href="/en-US/docs/Tools/Style_Editor">Editor Gaya</a></dt> + <dd>Tinjau dan ubah gaya CSS untuk halaman saat ini.</dd> + <dt><em><a href="/en-US/docs/Tools/Shader_Editor">Shader Editor</a></em></dt> + <dd>Tinjau dan edit <em>vertex </em>dan <em>fragment shaders</em> yang digunakan oleh <a href="/en-US/docs/Web/WebGL">WebGL</a>.</dd> + <dt><a href="/en-US/docs/Tools/Web_Audio_Editor">Editor Audio Web</a></dt> + <dd>Periksa grafik dari node audio dalam kontek audio, dan modifikasi parameternya.</dd> + <dt><a href="/en-US/docs/Tools/Screenshot_tool">Mengambil tangkapan layar</a></dt> + <dd>Mengambil sebuah tangkapan layar dari keseluruhan laman atau dari sebuah elemen tunggal.</dd> + <dt><a href="/en-US/docs/Tools/Measure_a_portion_of_the_page">Mengukur sebagian laman</a></dt> + <dd>Mengukur area tertentu pada sebuah laman web.</dd> + <dt><a href="/en-US/docs/Tools/Rulers"><em>Rulers</em> (Penggaris)</a></dt> + <dd>Penggaris sepanjang horizontal dan vertikal pada sebuah laman web.</dd> +</dl> +</div> + +<hr> +<h2 id="Menghubungkan_Alat_Pengembang">Menghubungkan Alat Pengembang</h2> + +<p>Jika Anda membuka alat pengembang menggunakan <a href="/en-US/docs/Tools/Keyboard_shortcuts#Opening_and_closing_tools">pintasan <em>keyboard</em></a> atau or item menu yang sama, mereka akan menargetkan dokumen yang telah di-<em>host</em> oleh tab yang sedang aktif. Tetapi Anda bisa memasang alat ke berbagai target lain, juga di dalam peramban saat ini dan di berbagai peramban atau bahkan perangkat yang berbeda.</p> + +<div class="twocolumns"> +<dl> + <dt><a href="/en-US/docs/Tools/about:debugging">about:debugging</a></dt> + <dd>Men-<em>debug</em> <em>pengayas</em>, tab konten, dan pekerja yang berjalan di peramban.</dd> + <dt><a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_over_Wifi">Menghubungan ke Firefox untuk Android</a></dt> + <dd>Menghubungkan alat pengembang ke sebuah <em>instance</em> dari Firefox yang berjalan pada sebuah perangkat Android.</dd> + <dt><a href="/en-US/docs/Tools/Working_with_iframes">Menghubungkan ke iframes</a></dt> + <dd>Menghubungkan alat pengembang ke sebuah iframe tertentu pada laman saat ini</dd> + <dt><a href="/en-US/docs/Tools/Valence">Menghubungkan ke peramban lain</a></dt> + <dd>Menghubungkan alat pengembang ke Chrome pada Android dan Safari pada iOS.</dd> +</dl> +</div> + +<hr> +<h2 id="Men-debug_peramban">Men-<em>debug</em> peramban</h2> + +<p>Secara <em>default</em>, alat pengembang dilampirkan ke laman web atau aplikasi web. Tetapi Anda bisa juga menghubungkan mereka ke peramban secara keseluruhan. Ini berguna untuk pengembangan peramban dan <em>pengayas</em>.</p> + +<div class="twocolumns"> +<dl> + <dt><a href="/en-US/docs/Tools/Browser_Console">Konsol Peramban</a></dt> + <dd>Lihat pesan yang dicatat oelh peramban itu dan oleh <em>pengaya</em>, dan jalankan kode JavaScript di linkup peramban.</dd> + <dt><a href="/en-US/docs/Tools/Browser_Toolbox">Kotak Perkakas Peramban</a></dt> + <dd>Menyematkan alat pengembang ke peramban itu sendiri.</dd> +</dl> +</div> + +<hr> +<h2 id="Memperluas_devtools">Memperluas <em> devtools</em></h2> + +<p>Alat pengembang dirancang agar dapat diperluas. Pengaya Firefox dapat mengakses alat pengembang dan komponen yang mereka gunakan untuk memperluas alat yang ada dan menambahkan alat yang baru. Dengan protokol men-<em>debug</em> jarak jauh, Anda dapat menerapkan men-<em>debug</em> klien dan server Anda sendiri, memungkinkan Anda men-<em>debug</em> situs web menggunakan alat Anda sendiri atau untuk men-debug berbagai sasaran menggunakan alat Firefox.</p> + +<div class="twocolumns"> +<dl> + <dt><a href="/en-US/docs/Tools/Example_add-ons">Contoh pengaya alat pengembang</a></dt> + <dd>Gunakan contoh-contoh ini untuk memahami bagaimana untuk menerapkan pengaya alat pengembang.</dd> + <dt><a href="/en-US/docs/Tools/Adding_a_panel_to_the_toolbox">Menambah sebuah panel baru ke alat pengembang</a></dt> + <dd>Menulis sebuah pengaya yang menambah sebuah panel baru ke Kotak perkakas.</dd> + <dt><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol">Protokol Men-<em>debug</em> Jarak Jauh</a></dt> + <dd>Protokol digunakan untuk mengkoneksi Alat Firefox Developer Tools untuk sebuah target men-<em>debug</em> seperti <em>instance</em> dari perangkat Firefox atau Firefox OS.</dd> + <dt><a href="/en-US/docs/Tools/Editor">Peubah Sumber</a></dt> + <dd>Sebuah editor kode di buat kedalam Firefox yang bisa disematkan ke pengaya Anda.</dd> + <dt><a href="/en-US/docs/Tools/Debugger-API">Antarmuka <code>Debugger</code></a></dt> + <dd>Sebuah API yang memungkinkan kode JavaScript mengemati eksekusi dari kode JavaScript yang lain. Alat Pengembang Firefox menggunakan API untuk menerapakan pen-<em>debug</em> JavaScript.</dd> + <dt><a href="/en-US/docs/Tools/Web_Console/Custom_output">Konsol Web keluaran kustom</a></dt> + <dd>Bagaimana memperluas keluaran dari <a href="/en-US/docs/Tools/Web_Console">Konsol Web</a> dan <a href="/en-US/docs/Tools/Browser_Console">Konsol Peramban</a>.</dd> +</dl> +</div> + +<hr> +<h2 id="Migrasi_dari_Firebug">Migrasi dari Firebug</h2> + +<p>Firebug akan sampai pada akhir masa pakainya (lihat <a href="https://hacks.mozilla.org/2016/12/firebug-lives-on-in-firefox-devtools/">Firebug tinggal di Firefox DevTools</a> untuk lebih jelasnya mengapa), dan kita menghargai bahwa beberapa orang akan merasa migrasi ke set alat pengembang yang kurang terkenal akan menjadi menantang. Untuk memudahkan transisi dari Firebug ke alat pengembang Firefox, kami telah menulis panduan praktis — <a href="/en-US/docs/Tools/Migrating_from_Firebug">Migrasi dari Firebug</a>.</p> + +<hr> +<h2 id="Kontribusi">Kontribusi</h2> + +<p>Jika Anda ingin untuk membantu mengembangkan alat pengembang, sumber daya ini akan membantu Anda untuk memulai.</p> + +<div class="twocolumns"> +<dl> + <dt><a href="https://devtools-html.github.io/#getting-in-touch">Ikut Terlibat</a></dt> + <dd>Halaman wiki Mozilla menjelaskan bagaimana caranya untuk terlibat.</dd> + <dt><a href="http://firefox-dev.tools/">firefox-dev.tools</a></dt> + <dd>Sebuah alat yang membantu mencari <em>bugs</em> untuk dikerjakan.</dd> +</dl> +</div> diff --git a/files/id/tools/page_inspector/how_to/index.html b/files/id/tools/page_inspector/how_to/index.html new file mode 100644 index 0000000000..2f18038ec9 --- /dev/null +++ b/files/id/tools/page_inspector/how_to/index.html @@ -0,0 +1,13 @@ +--- +title: How to +slug: Tools/Page_Inspector/How_to +tags: + - NeedsTranslation + - TopicStub +translation_of: Tools/Page_Inspector/How_to +--- +<div>{{ToolsSidebar}}</div><p><span class="seoSummary">Links for various HOW TO's can be found here. These links describe in depth the HOW TO techniques.</span></p> + +<p>{{ ListSubpages () }}</p> + +<p> </p> diff --git a/files/id/tools/page_inspector/index.html b/files/id/tools/page_inspector/index.html new file mode 100644 index 0000000000..68f6b614ec --- /dev/null +++ b/files/id/tools/page_inspector/index.html @@ -0,0 +1,53 @@ +--- +title: Page Inspector +slug: Tools/Page_Inspector +tags: + - CSS + - HTML + - Tools + - Web Development +translation_of: Tools/Page_Inspector +--- +<div>{{ToolsSidebar}}</div><p>Gunakan peninjau halaman untuk melihat dan memodifikasi HTML dan CSS dari sebuah halaman.</p> + +<p>Anda bisa melihat atau memeriksa halaman yang telah dimuat pada salinan lokal di firefox, atau pada remote target seperti pada perangkat Firefox OS atau firefox untuk android. Lihat <a href="/en-US/docs/Tools/Remote_Debugging">remote debugging </a>untuk mempelajari bagaimana cara menghubungkan developer tools pada sebuah remote target.</p> + +<hr> +<h2 id="Mempelajari_Antarmuka_Pengguna">Mempelajari Antarmuka Pengguna</h2> + +<p>Untuk mengetahui cara menggunakan inspector/Peninjau, berikut <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour">tur singkat dari UI</a>.</p> + +<hr> +<h2 id="Paduan">Paduan</h2> + +<p>Untuk mengetahui apasaja yang anda bisa lakukan dengan inspector, lihat paduan berikut:</p> + +<div class="twocolumns"> +<ul> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector">Membuaka Inspector</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">Memeriksa dan merubah HTML</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Memeriksa dan mengubah box model</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Inspect_and_select_colors">Menuinjau dan memilih warna</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Reposition_elements_in_the_page">Mengubah posisi elemen dari sebuah halaman</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/View_fonts">Melihat font</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Visualize_transforms">Visualize transforms</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_API">Menggunakan API Inspector</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element">Memilih Elemen</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Memeriksa dan mengubah CSS</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners">Memeriksa event listeners</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations">Bekerja menggunakan animations</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_filters">Menubah Filter CSS</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/View_background_images">Melihat gambar latar</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_from_the_Web_Console">Menggunakan Inspector dari Web Console</a></li> +</ul> +</div> + +<hr> +<h2 id="Referensi">Referensi</h2> + +<div class="twocolumns"> +<ul> + <li><a href="/en-US/docs/Tools/Page_Inspector/Keyboard_shortcuts">Keyboard shortcuts </a></li> + <li><a href="/en-US/docs/Tools/Tools_Toolbox#Inspector">Settings</a></li> +</ul> +</div> diff --git a/files/id/tools/remote_debugging/index.html b/files/id/tools/remote_debugging/index.html new file mode 100644 index 0000000000..a917c007b1 --- /dev/null +++ b/files/id/tools/remote_debugging/index.html @@ -0,0 +1,34 @@ +--- +title: Remote Debugging +slug: Tools/Remote_Debugging +tags: + - NeedsTranslation + - TopicStub +translation_of: Tools/Remote_Debugging +--- +<div>{{ToolsSidebar}}</div><p>You can use the Firefox developer tools on your desktop to debug code running remotely: in a different process on the same device or on a completely different device. To do this you use Firefox to attach the <a href="/en-US/docs/Toolbox" title="/en-US/docs/Toolbox">Toolbox</a> to the remote process, and the Toolbox is then launched in its own window. At the moment the following tools support remote debugging:</p> + +<ul> + <li><a href="/en-US/docs/Tools/Page_Inspector">Page Inspector</a></li> + <li><a href="/en-US/docs/Tools/Debugger" title="/en-US/docs/Tools/Debugger">JavaScript Debugger</a></li> + <li><a href="/en-US/docs/Tools/Style_Editor" title="/en-US/docs/Tools/Style_Editor">Style Editor</a></li> + <li><a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Web Console</a></li> + <li><a href="/en-US/docs/Tools/Profiler" title="/en-US/docs/Tools/Profiler">Profiler</a></li> + <li><a href="/en-US/docs/Tools/Network_Monitor" title="/en-US/docs/Tools/Network_Monitor">Network Monitor</a></li> +</ul> + +<h2 id="Firefox_for_Android">Firefox for Android</h2> + +<p><a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">Remotely debugging Firefox for Android</a> describes how to connect to Firefox on an Android device over USB.</p> + +<h2 id="Firefox_for_Metro">Firefox for Metro</h2> + +<p><a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Metro">Remotely debugging Firefox for Metro</a> describes how to use desktop Firefox to debug code running in Windows 8 (Metro-style) Firefox.</p> + +<h2 id="Firefox_OS">Firefox OS</h2> + +<p><a href="/en-US/Firefox_OS/Using_the_App_Manager">Using the App Manager</a> includes instructions for connecting the Firefox developer tools to the Firefox OS simulator or to a Firefox OS device.</p> + +<h2 id="Thunderbird">Thunderbird</h2> + +<p><a href="/en-US/docs/Tools/Remote_Debugging/Thunderbird">Remotely debugging Thunderbird</a> explains how a combination of Firefox and Thunderbird can be used to debug code running in Thunderbird.</p> diff --git a/files/id/tools/webide/index.html b/files/id/tools/webide/index.html new file mode 100644 index 0000000000..3cf3b7bf2b --- /dev/null +++ b/files/id/tools/webide/index.html @@ -0,0 +1,458 @@ +--- +title: WebIDE +slug: Tools/WebIDE +translation_of: Archive/WebIDE +--- +<div>{{ToolsSidebar}}</div><div class="geckoVersionNote"> +<p>WebIDE is available from Firefox 34 onwards.</p> +</div> + +<div class="summary"> +<p>WebIDE is the replacement for the <a href="/en-US/Firefox_OS/Using_the_App_Manager">App Manager</a>. Like the App Manager, it enables you to run and debug <a href="/en-US/Firefox_OS">Firefox OS</a> apps using the <a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> or a real Firefox OS device.</p> + +<p>However, it also provides an editing environment for you to create and develop Firefox OS apps, including a tree view of all the files in your app with the ability to edit and save them, and two app templates to help you get started.</p> + +<p>Finally, WebIDE enables you to connect the <a href="/en-US/docs/Tools">Firefox Developer Tools</a> to a number of other browsers, including Firefox for Android, Chrome on Android, and Safari on iOS. See the <a href="/en-US/docs/Tools/Remote_Debugging">Remote Debugging</a> page for instructions on how to connect to a specific browser.</p> +</div> + +<p>With WebIDE, you first <a href="/en-US/docs/Tools/WebIDE#Setting_up_runtimes">set up one or more runtimes</a>. A runtime is an environment in which you'll run and debug the app. A runtime could be a Firefox OS device connected to the desktop over USB, or it could be a Firefox OS Simulator installed on the desktop itself.</p> + +<p>Next, you <a href="/en-US/docs/Tools/WebIDE#Creating_and_opening_apps">create an app, or open an existing app</a>. If you're creating a new app you start with a template that includes the directory structure and the minimum boilerplate you need to get started, or a more complete template that shows how to use a privileged API. WebIDE shows your app's files in a tree, and you can edit and save them using a built-in source editor. Of course, you don't have to use the built-in editor: you can develop your app entirely outside WebIDE, and only use it for debugging.</p> + +<p>Finally, you can <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Running_and_debugging_apps">install the app in one of the runtimes and run it</a>. You can then open the usual suite of developer tools - the <a href="/en-US/docs/Tools/Page_Inspector">Inspector</a>, <a href="/en-US/docs/Tools/Web_Console">Console</a>, <a href="/en-US/docs/Tools/Debugger">JavaScript Debugger</a> and so on - to examine and modify the running app.</p> + +<h2 id="System_requirements">System requirements</h2> + +<p>To develop and debug apps using WebIDE, all you need is Firefox version 33 or later. To test on a real Firefox OS device, you need a device running Firefox OS 1.2 or later, and a USB cable.</p> + +<p>You can only use WebIDE for Firefox OS if you're targeting Firefox OS 1.2 or later.</p> + +<h2 id="Opening_WebIDE">Opening WebIDE</h2> + +<p>There are three ways to open WebIDE:</p> + +<ul> + <li>In the Web Developer menu, click on the "WebIDE" entry and WebIDE opens.</li> + <li>Use the keybinding Shift-F8.</li> + <li>A dedicated icon in the Firefox toolbar. This is always present if you're using <a href="/en-US/Firefox/Developer_Edition">Firefox Developer Edition</a>, and with any Firefox from version 36 onwards it appears after you've opened the WebIDE once:</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9437/webide-icon.png" style="display: block; margin-left: auto; margin-right: auto; width: 897px;"></p> + +<p>Here's what the WebIDE looks like:<img alt="" src="https://mdn.mozillademos.org/files/8033/webide-initial.png" style="display: block; height: 560px; margin-left: auto; margin-right: auto; width: 720px;">The dropdown on the left labeled "Open App" lets you open existing apps or create new ones. The dropdown on the right labeled "Select Runtime" lets you select a runtime or set up a new runtime.</p> + +<p>The buttons in the middle run, stop, and debug the app: they are only enabled when you have opened an app and selected a runtime.</p> + +<p>From Firefox 36, you can change the font size throughout WebIDE using the standard keyboard shortcuts (use <code>Command</code> instead of <code>Control</code> on OS X):</p> + +<ul> + <li><code>Ctrl +</code> increases font size</li> + <li><code>Ctrl -</code> decreases font size</li> + <li><code>Ctrl 0</code> resets the font size to the default</li> +</ul> + +<h2 id="Setting_up_runtimes">Setting up runtimes</h2> + +<p>Under the "Select Runtime" dropdown, runtimes are grouped into three types:</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Connecting_a_Firefox_OS_device">USB devices</a>: Firefox OS devices connected over USB. From Firefox 36 this also gets you connected to <a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE">Firefox for Android over USB</a>.</li> + <li><a href="/en-US/docs/Tools/WebIDE#Adding_a_Simulator">Simulators</a>: instances of the Firefox OS Simulator that you've installed</li> + <li><a href="/en-US/docs/Tools/WebIDE#Custom_runtimes">Custom</a>: use this to connect a runtime to WebIDE using an arbitrary name and port. From Firefox 36, this runtime type is renamed "Other". If you have the <a href="/en-US/docs/Tools/Valence">Valence</a> add-on installed, this section will also list the <a href="/en-US/docs/Tools/WebIDE#Valence-enabled_runtimes">additional runtimes it enables</a>.</li> +</ul> + +<p>The first time you click the dropdown, you might not see any runtimes here:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8043/webide-no-runtimes.png" style="display: block; height: 564px; margin-left: auto; margin-right: auto; width: 723px;">The rest of this section describes how you can add some runtimes.</p> + +<h3 id="Connecting_a_Firefox_OS_device">Connecting a Firefox OS device</h3> + +<p>Before you can connect a Firefox OS device, there's some setup you have to go through:</p> + +<ul> + <li><strong>check your Firefox OS version: </strong>make sure your device is running Firefox OS 1.2/Boot2Gecko 1.2 or higher. To check the version, go to the Settings app on the device, then <code>Device Information > Software</code>. If you don't have a high enough version, find your device in the <a href="/en-US/Firefox_OS/Developer_phone_guide">developer phone guide</a> and follow the instructions for upgrading.</li> + <li><strong>enable remote debugging: </strong>in the Settings app on the device, go to <code>Device information > More information > Developer</code>. + <ul> + </ul> + + <ul> + <li>Firefox OS 1.3 and earlier: "Remote Debugging" is just a simple checkbox. Check it.</li> + <li>Firefox OS 1.4 and later: "Remote Debugging" asks you to enable for just ADB, or for ADB and DevTools. Select "ADB and DevTools".</li> + </ul> + </li> + <li><strong>disable Screen lock on your device:</strong> in the Settings app on the device, go to <code>Screen Lock</code> and unchecking the <code>Lock Screen</code> checkbox. This is a good idea because when the screen gets locked, the phone connection gets lost, meaning it is no longer available for debugging.</li> + <li><strong>if you want unrestricted debugging privileges, including certified apps, built-in apps, and apps already installed on a real device</strong>: see the section on <a href="/en-US/docs/Tools/WebIDE#Unrestricted_app_debugging_%28including_certified_apps.2C_main_process.2C_etc.%29">Unrestricted app debugging (including certified apps, main process, etc.)</a>.</li> +</ul> + +<div class="note"> +<p><strong>Linux only:</strong></p> + +<ul> + <li>add a <code>udev</code> rules file, as documented in step 3 of this guide to <a href="http://developer.android.com/tools/device.html#setting-up">setting up an Android device</a>. The <code>idVendor</code> attribute to use for the Geeksphone is "05c6", and <a href="http://developer.android.com/tools/device.html#VendorIds">this page</a> lists other <code>idVendor</code> values.</li> +</ul> +</div> + +<div class="note"> +<p><strong>Windows only:</strong></p> + +<ul> + <li>you need to install drivers, as documented in step 3 of this guide to <a href="http://developer.android.com/tools/device.html#setting-up">setting up an Android device</a>. You can find drivers for Geeksphone devices on the <a href="http://downloads.geeksphone.com/">Geeksphone web site</a>. Windows 8 by default will not let you install unsigned drivers. See this tutorial on <a class="external external-icon" href="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html" title="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html">"How to install an unsigned driver on Windows 8"</a>.</li> + <li>if WebIDE can't see your device after following all the steps, you may have to <a class="external external-icon" href="http://blog.fh-kaernten.at/wehr/?p=1182">edit adb_usb.ini</a>.</li> +</ul> +</div> + +<p>If there are any other Android devices connected to your computer, disconnect them. Now connect the device to the computer using USB. You should see the device appear under "USB DEVICES":</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8045/webide-select-runtime-keon.png" style="display: block; height: 562px; margin-left: auto; margin-right: auto; width: 710px;"></p> + +<p>If you don't see your device, see the <a href="/en-US/docs/Tools/WebIDE/Troubleshooting">Troubleshooting</a> page.</p> + +<h3 id="Connecting_to_Firefox_for_Android">Connecting to Firefox for Android</h3> + +<p>From Firefox 36 onwards Android devices connected over USB and running Firefox for Android appear as a runtime under "USB devices". See the article on <a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE">connecting to Firefox for Android from WebIDE</a>.</p> + +<p>Before Firefox 36, you can <a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">connect to Firefox for Android without using WebIDE at all</a>, or can use WebIDE by setting up a <a href="/en-US/docs/Tools/WebIDE#Remote_runtime">custom remote runtime</a>.</p> + +<h3 id="Adding_a_Simulator">Adding a Simulator</h3> + +<p><span style="line-height: 1.5;">The <a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> is <span style="line-height: 1.5;">a version of the higher layers of Firefox OS</span> that simulates a Firefox OS device, but runs on the desktop</span><span style="line-height: 1.5;">. </span><span style="line-height: 1.5;">It runs in a window the same size as a Firefox OS device, includes the Firefox OS user interface and built-in apps, and simulates many of the Firefox OS device APIs.</span></p> + +<p><span style="line-height: 1.5;">This means that in many cases, you don't need a real device to test and debug your app. </span></p> + +<p>The Simulator is big, so it doesn't ship inside Firefox but as a Firefox <a href="/en-US/Add-ons">add-on</a>. If you click "Install Simulator" in the Runtimes dropdown menu, you will go to a page from which you can install Simulators for various versions of Firefox OS.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8039/webide-install-simulator.png" style="display: block; height: 560px; margin-left: auto; margin-right: auto; width: 720px;">You can install as many as you like. Be patient, though: the Simulator is large and may take a few minutes to download. Once you've installed some Simulators you can close this "Extra Components" window, and the Simulators you've installed appear as options in the Runtimes dropdown menu:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8047/webide-select-runtime-keon-simulator.png" style="display: block; height: 559px; margin-left: auto; margin-right: auto; width: 712px;">To learn more about the Simulator, see its <a href="/en-US/docs/Tools/Firefox_OS_Simulator">documentation page</a>.</p> + +<h3 id="Custom_runtimes">Custom runtimes</h3> + +<h4 id="Remote_runtime">Remote runtime</h4> + +<p>With a custom remote runtime you can use an arbitrary hostname and port to connect to the remote device.</p> + +<p>Under the hood, Firefox OS devices and Android devices connect to the desktop using a program called the Android Debug Bridge, or <a href="http://developer.android.com/tools/help/adb.html">ADB</a>. By default, WebIDE uses an add-on called the ADB Helper: this simplifies the process for you by installing ADB and setting up port forwarding so the Firefox desktop tools can exchange messages with the device.</p> + +<p>This is convenient in most cases, but sometimes you might want to use ADB outside of WebIDE: for example, you might be running ADB directly from the command line. In that case you'll connect to the device by specifying a host and port using the <a href="http://developer.android.com/tools/help/adb.html#forwardports"><code>adb forward</code></a> command (example: <code>adb forward tcp:6000 localfilesystem:/data/local/debugger-socket</code>).<br> + <br> + If you then want to use WebIDE to connect as well, you should <a href="https://support.mozilla.org/en-US/kb/disable-or-remove-add-ons#w_how-to-disable-extensions-and-themes">disable the ADB Helper add-on</a> and connect WebIDE using the Custom runtime option, entering the host and port that you passed to <code>adb forward</code> (example: <code>localhost:6000</code>).</p> + +<p>Also, before Firefox 36, the ADB Helper does not yet support connecting to Firefox for Android, so if you want to connect WebIDE to Firefox for Android, you'll need to set up your own port forwarding and use a custom runtime. <a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">See more about connecting to Firefox for Android using ADB prior to Firefox 36</a>.</p> + +<h4 id="Valence-enabled_runtimes">Valence-enabled runtimes</h4> + +<p>If you have the <a href="/en-US/docs/Tools/Valence">Valence</a> add-on installed, you'll see three additional runtimes:</p> + +<ul> + <li>Chrome on Android</li> + <li>Safari on iOS</li> + <li>Chrome Desktop</li> +</ul> + +<p>For instructions on how to connect to these runtimes, see the relevant entry in the <a href="/en-US/docs/Tools/Remote_Debugging">Remote Debugging</a> page.</p> + +<h2 id="Selecting_a_runtime">Selecting a runtime</h2> + +<p>Once you've set up a runtime you can select it using the "Select Runtime" menu.</p> + +<ul> + <li>If you select a Simulator, WebIDE launches the Simulator.</li> + <li>If you select a Firefox OS device WebIDE connects to the device. On the device a dialog will ask you to confirm that you wish to connect: press "OK".</li> +</ul> + +<p>Now the "play" button in the center of the WebIDE toolbar is enabled: click it to install and run the app in the selected runtime.</p> + +<h3 id="Runtime_menu_items">Runtime menu items</h3> + +<p>When a runtime is selected, the Runtimes dropdown menu has up to five extra items:</p> + +<dl> + <dt><strong>Runtime Info</strong></dt> + <dd>Information on the current runtime</dd> + <dt><strong>Permissions Table</strong></dt> + <dd>A table summarising <a href="/en-US/Apps/Build/App_permissions">app permissions</a> for the current runtime, indicating, for each API and each <a href="/en-US/Marketplace/Options/Packaged_apps#Types_of_packaged_apps">app type</a>, whether access is allowed (✓), denied (✗), or whether the user is prompted (!)</dd> +</dl> + +<dl> + <dt><strong>Device Preferences</strong></dt> + <dd>A table listing, and letting you edit, the preferences that are made available in the runtime via the <a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIPrefService">Preferences service</a>. These are platform-level configuration values exposing the same set of data as Firefox's about:config (but for the device). Because these preferences are highly security-sensitive, you need to disable the <a href="/en-US/docs/Tools/WebIDE#Unrestricted_app_debugging_%28including_certified_apps.2C_main_process.2C_etc.%29">DevTools restricted privileges setting</a> before you can modify them.</dd> + <dt><strong>Device Settings</strong> (new in Firefox 38/Firefox OS 3)</dt> + <dd>A table listing, and letting you edit, the settings that can be controlled in the Firefox OS Settings app. Most things on the device which have a UI control to change (volume, alarm, etc.) are found in Device Settings. Because these settings are less sensitive than the device preferences, you can modify them without removing the restricted privileges setting. However, since this feature is new in Gecko 38 you need the WebIDE in Firefox 38 and a nightly build of Firefox OS or the Simulator.</dd> + <dt><strong>Screenshot</strong></dt> + <dd>A command to take a screenshot from the runtime.</dd> +</dl> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10185/webide-runtimes.png" style="display: block; height: 601px; margin-left: auto; margin-right: auto; width: 833px;"></p> + +<p> </p> + +<h2 id="Creating_and_opening_apps">Creating and opening apps</h2> + +<p>Under the "Open App" menu you get three options: create a new app, open a packaged app, and open a hosted app:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8049/webide-open-app-empty.png" style="display: block; height: 562px; margin-left: auto; margin-right: auto; width: 723px;"></p> + +<h3 id="Create_a_new_app">Create a new app</h3> + +<p>Select "New App..." to create a new app. You'll see a dialog offering you a choice between two templates, "Privileged Empty App" and "Privileged App".</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8053/webide-new-app.png" style="display: block; height: 591px; margin-left: auto; margin-right: auto; width: 739px;"></p> + +<p>Both templates are from Mozilla's <a href="https://github.com/mozilla/mortar">app template collection</a>, and provide you with the basic structure you need to get started. The "Privileged App" shows how an app can use permissions to load cross-origin content.</p> + +<p>Once you've selected a template you'll be asked to name the app and select a directory to store the files, and then the new app is opened in the <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">project editor</a>.</p> + +<h3 id="Open_a_packaged_app">Open a packaged app</h3> + +<p>Select "Open Packaged App..." to open a <a href="/en-US/Marketplace/Options/Packaged_apps">packaged app</a>. You'll be asked to select a directory containing the app's <a href="/en-US/Apps/Build/Manifest">manifest</a>, and the app will be opened in the <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">project editor</a>.</p> + +<h3 id="Open_a_hosted_app">Open a hosted app</h3> + +<p>Select "Open Hosted App..." to open a <a href="/en-US/Marketplace/Options/Hosted_apps">hosted app</a>. You'll be asked to enter a URL pointing to the app's <a href="/en-US/Apps/Build/Manifest">manifest</a>, and the app will be opened in the <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">project editor</a>.</p> + +<h2 id="Editing_apps">Editing apps</h2> + +<p>The project editor provides an environment for editing apps. There's a tree view on the left of all the files in the app: you can add and delete files here using a context menu. There's an editor pane on the right.</p> + +<h3 id="The_app_summary_page">The app summary page</h3> + +<p>When you first open or create an app, the editor pane is occupied by the app summary page, which is shown below:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8055/webide-new-app-editor.png" style="display: block; height: 625px; margin-left: auto; margin-right: auto; width: 846px;"></p> + +<p>You can always get back to the app summary page by clicking on the root of the tree on the left.</p> + +<h3 id="Manifest_validation">Manifest validation</h3> + +<p>WebIDE automatically checks the manifest for certain common problems. If it finds a problem it indicates that the app is invalid and describes the problem in the app's summary:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8063/webide-invalid-manifest.png" style="display: block; height: 626px; margin-left: auto; margin-right: auto; width: 847px;"></p> + +<p>Of course, you can edit the <a href="/en-US/Apps/Build/Manifest">manifest.webapp</a> file right in the project editor as well.</p> + +<h3 id="The_source_editor">The source editor</h3> + +<p>WebIDE uses the <a href="http://codemirror.net/">CodeMirror</a> source editor.</p> + +<h4 id="Source_editor_shortcuts">Source editor shortcuts</h4> + +<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}</p> + +<h4 id="Code_completion">Code completion</h4> + +<p>When editing CSS and JavaScript, the editor provides autocomplete suggestions. CSS autocompletion is always enabled:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8057/webide-css-autocomplete.png" style="display: block; height: 628px; margin-left: auto; margin-right: auto; width: 849px;">To display autocomplete suggestions in JavaScript press Control + Space:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8059/webide-js-autocomplete.png" style="display: block; height: 653px; margin-left: auto; margin-right: auto; width: 867px;"></p> + +<h4 id="Inline_documentation">Inline documentation</h4> + +<p>The editor also shows inline documentation for JavaScript. Press Shift + Space to see a popup containing documentation for the symbol your cursor is on:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8061/webide-js-inline-docs.png" style="display: block; height: 652px; margin-left: auto; margin-right: auto; width: 872px;"></p> + +<p>Clicking the <code>[docs]</code> link in the popup will take you to the MDN page for the symbol.</p> + +<h4 id="Saving_files">Saving files</h4> + +<p>For changes to your files to take effect you need to save them. Files with unsaved changes get an asterisk next to their name in the tree view, and you can save files using the menu or Control+S (Command+S on Mac OS X).</p> + +<h3 id="Removing_projects">Removing projects</h3> + +<p>To remove an app from WebIDE, go to the <a href="/en-US/docs/Tools/WebIDE#The_app_summary_page">app summary page</a> and click "Remove Project".</p> + +<h2 id="Running_a_custom_build_step">Running a custom build step</h2> + +<div class="geckoVersionNote"> +<p>New in Firefox 37.</p> +</div> + +<p>For some use cases you need to run a custom command before pushing your app to the device. For example, you might want to satisfy JavaScript dependencies or minify CSS, or use WebIDE to develop Gaia apps or Cordova apps, both of which require a custom build step.</p> + +<p>From Firefox 37 you can do this by including a file called "package.json" in the root of your app. This is the same file that's used to <a href="https://docs.npmjs.com/files/package.json">package a node.js library</a>, so you might already have one in the root of your project. If you don't, you can create one for this purpose.</p> + +<p>Inside package.json, WebIDE looks for a property called "webide". The table below summarises the syntax of "webide":</p> + +<table class="standard-table"> + <tbody> + <tr> + <td style="width: 10%;"><code>webide</code></td> + <td style="width: 10%;"> </td> + <td style="width: 10%;"> </td> + <td style="width: 70%;"> + <p>Object containing instructions for WebIDE.</p> + + <p>This may contain two properties, both optional: "<code>prepackage</code>" and "<code>packageDir</code>".</p> + </td> + </tr> + <tr> + <td> </td> + <td><code>prepackage</code></td> + <td> </td> + <td> + <p>Specifies a command-line command for WebIDE to run before pushing the app to the runtime.</p> + + <p>This may be a string, in which case the command is just executed as-is, or may be an object which must contain "<code>command</code>", and may contain any of "<code>env</code>", "<code>args</code>", and "<code>cwd</code>".</p> + </td> + </tr> + <tr> + <td> </td> + <td> </td> + <td><code>command</code></td> + <td> + <p>The command to execute in the command shell.</p> + + <p>For example: "<code>echo</code>".</p> + </td> + </tr> + <tr> + <td> </td> + <td> </td> + <td><code>env</code></td> + <td> + <p>Any environment variables to set.</p> + + <p>This is specified as an array of strings in the form "NAME=value". For example: <code>["NAME=world"]</code></p> + </td> + </tr> + <tr> + <td> </td> + <td> </td> + <td><code>args</code></td> + <td> + <p>Any arguments to pass along with the command.</p> + + <p>This is specified as an array of strings.</p> + </td> + </tr> + <tr> + <td> </td> + <td> </td> + <td><code>cwd</code></td> + <td> + <p>The directory from which to run the command.</p> + + <p>This may be absolute or relative to the current directory.</p> + </td> + </tr> + <tr> + <td> </td> + <td><code>packageDir</code></td> + <td> </td> + <td> + <p>The directory from which WebIDE should look for the app to push to the runtime.</p> + + <p>Use this if you want the project in WebIDE to be the source from which to build a packaged app. The build step specified in <code>prepackage</code> would place the built app in an output directory, you will specify the output directory in <code>packageDir</code>, and WebIDE will install the app from that output directory rather than the project directory.</p> + + <p>This property is optional, and if it's omitted WebIDE will package the app from the project root, just as if package.json was omitted.</p> + </td> + </tr> + </tbody> +</table> + +<h3 id="Examples">Examples</h3> + +<p>A "package.json" to build a Gaia app:</p> + +<pre class="brush: json">{ + "webide": { + "prepackage": { + "command": "make", + "env": ["APP=settings"], + "cwd": "../.." + }, + "packageDir": "../../build_stage/settings/" + } +}</pre> + +<p>A "package.json" for working with Cordova:</p> + +<pre class="brush: json">{ + "webide": { + "prepackage": "cordova prepare", + "packageDir": "./platforms/firefoxos/www" + } +}</pre> + +<h2 id="Running_and_debugging_apps">Running and debugging apps</h2> + +<p>When you're ready to run the app, you need to <a href="/en-US/docs/Tools/WebIDE#Selecting_a_runtime">select a runtime from the "Select Runtime" dropdown menu</a>. If you don't have any available runtimes here, find out how to add some in <a href="/en-US/docs/Tools/WebIDE#Setting_up_runtimes">Setting up runtimes</a>.</p> + +<p>The "play" button in the center of the WebIDE toolbar is now enabled: click it to install and run the app in the selected runtime:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8065/webide-running.png" style="display: block; height: 718px; margin-left: auto; margin-right: auto; width: 1314px;">To debug the app, click the "Pause" button and the Developer Tools <a href="/en-US/docs/Tools/Tools_Toolbox">Toolbox</a> appears, connected to your app:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8067/webide-debugging.png" style="display: block; height: 688px; margin-left: auto; margin-right: auto; width: 1310px;"></p> + +<div class="geckoVersionNote"> +<p>From Firefox 36 onwards, the "Pause" button is replaced with a wrench icon.</p> +</div> + +<p>Exactly which tools you'll have available depends on the runtime, but you will at least have the basics: the <a href="/en-US/docs/Tools/Page_Inspector">Inspector</a>, <a href="/en-US/docs/Tools/Web_Console">Console</a>, <a href="/en-US/docs/Tools/Debugger">JavaScript Debugger</a>, <a href="/en-US/docs/Tools/Style_Editor">Style Editor</a>, <a href="/en-US/docs/Tools/Profiler">Profiler</a> and <a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a>. Just as in a web page, any changes you make in the tools are visible immediately in the app, but are not persistent. Conversely, any changes you make in the editor pane can be saved straight back to disk, but are not visible without restarting the app.</p> + +<h3 id="Unrestricted_app_debugging_(including_certified_apps_main_process_etc.)">Unrestricted app debugging (including certified apps, main process, etc.)</h3> + +<p>You can run the debugger against the simulator, b2g desktop, or a real device.</p> + +<p>With the Simulator, if you click on the app dropdown menu while the runtime is selected, you can see and debug not only your app but all apps running in that runtime, including <a href="/en-US/Marketplace/Options/Packaged_apps#Certified_app">certified apps</a>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8069/webide-debugging-builtin.png" style="display: block; height: 681px; margin-left: auto; margin-right: auto; width: 1302px;"></p> + +<p><br> + However, when connecting to a real device we have a security policy in force:</p> + +<ul> + <li>On devices running Firefox OS versions up to 2.1, all installed apps on device that are <strong>not</strong> certified apps (so privileged and web / regular apps) appear in "Runtime Apps" by default.</li> + <li>On Firefox 2.1 and above, we changed this so that only apps installed via DevTools / WebIDE appear in "Runtime Apps", regardless of app type. We did this to protect potentially sensitive data that could be present in apps.</li> +</ul> + +<p>To remove this restriction:</p> + +<ul> + <li>The device must be running a development build of Firefox OS 1.2+</li> + <li>You must disable the <code>DevTools restricted privileges</code> setting.</li> +</ul> + +<p>To disable <code>DevTools restricted privileges</code>, connect to the runtime, and then, in the menu, go to <code>Runtime > Runtime Info</code>. The path then differs depending on what you are debugging against:</p> + +<ul> + <li>Real device + <ul> + <li>If it can be rooted, clicking <code>"request higher privileges"</code> will enable unrestricted app debugging (Firefox OS will restart). You may need to select your device again in the 'Select Runtime' drop down.</li> + </ul> + </li> + <li>Simulator + <ul> + <li>The simulators come with unrestricted app debugging enabled by default.</li> + </ul> + </li> + <li>B2G desktop + <ul> + <li>Manually edit the B2G desktop client <a href="https://developer.mozilla.org/en-US/Firefox_OS/Using_the_App_Manager#Using_the_B2G_desktop_client">preferences</a> before connecting to enable unrestricted app debugging.</li> + </ul> + </li> +</ul> + +<p>Now (or after a restart of the B2G desktop client) in WebIDE you should see all the apps on the device.</p> + +<div class="note"> +<p><strong>Note</strong>: As indicated above, to enable unrestricted privileges on a real device through WebIDE you'll need a rooted device. There is however a developer setting available in Firefox OS 2.2 onwards called <a href="/en-US/Firefox_OS/Debugging/Developer_settings#Reset_and_enable_full_DevTools">Reset and enable full DevTools</a> — when activated this will wipe all user data (for security reasons), reset the device, and enable unrestricted priviledges on <em>any</em> device.</p> +</div> + +<h2 id="Monitoring_performance">Monitoring performance</h2> + +<p>If you're interested in the performance of your apps, there are a few ways to measure their impact on the runtime in WebIDE:</p> + +<ul> + <li>The <a href="/docs/Tools/WebIDE/Monitor">Monitor</a> panel offers a good overview of a device's performance. This can help you detect problems, e.g. a sudden, excessive increase in an app's memory usage (leak).</li> + <li>The <a href="/docs/Tools/Profiler">Profiler</a> tool gives you a way to analyze a single app's footprint in great detail. This is especially useful when investigating a known performance problem.</li> +</ul> + +<h2 id="Troubleshooting">Troubleshooting</h2> + +<p>If you have any problems working with WebIDE, see the <a href="/en-US/docs/Tools/WebIDE/Troubleshooting">Troubleshooting</a> page.</p> + +<p> </p> + +<p> </p> diff --git a/files/id/tools/webide/troubleshooting/index.html b/files/id/tools/webide/troubleshooting/index.html new file mode 100644 index 0000000000..d39320049b --- /dev/null +++ b/files/id/tools/webide/troubleshooting/index.html @@ -0,0 +1,117 @@ +--- +title: WebIDE +slug: Tools/WebIDE/Troubleshooting +tags: + - Indonesia +translation_of: Archive/WebIDE/Troubleshooting +--- +<div>{{ToolsSidebar}}</div><h2 id="Connecting_a_Firefox_OS_device_over_USB">Connecting a Firefox OS device over USB</h2> + +<p>If you're trying to connect a Firefox OS device to WebIDE and it doesn't show up, here are some things you can try:</p> + +<ul> + <li>Check your Firefox OS version: make sure your device is running<strong> Firefox OS 1.2/Boot2Gecko 1.2 or higher</strong>. To check the version, go to the Settings app on the device, then <code>Device Information > Software</code>. If you don't have a high enough version, find your device in the <a href="/en-US/Firefox_OS/Developer_phone_guide">developer phone guide</a> and follow the instructions for upgrading.</li> + <li>Enable remote debugging: in the Settings app on the device, go to <code>Device information > More information > Developer</code>. + <ul> + <li>Firefox OS 1.3 and earlier: "Remote Debugging" is just a simple checkbox. Check the box.</li> + <li>Firefox OS 1.4 and later: "Remote Debugging" asks you to enable for just ADB, or for ADB and DevTools. Select "ADB and DevTools".</li> + </ul> + </li> + <li>Disable screen lock on your device: in the Settings app on the device, go to <code>Screen Lock</code> and unchecking the <code>Lock Screen</code> checkbox. This is a good idea because when the screen gets locked, the phone connection gets lost, meaning it is no longer available for debugging.</li> + <li>Make sure you haven't connected an Android phone at the same time as the Firefox OS phone to your computer.</li> + <li>Check the USB cable you are using: + <ul> + <li>Try unplugging and replugging in the USB cable.</li> + <li>Try plugging the USB cable into a different port on your computer. You may have to alternate between ports.</li> + <li>Try a different USB cable. The cables that come with phones are often of poor quality and fail often.</li> + <li>Try a shorter USB cable. Long USB cables have been known to not work so well.</li> + </ul> + </li> + <li>Try disabling and re-enabling Remote Debugging in the Settings app on the device.</li> + <li>If <a href="/en-US/docs/Tools/WebIDE#Custom_runtimes">you disabled the ADB Addon Helper</a>, did you successfully run the <code>adb forward</code> command?</li> + <li>If you use Linux: + <ul> + <li>Make sure you added a <code>udev</code> rules file, as documented in step 3 of this guide to <a class="external external-icon" href="http://developer.android.com/tools/device.html#setting-up">setting up an Android device</a>. The <code>idVendor</code> attribute to use for the Geeksphone is "05c6", and <a class="external external-icon" href="http://developer.android.com/tools/device.html#VendorIds">this page</a> lists other <code>idVendor</code> values. Next, run the <code>adb devices</code> to make sure your device is in the list. If device appears to be "no permission", you need to restart adb server (e.g. <code>adb kill-server;adb start-server</code>).</li> + </ul> + </li> + <li>If you use Windows: + <ul> + <li>You need to install drivers, as documented in step 3 of this guide to <a class="external external-icon" href="http://developer.android.com/tools/device.html#setting-up">setting up an Android device</a>. You can find drivers for Geeksphone devices on the <a class="external external-icon" href="http://downloads.geeksphone.com/">Geeksphone web site</a> and drivers for Google devices on <a href="http://developer.android.com/sdk/win-usb.htm">Google web site</a>. Windows 8 by default will not let you install unsigned drivers. See this tutorial on <a class="external-icon external" href="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html" title="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html">"How to install an unsigned driver on Windows 8"</a>.</li> + <li>If WebIDE can't see your device after following all the steps, you may have to <a class="external-icon external" href="http://blog.fh-kaernten.at/wehr/?p=1182">edit adb_usb.ini</a>.</li> + </ul> + </li> + <li>If you use Mac OS X: + <ul> + <li>If you're getting timeout errors connecting to both simulators and real devices, you may be unable to connect to localhost due to an empty /etc/hosts file. You can solve the problem by populating the file and flushing DNS cache <a href="https://discussions.apple.com/thread/2729411?tstart=0">as described here</a>.</li> + <li>If you're an EasyTether user, you will need to uninstall or disable EasyTether: <code>sudo kextunload /System/Library/Extensions/EasyTetherUSBEthernet.kext</code></li> + </ul> + </li> +</ul> + +<h2 id="Connecting_a_Firefox_OS_device_over_Wi-Fi">Connecting a Firefox OS device over Wi-Fi</h2> + +<ul> + <li>Check your version: Wi-Fi debugging requires Firefox 39 or higher, and a Firefox OS device running a build of Firefox OS 3.0 from 2015-03-27 or later.</li> + <li>The QR code scanner can be a bit frustrating at the moment, as real devices appear to capture a very low resolution picture. <a href="https://bugzil.la/1145772">Bug 1145772</a> aims to improve this soon. If you have trouble with this, try scanning with a few different orientations. If you chose "Scan and Remember, then you won't have to scan the code again the next time you connect your computer to this device.</li> +</ul> + +<h2 id="Connecting_to_Firefox_for_Android">Connecting to Firefox for Android</h2> + +<p>If you're trying to connect to a Firefox instance running on the Android OS and it doesn't show up, here are some things you can try:</p> + +<ul> + <li>Check your Firefox version: make sure your device is running<strong> Firefox 36 or higher</strong>. WebIDE will not detect older versions automatically, so you need to enable port forwarding and connect to the device port - follow the instructions <a class="external external-icon" href="https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">here</a>.</li> + <li>Make sure you have enabled remote debugging in Firefox: open Firefox for Android, open its menu, select <code>Settings</code>, and then check the checkbox at <code>Developer Tools > Remote debugging</code>.</li> + <li>Make sure that USB debugging is allowed in the device's developer settings</li> + <li>If you still do not see your device in the WebIDE window, try toggling <code>Remote debugging</code> on the phone. + <ul> + <li>Disconnect your device from your computer and turn off <code>Remote debugging</code> on the phone.</li> + <li>Reconnect the device and turn on <code>Remote debugging</code> - this restarts the debugger instance on the phone.</li> + <li>Try connecting via WebIDE again.</li> + </ul> + </li> + <li>If using Windows, make sure that your Android device is recognized correctly and that it is using the Google USB Driver that is included with the Android SDK.</li> +</ul> + +<h2 id="Connecting_to_other_browsers_(Chrome_Safari)">Connecting to other browsers (Chrome, Safari)</h2> + +<p>WebIDE makes use of <a href="/en-US/docs/Tools/Valence">Valence (formerly Firefox Tools Adapter)</a> to reach other browsers, like Chrome and Safari. </p> + +<p>If you are having trouble connecting to these other browsers, check the setup steps and other notes for those browsers on the <a href="/en-US/docs/Tools/Valence">Valence page</a>.</p> + +<h2 id="Can't_debug_some_apps">Can't debug some apps</h2> + +<p>If you are finding that you can't debug certified apps, built-in apps, or apps already installed on a real device, then you may be coming across WebIDE's restricted privileges security policy. To find out more, see the section on <a href="/en-US/docs/Tools/WebIDE#Unrestricted_app_debugging_%28including_certified_apps.2C_main_process.2C_etc.%29">Unrestricted app debugging (including certified apps, main process, etc.)</a>.</p> + +<h2 id="Unable_to_load_project_list">Unable to load project list</h2> + +<p>If you open WebIDE in one version of Firefox, and then downgrade to a previous Firefox version with the same profile, you may see the error "Unable to load project list" when opening WebIDE in the earlier Firefox version.</p> + +<p>This can occur when the storage system that WebIDE uses (<a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>) needs to move or restructure its internal files for the newer Firefox version. The project list then becomes effectively inaccessible to older versions of Firefox.</p> + +<p>No data has been lost, but you will need to keep using the newest version of Firefox that was used with your profile to get the project list back.</p> + +<p>If really want to use the older version of Firefox, you can attempt to delete just the project list in the following way, but this is unsupported and could result in the further problems or additional data loss:</p> + +<ol> + <li>Close Firefox</li> + <li>Find your Firefox profile directory</li> + <li>Find the <code>storage</code> folder inside the profile directory</li> + <li>Under some part of this file tree, there should be files and/or directories that start with <code>4268914080AsptpcPerjo</code> (a hashed name of the database)</li> + <li>Remove any such files and directories</li> + <li>Start Firefox and WebIDE again</li> +</ol> + +<h2 id="Enable_logging">Enable logging</h2> + +<p>You can also enable verbose logging to gather diagnostics:</p> + +<ol start="1" style="list-style-type: decimal;"> + <li>Open <a class="external external-icon" href="http://kb.mozillazine.org/About:config">about:config</a>, and add a new preference called <code>extensions.adbhelper@mozilla.org.sdk.console.logLevel</code>, with the string value <code>all</code>, and set <code>extensions.adbhelper@mozilla.org.debug</code> to <code>true</code>.</li> + <li>In the <a class="external external-icon" href="https://support.mozilla.org/en-US/kb/disable-or-remove-add-ons">Add-ons Manager</a>, disable and then re-enable the ADB Helper add-on.</li> + <li>Open the <a href="https://developer.mozilla.org/en-US/docs/Tools/Browser_Console">Browser Console</a> and you'll now see console messages prefixed with <code>adb</code>. If the messages don't mean anything to you, <a href="/en-US/docs/Tools/WebIDE/Troubleshooting#Get_help">ask for help</a>.</li> +</ol> + +<h2 id="Get_help">Get help</h2> + +<p>Go to the <a class="external external-icon" href="https://wiki.mozilla.org/DevTools/GetInvolved#Communication">#devtools room on IRC</a> and we will try to help.</p> diff --git a/files/id/web/api/abstractworker/index.html b/files/id/web/api/abstractworker/index.html new file mode 100644 index 0000000000..cea5a54797 --- /dev/null +++ b/files/id/web/api/abstractworker/index.html @@ -0,0 +1,125 @@ +--- +title: AbstractWorker +slug: Web/API/AbstractWorker +translation_of: Web/API/AbstractWorker +--- +<p>{{ APIRef("Web Workers API") }}</p> + +<p>Antarmuka <strong><code>AbstractWorker</code></strong> dari abstrak properti <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers API</a> dan method umum untuk semua jenis worker, berupa {{domxref("Worker")}} atau {{domxref("SharedWorker")}}.</p> + +<h2 id="Properti">Properti</h2> + +<p><em>Antarmuka <code>AbstractWorker</code></em><em> tidak mewarisi properti apapun.</em></p> + +<h3 id="Event_handlers">Event handlers</h3> + +<dl> + <dt>{{domxref("AbstractWorker.onerror")}}</dt> + <dd>Sebuah {{ domxref("EventListener") }} yang dipanggil ketika sebuah {{domxref("ErrorEvent")}} dari tipe <code>error</code> bubbles melalui worker.</dd> +</dl> + +<h2 id="Method">Method</h2> + +<p><em>Antarmuka <code>AbstractWorker</code></em><em> tidak menjalankan atau mewarisi method apapun.</em></p> + +<h2 id="Contoh">Contoh</h2> + +<p>Catat bahwa anda tidak ingin menggunakan antarmuka <code>AbstractWorker</code> langsung di dalam kode anda — ketika dipanggil, {{domxref("Worker")}} dan {{domxref("SharedWorker")}} mewarisi propertinya. Pada contoh code snippet menunjukan pembuatan objek {{domxref("Worker")}} menggunakan konstruktor {{domxref("Worker.Worker", "Worker()")}} dan penggunakan dari objek:</p> + +<pre class="brush: js">var myWorker = new Worker("worker.js"); + +first.onchange = function() { + myWorker.postMessage([first.value,second.value]); + console.log('Message posted to worker'); +}</pre> + +<p>Contoh lengkapnya, lihat:</p> + +<ul> + <li><a class="external external-icon" href="https://github.com/mdn/simple-web-worker">Basic dedicated worker example</a> (<a class="external external-icon" href="http://mdn.github.io/simple-web-worker/">run dedicated worker</a>).</li> + <li><a class="external external-icon" href="https://github.com/mdn/simple-shared-worker">Basic shared worker example</a> (<a class="external external-icon" href="http://mdn.github.io/simple-shared-worker/">run shared worker</a>).</li> +</ul> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "#the-abstractworker-abstract-interface", "AbstractWorker")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>No change from {{SpecName("Web Workers")}}.</td> + </tr> + <tr> + <td>{{SpecName("Web Workers", "#the-abstractworker-abstract-interface", "AbstractWorker")}}</td> + <td>{{Spec2("Web Workers")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Browser">Kompabilitas Browser</h2> + +<div>{{CompatibilityTable()}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatChrome(4)}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>10</td> + <td>10.6</td> + <td>4</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>4.4</td> + <td>{{CompatGeckoMobile("1.9.1")}}</td> + <td>1.0.1</td> + <td>10</td> + <td>11.5</td> + <td>5.1</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li>{{domxref("Worker")}} dan {{domxref("SharedWorker")}} mewarisinya.</li> +</ul> + +<p> </p> diff --git a/files/id/web/api/api_push/index.html b/files/id/web/api/api_push/index.html new file mode 100644 index 0000000000..feae8a7373 --- /dev/null +++ b/files/id/web/api/api_push/index.html @@ -0,0 +1,165 @@ +--- +title: API Push +slug: Web/API/API_Push +translation_of: Web/API/Push_API +--- +<div>{{DefaultAPISidebar("Push API")}}{{SeeCompatTable}}</div> + +<p><strong>API Push</strong> 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.</p> + +<div class="note"> +<p><strong>Catatan</strong>: Dokumentasi ini melingkupi spesifikasi API Push W3C. Bila Anda mencari dokumentasi untuk mekanisme berpemilik dari Firefox OS, lihat <a href="/id/docs/Web/API/Simple_Push_API">Push Sederhana</a>.</p> +</div> + +<h2 id="Push_concepts_and_usage">Push concepts and usage</h2> + +<p>For an app to receive push messages, it has to have an active <a href="/en-US/docs/Web/API/ServiceWorker_API">service worker</a>. When the service worker is active, it can subscribe to push notifications using {{domxref("PushManager.subscribe()")}}.</p> + +<p>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.</p> + +<p>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()")}}.)</p> + +<p>Each subscription is unique to a service worker. The endpoint for the subscription is a unique <a href="http://www.w3.org/TR/capability-urls/">capability URL</a>: 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.</p> + +<p>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.</p> + +<div class="note"> +<p><strong>Note</strong>: 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.</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: Chrome currently requires you to set up a project on <a href="https://developers.google.com/cloud-messaging/">Google Cloud Messaging</a> 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.</p> +</div> + +<h2 id="Interfaces">Interfaces</h2> + +<dl> + <dt>{{domxref("PushEvent")}}</dt> + <dd>Represents a push action sent to the <a href="/en-US/docs/Web/API/ServiceWorkerGlobalScope">global scope</a> of a {{domxref("ServiceWorker")}}. It contains information sent from an application to a {{domxref("PushSubscription")}}.</dd> + <dt>{{domxref("PushManager")}}</dt> + <dd>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.</dd> + <dt>{{domxref("PushMessageData")}}</dt> + <dd>Provides access to push data sent by a server, and includes methods to manipulate the received data.</dd> + <dt>{{domxref("PushSubscription")}}</dt> + <dd>Provides a subcription's URL endpoint and allows unsubscription from a push service.</dd> +</dl> + +<h2 id="Service_worker_additions">Service worker additions</h2> + +<p>The following additions to the <a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a> 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.</p> + +<dl> + <dt>{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}</dt> + <dd>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.</dd> + <dt>{{domxref("ServiceWorkerGlobalScope.onpush")}}</dt> + <dd>An event handler fired whenever a {{Event("push")}} event occurs; that is, whenever a server push message is received.</dd> + <dt>{{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}}</dt> + <dd>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.)</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName("Push API")}}</td> + <td>{{Spec2("Push API")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility">Browser Compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(42.0)}}</td> + <td>{{CompatGeckoDesktop(44.0)}}<sup>[1]</sup></td> + <td>{{CompatNo}}<sup>[2]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>{{domxref("PushEvent.data")}},<br> + {{domxref("PushMessageData")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(44.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}<sup>[2]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(42.0)}}</td> + </tr> + <tr> + <td>{{domxref("PushEvent.data")}},<br> + {{domxref("PushMessageData")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Currently available only on desktop versions of Firefox; also, push messages are only delivered when Firefox is running.</p> + +<p>[2] This is currently not implemented. See the <a href="https://dev.modern.ie/platform/status/pushapi/">Microsoft Edge status information</a>.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Push_API/Using_the_Push_API">Using the Push API</a></li> + <li><a href="https://github.com/chrisdavidmills/push-api-demo">Push API Demo</a>, on Github</li> + <li><a href="http://updates.html5rocks.com/2015/03/push-notificatons-on-the-open-web">Push Notifications on the Open Web</a>, Matt Gaunt</li> + <li><a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a></li> +</ul> diff --git a/files/id/web/api/cachestorage/index.html b/files/id/web/api/cachestorage/index.html new file mode 100644 index 0000000000..fdcfe56217 --- /dev/null +++ b/files/id/web/api/cachestorage/index.html @@ -0,0 +1,198 @@ +--- +title: CacheStorage +slug: Web/API/CacheStorage +tags: + - API + - CacheStorage + - Experimental + - Interface + - NeedsTranslation + - Reference + - Service Workers + - ServiceWorker + - TopicStub +translation_of: Web/API/CacheStorage +--- +<p>{{APIRef("Service Workers API")}}</p> + +<p>The <strong><code>CacheStorage</code></strong> interface represents the storage for {{domxref("Cache")}} objects.</p> + +<p>The interface:</p> + +<ul> + <li>Provides a master directory of all the named caches that can be accessed by a {{domxref("ServiceWorker")}} or other type of worker or {{domxref("window")}} scope (you’re not limited to only using it with service workers, even though the {{SpecName('Service Workers')}} spec defines it). + <div class="note"><strong>Note</strong>: <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=1026063">Chrome and Safari only expose `CacheStorage` to the windowed context over HTTPS</a>. {{domxref("window.caches")}} will be undefined unless an SSL certificate is configured.</div> + </li> + <li>Maintains a mapping of string names to corresponding {{domxref("Cache")}} objects.</li> +</ul> + +<p>Use {{domxref("CacheStorage.open()")}} to obtain a {{domxref("Cache")}} instance.</p> + +<p>Use {{domxref("CacheStorage.match()")}} to check if a given {{domxref("Request")}} is a key in any of the {{domxref("Cache")}} objects that the <code>CacheStorage</code> object tracks.</p> + +<p>You can access <code>CacheStorage</code> through the global {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}} property.</p> + +<div class="note"><strong>Note</strong>: CacheStorage always rejects with a <code>SecurityError</code> on untrusted origins (i.e. those that aren't using HTTPS, although this definition will likely become more complex in the future.) When testing, you can get around this by checking the "Enable Service Workers over HTTP (when toolbox is open)" option in the Firefox Devtools options/gear menu.</div> + +<div class="note"><strong>Note</strong>: {{domxref("CacheStorage.match()")}} is a convenience method. Equivalent functionality to match a cache entry can be implemented by returning an array of cache names from {{domxref("CacheStorage.keys()")}}, opening each cache with {{domxref("CacheStorage.open()")}}, and matching the one you want with {{domxref("Cache.match()")}}.</div> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{domxref("CacheStorage.match()")}}</dt> + <dd>Checks if a given {{domxref("Request")}} is a key in any of the {{domxref("Cache")}} objects that the {{domxref("CacheStorage")}} object tracks, and returns a {{jsxref("Promise")}} that resolves to that match.</dd> + <dt>{{domxref("CacheStorage.has()")}}</dt> + <dd>Returns a {{jsxref("Promise")}} that resolves to <code>true</code> if a {{domxref("Cache")}} object matching the <code>cacheName</code> exists.</dd> + <dt>{{domxref("CacheStorage.open()")}}</dt> + <dd>Returns a {{jsxref("Promise")}} that resolves to the {{domxref("Cache")}} object matching the <code>cacheName</code> (a new cache is created if it doesn't already exist.)</dd> + <dt>{{domxref("CacheStorage.delete()")}}</dt> + <dd>Finds the {{domxref("Cache")}} object matching the <code>cacheName</code>, and if found, deletes the {{domxref("Cache")}} object and returns a {{jsxref("Promise")}} that resolves to <code>true</code>. If no {{domxref("Cache")}} object is found, it resolves to <code>false</code>.</dd> + <dt>{{domxref("CacheStorage.keys()")}}</dt> + <dd>Returns a {{jsxref("Promise")}} that will resolve with an array containing strings corresponding to all of the named {{domxref("Cache")}} objects tracked by the {{domxref("CacheStorage")}}. Use this method to iterate over a list of all the {{domxref("Cache")}} objects.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<p>This code snippet is from the MDN <a href="https://github.com/mdn/sw-test/">sw-test example</a> (see <a href="https://mdn.github.io/sw-test/">sw-test running live</a>.) This service worker script waits for an {{domxref("InstallEvent")}} to fire, then runs {{domxref("ExtendableEvent.waitUntil","waitUntil")}} to handle the install process for the app. This consists of calling {{domxref("CacheStorage.open")}} to create a new cache, then using {{domxref("Cache.addAll")}} to add a series of assets to it.</p> + +<p>In the second code block, we wait for a {{domxref("FetchEvent")}} to fire. We construct a custom response like so:</p> + +<ol> + <li>Check whether a match for the request is found in the CacheStorage. If so, serve that.</li> + <li>If not, fetch the request from the network, then also open the cache created in the first block and add a clone of the request to it using {{domxref("Cache.put")}} (<code>cache.put(event.request, response.clone())</code>.)</li> + <li>If this fails (e.g. because the network is down), return a fallback response.</li> +</ol> + +<p>Finally, return whatever the custom response ended up being equal to, using {{domxref("FetchEvent.respondWith")}}.</p> + +<pre class="brush: js notranslate">self.addEventListener('install', function(event) { + event.waitUntil( + caches.open('v1').then(function(cache) { + return cache.addAll([ + '/sw-test/', + '/sw-test/index.html', + '/sw-test/style.css', + '/sw-test/app.js', + '/sw-test/image-list.js', + '/sw-test/star-wars-logo.jpg', + '/sw-test/gallery/bountyHunters.jpg', + '/sw-test/gallery/myLittleVader.jpg', + '/sw-test/gallery/snowTroopers.jpg' + ]); + }) + ); +}); + +self.addEventListener('fetch', function(event) { + event.respondWith(caches.match(event.request).then(function(response) { + // caches.match() always resolves + // but in case of success response will have value + if (response !== undefined) { + return response; + } else { + return fetch(event.request).then(function (response) { + // response may be used only once + // we need to save clone to put one copy in cache + // and serve second one + let responseClone = response.clone(); + + caches.open('v1').then(function (cache) { + cache.put(event.request, responseClone); + }); + return response; + }).catch(function () { + return caches.match('/sw-test/gallery/myLittleVader.jpg'); + }); + } + })); +}); +</pre> + +<p>This snippet shows how the API can be used outside of a service worker context, and uses the <code>await</code> operator for much more readable code.</p> + +<pre class="brush: js notranslate">// Try to get data from the cache, but fall back to fetching it live. +async function getData() { + const cacheVersion = 1; + const cacheName = `myapp-${ cacheVersion }`; + const url = 'https://jsonplaceholder.typicode.com/todos/1'; + let cachedData = await getCachedData( cacheName, url ); + + if ( cachedData ) { + console.log( 'Retrieved cached data' ); + return cachedData; + } + + console.log( 'Fetching fresh data' ); + + const cacheStorage = await caches.open( cacheName ); + await cacheStorage.add( url ); + cachedData = await getCachedData( cacheName, url ); + await deleteOldCaches( cacheName ); + + return cachedData; +} + +// Get data from the cache. +async function getCachedData( cacheName, url ) { + const cacheStorage = await caches.open( cacheName ); + const cachedResponse = await cacheStorage.match( url ); + + if ( ! cachedResponse || ! cachedResponse.ok ) { + return false; + } + + return await cachedResponse.json(); +} + +// Delete any old caches to respect user's disk space. +async function deleteOldCaches( currentCache ) { + const keys = await caches.keys(); + + for ( const key of keys ) { + const isOurCache = 'myapp-' === key.substr( 0, 6 ); + + if ( currentCache === key || ! isOurCache ) { + continue; + } + + caches.delete( key ); + } +} + +try { + const data = await getData(); + console.log( { data } ); +} catch ( error ) { + console.error( { error } ); +}</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Service Workers', '#cachestorage', 'CacheStorage')}}</td> + <td>{{Spec2('Service Workers')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.CacheStorage")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li> + <li>{{domxref("Cache")}}</li> + <li>{{domxref("WindowOrWorkerGlobalScope.caches")}}</li> +</ul> diff --git a/files/id/web/api/canvas_api/index.html b/files/id/web/api/canvas_api/index.html new file mode 100644 index 0000000000..0cdd4219fe --- /dev/null +++ b/files/id/web/api/canvas_api/index.html @@ -0,0 +1,172 @@ +--- +title: Canvas API +slug: Web/API/Canvas_API +tags: + - API + - Canvas + - Gambar + - JavaScript + - Referensi +translation_of: Web/API/Canvas_API +--- +<div>{{CanvasSidebar}}</div> + +<p class="summary">Ditambahkan di <a href="/en-US/docs/HTML/HTML5">HTML5</a>, <strong>elemen HTML {{HTMLElement("canvas")}} </strong>dapat digunakan untuk menggambar grafik melalui skrip di <a href="/en-US/docs/Web/JavaScript">JavaScript</a>. Sebagai contoh, dapat digunakan untuk menggambar graf, membuat komposisi foto, mencipta animasi, atau bahkan melakukan pemrosesan atau rendering video secara waktu-nyata .</p> + +<p>Aplikasi Mozilla mendapat dukungan untuk <code><canvas></code> sejak Gecko 1.8 (i.e. <a href="/en-US/docs/Mozilla/Firefox/Releases/1.5">Firefox 1.5</a>). Elemen tersebut semula dikenalkan oleh Apple untuk Dashboard OS X dan Safari. Internet Explorer mendukung <code><canvas></code> sejak versi 9 dan seterusnya; untuk versi awal IE, sebuah halaman dapat secara efektif mendukung <code><canvas></code> dengan memasukkan skrip dari proyek <a href="https://github.com/arv/explorercanvas">Explorer Canvas</a> Google. Google Chrome dan Opera 9 juga mendukung <code><canvas></code>.</p> + +<p>Elemen <code><canvas></code> juga digunakan oleh <a href="/en-US/docs/Web/WebGL">WebGL</a> untuk menggambar grafik hardware-accelerated 3D di halaman web.</p> + +<h2 id="Contoh">Contoh</h2> + +<p>Ini hanya cuplikan kode sederhana yang menggunakan metode {{domxref("CanvasRenderingContext2D.fillRect()")}}.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +ctx.fillStyle = 'green'; +ctx.fillRect(10, 10, 100, 100); +</pre> + +<p>Edit kode di bawah dan lihat perbaruan perubahannya di kanvas secara waktu-nyata:</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> +ctx.fillStyle = 'green'; +ctx.fillRect(10, 10, 100, 100);</textarea> +</pre> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext("2d"); +var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var edit = document.getElementById('edit'); +var code = textarea.value; + +function drawCanvas() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + eval(textarea.value); +} + +reset.addEventListener('click', function() { + textarea.value = code; + drawCanvas(); +}); + +edit.addEventListener('click', function() { + textarea.focus(); +}) + +textarea.addEventListener('input', drawCanvas); +window.addEventListener('load', drawCanvas); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h2 id="Reference">Reference</h2> + +<div class="index"> +<ul> + <li>{{domxref("HTMLCanvasElement")}}</li> + <li>{{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasGradient")}}</li> + <li>{{domxref("CanvasImageSource")}}</li> + <li>{{domxref("CanvasPattern")}}</li> + <li>{{domxref("ImageBitmap")}}</li> + <li>{{domxref("ImageData")}}</li> + <li>{{domxref("RenderingContext")}}</li> + <li>{{domxref("TextMetrics")}}</li> + <li>{{domxref("OffscreenCanvas")}}{{experimental_inline}}</li> + <li>{{domxref("Path2D")}} {{experimental_inline}}{{domxref("ImageBitmapRenderingContext")}}{{experimental_inline}}</li> +</ul> +</div> + +<p>The interfaces related to the <code>WebGLRenderingContext</code> are referenced under <a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a>.</p> + +<p>{{domxref("CanvasCaptureMediaStream")}} is related.</p> + +<h2 id="Petunjuk_dan_tutorial">Petunjuk dan tutorial</h2> + +<dl> + <dt><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Tutorial canvas</a></dt> + <dd>Tutorial komprehensif mengcakup penggunaan sederhana <code><canvas></code> dan fitur lanjutannya.</dd> + <dt><a href="/en-US/Add-ons/Code_snippets/Canvas">Cuplikan kode: Canvas</a></dt> + <dd><span id="result_box" lang="id"><span>Beberapa cuplikan kode pengembang berorientasi ekstensi yang melibatkan</span></span> <code><canvas></code>.</dd> + <dt><a href="/en-US/docs/Web/API/Canvas_API/A_basic_ray-caster">Demo: ray-caster sederhana</a></dt> + <dd>Demo animasi ray-tracing menggunakan canvas.</dd> + <dt><a href="/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas">Menggambar DOM objects ke canvas</a></dt> + <dd>Bagaimana menggambar konten DOM, seperti elemen HTML, pada canvas.</dd> + <dt><a href="/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">Memanipulasi video dengan canvas</a></dt> + <dd>Menggabungkan {{HTMLElement("video")}} dan {{HTMLElement("canvas")}} untuk memanipulasi data video secara real time.</dd> +</dl> + +<h2 id="Sumber">Sumber</h2> + +<h3 id="Generik">Generik</h3> + +<ul> + <li><a href="http://joshondesign.com/p/books/canvasdeepdive/title.html">HTML5 Canvas Deep Dive</a></li> + <li><a href="http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html">Canvas Handbook</a></li> +</ul> + +<h3 id="Librari">Librari</h3> + +<ul> + <li><a href="http://fabricjs.com">Fabric.js</a> is an open-source canvas library with SVG parsing capabilities.</li> + <li><a href="https://github.com/ericdrowell/KineticJS">Kinetic.js</a> is an open-source canvas library focused on interactivity for desktop and mobile applications.</li> + <li><a href="http://paperjs.org/">Paper.js</a> is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas.</li> + <li><a href="http://origamijs.com/docs/">Origami.js</a> is an open source lightweight canvas library.</li> + <li><a href="http://libcanvas.github.com/">libCanvas</a> is powerful and lightweight canvas framework.</li> + <li><a href="https://p5js.org/">p5.js </a>has a full set of canvas drawing functionality for artists, designers, educators and beginners.</li> + <li><a href="http://processingjs.org">Processing.js</a> is a port of the Processing visualization language.</li> + <li><a href="https://playcanvas.com/">PlayCanvas</a> is an open source game engine.</li> + <li><a href="http://www.pixijs.com/">Pixi.js</a> adalah enjine permainan open source.</li> + <li><a href="http://www.liquidx.net/plotkit/">PlotKit</a> adalah librari charting dan grafik.</li> + <li><a class="link-https" href="https://github.com/jeremyckahn/rekapi">Rekapi</a> is an animation key-framing API for Canvas.</li> + <li><a href="http://senchalabs.github.com/philogl/">PhiloGL</a> is a WebGL framework for data visualization, creative coding and game development.</li> + <li><a href="http://thejit.org/">JavaScript InfoVis Toolkit</a> creates interactive 2D Canvas data visualizations for the Web.</li> + <li><a href="http://www.createjs.com/easeljs">EaselJS</a> is a free/open source library to make it easier to use canvas for games and art</li> + <li><a href="http://scrawl.rikweb.org.uk/">Scrawl-canvas</a> is another open-source javascript library for creating and manipulating 2d canvas elements</li> + <li><a href="https://www.patrick-wied.at/static/heatmapjs/">heatmap.js</a> is an open source library to create canvas based heatmaps</li> + <li>The <a href="http://zimjs.com">ZIM</a> framework provides conveniences, components and controls for coding creativity on the canvas — includes accessibility and hundreds of colorful tutorials.</li> +</ul> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Komentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '<canvas>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li><a href="/en-US/docs/Web/WebGL">WebGL</a></li> +</ul> diff --git a/files/id/web/api/console/index.html b/files/id/web/api/console/index.html new file mode 100644 index 0000000000..05cdba529b --- /dev/null +++ b/files/id/web/api/console/index.html @@ -0,0 +1,278 @@ +--- +title: Console +slug: Web/API/Console +tags: + - API + - Debugging + - Interface + - NeedsCompatTable + - NeedsTranslation + - Reference + - TopicStub + - console + - web console +translation_of: Web/API/Console +--- +<div>{{APIRef("Console API")}}</div> + +<p>The <strong><code>Console</code></strong> object provides access to the browser's debugging console (e.g., the <a href="/en-US/docs/Tools/Web_Console">Web Console</a> in Firefox). The specifics of how it works vary from browser to browser, but there is a <em>de facto</em> set of features that are typically provided.</p> + +<p>The <code>Console</code> object can be accessed from any global object, {{domxref("Window")}} on browsing scopes, {{domxref("WorkerGlobalScope")}}, and its specific variants in workers via property console. It's exposed as {{domxref("Window.console")}}, and can be referenced as simply <code>console</code>. For example:</p> + +<pre class="brush: js">console.log("Failed to open the specified link")</pre> + +<p>This page documents the {{anch("Methods")}} available on the <code>Console</code> object and gives a few {{anch("Usage")}} examples.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{domxref("Console.assert()")}}</dt> + <dd>Log a message and stack trace to console if first argument is <code>false</code>.</dd> + <dt>{{domxref("Console.clear()")}}</dt> + <dd>Clear the console.</dd> + <dt>{{domxref("Console.count()")}}</dt> + <dd>Log the number of times this line has been called with the given label.</dd> + <dt>{{domxref("Console.debug()")}}</dt> + <dd>An alias for <code>log() - starting with Chromium 58 this method is a no-op on Chromium browsers.</code></dd> + <dt>{{domxref("Console.dir()")}} {{Non-standard_inline}}</dt> + <dd>Displays an interactive listing of the properties of a specified JavaScript object. This listing lets you use disclosure triangles to examine the contents of child objects.</dd> + <dt>{{domxref("Console.dirxml()")}} {{Non-standard_inline}}</dt> + <dd> + <p>Displays an XML/HTML Element representation of the specified object if possible or the JavaScript Object view if it is not.</p> + </dd> + <dt>{{domxref("Console.error()")}}</dt> + <dd>Outputs an error message. You may use <a href="/en-US/docs/Web/API/console#Using_string_substitutions">string substitution</a> and additional arguments with this method.</dd> + <dt>{{domxref("Console.exception()")}} {{Non-standard_inline}} {{deprecated_inline}}</dt> + <dd>An alias for <code>error()</code></dd> + <dt>{{domxref("Console.group()")}}</dt> + <dd>Creates a new inline <a href="/en-US/docs/Web/API/console#Using_groups_in_the_console">group</a>, indenting all following output by another level. To move back out a level, call <code>groupEnd()</code>.</dd> + <dt>{{domxref("Console.groupCollapsed()")}}</dt> + <dd>Creates a new inline <a href="/en-US/docs/Web/API/console#Using_groups_in_the_console">group</a>, indenting all following output by another level; unlike <code>group()</code>, this starts with the inline group collapsed, requiring the use of a disclosure button to expand it. To move back out a level, call <code>groupEnd()</code>.</dd> + <dt>{{domxref("Console.groupEnd()")}}</dt> + <dd>Exits the current inline <a href="/en-US/docs/Web/API/console#Using_groups_in_the_console">group</a>.</dd> + <dt>{{domxref("Console.info()")}}</dt> + <dd>Informative logging information. You may use <a href="/en-US/docs/Web/API/console#Using_string_substitutions">string substitution</a> and additional arguments with this method.</dd> + <dt>{{domxref("Console.log()")}}</dt> + <dd>For general output of logging information. You may use <a href="/en-US/docs/Web/API/console#Using_string_substitutions">string substitution</a> and additional arguments with this method.</dd> + <dt>{{domxref("Console.profile()")}} {{Non-standard_inline}}</dt> + <dd>Starts the browser's build-in profiler (for example, the <a href="/en-US/docs/Tools/Performance">Firefox performance tool</a>). You can specify an optional name for the profile.</dd> + <dt>{{domxref("Console.profileEnd()")}} {{Non-standard_inline}}</dt> + <dd>Stops the profiler. You can see the resulting profile in the browser's performance tool (for example, the <a href="/en-US/docs/Tools/Performance">Firefox performance tool</a>).</dd> + <dt>{{domxref("Console.table()")}}</dt> + <dd>Displays tabular data as a table.</dd> + <dt>{{domxref("Console.time()")}}</dt> + <dd>Starts a <a href="/en-US/docs/Web/API/console#Timers">timer</a> with a name specified as an input parameter. Up to 10,000 simultaneous timers can run on a given page.</dd> + <dt>{{domxref("Console.timeEnd()")}}</dt> + <dd>Stops the specified <a href="/en-US/docs/Web/API/console#Timers">timer</a> and logs the elapsed time in seconds since its start.</dd> + <dt>{{domxref("Console.timeStamp()")}} {{Non-standard_inline}}</dt> + <dd>Adds a marker to the browser's <a href="https://developer.chrome.com/devtools/docs/timeline">Timeline</a> or <a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a> tool.</dd> + <dt>{{domxref("Console.trace()")}}</dt> + <dd>Outputs a <a href="/en-US/docs/Web/API/console#Stack_traces">stack trace</a>.</dd> + <dt>{{domxref("Console.warn()")}}</dt> + <dd>Outputs a warning message. You may use <a href="/en-US/docs/Web/API/console#Using_string_substitutions">string substitution</a> and additional arguments with this method.</dd> +</dl> + + +<h2 id="Usage" name="Usage">Usage</h2> + +<h3 id="Outputting_text_to_the_console" name="Outputting_text_to_the_console">Outputting text to the console</h3> + +<p>The most frequently-used feature of the console is logging of text and other data. There are four categories of output you can generate, using the {{domxref("console.log()")}}, {{domxref("console.info()")}}, {{domxref("console.warn()")}}, and {{domxref("console.error()")}} methods. Each of these results in output that's styled differently in the log, and you can use the filtering controls provided by your browser to only view the kinds of output that interest you.</p> + +<p>There are two ways to use each of the output methods; you can simply pass in a list of objects whose string representations get concatenated into one string, then output to the console, or you can pass in a string containing zero or more substitution strings followed by a list of the objects with which to replace them.</p> + +<h4 id="Outputting_a_single_object">Outputting a single object</h4> + +<p>The simplest way to use the logging methods is to output a single object:</p> + +<pre class="brush: js">var someObject = { str: "Some text", id: 5 }; +console.log(someObject); +</pre> + +<p>The output looks something like this:</p> + +<pre>[09:27:13.475] ({str:"Some text", id:5})</pre> + +<h4 id="Outputting_multiple_objects">Outputting multiple objects</h4> + +<p>You can also output multiple objects by simply listing them when calling the logging method, like this:</p> + +<pre class="brush: js">var car = "Dodge Charger"; +var someObject = {str:"Some text", id:5}; +console.info("My first car was a", car, ". The object is: ", someObject);</pre> + +<p>This output will look like this:</p> + +<pre>[09:28:22.711] My first car was a Dodge Charger . The object is: ({str:"Some text", id:5}) +</pre> + +<h4 id="Using_string_substitutions">Using string substitutions</h4> + +<p>Gecko 9.0 {{geckoRelease("9.0")}} introduced support for string substitutions. When passing a string to one of the console object's methods that accepts a string, you may use these substitution strings:</p> + +<table class="standard-table" style="width: auto;"> + <tbody> + <tr> + <td class="header">Substitution string</td> + <td class="header">Description</td> + </tr> + <tr> + <td>%o or %O</td> + <td>Outputs a JavaScript object. Clicking the object name opens more information about it in the inspector.</td> + </tr> + <tr> + <td>%d or %i</td> + <td>Outputs an integer. Number formatting is supported, for example <code>console.log("Foo %.2d", 1.1)</code> will output the number as two significant figures with a leading 0: <code>Foo 01</code></td> + </tr> + <tr> + <td>%s</td> + <td>Outputs a string.</td> + </tr> + <tr> + <td>%f</td> + <td>Outputs a floating-point value. Formatting is supported, for example <code>console.log("Foo %.2f", 1.1)</code> will output the number to 2 decimal places: <code>Foo 1.10</code></td> + </tr> + </tbody> +</table> + +<p>Each of these pulls the next argument after the format string off the parameter list. For example:</p> + +<pre>for (var i=0; i<5; i++) { + console.log("Hello, %s. You've called me %d times.", "Bob", i+1); +} +</pre> + +<p>The output looks like this:</p> + +<pre>[13:14:13.481] Hello, Bob. You've called me 1 times. +[13:14:13.483] Hello, Bob. You've called me 2 times. +[13:14:13.485] Hello, Bob. You've called me 3 times. +[13:14:13.487] Hello, Bob. You've called me 4 times. +[13:14:13.488] Hello, Bob. You've called me 5 times. +</pre> + +<h4 id="Styling_console_output">Styling console output</h4> + +<p>You can use the <code>"%c"</code> directive to apply a CSS style to console output:</p> + +<pre class="brush: js">console.log("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue;padding: 2px");</pre> + +<div>The text before the directive will not be affected, but the text after the directive will be styled using the CSS declarations in the parameter.</div> + +<div> </div> + +<div><img alt="" src="https://mdn.mozillademos.org/files/12527/CSS-styling.png" style="display: block; margin: 0 auto;"></div> + +<div> </div> + +<div class="note"> +<p><strong>Note</strong>: Quite a few CSS properties are supported by this styling; you should experiment and see which ones prove useful.</p> +</div> + +<div> </div> + +<div>{{h3_gecko_minversion("Using groups in the console", "9.0")}}</div> + +<p>You can use nested groups to help organize your output by visually combining related material. To create a new nested block, call <code>console.group()</code>. The <code>console.groupCollapsed()</code> method is similar, but creates the new block collapsed, requiring the use of a disclosure button to open it for reading.</p> + +<div class="note"><strong>Note:</strong> Collapsed groups are not supported yet in Gecko; the <code>groupCollapsed()</code> method is the same as <code>group()</code> at this time.</div> + +<p>To exit the current group, simply call console.groupEnd(). For example, given this code:</p> + +<pre class="brush: js">console.log("This is the outer level"); +console.group(); +console.log("Level 2"); +console.group(); +console.log("Level 3"); +console.warn("More of level 3"); +console.groupEnd(); +console.log("Back to level 2"); +console.groupEnd(); +console.debug("Back to the outer level"); +</pre> + +<p>The output looks like this:</p> + +<p><img alt="nesting.png" class="default internal" src="/@api/deki/files/6082/=nesting.png"></p> + +<div>{{h3_gecko_minversion("Timers", "10.0")}}</div> + +<p>In order to calculate the duration of a specific operation, Gecko 10 introduced the support of timers in the <code>console</code> object. To start a timer, call the <code>console.time</code><code>()</code> method, giving it a name as the only parameter. To stop the timer, and to get the elapsed time in milliseconds, just call the <code>console.timeEnd()</code> method, again passing the timer's name as the parameter. Up to 10,000 timers can run simultaneously on a given page.</p> + +<p>For example, given this code:</p> + +<pre class="brush: js">console.time("answer time"); +alert("Click to continue"); +console.timeEnd("answer time"); +</pre> + +<p>will log the time needed by the user to discard the alert box:</p> + +<p><img alt="timerresult.png" class="default internal" src="/@api/deki/files/6084/=timerresult.png"></p> + +<p>Notice that the timer's name is displayed both when the timer is started and when it's stopped.</p> + +<div class="note"><strong>Note:</strong> It's important to note that if you're using this to log the timing for network traffic, the timer will report the total time for the transaction, while the time listed in the network panel is just the amount of time required for the header. If you have response body logging enabled, the time listed for the response header and body combined should match what you see in the console output.</div> + +<h3 id="Stack_traces">Stack traces</h3> + +<p>The console object also supports outputting a stack trace; this will show you the call path taken to reach the point at which you call {{domxref("console.trace()")}}. Given code like this:</p> + +<pre class="brush: js">function foo() { + function bar() { + console.trace(); + } + bar(); +} + +foo(); +</pre> + +<p>The output in the console looks something like this:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7167/api-trace2.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Console API')}}</td> + <td>{{Spec2('Console API')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Notes">Notes</h2> + +<ul> + <li>At least in Firefox, if a page defines a <code>console</code> object, that object overrides the one built into Firefox.</li> + <li>Prior to {{Gecko("12.0")}}, the console object's methods only work when the Web Console is open. Starting with {{Gecko("12.0")}}, output is cached until the Web Console is opened, then displayed at that time.</li> + <li>It's worth noting that the Firefox's built-in <code>Console</code> object is compatible with the one provided by <a class="external" href="http://getfirebug.com/" title="http://getfirebug.com/">Firebug</a>.</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Tools" title="Tools">Tools</a></li> + <li><a href="/en-US/docs/Tools/Web_Console" title="Web Console">Web Console</a> — how the Web Console in Firefox handles console API calls</li> + <li><a href="/en-US/docs/Tools/Remote_Debugging">Remote debugging</a> — how to see console output when the debugging target is a mobile device</li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/On-device_console_logging" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/On-device_console_logging">On-device console logging</a> — how to do logging on Firefox OS devices</li> +</ul> + +<h3 id="Other_implementations">Other implementations</h3> + +<ul> + <li><a href="https://developers.google.com/chrome-developer-tools/docs/console-api">Google Chrome DevTools</a></li> + <li><a href="http://getfirebug.com/wiki/index.php/Console_API">Firebug</a></li> + <li><a href="http://msdn.microsoft.com/en-us/library/hh772173(v=vs.85).aspx">Internet Explorer</a></li> + <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html">Safari</a></li> +</ul> diff --git a/files/id/web/api/document/createelement/index.html b/files/id/web/api/document/createelement/index.html new file mode 100644 index 0000000000..0f14c4e8ce --- /dev/null +++ b/files/id/web/api/document/createelement/index.html @@ -0,0 +1,225 @@ +--- +title: Document.createElement() +slug: Web/API/Document/createElement +tags: + - API + - DOM + - Document + - Metode + - Referensi + - createElement +translation_of: Web/API/Document/createElement +--- +<div>{{APIRef("DOM")}}</div> + +<p>Dalam sebuah dokumen <a href="/en-US/docs/Web/HTML">HTML</a>, metode <strong><code>document.createElement()</code></strong> membuat elemen HTML yang ditentukan oleh <code>tagName</code>, atau sebuah {{domxref("HTMLUnknownElement")}} jika <code>tagName</code> tidak dikenali.</p> + +<div class="note"> +<p><strong>Catatan</strong>: Dalam sebuah dokumen <a href="/en-US/docs/Mozilla/Tech/XUL">XUL</a> , ini membuat elemen XUL yang ditentukan. Pada dokumen lain, ini membuat sebuah elemen dengan sebuah namespace URI yang <code>null</code>.</p> +</div> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="brush: js"><var>var <em>element</em></var> = <var>document</var>.createElement(<em><var>tagName[, options]</var></em>); +</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>tagName</code></dt> + <dd>Sebuah <em>string</em> yang menentukan tipe dari elemen yang akan dibuat. {{domxref("Node.nodeName", "nodeName")}} dari elemen dibuat dengan nilai <code>tagName</code>. Jangan menggunakan nama yang memenuhi syarat (seperti "html:a") dengan metode ini. Ketika dipanggil pada sebuah dokumen HTML, <code>createElement()</code> mengubah <code>tagName</code> menjadi <em>lower case</em> sebelum membuat elemen. Pada Firefox, Opera, dan Chrome, <code>createElement(null)</code> bekerja seperti <code>createElement("null")</code>.</dd> + <dt><code>options</code>{{optional_inline}}</dt> + <dd>Sebuah objek opsional <code>ElementCreationOptions</code> berisi sebuah properti tunggal bernama <code>is</code>, yang nilainya adalah nama tag untuk sebuah elemen khusus yang sebelumnya didefinisikan menggunakan <code>customElements.define()</code>. Lihat {{anch("Web component example")}} untuk lebih jelasnya.</dd> +</dl> + +<h3 id="Return_value"><em>Return value</em></h3> + +<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element" title="The Element interface represents an object of a Document. This interface describes methods and properties common to all kinds of elements. Specific behaviors are described in interfaces which inherit from Element but add additional functionality."><code>Element</code></a> baru.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Contoh_dasar">Contoh dasar</h3> + +<p>Ini membuat sebuah <code><div></code> baru dan memasukannya sebelum elemen dengan ID "<code>div1</code>".</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush:html"><!DOCTYPE html> +<html> +<head> + <title>||Bekerja dengan elemen||</title> +</head> +<body> + <div id="div1">Teks di atas telah dibuat secara dinamis.</div> +</body> +</html> +</pre> + +<h4 id="JavaScript"><span style="line-height: normal;">JavaScript</span></h4> + +<pre class="brush:js">document.body.onload = addElement; + +function addElement () { + // membuat sebuah elemen div baru + var newDiv = document.createElement("div"); + // dan memberikannya sebuah konten + var newContent = document.createTextNode("Hi there and greetings!"); + // menambahkan teks terebut ke div yang baru dibuat + newDiv.appendChild(newContent); + + // menambah elemen yang baru dibuat berserta isinya ke dalam DOM + var currentDiv = document.getElementById("div1"); + document.body.insertBefore(newDiv, currentDiv); +}</pre> + +<p>{{EmbedLiveSample("Basic_example", 500, 50)}}</p> + +<h3 id="Contoh_komponen_web">Contoh komponen web</h3> + +<p>Contoh cuplikan berikut diambil dari contoh dari <em>expanding-list-web-component</em> kami (lihat juga secara langsung). Dalam kasus ini, elemen khusus kami memperluas {{domxref("HTMLUListElement")}}, yang mewakili elemen {{htmlelement("ul")}}.</p> + +<pre>// Membuat sebuah kelas untuk elemen +class ExpandingList extends HTMLUListElement { + constructor() { + // Selalu memanggil <em>super</em> dulu di konstruktor + super(); + + // definisi konstruktor dihilangkan untuk singkatnya + ... + } +} + +// Mendefinisi elemen baru +customElements.define('expanding-list', ExpandingList, { extends: "ul" });</pre> + +<p>Jika kita ingin untuk membuat sebuah <em>instance</em> dari elemen ini secara terprogram, kita akan menggunakan sebuah panggilan di sepanjang baris berikut:</p> + +<pre class="brush: js">let expandingList = document.createElement('ul', { is : 'expanding-list' })</pre> + +<p>Elemen baru akan diberikan sebuah atribut <code><a href="/en-US/docs/Web/HTML/Global_attributes/is">is</a></code> yang nilainya adalah nama tag elemen khusus.</p> + +<div class="note"> +<p><strong>Catatan</strong>: Untuk kompabilitas ke belakang untuk versi sebelumnya dari <a href="https://www.w3.org/TR/custom-elements/">Spesifikasi Elemen khusus</a>, beberapa peramban (<em>browser</em>) akan memungkinkan Anda untuk melewatkan sebuah <em>string</em> di sini bukan pada sebuah objek, yang mana nilai <em>string </em> adalah nama tag elemen khusus.</p> +</div> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Komentar</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_peramban">Kompabilitas peramban</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[1][2]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>argumen <code>options</code></td> + <td>{{CompatVersionUnknown}}<sup>[3]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(50)}}<sup>[4][5]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Android</th> + <th>Android Webview</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>argumen <code>options</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[3]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[3]</sup></td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Dimulai dengan Gecko 22.0 {{geckoRelease("22.0")}} <code>createElement()</code> tidak lagi menggunakan antarmuka {{domxref("HTMLSpanElement")}} ketika argumennya adalah "bgsounds", "multicol", atau "image". Sebagai gantinya, <code>HTMLUnknownElement</code> digunakan untuk "bgsound" dan "multicol" dan {{domxref("HTMLElement")}} <code>HTMLElement</code> digunakan untuk "image".</p> + +<p>[2] Implementasi Gecko dari <code>createElement</code> tidak sesuai dengan spesifikasi DOM untuk dokumen XUL dan XHTML: <code>localName</code> dan <code>namespaceURI</code> tidak diatur ke <code>null</code> pada elemen yang dibuat. Lihat {{ Bug(280692) }} untuk lebih jelasnya.</p> + +<p>[3] Pada versi sebelumnya dari spesifikasi, argumen ini hanyalah sebuah <em>string</em> yang nilainyaadalah nama tag elemen khusus. Misalnya bisa saja <code>document.createElement("button", "custom-button")</code> daripada <code>document.createElement("button", {is: "custom-button"})</code>. Demi kompabilitas ke belakang, Chrome menerima kedua bentuk tersebut, meskipun bentuk <em>string</em> sudah usang.</p> + +<p>[4] Liat [3] di atas: seperti Chrome, Firefox menerima string, bukan sebuah objek di sini, tetapi hanya dari versi 51 dan seterusnya. Pada versi 50, <code>options</code> harus sebuah objek.</p> + +<p>[5] Untuk eksperimen dengan elemen khusus di Firefox, Anda harus mengatur preferensi <code>dom.webcomponents.enabled</code> dan <code>dom.webcomponents.customelements.enabled</code> menjadi <code>true</code>.</p> + +<h3 id="Catatan_Quantum_CSS">Catatan Quantum CSS</h3> + +<ul> + <li>Pada Gecko, ketika Anda membuat sebuah <em>subtree </em>terpisah (misalnya sebuah {{htmlelement("div")}} dibuat menggunakan <code>createElement()</code> yang belum dimasukan ke dalam DOM), elemen akar <em>subtree </em>diatur sebagai sebuah elemen tingkat-blok. Pada Firefox mesin CSS paralel baru (yang dikenal dengan <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> atau <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, direncanakan untuk dirilis pada Firefox 57), ini diatur sebagai <em>inline</em>, sesuai spesifikasi ({{bug(1374994)}}).</li> +</ul> + +<h2 id="See_also" name="See_also">Lihat juga</h2> + +<ul> + <li>{{domxref("Node.removeChild()")}}</li> + <li>{{domxref("Node.replaceChild()")}}</li> + <li>{{domxref("Node.appendChild()")}}</li> + <li>{{domxref("Node.insertBefore()")}}</li> + <li>{{domxref("Node.hasChildNodes()")}}</li> + <li>{{domxref("document.createElementNS()")}} — untuk secara eksplisit menentukan namespace URI untuk elemen.</li> +</ul> diff --git a/files/id/web/api/document/index.html b/files/id/web/api/document/index.html new file mode 100644 index 0000000000..08e82db4cc --- /dev/null +++ b/files/id/web/api/document/index.html @@ -0,0 +1,576 @@ +--- +title: Document +slug: Web/API/Document +tags: + - API + - DOM + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/Document +--- +<div>{{APIRef}}</div> + +<div> </div> + +<p>The <strong><code>Document</code></strong> interface represents any web page loaded in the browser and serves as an entry point into the web page's content, which is the <a href="/en-US/docs/Using_the_W3C_DOM_Level_1_Core" title="Using_the_W3C_DOM_Level_1_Core">DOM tree</a>. The DOM tree includes elements such as {{HTMLElement("body")}} and {{HTMLElement("table")}}, among <a href="/en-US/docs/Web/HTML/Element">many others</a>. It provides functionality which is global to the document, such as obtaining the page's URL and creating new elements in the document.</p> + +<p>{{inheritanceDiagram}}</p> + +<p>The <code>Document</code> interface describes the common properties and methods for any kind of document. Depending on the document's type (e.g. <a href="/en-US/docs/HTML" title="HTML">HTML</a>, <a href="/en-US/docs/XML" title="XML">XML</a>, SVG, …), a larger API is available: HTML documents, served with the <code>text/html</code> content type, also implement the {{domxref("HTMLDocument")}} interface, wherease SVG documents implement the {{domxref("SVGDocument")}} interface.</p> + +<h2 id="Properties" name="Properties">Properties</h2> + +<p><em>This interface also inherits from the {{domxref("Node")}} and {{domxref("EventTarget")}} interfaces.</em></p> + +<dl> + <dt>{{domxref("Document.all")}} {{Deprecated_inline}} {{non-standard_inline}}</dt> + <dd>Provides access to all elements with an <code>id</code>. This is a legacy, non-standard interface and you should use the {{domxref("document.getElementById()")}} method instead.</dd> + <dt>{{domxref("Document.async")}} {{Deprecated_inline}}</dt> + <dd>Used with {{domxref("Document.load")}} to indicate an asynchronous request.</dd> + <dt>{{domxref("Document.characterSet")}} {{readonlyinline}}</dt> + <dd>Returns the character set being used by the document.</dd> + <dt>{{domxref("Document.charset")}} {{readonlyinline}} {{Deprecated_inline}}</dt> + <dd>Alias of {{domxref("Document.characterSet")}}. Use this property instead.</dd> + <dt>{{domxref("Document.compatMode")}} {{readonlyinline}} {{experimental_inline}}</dt> + <dd>Indicates whether the document is rendered in <em>quirks</em> or <em>strict</em> mode.</dd> + <dt>{{domxref("Document.contentType")}} {{readonlyinline}} {{experimental_inline}}</dt> + <dd>Returns the Content-Type from the MIME Header of the current document.</dd> + <dt>{{domxref("Document.doctype")}} {{readonlyinline}}</dt> + <dd>Returns the Document Type Definition (DTD) of the current document.</dd> + <dt>{{domxref("Document.documentElement")}} {{readonlyinline}}</dt> + <dd>Returns the {{domxref("Element")}} that is a direct child of the document. For HTML documents, this is normally the HTML element.</dd> + <dt>{{domxref("Document.documentURI")}} {{readonlyinline}}</dt> + <dd>Returns the document location as a string.</dd> + <dt>{{domxref("Document.domConfig")}} {{Deprecated_inline}}</dt> + <dd>Should return a {{domxref("DOMConfiguration")}} object.</dd> + <dt>{{domxref("Document.fullscreen")}} {{obsolete_inline}}</dt> + <dd><code>true</code> when the document is in {{domxref("Using_full-screen_mode","full-screen mode")}}.</dd> + <dt>{{domxref("Document.hidden")}} {{readonlyinline}}</dt> + <dd>…</dd> + <dt>{{domxref("Document.implementation")}} {{readonlyinline}}</dt> + <dd>Returns the DOM implementation associated with the current document.</dd> + <dt>{{domxref("Document.inputEncoding")}} {{readonlyinline}} {{Deprecated_inline}}</dt> + <dd>Alias of {{domxref("Document.characterSet")}}. Use this property instead.</dd> + <dt>{{domxref("Document.lastStyleSheetSet")}} {{readonlyinline}}</dt> + <dd>Returns the name of the style sheet set that was last enabled. Has the value <code>null</code> until the style sheet is changed by setting the value of {{domxref("document.selectedStyleSheetSet","selectedStyleSheetSet")}}.</dd> + <dt>{{domxref("Document.mozSyntheticDocument")}} {{non-standard_inline}} {{gecko_minversion_inline("8.0")}}</dt> + <dd>Returns a {{jsxref("Boolean")}} that is <code>true</code> only if this document is synthetic, such as a standalone image, video, audio file, or the like.</dd> + <dt>{{domxref("Document.mozFullScreenElement")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt> + <dd>The element that's currently in full screen mode for this document.</dd> + <dt>{{domxref("Document.mozFullScreenEnabled")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt> + <dd><code>true</code> if calling {{domxref("Element.mozRequestFullscreen()")}} would succeed in the curent document.</dd> + <dt>{{domxref("Document.pointerLockElement")}} {{readonlyinline}} {{experimental_inline}}</dt> + <dd>Returns the element set as the target for mouse events while the pointer is locked. <code>null</code> if lock is pending, pointer is unlocked, or if the target is in another document.</dd> + <dt>{{domxref("Document.preferredStyleSheetSet")}} {{readonlyinline}}</dt> + <dd>Returns the preferred style sheet set as specified by the page author.</dd> + <dt>{{domxref("Document.scrollingElement")}} {{experimental_inline}} {{readonlyinline}}</dt> + <dd>Returns a reference to the {{domxref("Element")}} that scrolls the document.</dd> + <dt>{{domxref("Document.selectedStyleSheetSet")}}</dt> + <dd>Returns which style sheet set is currently in use.</dd> + <dt>{{domxref("Document.styleSheets")}} {{readonlyinline}}</dt> + <dd>Returns a list of the style sheet objects on the current document.</dd> + <dt>{{domxref("Document.styleSheetSets")}} {{readonlyinline}}</dt> + <dd>Returns a list of the style sheet sets available on the document.</dd> + <dt>{{domxref("Document.timeline")}} {{readonlyinline}}</dt> + <dd>…</dd> + <dt>{{domxref("Document.undoManager")}} {{readonlyinline}} {{experimental_inline}}</dt> + <dd>…</dd> + <dt>{{domxref("Document.URL")}} {{readonlyinline}}</dt> + <dd>Returns ...</dd> + <dt>{{domxref("Document.visibilityState")}} {{readonlyinline}}</dt> + <dd>…</dd> + <dt>{{domxref("Document.xmlEncoding")}} {{Deprecated_inline}}</dt> + <dd>Returns the encoding as determined by the XML declaration.</dd> + <dt>{{domxref("Document.xmlStandalone")}} {{obsolete_inline("10.0")}}</dt> + <dd>Returns <code>true</code> if the XML declaration specifies the document to be standalone (<em>e.g.,</em> An external part of the DTD affects the document's content), else <code>false</code>.</dd> + <dt>{{domxref("Document.xmlVersion")}} {{obsolete_inline("10.0")}}</dt> + <dd>Returns the version number as specified in the XML declaration or <code>"1.0"</code> if the declaration is absent.</dd> +</dl> + +<p>The <code>Document</code> interface is extended with the {{domxref("ParentNode")}} interface:</p> + +<p>{{page("/en-US/docs/Web/API/ParentNode","Properties")}}</p> + +<h3 id="Extension_for_HTML_document">Extension for HTML document</h3> + +<p><em>The <code>Document</code> interface for HTML documents inherits from the {{domxref("HTMLDocument")}} interface or, since HTML5, is extended for such documents.</em></p> + +<dl> + <dt>{{domxref("Document.activeElement")}} {{readonlyinline}}</dt> + <dd>Returns the currently focused element.</dd> + <dt>{{domxref("Document.alinkColor")}} {{Deprecated_inline}}</dt> + <dd>Returns or sets the color of active links in the document body.</dd> + <dt>{{domxref("Document.anchors")}}</dt> + <dd>Returns a list of all of the anchors in the document.</dd> + <dt>{{domxref("Document.applets")}} {{Deprecated_inline}}</dt> + <dd>Returns an ordered list of the applets within a document.</dd> + <dt>{{domxref("Document.bgColor")}} {{Deprecated_inline}}</dt> + <dd>Gets/sets the background color of the current document.</dd> + <dt>{{domxref("Document.body")}}</dt> + <dd>Returns the {{HTMLElement("body")}} element of the current document.</dd> + <dt>{{domxref("Document.cookie")}}</dt> + <dd>Returns a semicolon-separated list of the cookies for that document or sets a single cookie.</dd> + <dt>{{domxref("Document.defaultView")}} {{readonlyinline}}</dt> + <dd>Returns a reference to the window object.</dd> + <dt>{{domxref("Document.designMode")}}</dt> + <dd>Gets/sets the ability to edit the whole document.</dd> + <dt>{{domxref("Document.dir")}} {{readonlyinline}}</dt> + <dd>Gets/sets directionality (rtl/ltr) of the document.</dd> + <dt>{{domxref("Document.domain")}} {{readonlyinline}}</dt> + <dd>Returns the domain of the current document.</dd> + <dt>{{domxref("Document.embeds")}} {{readonlyinline}}</dt> + <dd>Returns a list of the embedded {{HTMLElement('embed')}} elements within the current document.</dd> + <dt>{{domxref("document.fgColor")}} {{Deprecated_inline}}</dt> + <dd>Gets/sets the foreground color, or text color, of the current document.</dd> + <dt>{{domxref("Document.forms")}} {{readonlyinline}}</dt> + <dd>Returns a list of the {{HTMLElement("form")}} elements within the current document.</dd> + <dt>{{domxref("Document.head")}} {{readonlyinline}}</dt> + <dd>Returns the {{HTMLElement("head")}} element of the current document.</dd> + <dt>{{domxref("Document.height")}} {{non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Gets/sets the height of the current document.</dd> + <dt>{{domxref("Document.images")}} {{readonlyinline}}</dt> + <dd>Returns a list of the images in the current document.</dd> + <dt>{{domxref("Document.lastModified")}} {{readonlyinline}}</dt> + <dd>Returns the date on which the document was last modified.</dd> + <dt>{{domxref("Document.linkColor")}} {{Deprecated_inline}}</dt> + <dd>Gets/sets the color of hyperlinks in the document.</dd> + <dt>{{domxref("Document.links")}} {{readonlyinline}}</dt> + <dd>Returns a list of all the hyperlinks in the document.</dd> + <dt>{{domxref("Document.location")}} {{readonlyinline}}</dt> + <dd>Returns the URI of the current document.</dd> + <dt>{{domxref("Document.plugins")}} {{readonlyinline}}</dt> + <dd>Returns a list of the available plugins.</dd> + <dt>{{domxref("Document.readyState")}} {{readonlyinline}} {{gecko_minversion_inline("1.9.2")}}</dt> + <dd>Returns loading status of the document.</dd> + <dt>{{domxref("Document.referrer")}} {{readonlyinline}}</dt> + <dd>Returns the URI of the page that linked to this page.</dd> + <dt>{{domxref("Document.scripts")}} {{readonlyinline}}</dt> + <dd>Returns all the {{HTMLElement("script")}} elements on the document.</dd> + <dt>{{domxref("Document.title")}}</dt> + <dd>Sets or gets title of the current document.</dd> + <dt>{{domxref("Document.URL")}} {{readonlyInline}}</dt> + <dd>Returns<span style="line-height: 19.0909080505371px;"> the document location as a string.</span></dd> + <dt>{{domxref("Document.vlinkColor")}} {{Deprecated_inline}}</dt> + <dd>Gets/sets the color of visited hyperlinks.</dd> + <dt>{{domxref("Document.width")}} {{non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Returns the width of the current document.</dd> +</dl> + +<h3 id="Event_handlers" name="Event_handlers">Event handlers</h3> + +<dl> + <dt>{{domxref("GlobalEventHandlers.onabort")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("abort")}} event is raised.</dd> + <dt>{{domxref("Document.onafterscriptexecute")}} {{non-standard_inline}}</dt> + <dd>Represents the event handling code for the {{event("afterscriptexecute")}} event.</dd> + <dt>{{domxref("Document.onbeforescriptexecute")}} {{non-standard_inline}}</dt> + <dd>Represents the event handling code for the {{event("beforescriptexecute")}} event.</dd> + <dt>{{domxref("GlobalEventHandlers.onblur")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("blur")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.oncancel")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("cancel")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.oncanplay")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("canplay")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.oncanplaythrough")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("canplaythrough")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onchange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("change")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onclick")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("click")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onclose")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("close")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.oncontextmenu")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("contextmenu")}} event is raised.</dd> + <dt>{{domxref("Document.oncopy")}} {{non-standard_inline}}</dt> + <dd>Represents the event handling code for the {{event("copy")}} event.</dd> + <dt>{{domxref("GlobalEventHandlers.oncuechange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("cuechange")}} event is raised.</dd> + <dt>{{domxref("Document.oncut")}} {{non-standard_inline}}</dt> + <dd>Represents the event handling code for the {{event("cut")}} event.</dd> + <dt>{{domxref("GlobalEventHandlers.ondblclick")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dblclick")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondrag")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("drag")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondragend")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragend")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondragenter")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragenter")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondragexit")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragexit")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondragleave")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragleave")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondragover")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragover")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondragstart")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragstart")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondrop")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("drop")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondurationchange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("durationchange")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onemptied")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("emptied")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onended")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("ended")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt> + <dd>Is an {{domxref("OnErrorEventHandler")}} representing the code to be called when the {{event("error")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onfocus")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("focus")}} event is raised.</dd> + <dt>{{domxref("Document.onfullscreenchange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("fullscreenchange")}} event is raised.</dd> + <dt>{{domxref("Document.onfullscreenerror")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("fullscreenerror")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.oninput")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("input")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.oninvalid")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("invalid")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onkeydown")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keydown")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onkeypress")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keypress")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onkeyup")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keyup")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onload")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("load")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onloadeddata")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadeddata")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onloadedmetadata")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadedmetadata")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onloadstart")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadstart")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmousedown")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousedown")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseenter")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseenter")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseleave")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseleave")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmousemove")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousemove")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseout")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseout")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseover")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseover")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseup")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseup")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmousewheel")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousewheel")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpause")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pause")}} event is raised.</dd> + <dt>{{domxref("Document.onpaste")}} {{non-standard_inline}}</dt> + <dd>Represents the event handling code for the {{event("paste")}} event.</dd> + <dt>{{domxref("GlobalEventHandlers.onplay")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("play")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onplaying")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("playing")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerdown")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerdown")}} event is raised.</dd> + <dt>{{domxref("Document.onpointerlockchange")}} {{experimental_inline}}</dt> + <dd>Represents the event handling code for the {{event("pointerlockchange")}} event.</dd> + <dt>{{domxref("Document.onpointerlockerror")}} {{experimental_inline}}</dt> + <dd>Represetnts the event handling code for the {{event("pointerlockerror")}} event.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointermove")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointermove")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerup")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerup")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointercancel")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointercancel")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerover")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerover")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerout")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerout")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerenter")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerevent")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerleave")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerleave")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerlockchange")}} {{experimental_inline}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerlockchange")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerlockerror")}} {{experimental_inline}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerlockerror")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onprogress")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("progress")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onratechange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("ratechange")}} event is raised.</dd> + <dt>{{domxref("Document.onreadystatechange")}} {{gecko_minversion_inline("1.9.2")}}</dt> + <dd>Represents the event handling code for the {{event("readystatechange")}} event.</dd> + <dt>{{domxref("GlobalEventHandlers.onreset")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("reset")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onscroll")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("scroll")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onseeked")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("seeked")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onseeking")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("seeking")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onselect")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("select")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onselectstart")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectstart")}} event is raised.</dd> + <dt>{{domxref("Document.onselectionchange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onshow")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("show")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onsort")}} {{experimental_inline}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("sort")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onstalled")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("stalled")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onsubmit")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("submit")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onsuspend")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("suspend")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ontimeupdate")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("timeupdate")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onvolumechange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("volumechange")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onwaiting")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("waiting")}} event is raised.</dd> + <dt>{{domxref("Document.onwheel")}} {{non-standard_inline}}</dt> + <dd>Represents the event handling code for the {{event("wheel")}} event.</dd> +</dl> + +<h2 id="Methods" name="Methods">Methods</h2> + +<p><em>This interface also inherits from the {{domxref("Node")}} and {{domxref("EventTarget")}} interfaces.</em></p> + +<dl> + <dt>{{domxref("Document.adoptNode()")}}</dt> + <dd>Adopt node from an external document.</dd> + <dt>{{domxref("Document.captureEvents()")}} {{Deprecated_inline}}</dt> + <dd>See {{domxref("Window.captureEvents")}}.</dd> + <dt>{{domxref("Document.caretPositionFromPoint()")}}{{experimental_inline}}</dt> + <dd>Gets the {{domxref("CaretPosition")}} at or near the specified coordinates.</dd> + <dt>{{domxref("Document.caretRangeFromPoint()")}}{{non-standard_inline}}</dt> + <dd>Gets a {{Domxref("Range")}} object for the document fragment under the specified coordinates.</dd> + <dt>{{domxref("Document.createAttribute()")}}</dt> + <dd>Creates a new {{domxref("Attr")}} object and returns it.</dd> + <dt>{{domxref("Document.createAttributeNS()")}}</dt> + <dd>Creates a new attribute node in a given namespace and returns it.</dd> + <dt>{{domxref("Document.createCDATASection()")}}</dt> + <dd>Creates a new CDATA node and returns it.</dd> + <dt>{{domxref("Document.createComment()")}}</dt> + <dd>Creates a new comment node and returns it.</dd> + <dt>{{domxref("Document.createDocumentFragment()")}}</dt> + <dd>Creates a new document fragment.</dd> + <dt>{{domxref("Document.createElement()")}}</dt> + <dd>Creates a new element with the given tag name.</dd> + <dt>{{domxref("Document.createElementNS()")}}</dt> + <dd>Creates a new element with the given tag name and namespace URI.</dd> + <dt>{{domxref("Document.createEntityReference()")}} {{obsolete_inline}}</dt> + <dd>Creates a new entity reference object and returns it.</dd> + <dt>{{domxref("Document.createEvent()")}}</dt> + <dd>Creates an event object.</dd> + <dt>{{domxref("Document.createNodeIterator()")}}</dt> + <dd>Creates a {{domxref("NodeIterator")}} object.</dd> + <dt>{{domxref("Document.createProcessingInstruction()")}}</dt> + <dd>Creates a new {{domxref("ProcessingInstruction")}} object.</dd> + <dt>{{domxref("Document.createRange()")}}</dt> + <dd>Creates a {{domxref("Range")}} object.</dd> + <dt>{{domxref("Document.createTextNode()")}}</dt> + <dd>Creates a text node.</dd> + <dt>{{domxref("Document.createTouch()")}}</dt> + <dd>Creates a {{domxref("Touch")}} object.</dd> + <dt>{{domxref("Document.createTouchList()")}}</dt> + <dd>Creates a {{domxref("TouchList")}} object.</dd> + <dt>{{domxref("Document.createTreeWalker()")}}</dt> + <dd>Creates a {{domxref("TreeWalker")}} object.</dd> + <dt>{{domxref("Document.elementFromPoint()")}}{{experimental_inline}}</dt> + <dd>Returns the topmost element at the specified coordinates. </dd> + <dt>{{domxref("Document.elementsFromPoint()")}}{{experimental_inline}}</dt> + <dd>Returns an array of all elements at the specified coordinates.</dd> + <dt>{{domxref("Document.enableStyleSheetsForSet()")}}</dt> + <dd>Enables the style sheets for the specified style sheet set.</dd> + <dt>{{domxref("Document.exitPointerLock()")}} {{experimental_inline}}</dt> + <dd>Release the pointer lock.</dd> + <dt>{{domxref("Document.getAnimations()")}} {{experimental_inline}}</dt> + <dd>Returns an array of all {{domxref("Animation")}} objects currently in effect whose target elements are descendants of the <code>document</code>.</dd> + <dt>{{domxref("Document.getElementsByClassName()")}}</dt> + <dd>Returns a list of elements with the given class name.</dd> + <dt>{{domxref("Document.getElementsByTagName()")}}</dt> + <dd>Returns a list of elements with the given tag name.</dd> + <dt>{{domxref("Document.getElementsByTagNameNS()")}}</dt> + <dd>Returns a list of elements with the given tag name and namespace.</dd> + <dt>{{domxref("Document.importNode()")}}</dt> + <dd>Returns a clone of a node from an external document.</dd> + <dt>{{domxref("Document.normalizeDocument()")}} {{obsolete_inline}}</dt> + <dd>Replaces entities, normalizes text nodes, etc.</dd> + <dt>{{domxref("Document.registerElement()")}} {{experimental_inline}}</dt> + <dd>Registers a web component.</dd> + <dt>{{domxref("Document.releaseCapture()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Releases the current mouse capture if it's on an element in this document.</dd> + <dt>{{domxref("Document.releaseEvents()")}} {{non-standard_inline}} {{Deprecated_inline}}</dt> + <dd>See {{domxref("Window.releaseEvents()")}}.</dd> + <dt>{{domxref("Document.routeEvent()")}} {{non-standard_inline}} {{obsolete_inline(24)}}</dt> + <dd>See {{domxref("Window.routeEvent()")}}.</dd> + <dt>{{domxref("Document.mozSetImageElement()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Allows you to change the element being used as the background image for a specified element ID.</dd> +</dl> + +<p>The <code>Document</code> interface is extended with the {{domxref("ParentNode")}} interface:</p> + +<dl> + <dt>{{domxref("document.getElementById","document.getElementById(String id)")}}</dt> + <dd>Returns an object reference to the identified element.</dd> + <dt>{{domxref("document.querySelector","document.querySelector(String selector)")}} {{gecko_minversion_inline("1.9.1")}}</dt> + <dd>Returns the first Element node within the document, in document order, that matches the specified selectors.</dd> + <dt>{{domxref("document.querySelectorAll","document.querySelectorAll(String selector)")}} {{gecko_minversion_inline("1.9.1")}}</dt> + <dd>Returns a list of all the Element nodes within the document that match the specified selectors.</dd> +</dl> + +<p>The <code>Document</code> interface is extended with the {{domxref("XPathEvaluator")}} interface:</p> + +<dl> + <dt>{{domxref("document.createExpression","document.createExpression(String expression, XPathNSResolver resolver)")}}</dt> + <dd>Compiles an <code><a href="/en-US/docs/XPathExpression" title="XPathExpression">XPathExpression</a></code> which can then be used for (repeated) evaluations.</dd> + <dt>{{domxref("document.createNSResolver","document.createNSResolver(Node resolver)")}}</dt> + <dd>Creates an {{domxref("XPathNSResolver")}} object.</dd> + <dt>{{domxref("document.evaluate","document.evaluate(String expression, Node contextNode, XPathNSResolver resolver, Number type, Object result)")}}</dt> + <dd>Evaluates an XPath expression.</dd> +</dl> + +<h3 id="Extension_for_HTML_documents">Extension for HTML documents</h3> + +<p>The <code>Document</code> interface for HTML documents inherit from the {{domxref("HTMLDocument")}} interface or, since HTML5, is extended for such documents:</p> + +<dl> + <dt>{{domxref("document.clear()")}} {{non-standard_inline}} {{Deprecated_inline}}</dt> + <dd>In majority of modern browsers, including recent versions of Firefox and Internet Explorer, this method does nothing.</dd> + <dt>{{domxref("document.close()")}}</dt> + <dd>Closes a document stream for writing.</dd> + <dt>{{domxref("document.execCommand","document.execCommand(String command[, Boolean showUI[, String value]])")}}</dt> + <dd>On an editable document, executes a formating command.</dd> + <dt>{{domxref("document.getElementsByName","document.getElementsByName(String name)")}}</dt> + <dd>Returns a list of elements with the given name.</dd> + <dt>{{domxref("document.getSelection()")}}</dt> + <dd>Returns a {{domxref("Selection")}} object related to text selected in the document.</dd> + <dt>{{domxref("document.hasFocus()")}}</dt> + <dd>Returns <code>true</code> if the focus is currently located anywhere inside the specified document.</dd> + <dt>{{domxref("document.open()")}}</dt> + <dd>Opens a document stream for writing.</dd> + <dt>{{domxref("document.queryCommandEnabled","document.queryCommandEnabled(String command)")}}</dt> + <dd>Returns true if the formating command can be executed on the current range.</dd> + <dt>{{domxref("document.queryCommandIndeterm","document.queryCommandIndeterm(String command)")}}</dt> + <dd>Returns true if the formating command is in an indeterminate state on the current range.</dd> + <dt>{{domxref("document.queryCommandState","document.queryCommandState(String command)")}}</dt> + <dd>Returns true if the formating command has been executed on the current range.</dd> + <dt>{{domxref("document.queryCommandSupported","document.queryCommandSupported(String command)")}}</dt> + <dd>Returns true if the formating command is supported on the current range.</dd> + <dt>{{domxref("document.queryCommandValue","document.queryCommandValue(String command)")}}</dt> + <dd>Returns the current value of the current range for a formating command.</dd> + <dt>{{domxref("document.write","document.write(String text)")}}</dt> + <dd>Writes text in a document.</dd> + <dt>{{domxref("document.writeln","document.writeln(String text)")}}</dt> + <dd>Writes a line of text in a document.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Selection API', '', 'Extend Document and GlobalEventHandlers')}}</td> + <td>{{Spec2('Selection API')}}</td> + <td>Adds <code>onselectstart</code> and <code>onselectionchange</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM1','#i-Document','Document')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initial definition for the interface</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core','#i-Document','Document')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Supersede DOM 1</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core','#i-Document','Document')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Supersede DOM 2</td> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#interface-document','Document')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Intend to supersede DOM 3</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','dom.html#the-document-object','Document')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Turn the {{domxref("HTMLDocument")}} interface into a <code>Document</code> extension.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 XPath','xpath.html#XPathEvaluator','XPathEvaluator')}}</td> + <td>{{Spec2('DOM3 XPath')}}</td> + <td>Define the {{domxref("XPathEvaluator")}} interface which extend document.</td> + </tr> + <tr> + <td>{{SpecName('HTML Editing','#dom-document-getselection','Document')}}</td> + <td>{{Spec2('HTML Editing')}}</td> + <td>Extend the <code>Document</code> interface</td> + </tr> + <tr> + <td>{{SpecName('CSSOM View','#extensions-to-the-document-interface','Document')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td>Extend the <code>Document</code> interface</td> + </tr> + <tr> + <td>{{SpecName('CSSOM','#extensions-to-the-document-interface','Document')}}</td> + <td>{{Spec2('CSSOM')}}</td> + <td>Extend the <code>Document</code> interface</td> + </tr> + <tr> + <td>{{SpecName('Pointer Lock','#extensions-to-the-document-interface','Document')}}</td> + <td>{{Spec2('Pointer Lock')}}</td> + <td>Extend the <code>Document</code> interface</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility_notes">Browser compatibility notes</h2> + +<h3 id="Firefox_notes">Firefox notes</h3> + +<p>Mozilla defines a set of non-standard properties made only for XUL content:</p> + +<dl> + <dt>{{domxref("document.currentScript")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Returns the {{HTMLElement("script")}} element that is currently executing.</dd> + <dt>{{domxref("document.documentURIObject")}} {{gecko_minversion_inline("1.9")}}</dt> + <dd>(<strong>Mozilla add-ons only!</strong>) Returns the {{Interface("nsIURI")}} object representing the URI of the document. This property only has special meaning in privileged JavaScript code (with UniversalXPConnect privileges).</dd> + <dt>{{domxref("document.popupNode")}}</dt> + <dd>Returns the node upon which a popup was invoked.</dd> + <dt>{{domxref("document.tooltipNode")}}</dt> + <dd>Returns the node which is the target of the current tooltip.</dd> +</dl> + +<p>Mozilla also define some non-standard methods:</p> + +<dl> + <dt>{{domxref("document.execCommandShowHelp")}} {{obsolete_inline("14.0")}}</dt> + <dd>This method never did anything and always threw an exception, so it was removed in Gecko 14.0 {{geckoRelease("14.0")}}.</dd> + <dt>{{domxref("document.getBoxObjectFor")}} {{obsolete_inline}}</dt> + <dd>Use the {{domxref("Element.getBoundingClientRect()")}} method instead.</dd> + <dt>{{domxref("document.loadOverlay")}} {{Fx_minversion_inline("1.5")}}</dt> + <dd>Loads a <a href="/en-US/docs/XUL_Overlays" title="XUL_Overlays">XUL overlay</a> dynamically. This only works in XUL documents.</dd> + <dt>{{domxref("document.queryCommandText")}} {{obsolete_inline("14.0")}}</dt> + <dd>This method never did anything but throw an exception, and was removed in Gecko 14.0 {{geckoRelease("14.0")}}.</dd> +</dl> + +<h3 id="Internet_Explorer_notes">Internet Explorer notes</h3> + +<p>Microsoft defines some non-standard properties:</p> + +<dl> + <dt>{{domxref("document.fileSize")}}* {{non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Returns size in bytes of the document. Starting with Internet Explorer 11, that property is no longer supported. See <a href="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx">MSDN</a>.</dd> + <dt><span style="font-weight: normal; line-height: 1.5;">Internet Explorer does not support all methods from the <code>Node</code> interface in the <code>Document</code> interface:</span></dt> +</dl> + +<dl> + <dt>{{domxref("document.contains")}}</dt> + <dd>As a work-around, <code>document.body.contains()</code> can be used.</dd> +</dl> + +<p> </p> diff --git a/files/id/web/api/document/links/index.html b/files/id/web/api/document/links/index.html new file mode 100644 index 0000000000..4a2d6a5a1b --- /dev/null +++ b/files/id/web/api/document/links/index.html @@ -0,0 +1,101 @@ +--- +title: Document.links +slug: Web/API/Document/links +tags: + - API + - Document + - Property + - Reference +translation_of: Web/API/Document/links +--- +<p>{{ APIRef("DOM") }}</p> + +<p>Properti <code>links</code> mengembalikan sebuah collection dari semua elemen {{HTMLElement("area")}} dan elemen {{HTMLElement("a")}} pada sebuah dokumen dengan sebuah nilai pada atribut <a href="/en-US/docs/Web/API/URLUtils.href">href</a> .</p> + +<h2 id="Syntax" name="Syntax">Sintaks</h2> + +<pre class="eval"><em>nodeList</em> = document.links +</pre> + +<h2 id="Example" name="Example">Contoh</h2> + +<pre class="brush: js">var links = document.links; +for(var i = 0; i < links.length; i++) { + var linkHref = document.createTextNode(links[i].href); + var lineBreak = document.createElement("br"); + document.body.appendChild(linkHref); + document.body.appendChild(lineBreak); +} +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', '#dom-document-links', 'Document.links')}}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 HTML", "html.html#ID-7068919", "document.links")}}</td> + <td>{{Spec2("DOM2 HTML")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_browser">Kompabilitas browser</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/id/web/api/document/write/index.html b/files/id/web/api/document/write/index.html new file mode 100644 index 0000000000..ac3912c415 --- /dev/null +++ b/files/id/web/api/document/write/index.html @@ -0,0 +1,77 @@ +--- +title: Document.write() +slug: Web/API/Document/write +tags: + - API + - DOM + - Method + - Reference +translation_of: Web/API/Document/write +--- +<div>{{ ApiRef("DOM") }}</div> + +<p>Menuliskan teks string ke sebuah dokumen stream yang dibuka dengan <a href="/en-US/docs/Web/API/document.open">document.open()</a>.</p> + +<div class="note">Catatan: ketika <code>document.write</code> menulis ke dokumen <strong>stream</strong>, memanggil <code>document.write</code> pada sebuah dokumen tertutup (termuat), dokumen secara otomatis memanggil <code>document.open</code>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/document.open#Notes">yang akan menghapus dokumen</a>.</div> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="brush: js">document.write(<em>markup</em>); +</pre> + +<p><code>markup</code> merupakan sebuah string yang berisi teks untuk ditulis ke dalam dokumen.</p> + +<h3 id="Contoh">Contoh</h3> + +<pre class="brush: html"><html> + +<head> +<title>write example</title> + +<script> + +function newContent() +{ +alert("load new content"); +document.open(); +document.write("<h1>Out with the old - in with the new!</h1>"); +document.close(); +} + +</script> +</head> + +<body onload="newContent();"> +<p>Some original document content.</p> +</body> +</html> +</pre> + +<h2 id="Catatan">Catatan</h2> + +<p>Menulis ke sebuah dokumen yang telah dimuat tanpa memanggil <a href="/id/docs/Web/API/document.open"><code>document.open()</code></a> akan secara otomatis melakukan panggilan <code>document.open</code>. Setelah selesai menulis, disarankan untuk memanggil <a href="/en-US/docs/Web/API/document.close"><code>document.close()</code></a>, untuk meminta browser untuk menyelesaikan memuat halaman. Teks yang anda tulis akan di parse ke dalam stuktur model dokumen tersebut. Pada contoh diatas, elemen <code>h1</code> menjadi sebuah node pada document.</p> + +<p>Jika pemanggilan <code>document.write()</code> merpakan embeded pada inline tag html <code><script></code> tag, maka tidak akan memanggil <code>document.open()</code>. Sebagai contoh:</p> + +<pre class="brush: html"><script> + document.write("<h1>Main title</h1>") +</script> +</pre> + +<div class="note"><strong>Catatan:</strong> <code>document.write</code> an <code>document.writeln</code> <a href="/en-US/docs/Archive/Web/Writing_JavaScript_for_HTML">tidak berfungsi di dokumen XHTML</a> ( anda akan mendapat peringatan "Operation is not supported" [<code>NS_ERROR_DOM_NOT_SUPPORTED_ERR</code>] error pada konsole). Ini terjadi ketika membuka sebuah file lokal dengan ekstensi file .xhtml atau dokumen lain yang disajikan dengan <a href="/en-US/docs/Glossary/MIME_type">MIME type</a> <code>application/xhtml+xml</code> . Informasi lengkap tersedia di <a class="external" href="http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite">W3C XHTML FAQ</a>.</div> + +<div class="note"><strong>Catatan:</strong> <code>document.write</code> pada script <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer">deferred</a> atau <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-async">asynchronous</a> akan diabaikan, dan anda mendapatkan peringatan error "A call to <code>document.write()</code> from an asynchronously-loaded external script was ignored" pada konsole.</div> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75233634">DOM Level 2 HTML: <code>write()</code> Method</a></li> + <li><a class="external" href="http://www.w3.org/TR/2011/WD-html5-author-20110705/apis-in-html-documents.html#dynamic-markup-insertion">Dynamic markup insertion in HTML</a></li> +</ul> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{ domxref("element.innerHTML") }}</li> + <li>{{ domxref("document.createElement()") }}</li> +</ul> diff --git a/files/id/web/api/event/currenttarget/index.html b/files/id/web/api/event/currenttarget/index.html new file mode 100644 index 0000000000..f44c5d54a9 --- /dev/null +++ b/files/id/web/api/event/currenttarget/index.html @@ -0,0 +1,127 @@ +--- +title: Event.currentTarget +slug: Web/API/Event/currentTarget +tags: + - API + - DOM + - Gecko + - events +translation_of: Web/API/Event/currentTarget +--- +<p>{{APIRef("DOM")}}</p> + +<p>Mengidentifikasi event untuk target saat ini, seperti ketika event melalui DOM. Event tersebut selalu mengacu kepada lemen yang terikat dengan <em>event handler</em>, sebagai lawan dari <code>event.target</code> yang mana mengidentifikasi elemen ketika event tersebut terjadi.</p> + +<h2 id="Contoh">Contoh</h2> + +<p><code>event.currentTarget</code> sangat menarik untuk digunakan ketika menyatukan event handler yang sama ke beberapa element.</p> + +<pre class="brush: js">function hide(e){ + e.currentTarget.style.visibility = "hidden"; + console.log(e.currentTarget); + // Ketika fungsi digunakan seperti event handler: this === e.currentTarget +} + +var ps = document.getElementsByTagName('p'); + +for(var i = 0; i < ps.length; i++){ + // console: print the clicked <p> element + ps[i].addEventListener('click', hide, false); +} +// console: print <body> +document.body.addEventListener('click', hide, false); + +// click dan paragraph akan menghilang +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Spesifikasi</th> + <th>Status</th> + <th>Komentar</th> + </tr> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-event-currenttarget", "Event.currentTarget")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-event-currenttarget", "Event.currentTarget")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM3 Events", "#dfn-current-event-target", "current event target")}}</td> + <td>{{Spec2("DOM3 Events")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 Events", "#Events-Event-currentTarget", "Event.currentTarget")}}</td> + <td>{{Spec2("DOM2 Events")}}</td> + <td>Definisi awal</td> + </tr> + </tbody> +</table> + +<h2 id="Kesesuaian_browser">Kesesuaian browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>10.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>10.0</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Dalam Internet Explorer 6 sampai 8, event modelnya berbeda. Event listener(s) nya terikat dengan metode non-standard {{domxref("EventTarget.attachEvent")}}. Dalam model ini, tidak ada yang setara dengan <code>event.currentTarget</code> dan <code>this</code> adalah objek global. Satu solusin untuk meniru fitur <code>event.currentTarget</code> adalah dengan cara membungkus handler anda di dalam fungsi memanggil handler tersebut menggunakan <code>Function.prototype.call</code> dengan elemen sebagai argumen awal. Dengan cara ini, <code>this</code> akan menampilkan hasil yang diharapkan.</p> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<p><a href="/en-US/docs/Web/API/Event/Comparison_of_Event_Targets">Perbandingan dari Event Targets</a></p> diff --git a/files/id/web/api/event/index.html b/files/id/web/api/event/index.html new file mode 100644 index 0000000000..952082247b --- /dev/null +++ b/files/id/web/api/event/index.html @@ -0,0 +1,149 @@ +--- +title: Event +slug: Web/API/Event +tags: + - API + - DOM + - Event + - Interface + - Reference +translation_of: Web/API/Event +--- +<p>{{APIRef("DOM")}}</p> + +<p>Antarmuka <code><strong>Event</strong></code> mewakili setiap event pada DOM. mengandung properti umum dan method ke setiap event.</p> + +<p>Banyak sekali antarmuka lain yang menginplementasikan antarmuka <code>Event</code>, baik secara langsung atau dengan mengimplementsikan antarmuka lain dimana diantaranya:</p> + +<div class="index"> +<ul> + <li>{{domxref("AnimationEvent")}}</li> + <li>{{domxref("AudioProcessingEvent")}}</li> + <li>{{domxref("BeforeInputEvent")}}</li> + <li>{{domxref("BeforeUnloadEvent")}}</li> + <li>{{domxref("BlobEvent")}}</li> + <li>{{domxref("ClipboardEvent")}}</li> + <li>{{domxref("CloseEvent")}}</li> + <li>{{domxref("CompositionEvent")}}</li> + <li>{{domxref("CSSFontFaceLoadEvent")}}</li> + <li>{{domxref("CustomEvent")}}</li> + <li>{{domxref("DeviceLightEvent")}}</li> + <li>{{domxref("DeviceMotionEvent")}}</li> + <li>{{domxref("DeviceOrientationEvent")}}</li> + <li>{{domxref("DeviceProximityEvent")}}</li> + <li>{{domxref("DOMTransactionEvent")}}</li> + <li>{{domxref("DragEvent")}}</li> + <li>{{domxref("EditingBeforeInputEvent")}}</li> + <li>{{domxref("ErrorEvent")}}</li> + <li>{{domxref("FetchEvent")}}</li> + <li>{{domxref("FocusEvent")}}</li> + <li>{{domxref("GamepadEvent")}}</li> + <li>{{domxref("HashChangeEvent")}}</li> + <li>{{domxref("IDBVersionChangeEvent")}}</li> + <li>{{domxref("InputEvent")}}</li> + <li>{{domxref("KeyboardEvent")}}</li> + <li>{{domxref("MediaStreamEvent")}}</li> + <li>{{domxref("MessageEvent")}}</li> + <li>{{domxref("MouseEvent")}}</li> + <li>{{domxref("MutationEvent")}}</li> + <li>{{domxref("OfflineAudioCompletionEvent")}}</li> + <li>{{domxref("PageTransitionEvent")}}</li> + <li>{{domxref("PointerEvent")}}</li> + <li>{{domxref("PopStateEvent")}}</li> + <li>{{domxref("ProgressEvent")}}</li> + <li>{{domxref("RelatedEvent")}}</li> + <li>{{domxref("RTCDataChannelEvent")}}</li> + <li>{{domxref("RTCIdentityErrorEvent")}}</li> + <li>{{domxref("RTCIdentityEvent")}}</li> + <li>{{domxref("RTCPeerConnectionIceEvent")}}</li> + <li>{{domxref("SensorEvent")}}</li> + <li>{{domxref("StorageEvent")}}</li> + <li>{{domxref("SVGEvent")}}</li> + <li>{{domxref("SVGZoomEvent")}}</li> + <li>{{domxref("TimeEvent")}}</li> + <li>{{domxref("TouchEvent")}}</li> + <li>{{domxref("TrackEvent")}}</li> + <li>{{domxref("TransitionEvent")}}</li> + <li>{{domxref("UIEvent")}}</li> + <li>{{domxref("UserProximityEvent")}}</li> + <li>{{domxref("WebGLContextEvent")}}</li> + <li>{{domxref("WheelEvent")}}</li> +</ul> +</div> + +<h2 id="Properties" name="Properties">Konstruktor</h2> + +<dl> + <dt>{{domxref("Event.Event", "Event()")}}</dt> + <dd>Membuat sebuah object <code>Event</code></dd> +</dl> + +<h2 id="Properties" name="Properties">Properti</h2> + +<p><em>Antarmuka ini tidak mewarisi properti manapun.</em></p> + +<dl> + <dt>{{domxref("Event.bubbles")}} {{readonlyinline}}</dt> + <dd>Sebuah boolean yang menunjukan apakah event bubbles melalui DOM atau tidak.</dd> + <dt>{{domxref("Event.cancelBubble")}} {{non-standard_inline}}</dt> + <dd>Alternatif non-standar untuk {{domxref("Event.stopPropagation()")}}.</dd> + <dt>{{domxref("Event.cancelable")}} {{readonlyinline}}</dt> + <dd>Sebuah boolean yang menunjukan apakah event bisa dibatalkan.</dd> + <dt>{{domxref("Event.currentTarget")}} {{readonlyinline}}</dt> + <dd>Sebuah referensi untuk target terdaftar saat ini untuk event.</dd> + <dt>{{domxref("Event.defaultPrevented")}} {{readonlyinline}}</dt> + <dd>Menunjukan apakah {{domxref("event.preventDefault()")}} telah dipanggil pada event atau belum.</dd> + <dt>{{domxref("Event.eventPhase")}} {{readonlyinline}}</dt> + <dd>Menunjukan fase aliran event yang sedang diproses.</dd> + <dt>{{domxref("Event.explicitOriginalTarget")}} {{non-standard_inline}} {{readonlyinline}}</dt> + <dd>Eksplisit target dari event (Mozilla-specific).</dd> + <dt>{{domxref("Event.originalTarget")}} {{non-standard_inline}} {{readonlyinline}}</dt> + <dd>Target dari event, sebelum penargetan ulang lain (Mozilla-specific).</dd> + <dt>{{domxref("Event.returnValue")}} {{non-standard_inline}}</dt> + <dd>Alternatif nonstandard untuk {{domxref("Event.preventDefault()")}} dan {{domxref("Event.defaultPrevented")}}. (spesifik Internet Explorer lama)</dd> + <dt>{{domxref("Event.srcElement")}} {{non-standard_inline}}</dt> + <dd>Alias nonstandard untuk {{domxref("Event.target")}}. (spesifik Internet Explorer lama)</dd> + <dt>{{domxref("Event.target")}} {{readonlyinline}}</dt> + <dd>Sebuah referensi untuk target dimana event pertama kali dikirimkan.</dd> + <dt>{{domxref("Event.timeStamp")}} {{readonlyinline}}</dt> + <dd>Waktu ketika event dibuat.</dd> + <dt>{{domxref("Event.type")}} {{readonlyinline}}</dt> + <dd>Nama dari event (case-insensitive).</dd> + <dt>{{domxref("Event.isTrusted")}} {{readonlyinline}}</dt> + <dd>Menunjukan apakah event di terima browser atau tidak (mis. ketika user klik) atau dengan sebuah script (menggunakan sebuah method event buatan, seperti <a href="/en-US/docs/DOM/event.initEvent">event.initEvent</a>)</dd> +</dl> + +<h2 id="Methods" name="Methods">Method</h2> + +<p><em>Antarmuka ini tidak mewarisi method manapun.</em></p> + +<dl> + <dt>{{domxref("Event.initEvent()")}} {{deprecated_inline}}</dt> + <dd>Menginisialisasi nilai dari Event yang dibuat. Jika event telah dikirimkan, method ini tidak akan digunakan.</dd> + <dt>{{domxref("Event.preventBubble()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}</dt> + <dd>Mencegah event agar tidak menggelegak. Usang, gunakan {{domxref("event.stopPropagation")}} sebagai gantinya.</dd> + <dt>{{domxref("Event.preventCapture()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}</dt> + <dd>Usang, gunakan {{domxref("event.stopPropagation")}} sebagai gantinya.</dd> + <dt>{{domxref("Event.preventDefault()")}}</dt> + <dd>Membatalkan event event (jika cancelable).</dd> + <dt>{{domxref("Event.stopImmediatePropagation()")}}</dt> + <dd>Khusus untuk event ini, tidak ada listener lain yang akan dipanggil. Baik yang ada pada elemen yang sama, maupunyang ada pada elemen yang akan di lalui nantinya (pada fase capture, misalnya)</dd> + <dt>{{domxref("Event.stopPropagation()")}}</dt> + <dd>Menghentikan penyebaran events lebih jauh pada DOM.</dd> + <dt>{{domxref("Event.getPreventDefault()")}} {{non-standard_inline}}</dt> + <dd>Non-standard. Mengembailkan nilai dari {{domxref("Event.defaultPrevented")}}. Gunakan {{domxref("Event.defaultPrevented")}} sebagai gantinya.</dd> +</dl> + +<h2 id="See_also" name="See_also">Lihat Juga</h2> + +<ul> + <li>Jenis event yang tersedia: <a href="/id/docs/Web/Reference/Events">Referensi Event</a></li> + <li><a href="/en-US/docs/Web/API/Event/Comparison_of_Event_Targets">Comparison of Event Targets</a> (target vs currentTarget vs relatedTarget vs originalTarget)</li> + <li><a href="/en-US/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">Creating and triggering custom events</a></li> + <li>For Firefox add-on developers: + <ul> + <li><a href="/en-US/docs/Listening_to_events_in_Firefox_extensions">Listening to events in Firefox extensions</a></li> + <li><a href="/en-US/docs/Listening_to_events_on_all_tabs">Listening to events on all tabs</a></li> + </ul> + </li> +</ul> diff --git a/files/id/web/api/event/target/index.html b/files/id/web/api/event/target/index.html new file mode 100644 index 0000000000..52397c0827 --- /dev/null +++ b/files/id/web/api/event/target/index.html @@ -0,0 +1,90 @@ +--- +title: Event.target +slug: Web/API/Event/target +translation_of: Web/API/Event/target +--- +<div>{{ApiRef("DOM")}}</div> + +<p>The <code><strong>target</strong></code> property of the {{domxref("Event")}} interface is a reference to the object onto which the event was dispatched. It is different from {{domxref("Event.currentTarget")}} when the event handler is called during the bubbling or capturing phase of the event.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <em>theTarget</em> = <em>event</em>.target;</pre> + +<h3 id="Value">Value</h3> + +<p>{{domxref("EventTarget")}}</p> + +<h2 id="Example">Example</h2> + +<p>Properti <code>event.target</code> dapat digunakan untuk mengimplementasikan <strong>event delegation</strong>.</p> + +<pre class="brush: js">// Membuat sebuah list +var ul = document.createElement('ul'); +document.body.appendChild(ul); + +var li1 = document.createElement('li'); +var li2 = document.createElement('li'); +ul.appendChild(li1); +ul.appendChild(li2); + +function hide(e){ + // e.target refers to the clicked <li> element + // This is different than e.currentTarget which would refer to the parent <ul> in this context + e.target.style.visibility = 'hidden'; +} + +// Attach the listener to the list +// It will fire when each <li> is clicked +ul.addEventListener('click', hide, false); +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Comment</th> + </tr> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-event-target", "Event.target")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-event-target", "Event.target")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("DOM2 Events", "#Events-Event-target", "Event.target")}}</td> + <td>{{Spec2("DOM2 Events")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Event.target")}}</p> + +<h3 id="Compatibility_notes">Compatibility notes</h3> + +<p>On IE 6-8 the event model is different. Event listeners are attached with the non-standard {{domxref('EventTarget.attachEvent()')}} method. In this model, the event object has a {{domxref('Event.srcElement')}} property, instead of the <code>target</code> property, and it has the same semantics as <code>Event.target</code>.</p> + +<pre class="brush: js">function hide(e) { + // Support IE6-8 + var target = e.target || e.srcElement; + target.style.visibility = 'hidden'; +} +</pre> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Event/Comparison_of_Event_Targets">Comparison of Event Targets</a></li> +</ul> diff --git a/files/id/web/api/fetch_api/index.html b/files/id/web/api/fetch_api/index.html new file mode 100644 index 0000000000..ad64ee4558 --- /dev/null +++ b/files/id/web/api/fetch_api/index.html @@ -0,0 +1,88 @@ +--- +title: Fetch API +slug: Web/API/Fetch_API +translation_of: Web/API/Fetch_API +--- +<div>{{DefaultAPISidebar("Fetch API")}}</div> + +<p class="summary"><font><font>Fetch Data API menyediakan antarmuka untuk pemanggilan sumber daya data(termasuk di seluruh jaringan). </font><font>Ini akan terasa familiar bagi siapa saja yang telah menggunakan </font></font><span class="seoSummary">{{DOMxRef("XMLHttpRequest")}}</span><font><font>, tetapi untuk API yang terbaru menyediakan serangkaian fitur yang lebih kuat dan fleksibel.</font></font></p> + +<h2 id="Konsep_dan_Penggunaan"><font><font>Konsep dan </font></font><font><font>Penggunaan</font></font></h2> + +<p><font><font>"Fetch" / pengambilan resource data menyediakan definisi umum yaitu objek</font></font>{{DOMxRef("Request")}} dan<font><font> </font></font>{{DOMxRef("Response")}} atau permintaan dan tanggapan<font><font>(dan hal-hal lain yang kaitannya dengan permintaan jaringan/"HTTP"). </font><font>Ini akan memungkinkan "request" dan "response" tersebut untuk digunakan di mana pun mereka dibutuhkan di waktu selanjutnya, apakah itu untuk pekerja layanan/service workers(biasanya PWA), Cache API dan hal-hal serupa lainnya yang menangani atau mengubah permintaan dan tanggapan, ataupun juga segala jenis kasus penggunaan yang mungkin mengharuskan Anda untuk menghasilkan response/tanggapan Anda sendiri secara terprogram (baca aja:scr otomatis).</font></font></p> + +<p>Ini juga memberikan definisi untuk konsep yang berhubungan dengan request dan response seperti halnya : CORS dan sumber semantik header HTTP, yang menggantikan definisi mereka yang terpisah di topik lain (bukan disini bahasannya/beda topik).</p> + +<p><font><font>Untuk membuat permintaan dan mengambil sumber daya data, bisa menggunakan metode </font></font>{{DOMxRef("WindowOrWorkerGlobalScope.fetch()")}} <font><font>ini. Metode </font><font>ini diimplementasikan dalam beberapa antarmuka aplikasi, khususnya pada </font></font>{{DOMxRef("Window")}} <font><font>dan </font></font>{{DOMxRef("WorkerGlobalScope")}}<font><font>. </font><font>Ini membuatnya tersedia dalam hampir semua konteks yang mana anda mungkin menginginkan untuk mengambil sumber data / resource nya.</font></font></p> + +<p><font><font>Metode </font></font><code>fetch()</code><font><font> mengambil satu argumen yang wajib disertakan, path(sbg gambaran kalau di html : tag a dg atribut href) ke sumber data yang anda inginkan untuk mengambilnya. </font><font>Hal ini mampu untuk mengembalikan hasil/return </font></font>{{DOMxRef("Promise")}} <font><font>yang memutuskan ke </font></font>{{DOMxRef("Response")}} kepada <font><font>permintaan itu sendiri, apakah hal tersebut berhasil atau tidak pada saat terjadi response/tanggapan sumber data. Anda juga bisa secara opsional mengirimkan objek pilihan </font></font><code>init</code><font><font>sebagai argumen keduanya (lihat </font></font>{{DOMxRef("Request")}}<font><font>).</font></font></p> + +<p><font><font>Setelah </font></font>{{DOMxRef("Response")}} telah <font><font>dipanggil, ada sejumlah metode yang tersedia untuk menentukan apa saja konten tubuh(pikirkan pada elemen html) dan bagaimana penanganannya (lihat </font></font>{{DOMxRef("Body")}})<font><font>.</font></font></p> + +<p><font><font>Anda juga bisa membuat permintaan dan response secara langsung menggunakan </font></font>{{DOMxRef("Request.Request", "Request()")}}<font><font>dan konstruktor </font></font>{{DOMxRef("Response.Response", "Response()")}}<font><font>, namun Anda tidak bisa melakukan ini secara langsung. </font><font>Malahan, ini lebih cenderung sebagai hasil dari aksi yang dilakukan oleh API yang lainnya (misalnya, </font></font>{{DOMxRef("FetchEvent.respondWith()")}} <font><font>dari </font></font>service workers (kalo loe yang main teknologinya PWA pasti tau coy)<font><font>).</font></font></p> + +<div class="note"> +<p><strong><font><font>Catatan</font></font></strong><font><font> : Cari tahu lebih lanjut mengenai penggunaan fitur Fetch API di </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch"><font><font>cara menggunakan fetch</font></font></a><font><font> , dan pelajari konsepnya di </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Basic_concepts"><font><font>konsep dasar fetch </font></font></a><font><font>.</font></font></p> +</div> + +<h3 id="Batalkan_fetch">Batalkan fetch</h3> + +<p><font><font>Web browser sudah mulai menambahkan dukungan eksperimental untuk </font><font>antarmuka </font></font>{{DOMxRef("AbortController")}} <font><font>dan </font></font>{{DOMxRef("AbortSignal")}}<font><font>(alias API Abort), yang memungkinkan operasi seperti Fetch dan XHR untuk dibatalkan apabila mereka belum selesai secara sempurna dipanggil. </font><font>Lihat halaman antarmuka untuk detail lebih lanjut.</font></font></p> + +<p>Browsers have started to add experimental support for the {{DOMxRef("AbortController")}} and {{DOMxRef("AbortSignal")}} interfaces (aka The Abort API), which allow operation</p> + +<p> </p> + +<h2 id="Antarmuka_metode_Fetch"><font><font>Antarmuka metode Fetch</font></font></h2> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch" title="Metode fetch () dari mixin WindowOrWorkerGlobalScope memulai proses pengambilan sumber daya dari jaringan. Ini mengembalikan janji yang diselesaikan ke objek Respons yang mewakili respons terhadap permintaan Anda. Janji tidak menolak kesalahan HTTP - melainkan hanya menolak kesalahan jaringan; maka penangan harus memeriksa kesalahan HTTP."><code>WindowOrWorkerGlobalScope.fetch()</code></a></dt> + <dd><font><font>Metode </font></font><code>fetch()</code><font><font> yang digunakan untuk mengambil sumber data.</font></font></dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/Headers" title="Antarmuka Header dari Fetch API memungkinkan Anda untuk melakukan berbagai tindakan pada permintaan HTTP dan header respons. Tindakan ini termasuk mengambil, mengatur, menambah, dan menghapus. Objek Header memiliki daftar header terkait, yang awalnya kosong dan terdiri dari nol atau lebih pasangan nama dan nilai. Anda dapat menambahkan ini menggunakan metode seperti append () (lihat Contoh.) Di semua metode antarmuka ini, nama header dicocokkan dengan urutan byte case-insensitive."><code>Headers</code></a></dt> + <dd><font><font>Merupakan header respons / permintaan, memungkinkan Anda untuk menanyakannya(query) dan mengambil tindakan yang berbeda dimana ini tergantung pada hasilnya.</font></font></dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/Request" title="Antarmuka Permintaan API Ambil mewakili permintaan sumber daya."><code>Request</code></a></dt> + <dd><font><font>Merupakan permintaan sumber data.</font></font></dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/Response" title="Antarmuka Respons API Ambil mewakili respons terhadap permintaan."><code>Response</code></a></dt> + <dd><font><font>Merupakan respons terhadap permintaan.</font></font></dd> +</dl> + +<h2 id="Fetch_mixin">Fetch mixin</h2> + +<dl> + <dt>{{DOMxRef("Body")}}</dt> + <dd><font><font>Menyediakan metode yang berkaitan dengan konten pada respons / permintaan, memungkinkan Anda untuk menyatakan jenis kontennya dan bagaimana penanganannya.</font></font></dd> +</dl> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Keterangan</th> + </tr> + <tr> + <td>{{SpecName("Fetch")}}</td> + <td>{{Spec2("Fetch")}}</td> + <td>Definisi awal</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatibilitas_Browser">Kompatibilitas Browser</h2> + + + +<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p> + +<h2 id="Lihat_juga_untuk">Lihat juga untuk </h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Fetch_API/Using_Fetch">Penggunaan metode Fetch</a></li> + <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> + <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> + <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> + <li>M<a href="https://github.com/github/fetch">etode Fetch untuk polyfill</a></li> + <li><a href="/en-US/docs/Web/API/Fetch_API/Basic_concepts">Konsep dasar Fetch</a></li> +</ul> diff --git a/files/id/web/api/index.html b/files/id/web/api/index.html new file mode 100644 index 0000000000..bbbaf07d0a --- /dev/null +++ b/files/id/web/api/index.html @@ -0,0 +1,12 @@ +--- +title: Referensi API Web +slug: Web/API +tags: + - API + - Develop + - Web API +translation_of: Web/API +--- +<p>Saat menulis kode untuk Web menggunakan JavaScript, ada banyak API yang tersedia. Berikut adalah daftar semua antarmuka (atau dengan kata lain, tipe objek) yang dapat digunakan ketika mengembangkan aplikasi atau situs web.</p> + +<div>{{APIListAlpha}}</div> diff --git a/files/id/web/api/mobile_connection_api/index.html b/files/id/web/api/mobile_connection_api/index.html new file mode 100644 index 0000000000..7b5462e2ef --- /dev/null +++ b/files/id/web/api/mobile_connection_api/index.html @@ -0,0 +1,149 @@ +--- +title: Mobile Connection +slug: Web/API/Mobile_Connection_API +translation_of: Archive/B2G_OS/API/Mobile_Connection_API +--- +<p>{{ draft }}</p> +<p>{{ non-standard_header() }}</p> +<p>{{ B2GOnlyHeader2('certified') }}</p> +<h2 id="Summary">Summary</h2> +<p>This API has 2 purposes:</p> +<ul> + <li>Giving access to detailed information about the current states of the mobile connection of the device</li> + <li>Giving access to the specific capacities embedded within the <abbr title="Integrated Circuit Card">ICC</abbr> (the <abbr title="Subscriber Identity Module">SIM</abbr>/<abbr title="Removable User Identity Module">RUIM</abbr> card)</li> +</ul> +<p>As this API can access functionalities that can have an impact on the mobile plan subscribed by the user (some of the functionalities can cost money to use or can damage the <abbr title="Integrated Circuit Card">ICC</abbr>), it is restricted to certified applications only.</p> +<p>The main entry point for this API is the {{domxref("window.navigator.mozMobileConnection","navigator.mozMobileConnection")}} property which is an instance of the {{domxref("MozMobileConnection")}} interface.</p> +<h2 id="State_of_mobile_connection">State of mobile connection</h2> +<p>The state of the mobile connection is divided in two: on the one hand the <code>voice</code> connection, on the other hand the <code>data</code> connection. The data related to each type of connection are accessible through the {{domxref("MozMobileConnection.voice")}} and {{domxref("MozMobileConnection.data")}} properties which both return a {{domxref("MozMobileConnectionInfo")}} object.</p> +<p>Those objects give access to all information related to the quality of the network (<a href="/en-US/docs/DOM/MozMobileConnectionInfo.signalStrength" title="/en-US/docs/DOM/MozMobileConnectionInfo.signalStrength">signal strength</a>, <a href="/en-US/docs/DOM/MozMobileConnectionInfo.relSignalStrength" title="/en-US/docs/DOM/MozMobileConnectionInfo.relSignalStrength">quality of the signal</a>, position of the <a href="/en-US/docs/DOM/MozMobileConnectionInfo.cell" title="/en-US/docs/DOM/MozMobileConnectionInfo.cell">network's cells</a>, <a href="/en-US/docs/DOM/MozMobileConnectionInfo.emergencyCallsOnly" title="/en-US/docs/DOM/MozMobileConnectionInfo.emergencyCallsOnly">restricted usage</a>, <a href="/en-US/docs/DOM/MozMobileConnectionInfo.roaming" title="/en-US/docs/DOM/MozMobileConnectionInfo.roaming">roaming</a>, etc.), and related to <a href="/en-US/docs/DOM/MozMobileConnectionInfo.network" title="/en-US/docs/DOM/MozMobileConnectionInfo.network">the carrier operating the network</a>.</p> +<pre class="brush: js">var cnx = navigator.mozMobileConnection; + +console.log("The voice operator is " + cnx.voice.network.longName); + +if (cnx.voice.connected) { + console.log("The signal has a strength of " + (+cnx.voice.relSignalStrength) + "%"); +} else { + console.log("The state of the connection is: " + cnx.voice.state); +} +</pre> +<h2 id="ICC_Functionalities">ICC Functionalities</h2> +<p>The functionalities available for the <abbr title="Integrated Circuit Card">ICC</abbr> can be divided into two categories: the management of the <abbr title="Integrated Circuit Card">ICC</abbr> itself and the use of the integrated command available within the <a href="http://en.wikipedia.org/wiki/SIM_Application_Toolkit" title="http://en.wikipedia.org/wiki/SIM_Application_Toolkit">STK</a> (<em>SIM Application Toolkit</em>).</p> +<h3 id="Basic_actions">Basic actions</h3> +<p>The {{domxref("MozMobileConnection")}} provides a set of methods to deal with common behaviors on <abbr title="Integrated Circuit Card">ICC</abbr>s.</p> +<div class="note"> + <p><strong>Note:</strong> All original methods from the <code>MozMobileConnection</code> interface are fully asynchronous. They all return a {{domxref("DOMRequest")}} object which has an <code>onsuccess</code> and <code>onerror</code> event handler to handle the success or failure of the method call.</p> +</div> +<h4 id="Card_lock">Card lock</h4> +<p>As long as a card is locked, a user is unable to use it to reach its mobile network. It's possible to manage the card lock with the {{domxref("MozMobileConnection.getCardLock","getCardLock()")}}, {{domxref("MozMobileConnection.setCardLock","setCardLock()")}}, and {{domxref("MozMobileConnection.unlockCardLock","unlockCardLock()")}} methods.</p> +<p>If {{domxref("MozMobileConnection.getCardLock","getCardLock()")}} allows to get some detailed information about the lock, it's also possible to have quick info about the lock through {{domxref("MozMobileConnection.cardState")}} which returns a string representing the current state of the lock.</p> +<div class="note"> + <p><strong>Note:</strong> Even if the state change requests are successfully handled, it does not mean that the operations are necessarily successful. For that reason, any change in the card state is tracked independently through events:</p> + <ul> + <li>The {{event("icccardlockerror")}} event is triggered each time a call to {{domxref("MozMobileConnection.setCardLock","setCardLock()")}} or {{domxref("MozMobileConnection.unlockCardLock","unlockCardLock()")}} fails.</li> + <li>The {{event("cardstatechange")}} event is triggered each time the {{domxref("MozMobileConnection.cardState","cardState")}} property changes.</li> + </ul> +</div> +<pre class="brush: js">var cnx = navigator.mozMobileConnection; + +function unlockCard() { + var unlockOptions = { + lockType: "pin", + pin : prompt("Please, enter your PIN") + } + + var unlock = cnx.unlockCardLock(unlockOptions); + + unlock.onsuccess = function () { + console.log("The card has successfully handled the PIN number."); + + if (this.result.success === false) { + if (this.result.retryCount > 0) { + console.log("But you mistyped your PIN, you have " + this.result.retryCount + " tries left."); + } else { + console.log("But your card is hard locked, you need to contact your carrier to get a special unlocking code."); + } + } + } + + unlock.onerror = function () { + console.log("Hu! Something goes very wrong!") + } +} + +cnx.addEventListener('icccardlockerror', function () { + // In case of error, ask the user for his PIN again + unlockCard(); +}); + +cnx.addEventListener('cardsatechange', function () { + // In case the card state change and required to be unlocked + if (cnx.cardState === 'pinRequired') { + unlockCard(); + } +} + +// First call to unlockCard if required +if (cnx.cardState === 'pinRequired') { + unlockCard(); +} +</pre> +<h4 id="MMI_Messages">MMI Messages</h4> +<p><abbr title="Man Machine Interface">MMI</abbr> messages are human understandable code that, once typed with a phone keyboard, allow to trigger specific action from the <a class="external" href="http://en.wikipedia.org/wiki/Radio_Interface_Layer" title="Wikipedia: Radio Interface Layer">RIL</a> or get response from the network through a <a class="external" href="http://en.wikipedia.org/wiki/USSD" title="Wikipedia: Unstructured Supplementary Service Data">USSD</a> request. A common example is typing a short code to get the <a href="http://en.wikipedia.org/wiki/International_Mobile_Station_Equipment_Identity" title="http://en.wikipedia.org/wiki/International_Mobile_Station_Equipment_Identity">IMEI</a> phone number.</p> +<p>Such messages are sent using the {{domxref("MozMobileConnection.sendMMI()")}} method (and can be canceled with {{domxref("MozMobileConnection.cancelMMI","cancelMMI()")}}). Even if it will return a {{domxref("DOMRequest")}} object, the response to such messages are handled in two ways:</p> +<ul> + <li>If the <abbr title="Man Machine Interface">MMI</abbr> code requires sending a <abbr title="Unstructured Supplementary Service Data">USSD</abbr> request, the request's <code>success</code> means that the <abbr title="Radio Interface Layer">RIL</abbr> has successfully processed and sent the <abbr title="Unstructured Supplementary Service Data">USSD</abbr> request to the network. However, the network reply is reported through the {{event("ussdreceived")}} event.</li> + <li>If the <abbr title="Man Machine Interface">MMI</abbr> code is not associated with a <abbr title="Unstructured Supplementary Service Data">USSD</abbr> but with another <abbr title="Radio Interface Layer">RIL</abbr> request, its result, if one is needed, is sent via the returned request's <code>success</code> or <code>error</code>.</li> +</ul> +<pre class="brush: js">var cnx = navigator.mozMobileConnection; + +cnx.addEventHandler('ussdreceived', function (evt) { + console.log('Network message: ' + evt.data.message); +}); + +var MMIRequest = cnx.sendMMI(prompt('Provide a valid MMI')); + +MMIRequest.onerror = function() { + console.log("Mmmh... Something goes wrong."); +} +</pre> +<h4 id="Call_forwarding_options">Call forwarding options</h4> +<p>Call forwarding options allow to define how a call can or cannot be forwarded to another phone number.</p> +<p>Those options are handled with the {{domxref("MozMobileConnection.getCallForwardingOption","getCallForwardingOption()")}} and {{domxref("MozMobileConnection.setCallForwardingOption","setCallForwardingOption()")}} methods.</p> +<pre class="brush: js">var options = { + action : MozMobileCFInfo.CALL_FORWARD_ACTION_ENABLE, + reason : MozMobileCFInfo.CALL_FORWARD_REASON_UNCONDITIONAL, + serviceClass: MozMobileConnectionInfo.ICC_SERVICE_CLASS_VOICE, + number : prompt('To which phone number would you wish to forward the calls?'), + timeSeconds : 5 +}; + +var setOption = navigator.mozMobileConnection.setCallForwardingOption(options); + +setOption.onsuccess = function () { + console.log('Options successfully set'); +} + +setOption.onerror = function () { + console.log('Unable to set options: ' + this.error.name); +} +</pre> +<h3 id="STK_commands">STK commands</h3> +<p>The STK commands depend on many factors (carriers, chips model, etc.) but can always be accessed through the {{domxref("MozMobileConnection.icc")}} property which returns a {{domxref("MozIccManager")}} object.</p> +<div class="warning"> + <p><strong>Warning:</strong> It's recommended to use the STK command only if you already know exactly what you are doing, as a misusage can damage the chip and make it unusable.</p> +</div> +<h2 id="Specification">Specification</h2> +<p>Not part of any specification.</p> +<h2 id="See_also">See also</h2> +<ul> + <li>{{domxref("window.navigator.mozMobileConnection","navigator.mozMobileConnection")}}</li> + <li>{{domxref("MozMobileConnection")}}</li> + <li>{{domxref("MozMobileConnectionInfo")}}</li> + <li>{{domxref("MozMobileICCInfo")}}</li> + <li>{{domxref("MozMobileNetworkInfo")}}</li> + <li>{{domxref("MozMobileCFInfo")}}</li> + <li>{{domxref("MozMobileCellInfo")}}</li> + <li>{{domxref("MozIccManager")}}</li> + <li>{{domxref("MozStkCommandEvent")}}</li> +</ul> diff --git a/files/id/web/api/navigator/index.html b/files/id/web/api/navigator/index.html new file mode 100644 index 0000000000..9d40d2eee4 --- /dev/null +++ b/files/id/web/api/navigator/index.html @@ -0,0 +1,149 @@ +--- +title: Navigator +slug: Web/API/Navigator +tags: + - API + - HTML DOM + - HTML-DOM + - Interface + - JavaScript + - NeedsTranslation + - Reference + - TopicStub + - Web Performance +translation_of: Web/API/Navigator +--- +<p>{{ apiref() }}</p> + +<p>Antarmuka <code><strong>Navigator</strong></code> mewakili negara dan identitas pengguna. Memungkinkan script untuk melakukan query dan mendaftarkan diri untuk melakukan suatu aktivitas.</p> + +<p>Objek <code>Navigator</code> dapat dipanggil menggunakan properti {{domxref("Window.navigator")}}.</p> + +<h2 id="Properti">Properti</h2> + +<p><em>Bukan turunan dari properti manapun, namun menginplementasikan yang didefinisikan di {{domxref("NavigatorID")}}, {{domxref("NavigatorLanguage")}}, {{domxref("NavigatorOnLine")}}, {{domxref("NavigatorContentUtils")}}, {{domxref("NavigatorStorageUtils")}}, {{domxref("NavigatorCookies")}}, {{domxref("NavigatorConcurrentHardware")}}, {{domxref("NavigatorPlugins")}}, dan {{domxref("NavigatorUserMedia")}}.</em></p> + +<h3 id="Standard">Standard</h3> + +<dl> + <dt>{{domxref("Navigator.activeVRDisplays")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Mengembalikan sebuah array yang berisi setiap objek {{domxref("VRDisplay")}} yang menyajikan ({{domxref("VRDisplay.ispresenting")}} adalah <code>true</code>).</dd> + <dt>{{domxref("NavigatorID.appCodeName")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Mengembalikan internal nama "code" browser. Jangan mengandalkan properti ini untuk mengembalikan nilai yang benar.</dd> + <dt>{{domxref("NavigatorID.appName")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Mengembalikan {{domxref("DOMString")}} dengan nama official dari browser. Jangan mengandalkan properti ini untuk mengembalikan nilai yang benar.</dd> + <dt>{{domxref("NavigatorID.appVersion")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Mengembalikan versi browser sebagai {{domxref("DOMString")}}. Jangan mengandalkan properti ini untuk mengembalikan nilai yang benar.</dd> + <dt>{{domxref("Navigator.battery")}} {{readonlyInline}}</dt> + <dd>Mengembalikan objek {{domxref("BatteryManager")}} yang memberikan informasi tentang status isi baterai.</dd> + <dt>{{domxref("Navigator.connection")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Menyediakan sebuah objek {{domxref("NetworkInformation")}} yang berisi informasi tentang koneksi jaringan pada perangkat.</dd> + <dt>{{domxref("Navigator.geolocation")}} {{readonlyInline}}</dt> + <dd>Mengembalikan objek {{domxref("Geolocation")}} yang memungkinkan untuk mengakses lokasi perangkat.</dd> + <dt>{{domxref("NavigatorConcurrentHardware.hardwareConcurrency")}} {{readOnlyInline}}</dt> + <dd>Mengembalikan jumlah inti logical processor yag tersedia.</dd> + <dt>{{domxref("NavigatorPlugins.javaEnabled")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a {{domxref("Boolean")}} flag indicating whether the host browser is Java-enabled or not.</dd> + <dt>{{domxref("NavigatorLanguage.language")}} {{readonlyInline}}</dt> + <dd>Mengembalikan {{domxref("DOMString")}} berdasarkan bahasa yang digunakan, biasanya bahasa UI pada browser. Nilai <code>null</code> akan dikembalikan jika tidak diketahui.</dd> + <dt>{{domxref("NavigatorLanguage.languages")}} {{readonlyInline}}</dt> + <dd>Mengembalikan sebuah array dari {{domxref("DOMString")}} berdasarkan bahasa yang diketahui pengguna, berdasarkan pengaturan.</dd> + <dt>{{domxref("NavigatorPlugins.mimeTypes")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Mengembalikan daftar {{domxref("MimeTypeArray")}} dari tipe MIME yang didukung oleh browser.</dd> + <dt>{{domxref("NavigatorOnLine.onLine")}} {{readonlyInline}}</dt> + <dd>Mengembalikan sebuah {{domxref("Boolean")}} yang menunjukan apakah browser dalam keadaan online.</dd> + <dt>{{domxref("Navigator.oscpu")}}</dt> + <dd>Mengembalikan sebuah string berdasarkan sistem operasi.</dd> + <dt>{{domxref("Navigator.permissions")}} {{readonlyinline}}{{experimental_inline}}</dt> + <dd>Mengembalikan objek {{domxref("Permissions")}} yang dapat digunakan untuk query dan membaharui status izin dari APIs yang di cakup di <a href="/en-US/docs/Web/API/Permissions_API">Permissions API</a>.</dd> + <dt>{{domxref("NavigatorID.platform")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a string representing the platform of the browser. Do not rely on this function to return a significant value.</dd> + <dt>{{domxref("NavigatorPlugins.plugins")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a {{domxref("PluginArray")}} listing the plugins installed in the browser.</dd> + <dt>{{domxref("NavigatorID.product")}} {{readonlyInline}} {{experimental_inline}}</dt> + <dd>Always returns <code>'Gecko'</code>, on any browser. This property is kept only for compatibility purpose.</dd> + <dt>{{domxref("NavigatorID.userAgent")}} {{readonlyInline}}</dt> + <dd>Returns the user agent string for the current browser.</dd> + <dt>{{domxref("Navigator.serviceWorker")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("ServiceWorkerContainer")}} object, which provides access to registration, removal, upgrade, and communication with the {{domxref("ServiceWorker")}} objects for the <a href="https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window">associated document</a>.</dd> +</dl> + +<h3 id="Methods" name="Methods">Non-standard</h3> + +<div class="note"> +<p>Firefox OS devices adds more non-standard properties. You can consult them on the <a href="/en-US/docs/Mozilla/Firefox_OS/API/Navigator">Firefox OS Navigator extensions article</a>.</p> +</div> + +<p>{{domxref("Navigator.buildID")}} {{non-standard_inline}}</p> + +<dl> + <dd>Returns the build identifier of the browser (e.g., "2006090803").</dd> + <dt>{{domxref("Navigator.cookieEnabled")}} {{non-standard_inline}}</dt> + <dd>Returns a boolean indicating whether cookies are enabled in the browser or not.</dd> + <dt>{{domxref("Navigator.credentials")}} {{non-standard_inline}}</dt> + <dd>Returns the {{domxref("CredentialsContainer")}} interface which exposes methods to request credentials and notify the user agent when interesting events occur such as successful sign in or sign out. </dd> + <dt>{{domxref("Navigator.doNotTrack")}} {{non-standard_inline}}</dt> + <dd>Reports the value of the user's do-not-track preference. When this value is "yes", your web site or application should not track the user.</dd> + <dt>{{domxref("Navigator.id")}} {{non-standard_inline}}</dt> + <dd>Returns the {{domxref("window.navigator.id", "id")}} object which you can use to add support for <a href="/en-US/docs/BrowserID" title="BrowserID">BrowserID</a> to your web site.</dd> + <dt>{{domxref("Navigator.mediaDevices")}} {{non-standard_inline}}</dt> + <dd>Returns a reference to the {{domxref("MediaDevices")}} interface.</dd> + <dt>{{domxref("Navigator.mozNotification")}} {{deprecated_inline("22")}} {{non-standard_inline}}<br> + {{domxref("Navigator.webkitNotification")}}</dt> + <dd>Returns a {{domxref("navigator.mozNotification", "notification")}} object you can use to deliver notifications to the user from your web application.</dd> + <dt>{{domxref("Navigator.mozSocial")}} {{non-standard_inline}}</dt> + <dd>The Object, returned by the <code>navigator.mozSocial</code> property, is available within the social media provider's panel to provide functionality it may need.</dd> + <dt>{{domxref("Navigator.presentation")}} {{non-standard_inline}}</dt> + <dd>Returns a reference to the {{domxref("Presentation")}} API.</dd> + <dt>{{domxref("Navigator.productSub")}} {{non-standard_inline}}</dt> + <dd>Returns the build number of the current browser (e.g., "20060909").</dd> + <dt>{{domxref("Navigator.securitypolicy")}} {{non-standard_inline}}</dt> + <dd>Returns an empty string. In Netscape 4.7x, returns "US & CA domestic policy" or "Export policy".</dd> + <dt>{{domxref("Navigator.standalone")}} {{non-standard_inline}}</dt> + <dd>Returns a boolean indicating whether the browser is running in standalone mode. Available on Apple's iOS Safari only.</dd> + <dt>{{domxref("Navigator.vendor")}} {{non-standard_inline}}</dt> + <dd>Returns the vendor name of the current browser (e.g., "Netscape6").</dd> + <dt>{{domxref("Navigator.vendorSub")}} {{non-standard_inline}}</dt> + <dd>Returns the vendor version number (e.g. "6.1").</dd> + <dt>{{domxref("Navigator.webkitPointer")}} {{non-standard_inline}}</dt> + <dd>Returns a PointerLock object for the <a href="/en-US/docs/API/Pointer_Lock_API" title="Mouse Lock API">Mouse Lock API</a>.</dd> +</dl> + +<h2 id="Methods" name="Methods">Methods</h2> + +<p><em>Doesn't inherit any method, but implements those defined in {{domxref("NavigatorID")}}, {{domxref("NavigatorContentUtils")}}, <em>{{domxref("NavigatorUserMedia")}}, </em>and {{domxref("NavigatorStorageUtils")}}.</em></p> + +<h3 id="Standard_2">Standard</h3> + +<dl> + <dt>{{domxref("Navigator.getVRDisplays()")}} {{experimental_inline}}</dt> + <dd>Returns a promise that resolves to an array of {{domxref("VRDisplay")}} objects representing any available VR devices connected to the computer.</dd> + <dt>{{domxref("Navigator.getUserMedia", "NavigatorUserMedia.getUserMedia()")}}</dt> + <dd>After having prompted the user for permission, returns the audio or video stream associated to a camera or microphone on the local computer.</dd> + <dt>{{domxref("Navigator.registerContentHandler()")}}</dt> + <dd>Allows web sites to register themselves as a possible handler for a given MIME type.</dd> + <dt>{{domxref("Navigator.registerProtocolHandler()")}}</dt> + <dd>Allows web sites to register themselves as a possible handler for a given protocol.</dd> + <dt>{{domxref("Navigator.requestMediaKeySystemAccess()")}} {{experimental_inline}}</dt> + <dd>Returns a <span style="line-height: 19.0909080505371px;">{{jsxref("Promise")}} for a MediaKeySystemAccess object.</span></dd> + <dt>{{domxref("Navigator.sendBeacon()")}}{{experimental_inline}}</dt> + <dd>Used to asynchronously transfer small HTTP data from the User Agent to a web server.</dd> + <dt>{{domxref("NavigatorID.taintEnabled()")}} {{deprecated_inline("1.7.8")}} {{obsolete_inline("9.0")}} {{experimental_inline}}</dt> + <dd>Returns <code>false</code>. JavaScript taint/untaint functions removed in JavaScript 1.2.</dd> + <dt>{{domxref("Navigator.vibrate()")}} {{gecko_minversion_inline("11.0")}}</dt> + <dd>Causes vibration on devices with support for it. Does nothing if vibration support isn't available.</dd> +</dl> + +<h3 id="Specification" name="Specification">Non-standard</h3> + +<div class="note"> +<p>Firefox OS devices adds more non-standard methods. You can consult them on the <a href="/en-US/docs/Mozilla/Firefox_OS/API/Navigator">Firefox OS Navigator extensions article</a>.</p> +</div> + +<p>{{domxref("Navigator.mozIsLocallyAvailable()")}} {{non-standard_inline}}</p> + +<dl> + <dd>Lets code check to see if the document at a given URI is available without using the network.</dd> + <dt>{{domxref("Navigator.mozPay()")}} {{non-standard_inline}}</dt> + <dd>Allows in-app payment.</dd> +</dl> diff --git a/files/id/web/api/navigator/mediadevices/index.html b/files/id/web/api/navigator/mediadevices/index.html new file mode 100644 index 0000000000..b51d697dd9 --- /dev/null +++ b/files/id/web/api/navigator/mediadevices/index.html @@ -0,0 +1,47 @@ +--- +title: Navigator.mediaDevices +slug: Web/API/Navigator/mediaDevices +translation_of: Web/API/Navigator/mediaDevices +--- +<div>{{APIRef("Media Capture and Streams")}}</div> + +<p>The <strong><code>Navigator.mediaDevices</code></strong> read-only property returns a {{domxref("MediaDevices")}} object, which provides access to connected media input devices like cameras and microphones, as well as screen sharing.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate">var <em>mediaDevices</em> = navigator.mediaDevices; +</pre> + +<h3 id="Return_value">Return value</h3> + +<p>The {{domxref("MediaDevices")}} singleton object. Usually, you just use this object's members directly, such as by calling {{domxref("navigator.mediaDevices.getUserMedia()")}}.</p> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Media Capture', '#mediadevices', 'NavigatorUserMedia.mediaDevices')}}</td> + <td>{{Spec2('Media Capture')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Navigator.mediaDevices")}}</p> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a>: The entry point to the documentation about the entire media stream API.</li> + <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a>: Documentation about the WebRTC API, which is closely related.</li> +</ul> diff --git a/files/id/web/api/navigator/serviceworker/index.html b/files/id/web/api/navigator/serviceworker/index.html new file mode 100644 index 0000000000..2599ecf9a2 --- /dev/null +++ b/files/id/web/api/navigator/serviceworker/index.html @@ -0,0 +1,101 @@ +--- +title: Navigator.serviceWorker +slug: Web/API/Navigator/serviceWorker +tags: + - API + - Reference + - Service Worker +translation_of: Web/API/Navigator/serviceWorker +--- +<p>{{APIRef("Service Workers API")}}</p> + +<p><code><strong>Navigator.serviceWorker</strong></code> adalah properti yang hanya bisa dibaca, mengembalikan objek {{domxref("ServiceWorkerContainer")}} untuk <a href="https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window">dokumen terkait</a>, yang memberikan akses untuk registrasi, penghapusan, upgrade, dan berkomunikasi dengan {{domxref("ServiceWorker")}}.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox">var workerContainerInstance = navigator.serviceWorker; +</pre> + +<h3 id="Nilai">Nilai</h3> + +<p>{{domxref("ServiceWorkerContainer")}}.</p> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Service Workers', '#navigator-service-worker', 'navigator.serviceWorker')}}</td> + <td>{{Spec2('Service Workers')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Browser">Kompabilitas Browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatChrome(40.0)}}</td> + <td>{{ CompatGeckoDesktop("44.0") }}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>24</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatGeckoMobile("44.0") }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Service workers (dan <a href="/en-US/docs/Web/API/Push_API">Push</a>) telah di non-aktifkan di <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR.)</p> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> + <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li> +</ul> diff --git a/files/id/web/api/service_worker_api/index.html b/files/id/web/api/service_worker_api/index.html new file mode 100644 index 0000000000..345f183563 --- /dev/null +++ b/files/id/web/api/service_worker_api/index.html @@ -0,0 +1,283 @@ +--- +title: Service Worker API +slug: Web/API/Service_Worker_API +tags: + - API + - Landing + - NeedsTranslation + - Offline + - Overview + - Reference + - Service Workers + - TopicStub + - Workers +translation_of: Web/API/Service_Worker_API +--- +<div> +<p>{{ServiceWorkerSidebar}}</p> + +<p>{{ SeeCompatTable() }}</p> + +<p class="summary">Service workers essentially act as proxy servers that sit between web applications, and the browser and network (when available). They are intended to (amongst other things) enable the creation of effective offline experiences, intercepting network requests and taking appropriate action based on whether the network is available and updated assets reside on the server. They will also allow access to push notifications and background sync APIs.</p> +</div> + +<h2 id="Service_worker_concepts_and_usage">Service worker concepts and usage</h2> + +<p>A service worker is an event-driven <a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker">worker</a> registered against an origin and a path. It takes the form of a JavaScript file that can control the web page/site it is associated with, intercepting and modifying navigation and resource requests, and caching resources in a very granular fashion to give you complete control over how your app behaves in certain situations (the most obvious one being when the network is not available.)</p> + +<p>A service worker is run in a worker context: it therefore has no DOM access, and runs on a different thread to the main JavaScript that powers your app, so it is not blocking. It is designed to be fully async; as a consequence, APIs such as synchronous <a href="/en-US/docs/Web/API/XMLHttpRequest">XHR</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage">localStorage</a> can't be used inside a service worker.</p> + +<p>Service workers only run over HTTPS, for security reasons. Having modified network requests wide open to man in the middle attacks would be really bad.</p> + +<div class="note"> +<p><strong>Note</strong>: Service Workers win over previous attempts in this area such as <a href="http://alistapart.com/article/application-cache-is-a-douchebag">AppCache</a> because they don't make assumptions about what you are trying to do and then break when those assumptions are not exactly right; you have granular control over everything.</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: Service workers make heavy use of <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">promises</a>, as generally they will wait for responses to come through, after which they will respond with a success or failure action. The promises architecture is ideal for this.</p> +</div> + +<h3 id="Registration">Registration</h3> + +<p>A service worker is first registered using the {{domxref("ServiceWorkerContainer.register()")}} method. If successful, your service worker will be downloaded to the client and attempt installation/activation (see below) for URLs accessed by the user inside the whole origin, or inside a subset specified by you.</p> + +<h3 id="Download_install_and_activate">Download, install and activate</h3> + +<p>At this point, your service worker will observe the following lifecycle:</p> + +<ol> + <li>Download</li> + <li>Install</li> + <li>Activate</li> +</ol> + +<p>The service worker is immediately downloaded when a user first accesses a service worker–controlled site/page.</p> + +<p>After that it is downloaded every 24 hours or so. It *may* be downloaded more frequently, but it <strong>must</strong> be downloaded every 24h to prevent bad scripts from being annoying for too long.</p> + +<p>Installation is attempted when the downloaded file is found to be new — either different to an existing service worker (byte-wise compared), or the first service worker encountered for this page/site.</p> + +<p>If this is the first time a service worker has been made available, installation is attempted, then after a successful installation it is activated.</p> + +<p>If there is an existing service worker available, the new version is installed in the background, but not yet activated — at this point it is called the <em>worker in waiting</em>. It is only activated when there are no longer any pages loaded that are still using the old service worker. As soon as there are no more such pages still loaded, the new service worker activates (becoming the <em>active worker</em>).</p> + +<p>You can listen out for the {{domxref("InstallEvent")}}; a standard action is to prepare your service worker for usage when this fires, for example by creating a cache using the built in storage API, and placing assets inside it that you'll want for running your app offline.</p> + +<p>There is also an <code>activate</code> event. The point where this event fires is generally a good time to clean up old caches and other things associated with the previous version of your service worker.</p> + +<p>Your service worker can respond to requests using the {{domxref("FetchEvent")}} event. You can modify the response to these requests in any way you want, using the {{domxref("FetchEvent.respondWith") }} method.</p> + +<div class="note"> +<p><strong>Note</strong>: Because <code>oninstall</code>/<code>onactivate</code> could take a while to complete, the service worker spec provides a <code>waitUntil</code> method that, when called <code>oninstall</code> or <code>onactivate</code>, passes a promise. Functional events are not dispatched to the service worker until the promise successfully resolves.</p> +</div> + +<p>For a complete tutorial to show how to build up your first basic example, read <a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a>.</p> + +<h2 id="Other_use_case_ideas">Other use case ideas</h2> + +<p>Service workers are also intended to be used for such things as:</p> + +<ul> + <li>Background data synchronization</li> + <li>Responding to resource requests from other origins</li> + <li>Receiving centralized updates to expensive-to-calculate data such as geolocation or gyroscope, so multiple pages can make use of one set of data</li> + <li>Client-side compiling and dependency management of CoffeeScript, less, CJS/AMD modules, etc. for dev purposes</li> + <li>Hooks for background services</li> + <li>Custom templating based on certain URL patterns</li> + <li>Performance enhancements, for example pre-fetching resources that the user is likely to need in the near future, such as the next few pictures in a photo album.</li> +</ul> + +<p>In the future, service workers will be able to do a number of other useful things for the web platform that will bring it closer towards native app viability. Interestingly, other specifications can and will start to make use of the service worker context, for example:</p> + +<ul> + <li><a href="https://github.com/slightlyoff/BackgroundSync">Background synchronization</a>: Start up a service worker even when no users are at the site, so caches can be updated, etc.</li> + <li><a href="/en-US/docs/Web/API/Push_API">Reacting to push messages</a>: Start up a service worker to send users a message to tell them new content is available.</li> + <li>Reacting to a particular time & date</li> + <li>Entering a geo-fence</li> +</ul> + +<h2 id="Interfaces">Interfaces</h2> + +<dl> + <dt>{{domxref("Cache") }}</dt> + <dd>Represents the storage for {{domxref("Request")}} / {{domxref("Response")}} object pairs that are cached as part of the {{domxref("ServiceWorker")}} life cycle.</dd> + <dt>{{domxref("CacheStorage") }}</dt> + <dd>Represents the storage for {{domxref("Cache")}} objects. It provides a master directory of all the named caches that a {{domxref("ServiceWorker")}} can access and maintains a mapping of string names to corresponding {{domxref("Cache")}} objects.</dd> + <dt>{{domxref("Client") }}</dt> + <dd>Represents the scope of a service worker client. A service worker client is either a document in a browser context or a {{domxref("SharedWorker")}}, which is controlled by an active worker.</dd> + <dt>{{domxref("Clients") }}</dt> + <dd>Represents a container for a list of {{domxref("Client")}} objects; the main way to access the active service worker clients at the current origin.</dd> + <dt>{{domxref("ExtendableEvent") }}</dt> + <dd>Extends the lifetime of the <code>install</code> and <code>activate</code> events dispatched on the {{domxref("ServiceWorkerGlobalScope")}} as part of the service worker lifecycle. This ensures that any functional events (like {{domxref("FetchEvent")}}) are not dispatched to the {{domxref("ServiceWorker")}} until it upgrades database schemas, deletes outdated cache entries, etc.</dd> + <dt>{{domxref("ExtendableMessageEvent") }}</dt> + <dd>The event object of a {{event("message_(ServiceWorker)","message")}} event fired on a service worker (when a channel message is received on the {{domxref("ServiceWorkerGlobalScope")}} from another context) — extends the lifetime of such events.</dd> + <dt>{{domxref("FetchEvent") }}</dt> + <dd>The parameter passed into the {{domxref("ServiceWorkerGlobalScope.onfetch")}} handler, <code>FetchEvent</code> represents a fetch action that is dispatched on the {{domxref("ServiceWorkerGlobalScope")}} of a {{domxref("ServiceWorker")}}. It contains information about the request and resulting response, and provides the {{domxref("FetchEvent.respondWith", "FetchEvent.respondWith()")}} method, which allows us to provide an arbitrary response back to the controlled page.</dd> + <dt>{{domxref("InstallEvent") }}</dt> + <dd>The parameter passed into the {{domxref("ServiceWorkerGlobalScope.oninstall", "oninstall")}} handler, the <code>InstallEvent</code> interface represents an install action that is dispatched on the {{domxref("ServiceWorkerGlobalScope")}} of a {{domxref("ServiceWorker")}}. As a child of {{domxref("ExtendableEvent")}}, it ensures that functional events such as {{domxref("FetchEvent")}} are not dispatched during installation. </dd> + <dt>{{domxref("Navigator.serviceWorker") }}</dt> + <dd>Returns a {{domxref("ServiceWorkerContainer")}} object, which provides access to registration, removal, upgrade, and communication with the {{domxref("ServiceWorker")}} objects for the <a href="https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window">associated document</a>.</dd> + <dt>{{domxref("NotificationEvent") }}</dt> + <dd>The parameter passed into the {{domxref("ServiceWorkerGlobalScope.onnotificationclick", "onnotificationclick")}} handler, the <code>NotificationEvent</code> interface represents a notification click event that is dispatched on the {{domxref("ServiceWorkerGlobalScope")}} of a {{domxref("ServiceWorker")}}.</dd> + <dt>{{domxref("ServiceWorker") }}</dt> + <dd>Represents a service worker. Multiple browsing contexts (e.g. pages, workers, etc.) can be associated with the same <code>ServiceWorker</code> object.</dd> + <dt>{{domxref("ServiceWorkerContainer") }}</dt> + <dd>Provides an object representing the service worker as an overall unit in the network ecosystem, including facilities to register, unregister and update service workers, and access the state of service workers and their registrations.</dd> + <dt>{{domxref("ServiceWorkerGlobalScope") }}</dt> + <dd>Represents the global execution context of a service worker.</dd> + <dt>{{domxref("ServiceWorkerMessageEvent")}}</dt> + <dd>Contains information about an event sent to a {{domxref("ServiceWorkerContainer")}} target. </dd> + <dt>{{domxref("ServiceWorkerRegistration") }}</dt> + <dd>Represents a service worker registration.</dd> + <dt>{{domxref("SyncEvent")}} {{non-standard_inline}}</dt> + <dd> + <p>The SyncEvent interface represents a sync action that is dispatched on the {{domxref("ServiceWorkerGlobalScope")}} of a ServiceWorker. </p> + </dd> + <dt>{{domxref("SyncManager")}} {{non-standard_inline}}</dt> + <dd>Provides an interface for registering and listing sync registrations.</dd> + <dt>{{domxref("WindowClient") }}</dt> + <dd>Represents the scope of a service worker client that is a document in a browser context, controlled by an active worker. This is a special type of {{domxref("Client")}} object, with some additional methods and properties available.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Service Workers')}}</td> + <td>{{Spec2('Service Workers')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{ CompatibilityTable() }}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(40.0)}}</td> + <td>{{ CompatGeckoDesktop("44.0") }}<sup>[1]</sup></td> + <td>{{ CompatNo() }}</td> + <td>24</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td>install/activate events</td> + <td>{{ CompatChrome(40.0) }}</td> + <td>{{ CompatGeckoDesktop("44.0") }}<sup>[1]</sup></td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td>fetch event/request/<br> + <code>respondWith()</code></td> + <td>{{CompatChrome(40.0)}}</td> + <td>{{ CompatGeckoDesktop("44.0") }}<sup>[1]</sup></td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td>caches/cache</td> + <td> + <p class="p1">{{CompatChrome(42.0)}}</p> + </td> + <td>{{ CompatGeckoDesktop("39.0") }}<sup>[1]</sup></td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td> </td> + <td>{{CompatChrome(40.0)}}</td> + <td>{{ CompatGeckoMobile("44.0") }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td> install/activate events</td> + <td>{{ CompatNo() }}</td> + <td>{{CompatChrome(40.0)}}</td> + <td>{{ CompatGeckoMobile("44.0") }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td>fetch event/request/<br> + <code>respondWith()</code></td> + <td>{{ CompatNo() }}</td> + <td>{{CompatChrome(40.0)}}</td> + <td>{{ CompatGeckoMobile("44.0") }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td>caches/cache</td> + <td>{{ CompatNo() }}</td> + <td>{{CompatChrome(40.0)}}</td> + <td>{{ CompatGeckoMobile("39.0") }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Service workers (and <a href="/en-US/docs/Web/API/Push_API">Push</a>) have been disabled in the <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR.)</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://serviceworke.rs">ServiceWorker Cookbook</a></li> + <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li> + <li><a href="https://github.com/mdn/sw-test">Service workers basic code example</a></li> + <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a></li> + <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li> + <li><a href="https://www.fastly.com/blog/best-practices-for-using-the-vary-header">Best Practices for using the VARY header</a></li> +</ul> diff --git a/files/id/web/api/service_worker_api/using_service_workers/index.html b/files/id/web/api/service_worker_api/using_service_workers/index.html new file mode 100644 index 0000000000..b88643f6ed --- /dev/null +++ b/files/id/web/api/service_worker_api/using_service_workers/index.html @@ -0,0 +1,539 @@ +--- +title: Menggunakan Service Workers +slug: Web/API/Service_Worker_API/Using_Service_Workers +tags: + - Paduan + - ServiceWorker + - dasar +translation_of: Web/API/Service_Worker_API/Using_Service_Workers +--- +<p>{{ServiceWorkerSidebar}}</p> + +<p>{{ SeeCompatTable() }}</p> + +<div class="summary"> +<p>Artikel ini memberikan informasi mengenai cara memulai dan menggunakan Service Workers, Termasuk arsitektur dasar, mendaftarkan service worker, penginstalan dan proses aktivasi service worker, memperbaharui service worker, kontrol cache dan custom response, Semuanya dalam konteks aplikasi sederhana dengan fungsi offline. </p> +</div> + +<h2 id="Premis_Service_Workers">Premis Service Workers</h2> + +<p>Salah satu masalah utama yang dialami pengguna web selama bertahun - tahun adalah hilangnya konektivitas. Bahkan aplikasi terbaik didunia sekalipun akan memberikan pengalaman pengguna yang buruk jika tidak bisa di muat atau di download. Berbagai upaya menciptakan teknologi telah dilakukan untuk memecahkan masalah tersebut, Agar halaman <a href="/en-US/Apps/Build/Offline">Offline</a> dapat digunakan, dan beberapa masalah telah diselesaikan.Tapi masalah utamanya masih belum ada mekanisame kontrol yang terbaik untuk semua permintaan aset cache dan kostum jaringan.<br> + <br> + Pada upaya sebelumnya — AppCache — dilihat sebagai ide yang bagus karena disana anda juga bisa menentukan aset untuk dicache dengan mudah. Namun, itu membuat asumsi tentang ketika anda mencoba dan kemudian pecah dengan mengerikan ketika aplikasi anda tidak mengikuti asumsi premis. Baca artikel Jake Archibald's <a href="http://alistapart.com/article/application-cache-is-a-douchebag">Application Cache is a Douchebag</a> untuk lebih detail.</p> + +<div class="note"> +<p><strong>Catatan</strong>: Pada firefox 44, ketika <a href="/en-US/docs/Web/HTML/Using_the_application_cache">AppCache</a> digunakan untuk menyediakan layanan offline untuk suatu halaman, pesan peringatan sekarang akan ditampilkan di console menyarankan pengembang untuk menggunakan <a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service workers</a> ({{bug("1204581")}}.)</p> +</div> + +<p>Service worker seharusnya telah memecahkan masalah ini. Syntax pada service worker lebih kompleks di bandingkan AppCache, tapi kesamaanya adalah anda bisa menggunkan javascript untuk mengontrol AppCache anda secara tersirat dengan derajat grunality yang lebih bagus, memungkinkan anda untuk menangani masalah ini dan banyak lagi. Dengan menggunakan Service worker anda bisa mengatur aplikasi untuk menggunakan aset utama, sehingga memberikan pengalaman utama bahkan saat offline, sebelum mendapatkan lebih banyak data dari jaringan (biasa disebut sebagai <a href="http://offlinefirst.org/">Offline First</a>). Ini sudah tersedia dengan aplikasi asli, yang merupakan salah satu alasan utama aplikasi asli sering dipilih lebih dari aplikasi web.</p> + +<h2 id="Persiapan_bermain_dengan_service_worker">Persiapan bermain dengan service worker</h2> + +<p>Banyak fitur service worker saat ini telah di aktifkan secara default pada browser versi terbaru yang mendukung. Tapi jika anda menemui kode demo tidak bekerja pada versi browser anda, mungkin anda perlu mengaktifkan preferensi:</p> + +<ul> + <li><strong>Firefox Nightly</strong>: Buka <code>about:config</code> dan atur <code>dom.serviceWorkers.enabled</code> ke true; kemudian restart browser.</li> + <li><strong>Chrome Canary</strong>: Buka <code>chrome://flags</code> dan aktifkan <code>experimental-web-platform-features</code>; restart browser ( perlu dicatat bahwa beberapa fitur telah diaktifkan secara default di Chrome.)</li> + <li><strong>Opera</strong>: Buka <code>opera://flags</code> dan aktifkan dukungan untuk<code> ServiceWorker</code>; restart browser.</li> +</ul> + +<p>Anda perlu menyajikan kode dengan menggunakan HTTPS — Service Workers dibatasi dengan hanya dapat di jalankan pada HTTPS untuk alasan keamanan. Github merupakan salah satu tempat yang di sarankan untuk bereksperimen, karena mendukung HTTPS.</p> + +<h2 id="Arsitektur_dasar">Arsitektur dasar</h2> + +<p>Dengan service workers, langkah - langkah umum berikut perlu diamati untuk konfigurasi dasar:</p> + +<ol> + <li>URL service worker diambil di daftarkan melalui {{domxref("serviceWorkerContainer.register()")}}.</li> + <li>Jika sukses, service worker dijalankan di {{domxref("ServiceWorkerGlobalScope") }}; pada dasarnya ini merupakan hal yang sepesial dari konteks worker, menjalankan tread script utama untuk pengeksekusian, tanpa dukungan akses DOM.</li> + <li>Sekarang service worker telah siap untuk memproses event.</li> + <li>Instalasai service worker dicoba ketika service worker mengontrol halaman yang diakses setelah dan sebelumnya. Even Install akan selalu di kirim pertama kali ke service workerr ( ini bisa digunakan untuk memulai proses untuk mengumpulkan IndexedDB, dan mencache aset situs). Sama halnya seperti prosedur penginstalan asli atau aplikasi firefox OS — memungkinkan semuanya tersedia untuk digunakan secara offline.</li> + <li>Ketika handler <code>oninstall</code> selesai, service worker ditetapkan untuk diinstall.</li> + <li>Selanjutnya adalah aktivasi. Ketika service worker terinstall, selanjutnya akan menerima event activate. Penggunaan utama dari <code>onactivate</code> adalah untuk membersihkan sumberdaya yang digunakan pada versi sebelumnya.</li> + <li>Service Worker sekarang dapat mengontrol halaman, tapi hanya yang di buka setelah <code>register()</code> telah sukses. misal dokumen mulai aktif dengan atau tanpa Service Worker dan menjaganya selama masih digunakan. Jadi dokumen harus di muat ulang agar benar - benar terkontrol.</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12636/sw-lifecycle.png" style="display: block; height: 867px; margin: 0px auto; width: 579px;"></p> + +<p>Grafik dibawah menunjukan ringkasan dari event yang tersedia pada service worker:</p> + +<p><img alt="install, activate, message, fetch, sync, push" src="https://mdn.mozillademos.org/files/12632/sw-events.png" style="display: block; margin: 0px auto;"></p> + +<h3 id="Promis">Promis</h3> + +<p><a href="/id/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promis</a> adalah mekanisme yang sebagian besar digunakan untuk menjalankan operasi secara asinkron, dengan bergantung pada pencapaian satu dan lainnya. Ini merupakan pusat dari cara kerja service workers.<br> + <br> + Promis bisa digunakan untuk melakukan banyak hal, tapi untuk saat ini, yang perlu anda tahu adalah jika sesuatu yang mengembalikan promise, anda bisa menambahkan<code>.then()</code> di akhir dan menambahkan callback di dalamnya untuk mengetahui apakah berhasil, gagal da lainnya., atau anda bisa menambahkan <code>.catch()</code> di akhir jika anda ingin menambahkan calback status gagal.</p> + +<p>Mari bandingkan kesamaan struktur callback tradisional synchronous dan promise asynchronous.</p> + +<h4 id="sync">sync</h4> + +<pre class="brush: js">try { + var value = myFunction(); + console.log(value); +} catch(err) { + console.log(err); +}</pre> + +<h4 id="async">async</h4> + +<pre class="brush: js">myFunction().then(function(value) { + console.log(value); + }).catch(function(err) { + console.log(err); +});</pre> + +<p>Pada contoh pertama, kita perlu mengunggu <code>myFunction()</code> untuk dijalankan dan mengembalikan nilai sebelum kode lain bisa dijalankan. Pada contoh kedua, <code>myFunction()</code> mengembalikan promise untuk <code>nilai</code>, kemudian semua kode dapat di bawa untuk dapat dijalankan. Ketika promise diselesaikan, kode didalamnya bisa dijalankan secara asynchronously.<br> + <br> + Sebagai contoh nyata — jika kita ingin memuat gambar secara dinamic, tapi kita ingin memastikan bahwa gambar tersebut di muat terlebih dahulu sebelum di tampilkan? Hal standar ini yang ingin dilakukan, tapi ini akan sedikit sulit. Kita bisa mengunakan <code>.onload</code> untuk hanya menampilkan gambar setelah di muat, tapi bagaimana dengan event yang memulai sebelum kita memulai melacaknya ? kita bisa mencoba melakukannya dengan menggunakan<code>.complete</code>, tapi ini tetap tidak foolproof, dan bagaimana dengan lebih dari satu gambar? Dan, ummm, ini tetap synchronous, Jadi di blok di tread utama.<br> + <br> + Gantinya, kita bisa membuat promis kita sendiri untuk mengatasi kasus seperi ini. (Lihat contoh <a href="https://github.com/mdn/promises-test">Promises test</a> untuk kode sumber, atau <a href="https://mdn.github.io/promises-test/">Lihat cara kerja secara live</a>.)</p> + +<p>{{note("Implementasi service worker akan mengutamakan menggunakan caching dan onfetch daripada XMLHttpRequest API. Fitur tersebut tidak di gunakan disini jadi anda hanya fokus pada penggunaan Promises.")}}</p> + +<pre class="brush: js">function imgLoad(url) { + return new Promise(function(resolve, reject) { + var request = new XMLHttpRequest(); + request.open('GET', url); + request.responseType = 'blob'; + + request.onload = function() { + if (request.status == 200) { + resolve(request.response); + } else { + reject(Error('Image didn\'t load successfully; error code:' + request.statusText)); + } + }; + + request.onerror = function() { + reject(Error('There was a network error.')); + }; + + request.send(); + }); +}</pre> + +<p>Kita mengembalikan promis baru menggunakan konstruktor <code>Promise()</code>, di mana menggunakan argumen sebagai fungsi callback dengan parameter <code>resolve</code> dan <code>reject</code>. DImanapung di fungsi, kita perlu mendefinisikan apa yang terjadi untuk promise yang diselesaikan secara sukses atau ditolak — pada kasus ini mengembalikan status 200 OK atau tidak — dan kemudian memanggil <code>resolve</code> ketika sukses, atau <code>reject</code> jika gagal. Semua konten dari fungsi ini adalah perangkat dasar XHR, jadi kita tidak perlu khawatir untuk saat ini.</p> + +<p>Ketika memanggil fungsi <code>imgLoad()</code>, kita memanggilnya dengan menggunakan url gambar yang akan dimuat, seperti yang kita harapkan, namun kodenya sedikit berbeda:</p> + +<pre class="brush: js">var body = document.querySelector('body'); +var myImage = new Image(); + +imgLoad('myLittleVader.jpg').then(function(response) { + var imageURL = window.URL.createObjectURL(response); + myImage.src = imageURL; + body.appendChild(myImage); +}, function(Error) { + console.log(Error); +});</pre> + +<p>Pada akhir pemanggilan fungsi, kita menggabungkan promise method <code>then()</code>, dimana terdiri dari dua fungsi — yang pertama akan di eksekusi ketika promise berhasil di selesaikan, dan yang kedua akan dipanggil ketika promise di tolak. Pada penyelesaian kasus, kita menampilkan gambar di dalam <code>myImage</code> dan menambahkannya ke body (dengan argumen <code>request.response</code> yang berada di dalam method <code>resolve</code>); pada kasus ditolak kita mengembalikan error di console.</p> + +<p>Semua terjadi secara asynchronously.</p> + +<div class="note"> +<p><strong>Catatan</strong>: Anda juga bisa menggabungkan panggilan promise secara bersamaan, Misal:<br> + <code>myPromise().then(success, failure).then(success).catch(failure);</code></p> +</div> + +<div class="note"> +<p><strong>Catatan</strong>: Anda bisa mendapatkan lebih banyak informasi tentang promise dengan membaca tulisan Jake Archibald’s excellent <a href="http://www.html5rocks.com/en/tutorials/es6/promises/">JavaScript Promises: there and back again</a>.</p> +</div> + +<h2 id="Demo_service_workers">Demo service workers</h2> + +<p>Sebagai demonstrasi hanya sekedar dasar pendaftaran dan penginstalan service worker, kita membuat sebuah demo sederhana dengan nama <a href="https://github.com/mdn/sw-test">sw-test</a>, berupa galeri gambar Star wars Lego. Mengunakan fungsi dengan promise untuk membaca data gambar dari sebuah objek JSON dan memuat gambar menggunakan Ajax, Sebelum menamilkan gambar pada halaman. Kita akan semuanya tetap simple dan statis untuk saat ini. Di sini pendaftaran, instalasi, dan akativasi sebuah service worker, dan ketika semua spec di dukung oleh browsers maka semua file yang diperukan akan dicache untuk di muat secara offline!</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8243/demo-screenshot.png" style="display: block; height: 410px; margin: 0px auto; width: 480px;"><br> + <br> + <br> + Anda bisa melihat <a href="https://github.com/mdn/sw-test/">source code di GitHub</a>, dan <a href="https://mdn.github.io/sw-test/">Melihat contoh secara live</a>. The one bit we’ll call out here is the promise (see <a href="https://github.com/mdn/sw-test/blob/gh-pages/app.js#L17-L42">app.js lines 17-42</a>), which is a modified version of what you read about above, in the <a href="https://github.com/mdn/promises-test">Promises test demo</a>. It is different in the following ways:</p> + +<ol> + <li>In the original, we only passed in a URL to an image we wanted to load. In this version, we pass in a JSON fragment containing all the data for a single image (see what they look like in <a href="https://github.com/mdn/sw-test/blob/gh-pages/image-list.js">image-list.js</a>). This is because all the data for each promise resolve has to be passed in with the promise, as it is asynchronous. If you just passed in the url, and then tried to access the other items in the JSON separately when the <code>for()</code> loop is being iterated through later on, it wouldn’t work, as the promise wouldn’t resolve at the same time as the iterations are being done (that is a synchronous process.)</li> + <li>We actually resolve the promise with an array, as we want to make the loaded image blob available to the resolving function later on in the code, but also the image name, credits and alt text (see <a href="https://github.com/mdn/sw-test/blob/gh-pages/app.js#L26-L29">app.js lines 26-29</a>). Promises will only resolve with a single argument, so if you want to resolve with multiple values, you need to use an array/object.</li> + <li>To access the resolved promise values, we then access this function as you’d then expect (see <a href="https://github.com/mdn/sw-test/blob/gh-pages/app.js#L55-L59">app.js lines 55-59</a>.) This may seem a bit odd at first, but this is the way promises work.</li> +</ol> + +<h2 id="Enter_Service_workers">Enter Service workers</h2> + +<p>Now let’s get on to service workers!</p> + +<h3 id="Mendaftarkan_worker">Mendaftarkan worker</h3> + +<p>The first block of code in our app’s JavaScript file — <code>app.js</code> — is as follows. This is our entry point into using service workers.</p> + +<pre class="brush: js">if ('serviceWorker' in navigator) { + navigator.serviceWorker.register('/sw-test/sw.js', { scope: '/sw-test/' }).then(function(reg) { + // registration worked + console.log('Registration succeeded. Scope is ' + reg.scope); + }).catch(function(error) { + // registration failed + console.log('Registration failed with ' + error); + }); +};</pre> + +<ol> + <li>The outer block performs a feature detection test to make sure service workers are supported before trying to register one.</li> + <li>Next, we use the {{domxref("ServiceWorkerContainer.register()") }} function to register the service worker for this site, which is just a JavaScript file residing inside our app (note this is the file's URL relative to the origin, not the JS file that references it.)</li> + <li>The <code>scope</code> parameter is optional, and can be used to specify the subset of your content that you want the service worker to control. In this case, we have specified '<code>/sw-test/'</code>, which means all content under the app's origin. If you leave it out, it will default to this value anyway, but we specified it here for illustration purposes.</li> + <li>The <code>.then()</code> promise function is used to chain a success case onto our promise structure. When the promise resolves successfully, the code inside it executes.</li> + <li>Finally, we chain a <code>.catch()</code> function onto the end that will run if the promise is rejected.</li> +</ol> + +<p>This registers a service worker, which runs in a worker context, and therefore has no DOM access. You then run code in the service worker outside of your normal pages to control their loading.<br> + <br> + A single service worker can control many pages. Each time a page within your scope is loaded, the service worker is installed against that page and operates on it. Bear in mind therefore that you need to be careful with global variables in the service worker script: each page doesn’t get its own unique worker.</p> + +<div class="note"> +<p><strong>Note</strong>: Your service worker functions like a proxy server, allowing you to modify requests and responses, replace them with items from its own cache, and more.</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: One great thing about service workers is that if you use feature detection like we’ve shown above, browsers that don’t support service workers can just use your app online in the normal expected fashion. Furthermore, if you use AppCache and SW on a page, browsers that don’t support SW but do support AppCache will use that, and browsers that support both will ignore the AppCache and let SW take over.</p> +</div> + +<h4 id="Kenapa_service_worker_saya_gagal_didaftarkan">Kenapa service worker saya gagal didaftarkan?</h4> + +<p>Hal tersebut bisa terjadi karena alasan berikut:</p> + +<ol> + <li>Anda tidak menjalankan aplikasi dari HTTPS.</li> + <li>Path dari file service worker anda tidak ditulis dengan benar — seharusnya di tulis relatif terhadap origin, bukan root dari direktori aplikasi anda. Pada contoh, worker berada di <code>https://mdn.github.io/sw-test/sw.js</code>, dan root aplikasi di <code>https://mdn.github.io/sw-test/</code>. Namun path harus ditulis <code>/sw-test/sw.js</code>, bukan <code>/sw.js</code>.</li> + <li>The service worker being pointed to is on a different origin to that of your app. This is also not allowed.</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12630/important-notes.png" style="display: block; height: 277px; margin: 0px auto; width: 574px;"></p> + +<p>Also note:</p> + +<ul> + <li>The service worker will only catch requests from clients under the service worker's scope.</li> + <li>The max scope for a service worker is the location of the worker.</li> + <li>If your server worker is active on a client being served with the <code>Service-Worker-Allowed</code> header, you can specify a list of max scopes for that worker.</li> + <li>In Firefox, Service Worker APIs are hidden and cannot be used when the user is in <a href="https://support.mozilla.org/en-US/kb/private-browsing-use-firefox-without-history">private browsing mode</a>.</li> +</ul> + +<h3 id="Install_dan_activasi_mengumpulkan_cache">Install dan activasi: mengumpulkan cache</h3> + +<p>Setelah service worker anda terdaftar, browser akan menginstall dan mengaktifkan service worker untuk halaman/situs anda.<br> + <br> + Event instal dijalankan ketika install selesai dengan sukses. Event install biasanya digunakan oleh browser untuk mengumpulkan cache offline dari aset yang akan digunakan untuk menjalankan aplikasi anda secara offline. Untuk melakukannya, kita menggunakan Storage API dari Service Worker — {{domxref("cache")}} — global pada service worker yang memungkinkan kita menympan aset yang diterima dari response, dan di sandikan berdasarkan request. API ini sama halnya dengan cache pada browser umumnya, tapi lebih spesifik ke domain. Ini persis hinga anda tidak menginginkan — anda punya kontrol penuh.</p> + +<div class="note"> +<p><strong>Note</strong>: The Cache API is not supported in every browser. (See the {{anch("Browser support")}} section for more information.) If you want to use this now, you could consider using a polyfill like the one available in <a href="https://github.com/Polymer/topeka/blob/master/sw.js">Google's Topeka demo</a>, or perhaps store your assets in <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>.</p> +</div> + +<p>Let’s start this section by looking at a code sample — this is the <a href="https://github.com/mdn/sw-test/blob/gh-pages/sw.js#L1-L18">first block you’ll find in our service worker</a>:</p> + +<pre class="brush: js">this.addEventListener('install', function(event) { + event.waitUntil( + caches.open('v1').then(function(cache) { + return cache.addAll([ + '/sw-test/', + '/sw-test/index.html', + '/sw-test/style.css', + '/sw-test/app.js', + '/sw-test/image-list.js', + '/sw-test/star-wars-logo.jpg', + '/sw-test/gallery/', + '/sw-test/gallery/bountyHunters.jpg', + '/sw-test/gallery/myLittleVader.jpg', + '/sw-test/gallery/snowTroopers.jpg' + ]); + }) + ); +});</pre> + +<ol> + <li>Here we add an <code>install</code> event listener to the service worker (hence <code>this</code>), and then chain a {{domxref("ExtendableEvent.waitUntil()") }} method onto the event — this ensures that the Service Worker will not install until the code inside <code>waitUntil()</code> has successfully occurred.</li> + <li>Inside <code>waitUntil()</code> we use the <a href="/en-US/docs/Web/API/CacheStorage/open"><code>caches.open()</code></a> method to create a new cache called <code>v1</code>, which will be version 1 of our site resources cache. This returns a promise for a created cache; once resolved, we then call a function that calls <code>addAll()</code> on the created cache, which for its parameter takes an array of origin-relative URLs to all the resources you want to cache.</li> + <li>If the promise is rejected, the install fails, and the worker won’t do anything. This is ok, as you can fix your code and then try again the next time registration occurs.</li> + <li>After a successful installation, the service worker activates. This doesn’t have much of a distinct use the first time your service worker is installed/activated, but it means more when the service worker is updated (see the {{anch("Updating your service worker") }} section later on.)</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: <a href="/en-US/docs/Web/Guide/API/DOM/Storage">localStorage</a> works in a similar way to service worker cache, but it is synchronous, so not allowed in service workers.</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> can be used inside a service worker for data storage if you require it.</p> +</div> + +<h3 id="Custom_responses_to_requests">Custom responses to requests</h3> + +<p>Now you’ve got your site assets cached, you need to tell service workers to do something with the cached content. This is easily done with the <code>fetch</code> event.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12634/sw-fetch.png" style="display: block; margin: 0 auto;"></p> + +<p>A <code>fetch</code> event fires every time any resource controlled by a service worker is fetched, which includes the documents inside the specified scope, and any resources referenced in those documents (for example if <code>index.html</code> makes a cross origin request to embed an image, that still goes through its service worker.)</p> + +<p>You can attach a <code>fetch</code> event listener to the service worker, then call the <code>respondWith()</code> method on the event to hijack our HTTP responses and update them with your own magic.</p> + +<pre class="brush: js">this.addEventListener('fetch', function(event) { + event.respondWith( + // magic goes here + ); +});</pre> + +<p>We could start by simply responding with the resource whose url matches that of the network request, in each case:</p> + +<pre class="brush: js">this.addEventListener('fetch', function(event) { + event.respondWith( + caches.match(event.request); + ); +});</pre> + +<p><code>caches.match(event.request)</code> allows us to match each resource requested from the network with the equivalent resource available in the cache, if there is a matching one available. The matching is done via url and vary headers, just like with normal HTTP requests.</p> + +<p>Let’s look at a few other options we have when defining our magic (see our <a href="/en-US/docs/Web/API/Fetch_API">Fetch API documentation</a> for more information about {{domxref("Request")}} and {{domxref("Response")}} objects.)</p> + +<ol> + <li> + <p>The <code>{{domxref("Response.Response","Response()")}}</code> constructor allows you to create a custom response. In this case, we are just returning a simple text string:</p> + + <pre class="brush: js">new Response('Hello from your friendly neighbourhood service worker!');</pre> + </li> + <li> + <p>This more complex <code>Response</code> below shows that you can optionally pass a set of headers in with your response, emulating standard HTTP response headers. Here we are just telling the browser what the content type of our synthetic response is:</p> + + <pre class="brush: js">new Response('</pre> + + <p>Hello from your friendly neighbourhood service worker!</p> + ', { headers: { 'Content-Type': 'text/html' } })</li> + <li> + <p>If a match wasn’t found in the cache, you could tell the browser to simply {{domxref("GlobalFetch.fetch","fetch")}} the default network request for that resource, to get the new resource from the network if it is available:</p> + + <pre class="brush: js">fetch(event.request)</pre> + </li> + <li> + <p>If a match wasn’t found in the cache, and the network isn’t available, you could just match the request with some kind of default fallback page as a response using {{domxref("CacheStorage.match","match()")}}, like this:</p> + + <pre class="brush: js">caches.match('/fallback.html');</pre> + </li> + <li> + <p>You can retrieve a lot of information about each request by calling parameters of the {{domxref("Request")}} object returned by the {{domxref("FetchEvent")}}:</p> + + <pre class="brush: js">event.request.url +event.request.method +event.request.headers +event.request.body</pre> + </li> +</ol> + +<h2 id="Recovering_failed_requests">Recovering failed requests</h2> + +<p>So <code>caches.match(event.request)</code> is great when there is a match in the service worker cache, but what about cases when there isn’t a match? If we didn’t provide any kind of failure handling, our promise would reject and we would just come up against a network error when a match isn’t found.</p> + +<p>Fortunately service workers’ promise-based structure makes it trivial to provide further options towards success. We could do this:</p> + +<pre class="brush: js">this.addEventListener('fetch', function(event) { + event.respondWith( + caches.match(event.request).catch(function() { + return fetch(event.request); + }) + ); +});</pre> + +<p>If the promise rejects, the <code>catch()</code> function returns the default network request for the resource instead, meaning that those who have network available can just load the resource from the server.</p> + +<p>If we were being really clever, we would not only request the resource from the network; we would also save it into the cache so that later requests for that resource could be retrieved offline too! This would mean that if extra images were added to the Star Wars gallery, our app could automatically grab them and cache them. The following would do the trick:</p> + +<pre class="brush: js">this.addEventListener('fetch', function(event) { + event.respondWith( + caches.match(event.request).catch(function() { + return fetch(event.request).then(function(response) { + return caches.open('v1').then(function(cache) { + cache.put(event.request, response.clone()); + return response; + }); + }); + }) + ); +});</pre> + +<p>Here we return the default network request with <code>return fetch(event.request)</code>, which returns a promise. When this promise is resolved, we respond by running a function that grabs our cache using <code>caches.open('v1')</code>; this also returns a promise. When that promise resolves, <code>cache.put()</code> is used to add the resource to the cache. The resource is grabbed from <code>event.request</code>, and the response is then cloned with <code>response.clone()</code> and added to the cache. The clone is put in the cache, and the original response is returned to the browser to be given to the page that called it.</p> + +<p>Why? This is because request and response streams can only be read once. In order to return the response to the browser and put it in the cache we have to clone it. So the original gets returned to the browser and the clone gets sent to the cache. They are each read once.</p> + +<p>The only trouble we have now is that if the request doesn’t match anything in the cache, and the network is not available, our request will still fail. Let’s provide a default fallback so that whatever happens, the user will at least get something:</p> + +<pre class="brush: js">this.addEventListener('fetch', function(event) { + event.respondWith( + caches.match(event.request).catch(function() { + return fetch(event.request).then(function(response) { + return caches.open('v1').then(function(cache) { + cache.put(event.request, response.clone()); + return response; + }); + }); + }).catch(function() { + return caches.match('/sw-test/gallery/myLittleVader.jpg'); + }) + ); +});</pre> + +<p>We have opted for this fallback image because the only updates that are likely to fail are new images, as everything else is depended on for installation in the <code>install</code> event listener we saw earlier.</p> + +<h2 id="Updated_code_pattern_suggestion">Updated code pattern suggestion</h2> + +<p>This uses more standard promise chaining and returns the response to the document without having to wait for <code>caches.open()</code> to resolve:</p> + +<pre class="brush: js">this.addEventListener('fetch', function(event) { + var response; + event.respondWith(caches.match(event.request).catch(function() { + return fetch(event.request); + }).then(function(r) { + response = r; + caches.open('v1').then(function(cache) { + cache.put(event.request, response); + }); + return response.clone(); + }).catch(function() { + return caches.match('/sw-test/gallery/myLittleVader.jpg'); + })); +});</pre> + +<h2 id="Membaharui_service_worker"><a id="Updating your service worker" name="Updating your service worker">Membaharui service worker</a></h2> + +<p>If your service worker has previously been installed, but then a new version of the worker is available on refresh or page load, the new version is installed in the background, but not yet activated. It is only activated when there are no longer any pages loaded that are still using the old service worker. As soon as there are no more such pages still loaded, the new service worker activates.</p> + +<p>You’ll want to update your <code>install</code> event listener in the new service worker to something like this (notice the new version number):</p> + +<pre class="brush: js">this.addEventListener('install', function(event) { + event.waitUntil( + caches.open('v2').then(function(cache) { + return cache.addAll([ + '/sw-test/', + '/sw-test/index.html', + '/sw-test/style.css', + '/sw-test/app.js', + '/sw-test/image-list.js', + + … + + // include other new resources for the new version... + ]); + }); + ); +});</pre> + +<p>While this happens, the previous version is still responsible for fetches. The new version is installing in the background. We are calling the new cache <code>v2</code>, so the previous <code>v1</code> cache isn't disturbed.</p> + +<p>When no pages are using the current version, the new worker activates and becomes responsible for fetches.</p> + +<h3 id="Deleting_old_caches">Deleting old caches</h3> + +<p>You also get an <code>activate</code> event. This is a generally used to do stuff that would have broken the previous version while it was still running, for example getting rid of old caches. This is also useful for removing data that is no longer needed to avoid filling up too much disk space — each browser has a hard limit on the amount of cache storage that a given service worker can use. The browser does its best to manage disk space, but it may delete the Cache storage for an origin. The browser will generally delete all of the data for an origin or none of the data for an origin.</p> + +<p>Promises passed into <code>waitUntil()</code> will block other events until completion, so you can rest assured that your clean-up operation will have completed by the time you get your first <code>fetch</code> event on the new cache.</p> + +<pre class="brush: js">this.addEventListener('activate', function(event) { + var cacheWhitelist = ['v2']; + + event.waitUntil( + caches.keys().then(function(keyList) { + return Promise.all(keyList.map(function(key) { + if (cacheWhitelist.indexOf(key) === -1) { + return caches.delete(key); + } + })); + }) + ); +});</pre> + +<h2 id="Dev_tools">Dev tools</h2> + +<p>Chrome has <code>chrome://inspect/#service-workers</code>, which shows current service worker activity and storage on a device, and <code>chrome://serviceworker-internals</code>, which shows more detail and allows you to start/stop/debug the worker process. In the future they will have throttling/offline modes to simulate bad or non-existent connections, which will be a really good thing.</p> + +<p>Firefox has also started to implement some useful tools related to service workers:</p> + +<ul> + <li>You can navigate to <a>about:serviceworkers</a> to see what SWs are registered and update/remove them.</li> + <li>When testing you can get around the HTTPS restriction by checking the "Enable Service Workers over HTTP (when toolbox is open)" option in the Firefox Devtools options (gear menu.)</li> +</ul> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Service Workers', '')}}</td> + <td>{{Spec2('Service Workers')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatChrome(40.0)}}</td> + <td>{{ CompatGeckoDesktop("33.0") }}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>24</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(40.0)}}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Service workers (and <a href="/en-US/docs/Web/API/Push_API">Push</a>) have been disabled in the <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR.)</p> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li><a href="https://serviceworke.rs/">The Service Worker Cookbook</a></li> + <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li> + <li>Download the <a href="https://mdn.mozillademos.org/files/12638/sw101.png">Service Workers 101 cheatsheet</a>.</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a></li> + <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li> +</ul> diff --git a/files/id/web/api/serviceworker/index.html b/files/id/web/api/serviceworker/index.html new file mode 100644 index 0000000000..26787c6031 --- /dev/null +++ b/files/id/web/api/serviceworker/index.html @@ -0,0 +1,157 @@ +--- +title: ServiceWorker +slug: Web/API/ServiceWorker +tags: + - API + - Draft + - Offline + - Referensi + - ServiceWorker +translation_of: Web/API/ServiceWorker +--- +<div>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</div> + +<p>Antarmuka <code>ServiceWorker</code> dari <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a> menyediakan referensi kepada service worker. Konteks multi browsing (mis. halaman, pekerja, dll.) dapat dikaitkan dengan service worker yang sama, masing - masing melalui objek <code>ServiceWorker</code> tersendiri.</p> + +<p>Objek <code>ServiceWorker</code> tersedia di properti {{domxref("ServiceWorkerRegistration.active")}} , dan properti {{domxref("ServiceWorkerContainer.controller")}} — ini adalah service worker yang aktif dan mengontrol halaman (service worker telah sukses terdaftar, dan halaman yang di kontrol telah di muat kembali.)</p> + +<p>Antarmuka <code>ServiceWorker</code> terbagi sebagai rangkaian siklus event — <code>install</code> dan <code>activate</code> — dan fungsional event termasuk <code>fetch</code>. Objek <code>ServiceWorker</code> memiliki keterkaitan {{domxref("ServiceWorker.state")}}, berdasarkan siklusnya.</p> + +<h2 id="Properti">Properti</h2> + +<p><em>Antarmuka <code>ServiceWorker</code> mewarisi properti dari induknya, {{domxref("Worker")}}.</em></p> + +<dl> + <dt>{{domxref("ServiceWorker.scriptURL")}} {{readonlyinline}}</dt> + <dd>Mengembalikan serialisasi script URL <code>ServiceWorker</code> didefinisikan sebagai bagian dari {{domxref("ServiceWorkerRegistration")}}. URL harus dari origin yang sama dengan dokumen yang mendaftarkan <code>ServiceWorker</code>.</dd> + <dt>{{domxref("ServiceWorker.state")}} {{readonlyinline}}</dt> + <dd>Mengembalikan status keadaan service worker. Akan mengembalikan salah satu dari nilai berikut: <code>installing</code>, <code>installed,</code> <code>activating</code>, <code>activated</code>, atau <code>redundant</code>.</dd> +</dl> + +<h3 id="Event_handlers">Event handlers</h3> + +<dl> + <dt>{{domxref("ServiceWorker.onstatechange")}} {{readonlyinline}}</dt> + <dd>Properti {{domxref("EventListener")}} dipanggil setiap kali event type <code>statechange</code> di jalankan; Pada dasarnya dijalankan setiap ada perubahan pada {{domxref("ServiceWorker.state")}}.</dd> +</dl> + +<h2 id="Method">Method</h2> + +<p><em>Antarmuka <code>ServiceWorker</code> mewarisi method dari induknya, {{domxref("Worker")}}, dengan pengecualian {{domxref("Worker.terminate")}} — tidak harus dapat diakses dari service workers.</em></p> + +<h2 id="Contoh">Contoh</h2> + +<p>Ini adalah potongan kode dari <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/registration-events/index.html">service worker registration-events sample</a> (<a href="https://googlechrome.github.io/samples/service-worker/registration-events/">live demo</a>). Kode memperhatikan setiap perubahan di {{domxref("ServiceWorker.state")}} dan mengembalikan nilainya.</p> + +<pre class="brush: js">if ('serviceWorker' in navigator) { + navigator.serviceWorker.register('service-worker.js', { + scope: './' + }).then(function (registration) { + var serviceWorker; + if (registration.installing) { + serviceWorker = registration.installing; + document.querySelector('#kind').textContent = 'Menginstall'; + } else if (registration.waiting) { + serviceWorker = registration.waiting; + document.querySelector('#kind').textContent = 'Mengunggu'; + } else if (registration.active) { + serviceWorker = registration.active; + document.querySelector('#kind').textContent = 'Aktif'; + } + if (serviceWorker) { + // logState(serviceWorker.state); + serviceWorker.addEventListener('statechange', function (e) { + // logState(e.target.state); + }); + } + }).catch (function (error) { + // Terjadi kesalahan saat mendaftarkan. File service-worker.js + // mungkin tidak tersedia atau terdapat sintaks yang error. + }); +} else { + // Browser ini tidak mendukung service worker. +}</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Service Workers', '#service-worker-obj', 'ServiceWorker')}}</td> + <td>{{Spec2('Service Workers')}}</td> + <td>Definisi inisial</td> + </tr> + </tbody> +</table> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatChrome(40.0)}}</td> + <td>{{CompatGeckoDesktop("44.0")}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>24</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("44.0")}}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(40.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Service workers (dan <a href="/en-US/docs/Web/API/Push_API">Push</a>) telah di nonaktifkan di <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR.)</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://serviceworke.rs">ServiceWorker Cookbook</a></li> + <li><a href="/id/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Menggunakan Service Workers</a></li> + <li><a href="https://github.com/mdn/sw-test">Contoh kode dasar Service workers</a></li> + <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li> + <li>{{jsxref("Promise", "Promises")}}</li> + <li><a href="/id/docs/Web/Guide/Performance/Using_web_workers">Menggunakan web worker</a></li> +</ul> diff --git a/files/id/web/api/serviceworkercontainer/index.html b/files/id/web/api/serviceworkercontainer/index.html new file mode 100644 index 0000000000..ab3f71a543 --- /dev/null +++ b/files/id/web/api/serviceworkercontainer/index.html @@ -0,0 +1,132 @@ +--- +title: ServiceWorkerContainer +slug: Web/API/ServiceWorkerContainer +tags: + - API + - Draft + - Interface + - NeedsTranslation + - Offline + - Reference + - Service Workers + - Service worker API + - ServiceWorkerContainer + - TopicStub + - Workers +translation_of: Web/API/ServiceWorkerContainer +--- +<p>{{APIRef("Service Workers API")}}</p> + +<p><span class="seoSummary">The <code>ServiceWorkerContainer</code> interface of the <a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a> provides an object representing the service worker as an overall unit in the network ecosystem, including facilities to register, unregister and update service workers, and access the state of service workers and their registrations.</span></p> + +<p>Most importantly, it exposes the {{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register()")}} method used to register service workers, and the {{domxref("ServiceWorkerContainer.controller")}} property used to determine whether or not the current page is actively controlled.</p> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{domxref("ServiceWorkerContainer.controller")}} {{readonlyinline}}</dt> + <dd>Returns a {{domxref("ServiceWorker")}} object if its state is <code>activated</code> (the same object returned by {{domxref("ServiceWorkerRegistration.active")}}). This property returns <code>null</code> during a force-refresh request (<em>Shift</em> + refresh) or if there is no active worker.</dd> +</dl> + +<dl> + <dt>{{domxref("ServiceWorkerContainer.ready")}} {{readonlyinline}}</dt> + <dd>Provides a way of delaying code execution until a service worker is active. It returns a {{jsxref("Promise")}} that will never reject, and which waits indefinitely until the {{domxref("ServiceWorkerRegistration")}} associated with the current page has an {{domxref("ServiceWorkerRegistration.active")}} worker. Once that condition is met, it resolves with the {{domxref("ServiceWorkerRegistration")}}.</dd> +</dl> + +<h2 id="Events">Events</h2> + +<dl> + <dt><code>controllerchange</code></dt> + <dd>Occurs when the document's associated {{domxref("ServiceWorkerRegistration")}} acquires a new {{domxref("ServiceWorkerRegistration.active","active")}} worker.<br> + Also available via the {{domxref("ServiceWorkerContainer.oncontrollerchange")}} property.</dd> + <dt><code>error</code></dt> + <dd>Fired whenever an error occurs in the associated service workers.<br> + Also available via the {{domxref("ServiceWorkerContainer.onerror")}} property.</dd> + <dt><code><a href="/en-US/docs/Web/API/ServiceWorkerContainer/message_event">message</a></code></dt> + <dd>Occurs when incoming messages are received by the {{domxref("ServiceWorkerContainer")}} object (e.g. via a {{domxref("MessagePort.postMessage()")}} call.)<br> + Also available via the {{domxref("ServiceWorkerContainer.onmessage")}} property.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register()")}} </dt> + <dd>Creates or updates a {{domxref("ServiceWorkerRegistration")}} for the given <code>scriptURL</code>.</dd> + <dt>{{domxref("ServiceWorkerContainer.getRegistration()")}}</dt> + <dd>Gets a {{domxref("ServiceWorkerRegistration")}} object whose scope matches the provided document URL. The method returns a {{jsxref("Promise")}} that resolves to a {{domxref("ServiceWorkerRegistration")}} or <code>undefined</code>. </dd> + <dt>{{domxref("ServiceWorkerContainer.getRegistrations()")}}</dt> + <dd>Returns all {{domxref("ServiceWorkerRegistration")}} objects associated with a <code>ServiceWorkerContainer</code> in an array. The method returns a {{jsxref("Promise")}} that resolves to an array of {{domxref("ServiceWorkerRegistration")}}. </dd> + <dt>{{domxref("ServiceWorkerContainer.startMessages()")}}</dt> + <dd>explicitly starts the flow of messages being dispatched from a service worker to pages under its control (e.g. sent via {{domxref("Client.postMessage()")}}). This can be used to react to sent messages earlier, even before that page's content has finished loading.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<p>The example below first checks to see if the browser supports service workers. If supported, the code registers the service worker and determines if the page is actively controlled by the service worker. If it isn't, it prompts the user to reload the page so the service worker can take control. The code also reports any registration failures.</p> + +<pre class="brush: js notranslate">if ('serviceWorker' in navigator) { + // Register a service worker hosted at the root of the + // site using the default scope. + navigator.serviceWorker.register('/sw.js').then(function(registration) { + console.log('Service worker registration succeeded:', registration); + + // At this point, you can optionally do something + // with registration. See https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration + }).catch(function(error) { + console.log('Service worker registration failed:', error); + }); + + // Independent of the registration, let's also display + // information about whether the current page is controlled + // by an existing service worker, and when that + // controller changes. + + // First, do a one-off check if there's currently a + // service worker in control. + if (navigator.serviceWorker.controller) { + console.log('This page is currently controlled by:', navigator.serviceWorker.controller); + } + + // Then, register a handler to detect when a new or + // updated service worker takes control. + navigator.serviceWorker.oncontrollerchange = function() { + console.log('This page is now controlled by:', navigator.serviceWorker.controller); + }; +} else { + console.log('Service workers are not supported.'); +}</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Service Workers', '#serviceworkercontainer', 'ServiceWorkerContainer')}}</td> + <td>{{Spec2('Service Workers')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("api.ServiceWorkerContainer")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Using Service Workers</a></li> + <li><a class="external external-icon" href="https://github.com/mdn/sw-test">Service workers basic code example</a></li> + <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li> + <li>{{jsxref("Promise")}}</li> + <li><a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Using web workers</a></li> +</ul> diff --git a/files/id/web/api/serviceworkerregistration/index.html b/files/id/web/api/serviceworkerregistration/index.html new file mode 100644 index 0000000000..6ce1b3c033 --- /dev/null +++ b/files/id/web/api/serviceworkerregistration/index.html @@ -0,0 +1,245 @@ +--- +title: ServiceWorkerRegistration +slug: Web/API/ServiceWorkerRegistration +tags: + - API + - Draft + - Interface + - NeedsTranslation + - Offline + - Reference + - Service Workers + - ServiceWorkerRegistration + - TopicStub + - Workers +translation_of: Web/API/ServiceWorkerRegistration +--- +<div> +<div>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</div> +</div> + +<p>The <code>ServiceWorkerRegistration</code> interface of the <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a> represents the service worker registration. You register a service worker to control one or more pages that share the same origin.</p> + +<p>The lifetime of a service worker registration is beyond that of the <code>ServiceWorkerRegistration</code> objects that represent them within the lifetime of their corresponding service worker clients. The browser maintains a persistent list of active <code>ServiceWorkerRegistration</code> objects.</p> + +<div class="note"> +<p><strong>Note</strong>: This feature is available in <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> +</div> + +<h2 id="Properties">Properties</h2> + +<p><em>Also implements properties from its parent interface, </em>{{domxref("EventTarget")}}.</p> + +<dl> + <dt>{{domxref("ServiceWorkerRegistration.scope")}} {{readonlyinline}}</dt> + <dd>Returns a unique identifier for a service worker registration. This must be on the same origin as the document that registers the {{domxref("ServiceWorker")}}.</dd> + <dt>{{domxref("ServiceWorkerRegistration.installing")}} <strong style="font-weight: bold;">{{readonlyinline}}</strong></dt> + <dd>Returns a service worker whose state is <code>installing</code>. This is initially set to <code>null</code>.</dd> + <dt>{{domxref("ServiceWorkerRegistration.waiting")}} <strong style="font-weight: bold;">{{readonlyinline}}</strong></dt> + <dd>Returns a service worker whose state is <code>installed</code>. This is initially set to <code>null</code>.</dd> + <dt>{{domxref("ServiceWorkerRegistration.active")}} <strong style="font-weight: bold;">{{readonlyinline}}</strong></dt> + <dd>Returns a service worker whose state is either <code>activating</code> or <code>activated</code>. This is initially set to <code>null</code>. An active worker will control a {{domxref("ServiceWorkerClient")}} if the client's URL falls within the scope of the registration (the <code>scope</code> option set when {{domxref("ServiceWorkerContainer.register")}} is first called.)</dd> + <dt>{{domxref("serviceWorkerRegistration.periodicSync")}} {{non-standard_inline}} {{readonlyinline}}</dt> + <dd>Returns a reference to the {{domxref("PeriodicSyncManager")}} interface, which manages periodic background synchronization processes.</dd> + <dt>{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}</dt> + <dd>Returns a reference to the {{domxref("PushManager")}} interface for managing push subscriptions including subscribing, getting an active subscription, and accessing push permission status.</dd> + <dt>{{domxref("ServiceWorkerRegistration.sync")}} <strong style="font-weight: bold; line-height: 19.0909080505371px;">{{non-standard_inline}} </strong>{{readonlyinline}} </dt> + <dd>Returns a reference to the {{domxref("SyncManager")}} interface, which manages background synchronization processes.</dd> +</dl> + +<h3 id="Event_handlers">Event handlers</h3> + +<dl> + <dt>{{domxref("ServiceWorkerRegistration.onupdatefound")}} {{readonlyinline}}</dt> + <dd>An <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventListener" title="This method is called whenever an event occurs of the type for which the EventListener interface was registered."><code>EventListener</code></a> property called whenever an event of type <code>updatefound</code> is fired; it is fired any time the {{domxref("ServiceWorkerRegistration.installing")}} property acquires a new service worker.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>Also implements methods from its parent interface, </em>{{domxref("EventTarget")}}.</p> + +<dl> + <dt>{{domxref("ServiceWorkerRegistration.getNotifications()")}}</dt> + <dd>Returns a {{jsxref("Promise")}} that resolves to an array of {{domxref("Notification")}} objects.</dd> + <dt>{{domxref("ServiceWorkerRegistration.showNotification()")}}</dt> + <dd>Displays the notification with the requested title.</dd> + <dt>{{domxref("ServiceWorkerRegistration.update()")}}</dt> + <dd>Checks the server for an updated version of the service worker without consulting caches.</dd> + <dt>{{domxref("ServiceWorkerRegistration.unregister()")}}</dt> + <dd>Unregisters the service worker registration and returns a promise (see {{jsxref("Promise")}}). The service worker will finish any ongoing operations before it is unregistered.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<p>This code snippet is from the <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/registration-events/index.html">service worker registration-events sample</a> (<a class="external external-icon" href="https://googlechrome.github.io/samples/service-worker/registration-events/">live demo</a>). The code checks to see if the browser supports service workers and if there's currently a service worker handling requests on this page for the current navigation.</p> + +<p>Any new service workers are registered; if there's an existing service worker, the code overrides its default scope so that the registration applies to the current directory and everything underneath it. The example also reports any registration failures.</p> + +<pre class="brush: js">if ('serviceWorker' in navigator) { + document.querySelector('#availability').innerText = 'are'; + document.querySelector('#controlled').innerText = navigator.serviceWorker.controller ? 'is' : 'is not'; + navigator.serviceWorker.register('service-worker.js', {scope: './'}).then(function(registration) { + document.querySelector('#register').textContent = 'succeeded'; + }).catch(function(error) { + document.querySelector('#register').textContent = 'failed: ' + error; + }); +} else { + document.querySelector('#availability').innerText = 'are not'; +}</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Service Workers', '#service-worker-registration-obj', 'ServiceWorkerRegistration')}}</td> + <td>{{Spec2('Service Workers')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('Push API', '#widl-ServiceWorkerRegistration-pushManager', 'PushManager')}}</td> + <td>{{Spec2('Push API')}}</td> + <td>Adds the {{domxref("PushManager","pushManager")}} property.</td> + </tr> + <tr> + <td>{{SpecName('Web Notifications')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Adds the {{domxref("ServiceWorkerRegistration.showNotification()","showNotification()")}} method and the {{domxref("ServiceWorkerRegistration.getNotifications()","getNotifications()")}} method.</td> + </tr> + <tr> + <td>{{SpecName('Background Sync')}}</td> + <td>{{Spec2('Background Sync')}}</td> + <td>Adds the {{domxref("ServiceWorkerRegistration.sync","sync")}} property.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(40.0)}}</td> + <td>{{ CompatGeckoDesktop("44.0") }}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Available in web workers</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("44.0")}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>getNotifications()</code>, <code>showNotification()</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("46.0")}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>sync</code> property</td> + <td>{{CompatChrome(49.0)}}</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoMobile("44.0") }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(40.0)}}</td> + </tr> + <tr> + <td>Available in web workers</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("44.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>getNotifications()</code>, <code>showNotification()</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("46.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>sync</code> property</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td>{{CompatChrome(49.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Service workers (and <a href="/en-US/docs/Web/API/Push_API">Push</a>) have been disabled in the <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR.)</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li> + <li><a href="https://github.com/mdn/sw-test">Service workers basic code example</a></li> + <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li> + <li>{{jsxref("Promise")}}</li> + <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li> +</ul> diff --git a/files/id/web/api/serviceworkerregistration/pushmanager/index.html b/files/id/web/api/serviceworkerregistration/pushmanager/index.html new file mode 100644 index 0000000000..57f61c1375 --- /dev/null +++ b/files/id/web/api/serviceworkerregistration/pushmanager/index.html @@ -0,0 +1,130 @@ +--- +title: ServiceWorkerRegistration.pushManager +slug: Web/API/ServiceWorkerRegistration/pushManager +tags: + - API + - Property + - Push + - PushManager + - ServiceWorker +translation_of: Web/API/ServiceWorkerRegistration/pushManager +--- +<div>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</div> + +<p>Properti <strong><code>pushManager</code></strong> dari interface {{domxref("ServiceWorkerRegistration")}} Mengembalikan sebuah referensi ke Interface {{domxref("PushManager")}} untuk mengatur push subscriptions; termasuk dukungan untuk berlangganan, mendapatkan langganan yang aktif, dan mengakses izin status push.</p> + +<h2 id="Syntax" name="Syntax" style="line-height: 30px; font-size: 2.14285714285714rem;">Sintaks</h2> + +<pre class="syntaxbox" style="font-size: 14px;">myPushManager = ServiceWorker.pushManager +</pre> + +<h3 id="Value">Value</h3> + +<p>Objek {{domxref("PushManager")}}.</p> + +<h2 id="Contoh">Contoh</h2> + +<pre class="brush: js">this.onpush = function(event) { + console.log(event.data); + // Dari sini kita bisa menyimpan data ke IndexedDB, mengirimnya ke setiap + // jendela yang terbuka, menampilkan notifikasi, dsb. +} + +navigator.serviceWorker.register('serviceworker.js').then( + function(serviceWorkerRegistration) { + serviceWorkerRegistration.pushManager.subscribe().then( + function(pushSubscription) { + console.log(pushSubscription.subscriptionId); + console.log(pushSubscription.endpoint); + // Detail langganan push dibutuhkan aplikasi + // server kini tersedia, dan dapat di kirimkan menggunakan, + // XMLHttpRequest misalnya. + }, function(error) { + // Pada saat pengembangan menampilkan log ke konsole sangatlah membantu + // Di lingkungan produksi juga dapat bermanfaat untuk mengirimkan + // informasi error kembali ke aplikasi server. + console.log(error); + } + ); + });</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Push API', '#pushmanager-interface', 'PushManager')}}</td> + <td>{{Spec2('Push API')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Browser">Kompabilitas Browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(42.0)}}</td> + <td>{{ CompatGeckoDesktop("44.0") }}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(42.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Service workers (dan <a href="/en-US/docs/Web/API/Push_API">Push</a>) telah dinonaktifkan di <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR.)</p> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Push_API">Push API</a></li> +</ul> diff --git a/files/id/web/api/speechsynthesis/index.html b/files/id/web/api/speechsynthesis/index.html new file mode 100644 index 0000000000..78a50f3f47 --- /dev/null +++ b/files/id/web/api/speechsynthesis/index.html @@ -0,0 +1,151 @@ +--- +title: SpeechSynthesis +slug: Web/API/SpeechSynthesis +tags: + - API + - Experimental + - Interface + - NeedsTranslation + - Reference + - SpeechSynthesis + - TopicStub + - Web Speech API + - speech + - synthesis +translation_of: Web/API/SpeechSynthesis +--- +<p>{{APIRef("Web Speech API")}}{{SeeCompatTable}}</p> + +<p>The <strong><code>SpeechSynthesis</code></strong> interface of the <a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a> is the controller interface for the speech service; this can be used to retrieve information about the synthesis voices available on the device, start and pause speech, and other commands besides.</p> + +<h2 id="Properties">Properties</h2> + +<p><em><code>SpeechSynthesis</code> also inherits properties from its parent interface, {{domxref("EventTarget")}}.</em></p> + +<dl> + <dt>{{domxref("SpeechSynthesis.paused")}} {{readonlyinline}}</dt> + <dd>A {{domxref("Boolean")}} that returns <code>true</code> if the <code>SpeechSynthesis</code> object is in a paused state.</dd> + <dt>{{domxref("SpeechSynthesis.pending")}} {{readonlyinline}}</dt> + <dd>A {{domxref("Boolean")}} that returns <code>true</code> if the utterance queue contains as-yet-unspoken utterances.</dd> + <dt>{{domxref("SpeechSynthesis.speaking")}} {{readonlyinline}}</dt> + <dd>A {{domxref("Boolean")}} that returns <code>true</code> if an utterance is currently in the process of being spoken — even if <code>SpeechSynthesis</code> is in a paused state.</dd> +</dl> + +<dl> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em><code>SpeechSynthesis</code> also inherits methods from its parent interface, {{domxref("EventTarget")}}.</em></p> + +<dl> + <dt>{{domxref("SpeechSynthesis.cancel()")}}</dt> + <dd>Removes all utterances from the utterance queue.</dd> + <dt>{{domxref("SpeechSynthesis.getVoices()")}}</dt> + <dd>Returns a list of {{domxref("SpeechSynthesisVoice")}} objects representing all the available voices on the current device.</dd> + <dt>{{domxref("SpeechSynthesis.pause()")}}</dt> + <dd>Puts the <code>SpeechSynthesis</code> object into a paused state.</dd> + <dt>{{domxref("SpeechSynthesis.resume()")}}</dt> + <dd>Puts the <code>SpeechSynthesis</code> object into a non-paused state: resumes it if it was already paused.</dd> + <dt>{{domxref("SpeechSynthesis.speak()")}}</dt> + <dd>Adds an {{domxref("SpeechSynthesisUtterance", "utterance")}} to the utterance queue; it will be spoken when any other utterances queued before it have been spoken.</dd> +</dl> + +<h2 id="Events">Events</h2> + +<p>Listen to this event using <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface.</p> + +<dl> + <dt><code><a href="/en-US/docs/Web/API/SpeechSynthesis/voiceschanged_event">voiceschanged</a></code></dt> + <dd>Fired when the list of {{domxref("SpeechSynthesisVoice")}} objects that would be returned by the {{domxref("SpeechSynthesis.getVoices()")}} method has changed.<br> + Also available via the <code><a href="/en-US/docs/Web/API/SpeechSynthesis/onvoiceschanged">onvoiceschanged</a></code> property.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<p>In our basic <a href="https://github.com/mdn/web-speech-api/tree/master/speak-easy-synthesis">Speech synthesiser demo</a>, we first grab a reference to the SpeechSynthesis controller using <code>window.speechSynthesis</code>. After defining some necessary variables, we retrieve a list of the voices available using {{domxref("SpeechSynthesis.getVoices()")}} and populate a select menu with them so the user can choose what voice they want.</p> + +<p>Inside the <code>inputForm.onsubmit</code> handler, we stop the form submitting with <a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a>, create a new {{domxref("SpeechSynthesisUtterance")}} instance containing the text from the text {{htmlelement("input")}}, set the utterance's voice to the voice selected in the {{htmlelement("select")}} element, and start the utterance speaking via the {{domxref("SpeechSynthesis.speak()")}} method.</p> + +<pre class="brush: js">var synth = window.speechSynthesis; + +var inputForm = document.querySelector('form'); +var inputTxt = document.querySelector('.txt'); +var voiceSelect = document.querySelector('select'); + +var pitch = document.querySelector('#pitch'); +var pitchValue = document.querySelector('.pitch-value'); +var rate = document.querySelector('#rate'); +var rateValue = document.querySelector('.rate-value'); + +var voices = []; + +function populateVoiceList() { + voices = synth.getVoices(); + + for(i = 0; i < voices.length ; i++) { + var option = document.createElement('option'); + option.textContent = voices[i].name + ' (' + voices[i].lang + ')'; + + if(voices[i].default) { + option.textContent += ' -- DEFAULT'; + } + + option.setAttribute('data-lang', voices[i].lang); + option.setAttribute('data-name', voices[i].name); + voiceSelect.appendChild(option); + } +} + +populateVoiceList(); +if (speechSynthesis.onvoiceschanged !== undefined) { + speechSynthesis.onvoiceschanged = populateVoiceList; +} + +inputForm.onsubmit = function(event) { + event.preventDefault(); + + var utterThis = new SpeechSynthesisUtterance(inputTxt.value); + var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name'); + for(i = 0; i < voices.length ; i++) { + if(voices[i].name === selectedOption) { + utterThis.voice = voices[i]; + } + } + utterThis.pitch = pitch.value; + utterThis.rate = rate.value; + synth.speak(utterThis); + + inputTxt.blur(); +}</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Web Speech API', '#tts-section', 'SpeechSynthesis')}}</td> + <td>{{Spec2('Web Speech API')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("api.SpeechSynthesis")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a></li> +</ul> diff --git a/files/id/web/api/speechsynthesis/onvoiceschanged/index.html b/files/id/web/api/speechsynthesis/onvoiceschanged/index.html new file mode 100644 index 0000000000..3a5a3f799c --- /dev/null +++ b/files/id/web/api/speechsynthesis/onvoiceschanged/index.html @@ -0,0 +1,74 @@ +--- +title: Kk +slug: Web/API/SpeechSynthesis/onvoiceschanged +translation_of: Web/API/SpeechSynthesis/onvoiceschanged +--- +<div>{{APIRef("Web Speech API")}}{{SeeCompatTable}}</div> + +<p>The <code><strong>onvoiceschanged</strong></code> property of the {{domxref("SpeechSynthesis")}} interface represents an event handler that will run when the list of {{domxref("SpeechSynthesisVoice")}} objects that would be returned by the {{domxref("SpeechSynthesis.getVoices()")}} method has changed (when the <a href="/en-US/docs/Web/API/SpeechSynthesis/voiceschanged_event">voiceschanged</a> event fires.)</p> + +<p>This may occur when speech synthesis is being done on the server-side and the voices list is being determined asynchronously, or when client-side voices are installed/uninstalled while a speech synthesis application is running.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">speechSynthesisInstance.onvoiceschanged = function() { ... }; +</pre> + +<h2 id="Examples">Examples</h2> + +<p>This could be used to populate a list of voices that the user can choose between when the event fires (see our <a href="https://github.com/mdn/web-speech-api/blob/gh-pages/speak-easy-synthesis/script.js">Speak easy synthesis demo</a>.) Note that Firefox doesn't support it at present, and will just return a list of voices when {{domxref("SpeechSynthesis.getVoices()")}} is fired. With Chrome however, you have to wait for the event to fire before populating the list, hence the bottom if statement seen below.</p> + +<pre class="brush: js">var voices = []; + +function populateVoiceList() { + voices = synth.getVoices(); + + for(i = 0; i < voices.length ; i++) { + var option = document.createElement('option'); + option.textContent = voices[i].name + ' (' + voices[i].lang + ')'; + + if(voices[i].default) { + option.textContent += ' -- DEFAULT'; + } + + option.setAttribute('data-lang', voices[i].lang); + option.setAttribute('data-name', voices[i].name); + voiceSelect.appendChild(option); + } +} + +populateVoiceList(); +if (speechSynthesis.onvoiceschanged !== undefined) { + speechSynthesis.onvoiceschanged = populateVoiceList; +}</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Web Speech API', '#dom-speechsynthesis-onvoiceschanged', 'onvoiceschanged')}}</td> + <td>{{Spec2('Web Speech API')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("api.SpeechSynthesis.onvoiceschanged")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a></li> +</ul> diff --git a/files/id/web/api/storage/index.html b/files/id/web/api/storage/index.html new file mode 100644 index 0000000000..2231fe2bd8 --- /dev/null +++ b/files/id/web/api/storage/index.html @@ -0,0 +1,100 @@ +--- +title: Storage +slug: Web/API/Storage +translation_of: Web/API/Storage +--- +<div>{{APIRef("Web Storage API")}}</div> + +<p>The <strong><code>Storage</code></strong> interface of the <a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage API</a> provides access to a particular domain's session or local storage. It allows, for example, the addition, modification, or deletion of stored data items.</p> + +<p>To manipulate, for instance, the session storage for a domain, a call to {{domxref("Window.sessionStorage")}} is made; whereas for local storage the call is made to {{domxref("Window.localStorage")}}.</p> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{domxref("Storage.length")}} {{readonlyInline}}</dt> + <dd>Returns an integer representing the number of data items stored in the <code>Storage</code> object.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{domxref("Storage.key()")}}</dt> + <dd>When passed a number <code>n</code>, this method will return the name of the nth key in the storage.</dd> +</dl> + +<dl> + <dt>{{domxref("Storage.getItem()")}}</dt> + <dd>When passed a key name, will return that key's value.</dd> + <dt>{{domxref("Storage.setItem()")}}</dt> + <dd>When passed a key name and value, will add that key to the storage, or update that key's value if it already exists.</dd> + <dt>{{domxref("Storage.removeItem()")}}</dt> + <dd>When passed a key name, will remove that key from the storage.</dd> + <dt>{{domxref("Storage.clear()")}}</dt> + <dd>When invoked, will empty all keys out of the storage.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<p>Here we access a <code>Storage</code> object by calling <code>localStorage</code>. We first test whether the local storage contains data items using <code>!localStorage.getItem('bgcolor')</code>. If it does, we run a function called <code>setStyles()</code> that grabs the data items using {{domxref("Storage.getItem()")}} and uses those values to update page styles. If it doesn't, we run another function, <code>populateStorage()</code>, which uses {{domxref("Storage.setItem()")}} to set the item values, then runs <code>setStyles()</code>.</p> + +<pre class="brush: js">if(!localStorage.getItem('bgcolor')) { + populateStorage(); +} +setStyles(); + +function populateStorage() { + localStorage.setItem('bgcolor', document.getElementById('bgcolor').value); + localStorage.setItem('font', document.getElementById('font').value); + localStorage.setItem('image', document.getElementById('image').value); +} + +function setStyles() { + var currentColor = localStorage.getItem('bgcolor'); + var currentFont = localStorage.getItem('font'); + var currentImage = localStorage.getItem('image'); + + document.getElementById('bgcolor').value = currentColor; + document.getElementById('font').value = currentFont; + document.getElementById('image').value = currentImage; + + htmlElem.style.backgroundColor = '#' + currentColor; + pElem.style.fontFamily = currentFont; + imgElem.setAttribute('src', currentImage); +}</pre> + +<div class="note"> +<p><strong>Note</strong>: To see this running as a complete working example, see our <a href="https://mdn.github.io/dom-examples/web-storage/">Web Storage Demo</a>.</p> +</div> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'webstorage.html#the-storage-interface', 'Storage')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Storage")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></li> + <li>{{domxref("Window.localStorage")}}</li> + <li>{{domxref("Window.sessionStorage")}}</li> + <li>{{domxref("CacheStorage")}}</li> +</ul> diff --git a/files/id/web/api/webgl_api/index.html b/files/id/web/api/webgl_api/index.html new file mode 100644 index 0000000000..3450359705 --- /dev/null +++ b/files/id/web/api/webgl_api/index.html @@ -0,0 +1,235 @@ +--- +title: WebGL +slug: Web/API/WebGL_API +tags: + - Referensi + - WebGL +translation_of: Web/API/WebGL_API +--- +<div>{{WebGLSidebar}}</div> + +<div class="summary"> +<p>WebGL (Web Graphics Library) merupakan JavaScript API untuk merender grafik interaktif dalam bentuk 3D dan 2D pada setiap web browser yang kompitable tanpa menggunakan plug-in. WebGL juga memperkenalkan sebuah API yang berkaitan erat dengan OpenGL ES 2.0 yang dapat digunakan di elemen {{HTMLElement("canvas")}} HTML5.</p> +</div> + +<p>Dukungan WebGL telah tersedia di <a href="/en-US/Firefox" title="Firefox 4 for developers">Firefox</a> 4+, <a href="http://www.google.com/chrome/" title="http://www.google.com/chrome/">Google Chrome</a> 9+, <a href="http://www.opera.com/" title="http://www.opera.com/">Opera</a> 12+, <a href="http://www.apple.com/safari/" title="http://www.apple.com/fr/safari/">Safari </a>5.1+ dan <a href="http://windows.microsoft.com/en-us/internet-explorer/browser-ie" title="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a> 11+; namum, perangkat pengguna juga harus memiliki perangkat keras yang mendukung fitur ini.</p> + +<p>Elemen {{HTMLElement("canvas")}} juga digunakan oleh <a href="/id/docs/Web/API/Canvas_API">Canvas 2D</a> untuk menggambar grafik 2D pada halaman web.</p> + +<h2 id="Referensi">Referensi</h2> + +<h3 id="Standar_Antarmuka">Standar Antarmuka</h3> + +<div class="index"> +<ul> + <li>{{domxref("WebGLRenderingContext")}}</li> + <li>{{domxref("WebGL2RenderingContext")}} {{experimental_inline}}</li> + <li>{{domxref("WebGLActiveInfo")}}</li> + <li>{{domxref("WebGLBuffer")}}</li> + <li>{{domxref("WebGLContextEvent")}}</li> + <li>{{domxref("WebGLFramebuffer")}}</li> + <li>{{domxref("WebGLProgram")}}</li> + <li>{{domxref("WebGLQuery")}} {{experimental_inline}}</li> + <li>{{domxref("WebGLRenderbuffer")}}</li> + <li>{{domxref("WebGLSampler")}} {{experimental_inline}}</li> + <li>{{domxref("WebGLShader")}}</li> + <li>{{domxref("WebGLShaderPrecisionFormat")}}</li> + <li>{{domxref("WebGLSync")}} {{experimental_inline}}</li> + <li>{{domxref("WebGLTexture")}}</li> + <li>{{domxref("WebGLTransformFeedback")}} {{experimental_inline}}</li> + <li>{{domxref("WebGLUniformLocation")}}</li> + <li>{{domxref("WebGLVertexArrayObject")}} {{experimental_inline}}</li> +</ul> +</div> + +<h3 id="Ekstensi">Ekstensi</h3> + +<div class="index"> +<ul> + <li>{{domxref("ANGLE_instanced_arrays")}}</li> + <li>{{domxref("EXT_blend_minmax")}}</li> + <li>{{domxref("EXT_color_buffer_half_float")}}</li> + <li>{{domxref("EXT_disjoint_timer_query")}}</li> + <li>{{domxref("EXT_frag_depth")}}</li> + <li>{{domxref("EXT_sRGB")}}</li> + <li>{{domxref("EXT_shader_texture_lod")}}</li> + <li>{{domxref("EXT_texture_filter_anisotropic")}}</li> + <li>{{domxref("OES_element_index_uint")}}</li> + <li>{{domxref("OES_standard_derivatives")}}</li> + <li>{{domxref("OES_texture_float")}}</li> + <li>{{domxref("OES_texture_float_linear")}}</li> + <li>{{domxref("OES_texture_half_float")}}</li> + <li>{{domxref("OES_texture_half_float_linear")}}</li> + <li>{{domxref("OES_vertex_array_object")}}</li> + <li>{{domxref("WEBGL_color_buffer_float")}}</li> + <li>{{domxref("WEBGL_compressed_texture_atc")}}</li> + <li>{{domxref("WEBGL_compressed_texture_es3")}}</li> + <li>{{domxref("WEBGL_compressed_texture_etc1")}}</li> + <li>{{domxref("WEBGL_compressed_texture_pvrtc")}}</li> + <li>{{domxref("WEBGL_compressed_texture_s3tc")}}</li> + <li>{{domxref("WEBGL_debug_renderer_info")}}</li> + <li>{{domxref("WEBGL_debug_shaders")}}</li> + <li>{{domxref("WEBGL_depth_texture")}}</li> + <li>{{domxref("WEBGL_draw_buffers")}}</li> + <li>{{domxref("WEBGL_lose_context")}}</li> +</ul> +</div> + +<h3 id="Event">Event</h3> + +<ul> + <li>{{Event("webglcontextlost")}}</li> + <li>{{Event("webglcontextrestored")}}</li> + <li>{{Event("webglcontextcreationerror")}}</li> +</ul> + +<h3 id="Tipe_dan_konstanta">Tipe dan konstanta</h3> + +<ul> + <li><a href="/id/docs/Web/API/WebGL_API/Constants">WebGL constants</a></li> + <li><a href="/id/docs/Web/API/WebGL_API/Types">WebGL types</a></li> +</ul> + +<h2 id="Paduan_dan_tutorial">Paduan dan tutorial</h2> + +<ul> + <li><a href="/id/docs/Web/API/WebGL_API/Tutorial">WebGL tutorial</a>: Paduan untuk pemula mengenai konsep inti WebGL. Tempat yang disarankan untuk anda yang sebelumnya belum memiliki pengalaman di WebGL.</li> + <li><a href="/id/docs/Web/API/WebGL_API/WebGL_best_practices">WebGL best practices</a>: Tips dan saran untuk meningkatkan konten WebGL anda.</li> + <li><a href="/id/docs/Web/API/WebGL_API/Using_Extensions">Using extensions</a>: Cara menggunakan Ekstensi yang tersedia di WebGL.</li> +</ul> + +<h3 id="Tutorial_lanjutan">Tutorial lanjutan</h3> + +<ul> + <li><a href="/id/docs/Web/API/WebGL_API/WebGL_model_view_projection">WebGL model view projection</a>: Penjelasan rinci dari tiga inti matrik yang biasa digunakan untuk mewakili pandangan objek 3D: model, pandangan dan proyeksi matrik.</li> + <li><a href="/id/docs/Web/API/WebGL_API/Matrix_math_for_the_web">Matrix math for the web</a>: Paduan mengetahui cara matrik 3D transform bekerja, dan bisa digunakan di web — baik untuk kalkulasi untuk WebGL dan CSS3 transforms.</li> +</ul> + +<h2 id="Sumber">Sumber</h2> + +<ul> + <li><a href="https://www.youtube.com/embed/H4c8t6myAWU/?feature=player_detailpage">Raw WebGL: Mengenal WebGL</a> Bahasan dari Nick Desaulniers yang memperkenalkan dasar WebGL. Tempat yang disarankan jika anda belum pernah mencoba pemrogrman grafis.</li> + <li><a href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">Situs Khronos WebGL</a> Website utama WebGL di Khronos Group.</li> + <li><a href="http://learningwebgl.com/blog/?page_id=1217" title="http://learningwebgl.com/blog/">Belajar WebGL</a> Situs tutorial tentang cara menggunakan WebGL.</li> + <li><a href="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/" title="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/">WebGL Fundamental</a> Tutorial dasar dan fundamental WebGL.</li> + <li><a href="http://webglplayground.net" title="http://webglplayground.net">WebGL playground</a> Alat online untuk membuat dan berbagi proyek WebGL. Disarankan untuk percobaan dan eksperimen.</li> + <li><a href="http://www.webglacademy.com" title="http://www.webglacademy.com">WebGL Academy</a> Sebuah editor HTML/JavaScript dengan tutorial untuk belajar dasar pemrograman WebGL.</li> + <li><a href="http://webglstats.com/">WebGL Stats</a> Situs dengan statistik tentang kemampuan WebGL di browser pada platform yang berbeda.</li> +</ul> + +<h3 id="Pustaka">Pustaka</h3> + +<ul> + <li><a class="link-https" href="https://github.com/toji/gl-matrix" title="https://github.com/toji/gl-matrix">glMatrix</a> Pustaka JavaScript Matrix dan Vector untuk aplikasi WebGL dengan performa tinggi</li> + <li><a href="http://sylvester.jcoglan.com/" title="http://sylvester.jcoglan.com/">Sylvester</a> Pustaka open source untuk memanipulasi matrik dan vektor. Tidak di optimalkan untuk WebGL namun sangat kuat.</li> +</ul> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('WebGL')}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Initial definition. Based on OpenGL ES 2.0</td> + </tr> + <tr> + <td>{{SpecName('WebGL2')}}</td> + <td>{{Spec2('WebGL2')}}</td> + <td>Builds on top of WebGL1. Based on OpenGL ES 3.0.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0')}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 3.0')}}</td> + <td>{{Spec2('OpenGL ES 3.0')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_browser">Kompabilitas browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>9</td> + <td>11</td> + <td>12<sup>[1]</sup></td> + <td>5.1<sup>[1]</sup></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Chrome for Android</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>4</td> + <td>25<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>12<sup>[1]</sup></td> + <td>8.1</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Implementasi dari fitur ini adalah eksperimental.</p> + +<h3 id="Catatan_kompabilitas">Catatan kompabilitas</h3> + +<p>Selain browser, GPU sendiri juga dibutuhkan untuk mendukung fitur ini. Contohnya, S3 Texture Compression (S3TC) hanya tersedia di tablet berbasis Tegra. Hampir setiap browser membuat konteks WebGL tersedia dari nama konteks <code>webgl</code>, tapi untuk yang lebih lama juga memerlukan <code>experimental-webgl</code>. Selain itu , nantinya <a href="/en-US/docs/Web/API/WebGL2RenderingContext">WebGL 2</a> sepenuhnya kompitable dengan yang sebelumnya dan akan memiliki nama konteks <code>webgl2</code>.</p> + +<h3 id="Catatan_Gecko">Catatan Gecko</h3> + +<h4 id="Pengujian_dan_debungging_WebGL">Pengujian dan debungging WebGL</h4> + +<p>Dimulai dari Gecko 10.0 {{geckoRelease("10.0")}}, disana tersedia dua pengaturan yang memungkinkan anda mengontrol kemampuan WebGL untuk keperluan percobaan:</p> + +<dl> + <dt><code>webgl.min_capability_mode</code></dt> + <dd>Properti Boolean yang, jika <code>true</code>, mengaktifkan mode kemampuan minimum. Pada mode ini, WebGL hanya diatur untuk mendukung fitur pengaturan minimum dan kemampuan yang dibutuhkan oleh spesifikasi WebGL. Memungkinkan anda untuk memastikan bahwa kode WebGL anda akan bekerja untuk setiap perangkat atau browser, tergantung dari kemampuan mereka. Nilai defaultnya adalah <code>false</code>.</dd> + <dt><code>webgl.disable_extensions</code></dt> + <dd>Properti Boolean yang, jika <code>true</code>, menonaktifkan semua ekstensi WebGL. Nilai defaultnya <code>false</code>.</dd> +</dl> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Canvas_API">Canvas</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/getSupportedExtensions#Browser_compatibility">Compatibility info about WebGL extensions</a></li> +</ul> diff --git a/files/id/web/api/webrtc_api/index.html b/files/id/web/api/webrtc_api/index.html new file mode 100644 index 0000000000..6d9aa7392c --- /dev/null +++ b/files/id/web/api/webrtc_api/index.html @@ -0,0 +1,185 @@ +--- +title: WebRTC API +slug: Web/API/WebRTC_API +translation_of: Web/API/WebRTC_API +--- +<div>{{APIRef("WebRTC")}}</div> + +<p><span class="seoSummary"><strong>WebRTC</strong> (<em>Web Real-Time Communications</em>) merupakan teknologi yang memungkinkan situs dan aplikasi berbasis web menangkap dan mengirimkan audio atau video, serta bertukar data antar peramban web tanpa memerlukan adanya perantara.</span> Kumpulan standar di dalam WebRTC membuat pertukaran data dan telekonferensi secara <em>peer-to-peer</em> dapat terjadi tanpa perlu memasang <em>plugins</em> atau aplikasi pihak ketiga.</p> + +<p>WebRTC terdiri dari berbagai API dan protokol yang saling terkait sehingga dapat bekerja sebagaimana mestinya. Dokumentasi ini akan membantu anda untuk memahami dasar-dasar WebRTC, bagaimana mengatur dan menggunakan sambungan data dan media, serta hal lainnya.</p> + +<h2 id="Konsep_dan_cara_penggunaan_WebRTC">Konsep dan cara penggunaan WebRTC</h2> + +<p>WebRTC memiliki beberapa fungsi, begitu halnya juga dengan <em>Media Capture and Streams</em> ({{domxref("MediaDevices")}}) API. Keduanya menghadirkan kemampuan multimedia di dalam web, misalnya audio dan video <em>conferencing</em>, pertukaran <em>file</em>, <em>identity management</em>, serta interaksi pada jaringan telepon dengan cara mengirimkan sinyal {{Glossary("DTMF")}}. Sambungan antar <em>peer</em> dapat terbentuk tanpa <em>plugins</em> tambahan, dan sering kali dapat terbentuk tanpa memerlukan <em>server</em> perantara.</p> + +<p>Sambungan antar <em>peer</em> dibuat menggunakan - dan direpresentasikan oleh - {{domxref("RTCPeerConnection")}}. Ketika sebuah sambungan telah terbentuk dan terbuka, <em>stream</em> media ({{domxref("MediaStream")}}) atau <em>channel</em> data ({{domxref("RTCDataChannel")}}) dapat ditambahkan ke dalam sambungan <em>peer</em>.</p> + +<p><em>Stream</em> media terdiri dari beberapa <em>track</em> media, yang direpresentasikan oleh sebuah objek {{domxref("MediaStreamTrack")}}, yang berisi salah satu tipe media, yaitu audio, video, dan teks (misalnya <em>subtitle</em> atau nama judul). Umumnya <em>stream</em> terdiri dari setidaknya satu <em>track</em> audio bahkan juga satu <em>track</em> video, dan dapat digunakan untuk mengirim dan menerima media secara <em>live</em> atau dapat berupa rekaman media (misalnya <em>streaming</em> film).</p> + +<p>Anda juga dapat menggunakan sambungan antar <em>peer</em> untuk bertukar sembarang data biner menggunakan {{domxref("RTCDataChannel")}}. Sambungan ini dapat digunakan untuk informasi <em>back-channel</em>, <em>metadata</em>, <em>gaming</em>, <em>file transfer</em>, bahkan sebagai jalur utama pertukaran data.</p> + +<p><em><strong>artikel ini memerlukan informasi yang lebih lanjut serta tautan untuk panduan dan tutorial yang relevan</strong></em></p> + +<h2 id="WebRTC_interfaces">WebRTC interfaces</h2> + +<p>Because WebRTC provides interfaces that work together to accomplish a variety of tasks, we have divided up the interfaces in the list below by category. Please see the sidebar for an alphabetical list.</p> + +<h3 id="Connection_setup_and_management">Connection setup and management</h3> + +<p>These interfaces are used to set up, open, and manage WebRTC connections.</p> + +<dl> + <dt>{{domxref("RTCPeerConnection")}}</dt> + <dd>Represents a WebRTC connection between the local computer and a remote peer. It is used to handle efficient streaming of data between the two peers.</dd> + <dt>{{domxref("RTCDataChannel")}}</dt> + <dd>Represents a bi-directional data channel between two peers of a connection.</dd> + <dt>{{domxref("RTCDataChannelEvent")}}</dt> + <dd>Represents events that occur while attaching a {{domxref("RTCDataChannel")}} to a {{domxref("RTCPeerConnection")}}. The only event sent with this interface is {{event("datachannel")}}.</dd> + <dt>{{domxref("RTCSessionDescription")}}</dt> + <dd>Represents the parameters of a session. Each <code>RTCSessionDescription</code> consists of a description <a href="/en-US/docs/Web/API/RTCSessionDescription/type" title="The property RTCSessionDescription.type is an enum of type RTCSdpType describing the description's type."><code>type</code></a> indicating which part of the offer/answer negotiation process it describes and of the <a href="/en-US/docs/Glossary/SDP" title="SDP: SDP (Session Description Protocol) is the standard describing a peer-to-peer connection. SDP contains the codec, source address, and timing information of audio and video.">SDP</a> descriptor of the session.</dd> + <dt>{{domxref("RTCStatsReport")}}</dt> + <dd>Provides information detailing statistics for a connection or for an individual track on the connection; the report can be obtained by calling {{domxref("RTCPeerConnection.getStats()")}}.</dd> + <dt>{{domxref("RTCIceCandidate")}}</dt> + <dd>Represents a candidate internet connectivity establishment (ICE) server for establishing an {{domxref("RTCPeerConnection")}}.</dd> + <dt>{{domxref("RTCIceTransport")}}</dt> + <dd>Represents information about an internet connectivity establishment (ICE) transport.</dd> + <dt>{{domxref("RTCPeerConnectionIceEvent")}}</dt> + <dd>Represents events that occurs in relation to ICE candidates with the target, usually an {{domxref("RTCPeerConnection")}}. Only one event is of this type: {{event("icecandidate")}}.</dd> + <dt>{{domxref("RTCRtpSender")}}</dt> + <dd>Manages the encoding and transmission of data for a {{domxref("MediaStreamTrack")}} on an {{domxref("RTCPeerConnection")}}.</dd> + <dt>{{domxref("RTCRtpReceiver")}}</dt> + <dd>Manages the reception and decoding of data for a {{domxref("MediaStreamTrack")}} on an {{domxref("RTCPeerConnection")}}.</dd> + <dt>{{domxref("RTCTrackEvent")}}</dt> + <dd>Indicates that a new incoming {{domxref("MediaStreamTrack")}} was created and an associated {{domxref("RTCRtpReceiver")}} object was added to the {{domxref("RTCPeerConnection")}} object.</dd> +</dl> + +<h3 id="Identity_and_security">Identity and security</h3> + +<p>The WebRTC API includes a number of interfaces to manage security and identity.</p> + +<dl> + <dt>{{domxref("RTCIdentityProvider")}}</dt> + <dd>Enables a user agent is able to request that an identity assertion be generated or validated.</dd> + <dt>{{domxref("RTCIdentityAssertion")}}</dt> + <dd>Represents the identity of the a remote peer of the current connection. If no peer has yet been set and verified this interface returns <code>null</code>. Once set it can't be changed.</dd> + <dt>{{domxref("RTCIdentityProviderRegistrar")}}</dt> + <dd>Registers an identity provider (idP).</dd> + <dt>{{domxref("RTCIdentityEvent")}}</dt> + <dd>Represents an identity assertion generated by an identity provider (idP). This is usually for an {{domxref("RTCPeerConnection")}}. The only event sent with this type is {{event("identityresult")}}.</dd> + <dt>{{domxref("RTCIdentityErrorEvent")}}</dt> + <dd>Represents an error associated with the identity provider (idP). This is usually for an {{domxref("RTCPeerConnection")}}. Two events are sent with this type: {{event("idpassertionerror")}} and {{event("idpvalidationerror")}}.</dd> + <dt>{{domxref("RTCCertificate")}}</dt> + <dd>Represents a certificate that an {{domxref("RTCPeerConnection")}} uses to authenticate.</dd> +</dl> + +<h3 id="Telephony">Telephony</h3> + +<p>These interfaces are related to interactivity with public-switched telephone networks (PTSNs).</p> + +<dl> + <dt>{{domxref("RTCDTMFSender")}}</dt> + <dd>Manages the encoding and transmission of dual-tone multi-frequency (DTMF) signaling for an {{domxref("RTCPeerConnection")}}.</dd> + <dt>{{domxref("RTCDTMFToneChangeEvent")}}</dt> + <dd>Indicates an occurrence of a of dual-tone multi-frequency (DTMF). This event does not bubble (except where otherwise stated) and is not cancelable (except where otherwise stated).</dd> +</dl> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Web/API/WebRTC_API/Protocols">Introduction to WebRTC protocols</a></dt> + <dd>This article introduces the protocols on top of which the WebRTC API is built.</dd> + <dt><a href="/en-US/docs/Web/API/WebRTC_API/Connectivity">WebRTC connectivity</a></dt> + <dd>A guide to how WebRTC connections work and how the various protocols and interfaces can be used together to build powerful communication apps.</dd> + <dt><a href="/en-US/docs/Web/API/WebRTC_API/Session_lifetime">Lifetime of a WebRTC session</a></dt> + <dd>WebRTC lets you build peer-to-peer communication of arbitrary data, audio, or video—or any combination thereof—into a browser application. In this article, we'll look at the lifetime of a WebRTC session, from establishing the connection all the way through closing the connection when it's no longer needed.</dd> + <dt><a href="/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">Signaling and two-way video calling</a></dt> + <dd>A tutorial and example which turbs a WebSocket-based chat system created for a previous example and adds support for opening video calls among participants. The chat server's WebSocket connection is used for WebRTC signaling.</dd> + <dt><a href="/en-US/docs/Web/API/WebRTC_API/Using_data_channels">Using WebRTC data channels</a></dt> + <dd>This guide covers how you can use a peer connection and an associated {{domxref("RTCDataChannel")}} to exchange arbitrary data between two peers.</dd> + <dt><a href="/en-US/docs/Web/API/WebRTC_API/Using_DTMF">Using DTMF with WebRTC</a></dt> + <dd>WebRTC's support for interacting with gateways that link to old-school telephone systems includes support for sending DTMF tones using the {{domxref("RTCDTMFSender")}} interface. This guide shows how to do so.</dd> +</dl> + +<h2 id="Tutorials">Tutorials</h2> + +<dl> + <dt><a href="/en-US/docs/Web/API/WebRTC_API/adapter.js">Improving compatibility using WebRTC adapter.js</a></dt> + <dd>The WebRTC organization <a href="https://github.com/webrtc/adapter/">provides on GitHub the WebRTC adapter</a> to work around compatibility issues in different browsers' WebRTC implementations. The adapter is a JavaScript shim which lets your code to be written to the specification so that it will "just work" in all browsers with WebRTC support.</dd> + <dt><a href="/en-US/docs/Web/API/WebRTC_API/Taking_still_photos">Taking still photos with WebRTC</a></dt> + <dd>This article shows how to use WebRTC to access the camera on a computer or mobile phone with WebRTC support and take a photo with it.</dd> + <dt><a href="/en-US/docs/Web/API/WebRTC_API/Simple_RTCDataChannel_sample">A simple RTCDataChannel sample</a></dt> + <dd>The {{domxref("RTCDataChannel")}} interface is a feature which lets you open a channel between two peers over which you may send and receive arbitrary data. The API is intentionally similar to the <a href="/en-US/docs/Web/API/WebSocket_API">WebSocket API</a>, so that the same programming model can be used for each.</dd> +</dl> + +<h2 id="Resources">Resources</h2> + +<h3 id="Protocols">Protocols</h3> + +<h4 id="WebRTC-proper_protocols">WebRTC-proper protocols</h4> + +<ul> + <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-alpn/"><cite>Application Layer Protocol Negotiation for Web Real-Time Communications</cite></a></li> + <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-audio/"><cite>WebRTC Audio Codec and Processing Requirements</cite></a></li> + <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-data-channel/"><cite>RTCWeb Data Channels</cite></a></li> + <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-data-protocol/"><cite>RTCWeb Data Channel Protocol</cite></a></li> + <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-rtp-usage/"><cite>Web Real-Time Communication (WebRTC): Media Transport and Use of RTP</cite></a></li> + <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-security-arch/"><cite>WebRTC Security Architecture</cite></a></li> + <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-transports/"><cite>Transports for RTCWEB</cite></a></li> +</ul> + +<h4 id="Related_supporting_protocols">Related supporting protocols</h4> + +<ul> + <li><a href="https://tools.ietf.org/html/rfc5245">Interactive Connectivity Establishment (ICE): A Protocol for Network Address Translator (NAT) Traversal for Offer/Answer Protocol</a></li> + <li><a href="https://tools.ietf.org/html/rfc5389"><cite>Session Traversal Utilities for NAT (STUN)</cite></a></li> + <li><a href="https://tools.ietf.org/html/rfc7064"><cite>URI Scheme for the Session Traversal Utilities for NAT (STUN) Protocol</cite></a></li> + <li><a href="https://tools.ietf.org/html/rfc7065"><cite>Traversal Using Relays around NAT (TURN) Uniform Resource Identifiers</cite></a></li> + <li><a href="https://tools.ietf.org/html/rfc3264"><cite>An Offer/Answer Model with Session Description Protocol (SDP)</cite></a></li> + <li><a href="https://datatracker.ietf.org/doc/draft-ietf-tram-turn-third-party-authz/"><cite>Session Traversal Utilities for NAT (STUN) Extension for Third Party Authorization</cite></a></li> +</ul> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('WebRTC 1.0')}}</td> + <td>{{Spec2('WebRTC 1.0')}}</td> + <td>The initial definition of the API of WebRTC.</td> + </tr> + <tr> + <td>{{SpecName('Media Capture')}}</td> + <td>{{Spec2('Media Capture')}}</td> + <td>The initial definition of the object conveying the stream of media content.</td> + </tr> + <tr> + <td>{{SpecName('Media Capture DOM Elements')}}</td> + <td>{{Spec2('Media Capture DOM Elements')}}</td> + <td>The initial definition on how to obtain stream of content from DOM Elements</td> + </tr> + </tbody> +</table> + +<p>In additions to these specifications defining the API needed to use WebRTC, there are several protocols, listed under <a href="#Protocols">resources</a>.</p> + +<h2 class="Related_Topics" id="See_also">See also</h2> + +<ul> + <li>{{domxref("MediaDevices")}}</li> + <li>{{domxref("MediaStreamEvent")}}</li> + <li>{{domxref("MediaStreamConstraints")}}</li> + <li>{{domxref("MediaStreamTrack")}}</li> + <li>{{domxref("MessageEvent")}}</li> + <li>{{domxref("MediaStream")}}</li> + <li><a href="https://hacks.mozilla.org/2015/06/firefox-multistream-and-renegotiation-for-jitsi-videobridge/">Firefox multistream and renegotiation for Jitsi Videobridge</a></li> + <li><a href="https://hacks.mozilla.org/2015/04/peering-through-the-webrtc-fog-with-socketpeer/">Peering Through the WebRTC Fog with SocketPeer</a></li> + <li><a href="https://hacks.mozilla.org/2014/04/inside-the-party-bus-building-a-web-app-with-multiple-live-video-streams-interactive-graphics/">Inside the Party Bus: Building a Web App with Multiple Live Video Streams + Interactive Graphics</a></li> +</ul> diff --git a/files/id/web/api/window/getselection/index.html b/files/id/web/api/window/getselection/index.html new file mode 100644 index 0000000000..274aa85b2d --- /dev/null +++ b/files/id/web/api/window/getselection/index.html @@ -0,0 +1,100 @@ +--- +title: Window.getSelection() +slug: Web/API/Window/getSelection +tags: + - API + - API Pilihan + - DOM + - Metode + - Pilihan + - Refrensi + - Window +translation_of: Web/API/Window/getSelection +--- +<div>{{ ApiRef() }}</div> + +<p><strong><code>Window.getSelection()</code></strong> adalah metode {{domxref("Selection")}} yang menggambarkan teks yang ditandai oleh pengguna atau posisi sekarang.</p> + +<h2 id="Syntak">Syntak</h2> + +<pre class="syntaxbox"><em>selection</em> = <em>window</em>.getSelection();</pre> + +<h3 id="Hasil_Output">Hasil Output</h3> + +<p>Objek {{domxref("Selection")}}</p> + +<p>Ketika berganti ke string, lebih baik menggunakan string kosong (<strong><code>""</code></strong>) atau menggunakan {{domxref("Selection.toString()")}}, hasil output adalah teks yang dipilih.</p> + +<p>Ketika memanggil sebuah {{htmlelement("iframe")}} ini tidak akan ditampilkan (misalnya <code>display: none</code> telah diatur) Firefox akan menampilkan <code>null</code>, sedangkan browser lain akan menampilkan objek {{domxref("Selection")}} dengan {{domxref("Selection.type")}} yang diatur ke <code>None</code>.</p> + +<h2 id="Contoh">Contoh</h2> + +<pre class="brush:js">function foo() { + var selObj = window.getSelection(); + alert(selObj); + var selRange = selObj.getRangeAt(0); + // do stuff with the range +}</pre> + +<h2 id="Catatan">Catatan</h2> + +<h3 id="Representasi_dari_objek_Selection">Representasi dari objek Selection</h3> + +<p>Dalam JavaScript, ketika sebuah objek dimasukan ke function yang membutuhkan string (seperti {{ Domxref("window.alert()") }} atau {{ Domxref("document.write()") }}), objek metode {{jsxref("Object.toString", "toString()")}} akan dipanggil dan hasilnya akan dikembalikan ke function tersebut. Ini akan membuat objek dapat tampil sebagai string ketika digunakan oleh function lainnya ketika ini adalah objek dan metode yang benar.</p> + +<p>Pada contoh berikut, <code>selObj.toString()</code> akan otomatis dipanggil ketika melewati {{domxref("window.alert()")}}. Bagaimanapun, mencoba menggunakan properti atau metode JavaScript <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="JS/String">String</a> seperti <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/length" title="JS/String.length">length</a></code> atau <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substr" title="JS/String.substr">substr</a></code> secara langsung pada objek {{domxref ("Selection")}} akan menghasilkan kesalahan jika tidak memiliki properti atau metode dan dapat mengembalikan hasil yang tidak terduga jika itu benar. Untuk menggunakan objek Selection sebagai string, panggil metode toString () secara langsung:</p> + +<pre class="brush:js;gutter:false;">var selectedText = selObj.toString();</pre> + +<ul> + <li><code>selObj</code> adalah objek <code>Selection</code>.</li> + <li><code>selectedText</code> adalah sebuah string (Selected text).</li> +</ul> + +<h3 id="Objek_terhubung">Objek terhubung</h3> + +<p>Kamu bisa memanggil {{domxref("Document.getSelection()")}}, yang mana ini bekerja seperti <code>Window.getSelection()</code>.</p> + +<p>Perlu diingat, bahwa saat ini <code>getSelection()</code> tidak bekerja pada elemen {{htmlelement("textarea")}} and {{htmlelement("input")}} di Firefox. Properti {{domxref("HTMLInputElement.setSelectionRange()")}} atau <code>selectionStart</code> dan <code>selectionEnd</code> yang dapat menangani hal ini.</p> + +<p>Perhatikan juga perbedaan atara <em>selection</em> dan <em>focus</em>. {{domxref("Document.activeElement")}} menampilkan elemen yang sedang difokus.</p> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Selection API", "#extensions-to-window-interface", "Window.getSelection()")}}</td> + <td>{{Spec2("Selection API")}}</td> + <td>New spec.</td> + </tr> + <tr> + <td>{{SpecName("HTML Editing", "#dom-window-getselection", "Window.getSelection()")}}</td> + <td>{{Spec2("HTML Editing")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Window.getSelection")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Selection_API">Selection API</a></li> + <li>{{domxref("Selection")}}</li> + <li>{{domxref("Range")}}</li> + <li>{{domxref("Document.getSelection()")}}</li> + <li>{{domxref("HTMLInputElement.setSelectionRange()")}}</li> +</ul> diff --git a/files/id/web/api/window/index.html b/files/id/web/api/window/index.html new file mode 100644 index 0000000000..79736ccf64 --- /dev/null +++ b/files/id/web/api/window/index.html @@ -0,0 +1,479 @@ +--- +title: Window +slug: Web/API/Window +tags: + - API + - DOM + - Interface + - JavaScript + - NeedsTranslation + - Reference + - TopicStub + - Window +translation_of: Web/API/Window +--- +<p>{{APIRef}}</p> + +<p><span class="seoSummary">The <code>window</code> object represents a window containing a DOM document; the <code>document</code> property points to the <a href="/en-US/docs/DOM/document">DOM document</a> loaded in that window.</span> A window for a given document can be obtained using the {{Domxref("document.defaultView")}} property.</p> + +<p>This section provides a brief reference for all of the methods, properties, and events available through the DOM <code>window</code> object. The <code>window</code> object implements the <code>Window</code> interface, which in turn inherits from the <code><a href="http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-AbstractView">AbstractView</a></code> interface. Some additional global functions, namespaces, objects, interfaces, and constructors, not typically associated with the window, but available on it, are listed in the <a href="/en-US/docs/JavaScript/Reference">JavaScript Reference</a> and <a href="/en-US/docs/Web/API/Document_Object_Model" title="/en-US/docs/Web/API/Document_Object_Model">DOM Reference</a>.</p> + +<p>In a tabbed browser, such as Firefox, each tab contains its own <code>window</code> object (and if you're writing an extension, the browser window itself is a separate window too - see <a href="/en-US/docs/Working_with_windows_in_chrome_code#Content_windows">Working with windows in chrome code</a> for more information). That is, the <code>window</code> object is not shared between tabs in the same window. Some methods, namely {{Domxref("window.resizeTo")}} and {{Domxref("window.resizeBy")}} apply to the whole window and not to the specific tab the <code>window</code> object belongs to. Generally, anything that can't reasonably pertain to a tab pertains to the window instead.</p> + +<p>{{InheritanceDiagram}}</p> + +<h2 id="Properties">Properties</h2> + +<p><em>This interface inherits properties from the {{domxref("EventTarget")}} interface and implements properties from the {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("WindowEventHandlers")}} mixins.</em></p> + +<p>Note that properties which are objects (e.g.,. for overriding the prototype of built-in elements) are listed in a separate section below.</p> + +<dl> + <dt>{{domxref("Window.applicationCache")}} {{readOnlyInline}} {{gecko_minversion_inline("1.9")}}</dt> + <dd>An {{domxref("OfflineResourceList")}} object providing access to the offline resources for the window.</dd> + <dt>{{domxref("Window.closed")}} {{Non-standard_inline}}{{readOnlyInline}}</dt> + <dd>This property indicates whether the current window is closed or not.</dd> + <dt>{{domxref("Window.console")}} {{ReadOnlyInline}}</dt> + <dd>Returns a reference to the console object which provides access to the browser's debugging console.</dd> + <dt>{{domxref("Window.content")}} and Window._content {{Non-standard_inline}} {{obsolete_inline}}{{ReadOnlyInline}}</dt> + <dd>Returns a reference to the content element in the current window. Since Firefox 57 (initially Nightly-only), both versions are only available from chrome (privileged) code, and not available to the web anymore.</dd> + <dt>{{domxref("Window.controllers")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt> + <dd>Returns the XUL controller objects for the current chrome window.</dd> + <dt>{{domxref("Window.crypto")}} {{readOnlyInline}}</dt> + <dd>Returns the browser crypto object.</dd> + <dt>{{domxref("Window.defaultStatus")}} {{Obsolete_inline("gecko23")}}</dt> + <dd>Gets/sets the status bar text for the given window.</dd> + <dt>{{domxref("Window.devicePixelRatio")}} {{non-standard_inline}}{{ReadOnlyInline}}</dt> + <dd>Returns the ratio between physical pixels and device independent pixels in the current display.</dd> + <dt>{{domxref("Window.dialogArguments")}} {{Fx_minversion_inline(3)}} {{ReadOnlyInline}}</dt> + <dd>Gets the arguments passed to the window (if it's a dialog box) at the time {{domxref("window.showModalDialog()")}} was called. This is an {{Interface("nsIArray")}}.</dd> + <dt>{{domxref("Window.directories")}} {{obsolete_inline}}</dt> + <dd>Synonym of {{domxref("window.personalbar")}}</dd> + <dt>{{domxref("Window.document")}} {{ReadOnlyInline}}</dt> + <dd>Returns a reference to the document that the window contains.</dd> + <dt>{{domxref("Window.frameElement")}} {{readOnlyInline}}</dt> + <dd>Returns the element in which the window is embedded, or null if the window is not embedded.</dd> + <dt>{{domxref("Window.frames")}} {{readOnlyInline}}</dt> + <dd>Returns an array of the subframes in the current window.</dd> + <dt>{{domxref("Window.fullScreen")}} {{gecko_minversion_inline("1.9")}}</dt> + <dd>This property indicates whether the window is displayed in full screen or not.</dd> + <dt>{{domxref("Window.globalStorage")}} {{gecko_minversion_inline("1.8.1")}} {{Non-standard_inline}} {{Obsolete_inline("gecko13")}}</dt> + <dd>Unsupported since Gecko 13 (Firefox 13). Use {{domxref("Window.localStorage")}} instead.<br> + Was: Multiple storage objects that are used for storing data across multiple pages.</dd> + <dt>{{domxref("Window.history")}} {{ReadOnlyInline}}</dt> + <dd>Returns a reference to the history object.</dd> + <dt>{{domxref("Window.innerHeight")}} {{readOnlyInline}}</dt> + <dd>Gets the height of the content area of the browser window including, if rendered, the horizontal scrollbar.</dd> + <dt>{{domxref("Window.innerWidth")}} {{readOnlyInline}}</dt> + <dd>Gets the width of the content area of the browser window including, if rendered, the vertical scrollbar.</dd> + <dt>{{domxref("Window.isSecureContext")}} {{readOnlyInline}}</dt> + <dd>Indicates whether a context is capable of using features that require secure contexts.</dd> + <dt>{{domxref("Window.length")}} {{readOnlyInline}}</dt> + <dd>Returns the number of frames in the window. See also {{domxref("window.frames")}}.</dd> + <dt>{{domxref("Window.location")}}</dt> + <dd>Gets/sets the location, or current URL, of the window object.</dd> + <dt>{{domxref("Window.locationbar")}} {{ReadOnlyInline}}</dt> + <dd>Returns the locationbar object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.localStorage")}} {{readOnlyInline}}{{gecko_minversion_inline("1.9.1")}}</dt> + <dd>Returns a reference to the local storage object used to store data that may only be accessed by the origin that created it.</dd> + <dt>{{domxref("Window.menubar")}} {{ReadOnlyInline}}</dt> + <dd>Returns the menubar object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.messageManager")}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Returns the <a href="/en-US/docs/The_message_manager">message manager</a> object for this window.</dd> + <dt>{{domxref("Window.mozAnimationStartTime")}} {{ReadOnlyInline}}{{gecko_minversion_inline("2.0")}} {{Deprecated_inline}}</dt> + <dd>The time in milliseconds since epoch at which the current animation cycle began.</dd> + <dt>{{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}}{{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}</dt> + <dd>Returns the horizontal (X) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See <code>mozScreenPixelsPerCSSPixel</code> in {{interface("nsIDOMWindowUtils")}} for a conversion factor to adapt to screen pixels if needed.</dd> + <dt>{{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}</dt> + <dd>Returns the vertical (Y) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See <code>mozScreenPixelsPerCSSPixel</code> for a conversion factor to adapt to screen pixels if needed.</dd> + <dt>{{domxref("Window.mozPaintCount")}} {{non-standard_inline}}{{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Returns the number of times the current document has been rendered to the screen in this window. This can be used to compute rendering performance.</dd> + <dt>{{domxref("Window.name")}}</dt> + <dd>Gets/sets the name of the window.</dd> + <dt>{{domxref("Window.navigator")}} {{readOnlyInline}}</dt> + <dd>Returns a reference to the navigator object.</dd> + <dt>{{domxref("Window.opener")}}</dt> + <dd>Returns a reference to the window that opened this current window.</dd> + <dt>{{domxref("Window.orientation")}}{{non-standard_inline}}{{deprecated_inline}}{{readOnlyInline}}</dt> + <dd>Returns the orientation in degrees (in 90 degree increments) of the viewport relative to the device's natural orientation.</dd> + <dt>{{domxref("Window.outerHeight")}} {{readOnlyInline}}</dt> + <dd>Gets the height of the outside of the browser window.</dd> + <dt>{{domxref("Window.outerWidth")}} {{readOnlyInline}}</dt> + <dd>Gets the width of the outside of the browser window.</dd> + <dt>{{domxref("Window.scrollX","Window.pageXOffset")}} {{readOnlyInline}}</dt> + <dd>An alias for {{domxref("window.scrollX")}}.</dd> + <dt>{{domxref("Window.scrollY","Window.pageYOffset")}}{{readOnlyInline}}</dt> + <dd>An alias for {{domxref("window.scrollY")}}</dd> + <dt>{{domxref("Window.sessionStorage")}} {{readOnlyInline}}</dt> + <dd>Returns a reference to the session storage object used to store data that may only be accessed by the origin that created it.</dd> + <dt>{{domxref("Window.parent")}} {{readOnlyInline}}</dt> + <dd>Returns a reference to the parent of the current window or subframe.</dd> + <dt>{{domxref("Window.performance")}} {{readOnlyInline}}</dt> + <dd>Returns a {{domxref("Performance")}} object, which includes the {{domxref("Performance.timing", "timing")}} and {{domxref("Performance.navigation", "navigation")}} attributes, each of which is an object providing <a href="/en-US/docs/Navigation_timing">performance-related</a> data. See also <a href="/en-US/docs/Web/API/Navigation_timing_API/Using_Navigation_Timing">Using Navigation Timing</a> for additional information and examples.</dd> + <dt>{{domxref("Window.personalbar")}} {{readOnlyInline}}</dt> + <dd>Returns the personalbar object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.pkcs11")}} {{obsolete_inline(29)}}</dt> + <dd>Formerly provided access to install and remove PKCS11 modules.</dd> + <dt>{{domxref("Window.returnValue")}} {{Fx_minversion_inline(3)}}</dt> + <dd>The return value to be returned to the function that called {{domxref("window.showModalDialog()")}} to display the window as a modal dialog.</dd> + <dt>{{domxref("Window.screen")}} {{readOnlyInline}}</dt> + <dd>Returns a reference to the screen object associated with the window.</dd> + + <dt>{{domxref("Window.screenX")}} {{readOnlyInline}}</dt> + <dd>Returns the horizontal distance of the left border of the user's browser from the left side of the screen.</dd> + <dt>{{domxref("Window.screenY")}} {{readOnlyInline}}</dt> + <dd>Returns the vertical distance of the top border of the user's browser from the top side of the screen.</dd> + <dt>{{domxref("Window.scrollbars")}} {{readOnlyInline}}</dt> + <dd>Returns the scrollbars object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.scrollMaxX")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt> + <dd>The maximum offset that the window can be scrolled to horizontally, that is the document width minus the viewport width.</dd> + <dt>{{domxref("Window.scrollMaxY")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt> + <dd>The maximum offset that the window can be scrolled to vertically (i.e., the document height minus the viewport height).</dd> + <dt>{{domxref("Window.scrollX")}} {{readOnlyInline}}</dt> + <dd>Returns the number of pixels that the document has already been scrolled horizontally.</dd> + <dt>{{domxref("Window.scrollY")}} {{readOnlyInline}}</dt> + <dd>Returns the number of pixels that the document has already been scrolled vertically.</dd> + <dt>{{domxref("Window.self")}} {{ReadOnlyInline}}</dt> + <dd>Returns an object reference to the window object itself.</dd> + <dt>{{domxref("Window.sessionStorage")}} {{Fx_minversion_inline("2.0")}}</dt> + <dd>Returns a storage object for storing data within a single page session.</dd> + <dt>{{domxref("Window.sidebar")}} {{non-standard_inline}}{{ReadOnlyInline}}</dt> + <dd>Returns a reference to the window object of the sidebar.</dd> + <dt>{{domxref("Window.speechSynthesis")}} {{ReadOnlyInline}}</dt> + <dd>Returns a {{domxref("SpeechSynthesis")}} object, which is the entry point into using <a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a> speech synthesis functionality.</dd> + <dt>{{domxref("Window.status")}}</dt> + <dd>Gets/sets the text in the statusbar at the bottom of the browser.</dd> + <dt>{{domxref("Window.statusbar")}} {{readOnlyInline}}</dt> + <dd>Returns the statusbar object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.toolbar")}} {{readOnlyInline}}</dt> + <dd>Returns the toolbar object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.top")}} {{readOnlyInline}}</dt> + <dd>Returns a reference to the topmost window in the window hierarchy. This property is read only.</dd> + <dt>{{domxref("Window.visualViewport")}} {{readOnlyInline}}</dt> + <dd>Returns a {{domxref("VisualViewport")}} object which represents the visual viewport for a given window.</dd> + <dt>{{domxref("Window.window")}} {{ReadOnlyInline}}</dt> + <dd>Returns a reference to the current window.</dd> + <dt><code>window[0]</code>,<code> window[1]</code>, etc.</dt> + <dd>Returns a reference to the <code>window</code> object in the frames. See {{domxref("Window.frames")}} for more details.</dd> +</dl> + +<h3 id="Properties_implemented_from_elsewhere">Properties implemented from elsewhere</h3> + +<dl> + <dt>{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}</dt> + <dd>Returns the {{domxref("CacheStorage")}} object associated with the current context. This object enables functionality such as storing assets for offline use, and generating custom responses to requests.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}</dt> + <dd>Provides a mechanism for applications to asynchronously access capabilities of indexed databases; returns an {{domxref("IDBFactory")}} object.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}</dt> + <dd>Returns a boolean indicating whether the current context is secure (<code>true</code>) or not (<code>false</code>).</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}</dt> + <dd>Returns the global object's origin, serialized as a string. (This does not yet appear to be implemented in any browser.)</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>This interface inherits methods from the {{domxref("EventTarget")}} interface and implements methods from {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("EventTarget")}}.</em></p> + +<dl> + <dt>{{domxref("Window.alert()")}}</dt> + <dd>Displays an alert dialog.</dd> + + <dt>{{domxref("Window.back()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Moves back one in the window history.</dd> + <dt>{{domxref("Window.blur()")}}</dt> + <dd>Sets focus away from the window.</dd> + <dt>{{domxref("Window.cancelAnimationFrame()")}} {{experimental_inline}}</dt> + <dd>Enables you to cancel a callback previously scheduled with {{domxref("Window.requestAnimationFrame")}}.</dd> + <dt>{{domxref("Window.cancelIdleCallback()")}} {{experimental_inline}}</dt> + <dd>Enables you to cancel a callback previously scheduled with {{domxref("Window.requestIdleCallback")}}.</dd> + <dt>{{domxref("Window.captureEvents()")}} {{Deprecated_inline}}</dt> + <dd>Registers the window to capture all events of the specified type.</dd> + <dt>{{domxref("Window.clearImmediate()")}}</dt> + <dd>Cancels the repeated execution set using <code>setImmediate</code>.</dd> + <dt>{{domxref("Window.close()")}}</dt> + <dd>Closes the current window.</dd> + <dt>{{domxref("Window.confirm()")}}</dt> + <dd>Displays a dialog with a message that the user needs to respond to.</dd> + <dt>{{domxref("Window.disableExternalCapture()")}} {{obsolete_inline(24)}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.dispatchEvent()")}}</dt> + <dd>Used to trigger an event.</dd> + <dt>{{domxref("Window.dump()")}} {{Non-standard_inline}}</dt> + <dd>Writes a message to the console.</dd> + <dt>{{domxref("Window.enableExternalCapture()")}} {{obsolete_inline(24)}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.find()")}}</dt> + <dd>Searches for a given string in a window.</dd> + <dt>{{domxref("Window.focus()")}}</dt> + <dd>Sets focus on the current window.</dd> + <dt>{{domxref("Window.forward()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Moves the window one document forward in the history.</dd> + <dt>{{domxref("Window.getAttention()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Flashes the application icon.</dd> + <dt>{{domxref("Window.getAttentionWithCycleCount()")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.getComputedStyle()")}}</dt> + <dd>Gets computed style for the specified element. Computed style indicates the computed values of all CSS properties of the element.</dd> + <dt>{{domxref("Window.getDefaultComputedStyle()")}} {{Non-standard_inline}}</dt> + <dd>Gets default computed style for the specified element, ignoring author stylesheets.</dd> + <dt>{{domxref("Window.getSelection()")}}</dt> + <dd>Returns the selection object representing the selected item(s).</dd> + <dt>{{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Returns the browser to the home page.</dd> + <dt>{{domxref("Window.matchMedia()")}} {{gecko_minversion_inline("6.0")}}</dt> + <dd>Returns a {{domxref("MediaQueryList")}} object representing the specified media query string.</dd> + <dt>{{domxref("Window.maximize()")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.minimize()")}} (top-level XUL windows only)</dt> + <dd>Minimizes the window.</dd> + <dt>{{domxref("Window.moveBy()")}}</dt> + <dd>Moves the current window by a specified amount.</dd> + <dt>{{domxref("Window.moveTo()")}}</dt> + <dd>Moves the window to the specified coordinates.</dd> + <dt>{{domxref("Window.open()")}}</dt> + <dd>Opens a new window.</dd> + <dt>{{domxref("Window.openDialog()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Opens a new dialog window.</dd> + <dt>{{domxref("Window.postMessage()")}} {{Fx_minversion_inline(3)}}</dt> + <dd>Provides a secure means for one window to send a string of data to another window, which need not be within the same domain as the first.</dd> + <dt>{{domxref("Window.print()")}}</dt> + <dd>Opens the Print Dialog to print the current document.</dd> + <dt>{{domxref("Window.prompt()")}}</dt> + <dd>Returns the text entered by the user in a prompt dialog.</dd> + <dt>{{domxref("Window.releaseEvents()")}} {{Non-standard_inline}} {{Deprecated_inline}}</dt> + <dd>Releases the window from trapping events of a specific type.</dd> + <dt>{{domxref("Window.requestAnimationFrame()")}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Tells the browser that an animation is in progress, requesting that the browser schedule a repaint of the window for the next animation frame.</dd> + <dt>{{domxref("Window.requestIdleCallback()")}} {{experimental_inline}}</dt> + <dd>Enables the scheduling of tasks during a browser's idle periods.</dd> + <dt>{{domxref("Window.resizeBy()")}}</dt> + <dd>Resizes the current window by a certain amount.</dd> + <dt>{{domxref("Window.resizeTo()")}}</dt> + <dd>Dynamically resizes window.</dd> + <dt>{{domxref("Window.restore()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.routeEvent()")}} {{obsolete_inline(24)}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.scroll()")}}</dt> + <dd>Scrolls the window to a particular place in the document.</dd> + <dt>{{domxref("Window.scrollBy()")}}</dt> + <dd>Scrolls the document in the window by the given amount.</dd> + <dt>{{domxref("Window.scrollByLines()")}} {{Non-standard_inline}}</dt> + <dd>Scrolls the document by the given number of lines.</dd> + <dt>{{domxref("Window.scrollByPages()")}} {{Non-standard_inline}}</dt> + <dd>Scrolls the current document by the specified number of pages.</dd> + <dt>{{domxref("Window.scrollTo()")}}</dt> + <dd>Scrolls to a particular set of coordinates in the document.</dd> + <dt>{{domxref("Window.setCursor()")}} {{Non-standard_inline}} (top-level XUL windows only)</dt> + <dd>Changes the cursor for the current window</dd> + <dt>{{domxref("Window.setImmediate()")}}</dt> + <dd>Executes a function after the browser has finished other heavy tasks</dd> + <dt>{{domxref("Window.setResizable()")}} {{Non-standard_inline}}</dt> + <dd>Toggles a user's ability to resize a window.</dd> + <dt>{{domxref("Window.sizeToContent()")}} {{Non-standard_inline}}</dt> + <dd>Sizes the window according to its content.</dd> + <dt>{{domxref("Window.stop()")}}</dt> + <dd>This method stops window loading.</dd> + <dt>{{domxref("Window.updateCommands()")}} {{Non-standard_inline}}</dt> + <dd>Updates the state of commands of the current chrome window (UI).</dd> +</dl> + +<h3 id="Methods_implemented_from_elsewhere">Methods implemented from elsewhere</h3> + +<dl> + <dt>{{domxref("EventTarget.addEventListener()")}}</dt> + <dd>Register an event handler to a specific event type on the window.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.atob()")}}</dt> + <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.btoa()")}}</dt> + <dd>Creates a base-64 encoded ASCII string from a string of binary data.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}</dt> + <dd>Cancels the repeated execution set using {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}</dt> + <dd>Cancels the delayed execution set using {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}</dt> + <dd>Accepts a variety of different image sources, and returns a {{domxref("Promise")}} which resolves to an {{domxref("ImageBitmap")}}. Optionally the source is cropped to the rectangle of pixels originating at <em>(sx, sy)</em> with width sw, and height sh.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.fetch()")}}</dt> + <dd>Starts the process of fetching a resource from the network.</dd> + <dt>{{domxref("EventTarget.removeEventListener")}}</dt> + <dd>Removes an event listener from the window.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}</dt> + <dd>Schedules a function to execute every time a given number of milliseconds elapses.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}</dt> + <dd>Schedules a function to execute in a given amount of time.</dd> +</dl> + +<h3 id="Obsolete_methods">Obsolete methods</h3> + +<dl> + <dt>{{domxref("Window.showModalDialog()")}} {{obsolete_inline}}</dt> + <dd>Displays a modal dialog. <strong>This method was removed completely in Chrome 43, and Firefox 55.</strong></dd> +</dl> + +<h2 id="Event_handlers">Event handlers</h2> + +<p>These are properties of the window object that can be set to establish event handlers for the various things that can happen in the window that might be of interest.</p> + +<p><em>This interface inherits event handlers from the {{domxref("EventTarget")}} interface and implements event handlers from {{domxref("WindowEventHandlers")}}.</em></p> + +<div class="note"> +<p><strong>Note:</strong> Starting in {{Gecko("9.0")}}, you can now use the syntax <code>if ("onabort" in window)</code> to determine whether or not a given event handler property exists. This is because event handler interfaces have been updated to be proper web IDL interfaces. See <a href="/en-US/docs/DOM/DOM_event_handlers">DOM event handlers</a> for details.</p> +</div> + +<dl> + <dt>{{domxref("GlobalEventHandlers.onabort")}}</dt> + <dd>Called when the loading of a resource has been aborted, such as by a user canceling the load while it is still in progress</dd> + <dt>{{domxref("WindowEventHandlers.onafterprint")}}</dt> + <dd>Called when the print dialog box is closed. See {{event("afterprint")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.onbeforeprint")}}</dt> + <dd>Called when the print dialog box is opened. See {{event("beforeprint")}} event.</dd> + <dt>{{domxref("Window.onbeforeinstallprompt")}}</dt> + <dd>An event handler property dispatched before a user is prompted to save a web site to a home screen on mobile.</dd> + <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt> + <dd>An event handler property for before-unload events on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onblur")}}</dt> + <dd>Called after the window loses focus, such as due to a popup.</dd> + <dt>{{domxref("GlobalEventHandlers.onchange")}}</dt> + <dd>An event handler property for change events on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onclick")}}</dt> + <dd>Called after the ANY mouse button is pressed & released</dd> + <dt>{{domxref("GlobalEventHandlers.ondblclick")}}</dt> + <dd>Called when a double click is made with ANY mouse button.</dd> + <dt>{{domxref("GlobalEventHandlers.onclose")}}</dt> + <dd>Called after the window is closed</dd> + <dt>{{domxref("GlobalEventHandlers.oncontextmenu")}}</dt> + <dd>Called when the RIGHT mouse button is pressed</dd> + <dt>{{domxref("Window.ondevicelight")}}</dt> + <dd>An event handler property for any ambient light levels changes</dd> + <dt>{{domxref("Window.ondevicemotion")}} {{gecko_minversion_inline("6.0")}}</dt> + <dd>Called if accelerometer detects a change (For mobile devices)</dd> + <dt>{{domxref("Window.ondeviceorientation")}} {{gecko_minversion_inline("6.0")}}</dt> + <dd>Called when the orientation is changed (For mobile devices)</dd> + <dt>{{domxref("Window.ondeviceorientationabsolute")}} {{non-standard_inline}} Chrome only</dt> + <dd>An event handler property for any device orientation changes.</dd> + <dt>{{domxref("Window.ondeviceproximity")}}</dt> + <dd>An event handler property for device proximity event</dd> + <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt> + <dd>Called when a resource fails to load OR when an error occurs at runtime. See {{event("error")}} event.</dd> + <dt>{{domxref("GlobalEventHandlers.onfocus")}}</dt> + <dd>Called after the window receives or regains focus. See {{event("focus")}} events.</dd> + <dt>{{domxref("WindowEventHandlers.onhashchange")}} {{gecko_minversion_inline("1.9.2")}}</dt> + <dd>An event handler property for {{event('hashchange')}} events on the window; called when the part of the URL after the hash mark ("#") changes.</dd> + <dt>{{domxref("Window.onappinstalled")}}</dt> + <dd>Called when the page is installed as a webapp. See {{event('appinstalled')}} event.</dd> + <dt>{{domxref("Window.ongamepadconnected")}}</dt> + <dd>Represents an event handler that will run when a gamepad is connected (when the {{event('gamepadconnected')}} event fires).</dd> + <dt>{{domxref("Window.ongamepaddisconnected")}}</dt> + <dd>Represents an event handler that will run when a gamepad is disconnected (when the {{event('gamepaddisconnected')}} event fires).</dd> + <dt>{{domxref("Window.oninput")}}</dt> + <dd>Called when the value of an <input> element changes</dd> + <dt>{{domxref("GlobalEventHandlers.onkeydown")}}</dt> + <dd>Called when you begin pressing ANY key. See {{event("keydown")}} event.</dd> + <dt>{{domxref("GlobalEventHandlers.onkeypress")}}</dt> + <dd>Called when a key (except Shift, Fn, and CapsLock) is in pressed position. See {{event("keypress")}} event.</dd> + <dt>{{domxref("GlobalEventHandlers.onkeyup")}}</dt> + <dd>Called when you finish releasing ANY key. See {{event("keyup")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.onlanguagechange")}}</dt> + <dd>An event handler property for {{event("languagechange")}} events on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onload")}}</dt> + <dd>Called after all resources and the DOM are fully loaded. WILL NOT get called when the page is loaded from cache, such as with back button.</dd> + <dt>{{domxref("WindowEventHandlers.onmessage")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("message")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmousedown")}}</dt> + <dd>Called when ANY mouse button is pressed.</dd> + <dt>{{domxref("GlobalEventHandlers.onmousemove")}}</dt> + <dd>Called continously when the mouse is moved inside the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseout")}}</dt> + <dd>Called when the pointer leaves the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseover")}}</dt> + <dd>Called when the pointer enters the window</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseup")}}</dt> + <dd>Called when ANY mouse button is released</dd> + <dt>{{domxref("Window.onmozbeforepaint")}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>An event handler property for the <code>MozBeforePaint</code> event, which is sent before repainting the window if the event has been requested by a call to the {{domxref("Window.mozRequestAnimationFrame()")}} method.</dd> + <dt>{{domxref("WindowEventHandlers.onoffline")}}</dt> + <dd>Called when network connection is lost. See {{event("offline")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.ononline")}}</dt> + <dd>Called when network connection is established. See {{event("online")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt> + <dd>Called when the user navigates away from the page, before the onunload event. See {{event("pagehide")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt> + <dd>Called after all resources and the DOM are fully loaded. See {{event("pageshow")}} event.</dd> + <dt>{{domxref("Window.onpaint")}}</dt> + <dd>An event handler property for paint events on the window.</dd> + <dt>{{domxref("WindowEventHandlers.onpopstate")}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Called when a back putton is pressed.</dd> + <dt>{{domxref("Window.onrejectionhandled")}} {{experimental_inline}}</dt> + <dd>An event handler for handled {{jsxref("Promise")}} rejection events.</dd> + <dt>{{domxref("GlobalEventHandlers.onreset")}}</dt> + <dd>Called when a form is reset</dd> + <dt>{{domxref("GlobalEventHandlers.onresize")}}</dt> + <dd>Called continuously as you are resizing the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onscroll")}}</dt> + <dd>Called when the scroll bar is moved via ANY means. If the resource fully fits in the window, then this event cannot be invoked</dd> + <dt>{{domxref("GlobalEventHandlers.onwheel")}}</dt> + <dd>Called when the mouse wheel is rotated around any axis</dd> + <dt>{{domxref("GlobalEventHandlers.onselect")}}</dt> + <dd>Called after text in an input field is selected</dd> + <dt>{{domxref("GlobalEventHandlers.onselectionchange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.</dd> + <dt>{{domxref("WindowEventHandlers.onstorage")}}</dt> + <dd>Called when there is a change in session storage or local storage. See {{event("storage")}} event</dd> + <dt>{{domxref("GlobalEventHandlers.onsubmit")}}</dt> + <dd>Called when a form is submitted</dd> + <dt>{{domxref("WindowEventHandlers.onunhandledrejection")}} {{experimental_inline}}</dt> + <dd>An event handler for unhandled {{jsxref("Promise")}} rejection events.</dd> + <dt>{{domxref("WindowEventHandlers.onunload")}}</dt> + <dd>Called when the user navigates away from the page.</dd> + <dt>{{domxref("Window.onuserproximity")}}</dt> + <dd>An event handler property for user proximity events.</dd> + <dt>{{domxref("Window.onvrdisplayconnect")}}</dt> + <dd>Represents an event handler that will run when a compatible VR device has been connected to the computer (when the {{event("vrdisplayconnected")}} event fires).</dd> + <dt>{{domxref("Window.onvrdisplaydisconnect")}}</dt> + <dd>Represents an event handler that will run when a compatible VR device has been disconnected from the computer (when the {{event("vrdisplaydisconnected")}} event fires).</dd> + <dt>{{domxref("Window.onvrdisplayactivate")}}</dt> + <dd>Represents an event handler that will run when a display is able to be presented to (when the {{event("vrdisplayactivate")}} event fires), for example if an HMD has been moved to bring it out of standby, or woken up by being put on.</dd> + <dt>{{domxref("Window.onvrdisplaydeactivate")}}</dt> + <dd>Represents an event handler that will run when a display can no longer be presented to (when the {{event("vrdisplaydeactivate")}} event fires), for example if an HMD has gone into standby or sleep mode due to a period of inactivity.</dd> + <dt>{{domxref("Window.onvrdisplayblur")}}</dt> + <dd>Represents an event handler that will run when presentation to a display has been paused for some reason by the browser, OS, or VR hardware (when the {{event("vrdisplayblur")}} event fires) — for example, while the user is interacting with a system menu or browser, to prevent tracking or loss of experience.</dd> + <dt>{{domxref("Window.onvrdisplayfocus")}}</dt> + <dd>Represents an event handler that will run when presentation to a display has resumed after being blurred (when the {{event("vrdisplayfocus")}} event fires).</dd> + <dt>{{domxref("Window.onvrdisplaypresentchange")}}</dt> + <dd>represents an event handler that will run when the presenting state of a VR device changes — i.e. goes from presenting to not presenting, or vice versa (when the {{event("vrdisplaypresentchange")}} event fires).</dd> +</dl> + +<h2 id="Constructors">Constructors</h2> + +<p>See also the <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Interfaces</a>.</p> + +<dl> + <dt>{{domxref("DOMParser")}}</dt> + <dd><code>DOMParser</code> can parse XML or HTML source stored in a string into a DOM <a href="https://developer.mozilla.org/en-US/docs/DOM/document" title="document">Document</a>. <code>DOMParser</code> is specified in <a href="https://w3c.github.io/DOM-Parsing/" title="http://html5.org/specs/dom-parsing.html">DOM Parsing and Serialization</a>.</dd> + <dt>{{domxref("Window.GeckoActiveXObject")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Image")}}</dt> + <dd>Used for creating an {{domxref("HTMLImageElement")}}.</dd> + <dt>{{domxref("Option")}}</dt> + <dd>Used for creating an {{domxref("HTMLOptionElement")}}</dd> + <dt>{{domxref("Window.QueryInterface")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.XMLSerializer")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Worker")}}</dt> + <dd>Used for creating a <a href="/en-US/docs/DOM/Using_web_workers">Web worker</a></dd> + <dt>{{domxref("Window.XPCNativeWrapper")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.XPCSafeJSObjectWrapper")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> +</dl> + +<h2 id="Interfaces">Interfaces</h2> + +<p>See <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Reference</a></p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Working_with_windows_in_chrome_code">Working with windows in chrome code</a></li> +</ul> diff --git a/files/id/web/api/window/window/index.html b/files/id/web/api/window/window/index.html new file mode 100644 index 0000000000..a40d33059f --- /dev/null +++ b/files/id/web/api/window/window/index.html @@ -0,0 +1,63 @@ +--- +title: Window.window +slug: Web/API/Window/window +translation_of: Web/API/Window/window +--- +<div>{{APIRef}}</div> + +<h2 id="Summary">Summary</h2> + +<p><span class="seoSummary">Properti <code>window</code> dalam obyek window mengarah pada obyek window itu sendiri.</span> Jadi ekspresi berikut mengembalikan obyek window yang sama:</p> + +<pre class="syntaxbox">window.window +window.window.window +window.window.window.window + ... +</pre> + +<p>Pada halaman web, obyek window merupakan obyek global. Ini berarti:</p> + +<ol> + <li>variabel global pada skrip adalah properti dari <code>window</code>: + + <pre class="brush:js">var global = {data: 0}; +alert(global === window.global); // displays "true" +</pre> + </li> + <li>kamu dapat mengakses properti bawaan dari window tanpa perlu menulis prefix <code>window.</code>: + <pre class="brush:js">setTimeout("alert('Hi!')", 50); // equivalent to using window.setTimeout. +alert(window === window.window); // displays "true" +</pre> + </li> +</ol> + +<p>Tujuan adanya properti <code>window</code> yang mengarah pada obyek itu sendiri adalah mempermudah dalam mengarah pada obyek global. Jika tidak, kamu harus melakukannya secara manual <code>var window = this;</code> dibagian awal skrip.</p> + +<p>Alasan lain, ada beberapa hal yang tidak dapat kamu tulis, contohnya, "{{domxref("window.open","window.open('http://google.com/')")}}". kamu harus menulis "open('http://google.com/')".</p> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', '#dom-window', 'Window.window')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No difference from the latest snapshot {{SpecName("HTML5.1")}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'browsers.html#dom-window', 'Window.window')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>No difference from the {{SpecName("HTML5 W3C")}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-window', 'Window.window')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>First snapshot containing the definition of <code>Window.window</code>.</td> + </tr> + </tbody> +</table> diff --git a/files/id/web/api/xmlhttprequest/index.html b/files/id/web/api/xmlhttprequest/index.html new file mode 100644 index 0000000000..87f02b9550 --- /dev/null +++ b/files/id/web/api/xmlhttprequest/index.html @@ -0,0 +1,200 @@ +--- +title: XMLHttpRequest +slug: Web/API/XMLHttpRequest +tags: + - AJAX + - API + - Communication + - HTTP + - Interface + - NeedsTranslation + - Reference + - TopicStub + - Web + - XHR + - XMLHttpRequest +translation_of: Web/API/XMLHttpRequest +--- +<div>{{DefaultAPISidebar("XMLHttpRequest")}}</div> + +<p><span class="seoSummary">Use <code>XMLHttpRequest</code> (XHR) objects to interact with servers. You can retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just part of a page without disrupting what the user is doing.</span> <code>XMLHttpRequest</code> is used heavily in {{Glossary("AJAX")}} programming.</p> + +<p>{{InheritanceDiagram(650, 150)}}</p> + +<p>Despite its name, <code>XMLHttpRequest</code> can be used to retrieve any type of data, not just XML.</p> + +<p>If your communication needs to involve receiving event data or message data from a server, consider using <a href="/en-US/docs/Web/API/Server-sent_events">server-sent events</a> through the {{domxref("EventSource")}} interface. For full-duplex communication, <a href="/en-US/docs/Web/API/WebSockets_API">WebSockets</a> may be a better choice.</p> + +<h2 id="Constructor">Constructor</h2> + +<dl> + <dt>{{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}}</dt> + <dd>The constructor initializes an XMLHttpRequest. It must be called before any other method calls.</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<p><em>This interface also inherits properties of {{domxref("XMLHttpRequestEventTarget")}} and of {{domxref("EventTarget")}}.</em></p> + +<dl> + <dt id="xmlhttprequest-onreadystatechange">{{domxref("XMLHttpRequest.onreadystatechange")}}</dt> + <dd>An {{domxref("EventHandler")}} that is called whenever the <code>readyState</code> attribute changes.</dd> + <dt id="xmlhttprequest-readystate">{{domxref("XMLHttpRequest.readyState")}} {{readonlyinline}}</dt> + <dd>Returns an <code>unsigned short</code>, the state of the request.</dd> + <dt>{{domxref("XMLHttpRequest.response")}} {{readonlyinline}}</dt> + <dd>Returns an {{jsxref("ArrayBuffer")}}, {{domxref("Blob")}}, {{domxref("Document")}}, JavaScript object, or a {{domxref("DOMString")}}, depending on the value of {{domxref("XMLHttpRequest.responseType")}}, that contains the response entity body.</dd> + <dt id="xmlhttprequest-responsetext">{{domxref("XMLHttpRequest.responseText")}} {{readonlyinline}}</dt> + <dd>Returns a {{domxref("DOMString")}} that contains the response to the request as text, or <code>null</code> if the request was unsuccessful or has not yet been sent.</dd> + <dt id="xmlhttprequest-responsetype">{{domxref("XMLHttpRequest.responseType")}}</dt> + <dd>Is an enumerated value that defines the response type.</dd> + <dt id="xmlhttprequest-responsexml">{{domxref("XMLHttpRequest.responseURL")}} {{readonlyinline}}</dt> + <dd>Returns the serialized URL of the response or the empty string if the URL is null.</dd> + <dt id="xmlhttprequest-responsexml">{{domxref("XMLHttpRequest.responseXML")}} {{readonlyinline}}</dt> + <dd>Returns a {{domxref("Document")}} containing the response to the request, or <code>null</code> if the request was unsuccessful, has not yet been sent, or cannot be parsed as XML or HTML. Not available in workers.</dd> + <dt id="xmlhttprequest-status">{{domxref("XMLHttpRequest.status")}} {{readonlyinline}}</dt> + <dd>Returns an <code>unsigned short</code> with the status of the response of the request.</dd> + <dt id="xmlhttprequest-statustext">{{domxref("XMLHttpRequest.statusText")}} {{readonlyinline}}</dt> + <dd>Returns a {{domxref("DOMString")}} containing the response string returned by the HTTP server. Unlike {{domxref("XMLHttpRequest.status")}}, this includes the entire text of the response message ("<code>200 OK</code>", for example).</dd> +</dl> + +<div class="note"> +<p><strong>Note:</strong> According to the HTTP/2 specification (<a href="https://http2.github.io/http2-spec/#rfc.section.8.1.2.4">8.1.2.4</a> <a href="https://http2.github.io/http2-spec/#HttpResponse">Response Pseudo-Header Fields</a>), HTTP/2 does not define a way to carry the version or reason phrase that is included in an HTTP/1.1 status line.</p> +</div> + +<dl> + <dt id="xmlhttprequest-timeout">{{domxref("XMLHttpRequest.timeout")}}</dt> + <dd>Is an <code>unsigned long</code> representing the number of milliseconds a request can take before automatically being terminated.</dd> + <dt id="xmlhttprequesteventtarget-ontimeout">{{domxref("XMLHttpRequestEventTarget.ontimeout")}}</dt> + <dd>Is an {{domxref("EventHandler")}} that is called whenever the request times out. {{gecko_minversion_inline("12.0")}}</dd> + <dt id="xmlhttprequest-upload">{{domxref("XMLHttpRequest.upload")}} {{readonlyinline}}</dt> + <dd>Is an {{domxref("XMLHttpRequestUpload")}}, representing the upload process.</dd> + <dt id="xmlhttprequest-withcredentials">{{domxref("XMLHttpRequest.withCredentials")}}</dt> + <dd>Is a {{domxref("Boolean")}} that indicates whether or not cross-site <code>Access-Control</code> requests should be made using credentials such as cookies or authorization headers.</dd> +</dl> + +<h3 id="Non-standard_properties">Non-standard properties</h3> + +<dl> + <dt>{{domxref("XMLHttpRequest.channel")}}{{ReadOnlyInline}}</dt> + <dd>Is a {{Interface("nsIChannel")}}. The channel used by the object when performing the request.</dd> + <dt>{{domxref("XMLHttpRequest.mozAnon")}}{{ReadOnlyInline}}</dt> + <dd>Is a boolean. If true, the request will be sent without cookie and authentication headers.</dd> + <dt>{{domxref("XMLHttpRequest.mozSystem")}}{{ReadOnlyInline}}</dt> + <dd>Is a boolean. If true, the same origin policy will not be enforced on the request.</dd> + <dt>{{domxref("XMLHttpRequest.mozBackgroundRequest")}}</dt> + <dd>Is a boolean. It indicates whether or not the object represents a background service request.</dd> + <dt>{{domxref("XMLHttpRequest.mozResponseArrayBuffer")}}{{gecko_minversion_inline("2.0")}} {{obsolete_inline("6")}} {{ReadOnlyInline}}</dt> + <dd>{{jsxref("ArrayBuffer")}}. The response to the request, as a JavaScript typed array.</dd> + <dt>{{domxref("XMLHttpRequest.multipart")}}{{obsolete_inline("22")}}</dt> + <dd><strong>This Gecko-only feature, a boolean, was removed in Firefox/Gecko 22.</strong> Please use <a href="/en-US/docs/Web/API/Server-sent_events">Server-Sent Events</a>, <a href="/en-US/docs/Web/API/WebSockets_API">Web Sockets</a>, or <code>responseText</code> from progress events instead.</dd> +</dl> + +<h3 id="Event_handlers">Event handlers</h3> + +<p><code>onreadystatechange</code> as a property of the <code>XMLHttpRequest</code> instance is supported in all browsers.</p> + +<p>Since then, a number of additional event handlers have been implemented in various browsers (<code>onload</code>, <code>onerror</code>, <code>onprogress</code>, etc.). See <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a>.</p> + +<p>More recent browsers, including Firefox, also support listening to the <code>XMLHttpRequest</code> events via standard {{domxref("EventTarget.addEventListener", "addEventListener()")}} APIs in addition to setting <code>on*</code> properties to a handler function.</p> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{domxref("XMLHttpRequest.abort()")}}</dt> + <dd>Aborts the request if it has already been sent.</dd> + <dt>{{domxref("XMLHttpRequest.getAllResponseHeaders()")}}</dt> + <dd>Returns all the response headers, separated by {{Glossary("CRLF")}}, as a string, or <code>null</code> if no response has been received.</dd> + <dt>{{domxref("XMLHttpRequest.getResponseHeader()")}}</dt> + <dd>Returns the string containing the text of the specified header, or <code>null</code> if either the response has not yet been received or the header doesn't exist in the response.</dd> + <dt>{{domxref("XMLHttpRequest.open()")}}</dt> + <dd>Initializes a request.</dd> + <dt>{{domxref("XMLHttpRequest.overrideMimeType()")}}</dt> + <dd>Overrides the MIME type returned by the server.</dd> + <dt>{{domxref("XMLHttpRequest.send()")}}</dt> + <dd>Sends the request. If the request is asynchronous (which is the default), this method returns as soon as the request is sent.</dd> + <dt>{{domxref("XMLHttpRequest.setRequestHeader()")}}</dt> + <dd>Sets the value of an HTTP request header. You must call <code>setRequestHeader()</code>after <a href="#open"><code>open()</code></a>, but before <code>send()</code>.</dd> +</dl> + +<h3 id="Non-standard_methods">Non-standard methods</h3> + +<dl> + <dt>{{domxref("XMLHttpRequest.init()")}}</dt> + <dd>Initializes the object for use from C++ code.</dd> +</dl> + +<div class="warning"><strong>Warning:</strong> This method must <em>not</em> be called from JavaScript.</div> + +<dl> + <dt>{{domxref("XMLHttpRequest.openRequest()")}}</dt> + <dd>Initializes a request. This method is to be used from native code; to initialize a request from JavaScript code, use <a class="internal" href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest#open()"><code>open()</code></a> instead. See the documentation for <code>open()</code>.</dd> + <dt>{{domxref("XMLHttpRequest.sendAsBinary()")}}{{deprecated_inline()}}</dt> + <dd>A variant of the <code>send()</code> method that sends binary data.</dd> +</dl> + +<h2 id="Events">Events</h2> + +<dl> + <dt>{{domxref("XMLHttpRequest/abort_event", "abort")}}</dt> + <dd>Fired when a request has been aborted, for example because the program called {{domxref("XMLHttpRequest.abort()")}}.<br> + Also available via the {{domxref("XMLHttpRequestEventTarget/onabort", "onabort")}} property.</dd> + <dt>{{domxref("XMLHttpRequest/error_event", "error")}}</dt> + <dd>Fired when the request encountered an error.<br> + Also available via the {{domxref("XMLHttpRequestEventTarget/onerror", "onerror")}} property.</dd> + <dt>{{domxref("XMLHttpRequest/load_event", "load")}}</dt> + <dd>Fired when an {{domxref("XMLHttpRequest")}} transaction completes successfully.<br> + Also available via the {{domxref("XMLHttpRequestEventTarget/onload", "onload")}} property.</dd> + <dt>{{domxref("XMLHttpRequest/loadend_event", "loadend")}}</dt> + <dd>Fired when a request has completed, whether successfully (after {{domxref("XMLHttpRequest/load_event", "load")}}) or unsuccessfully (after {{domxref("XMLHttpRequest/abort_event", "abort")}} or {{domxref("XMLHttpRequest/error_event", "error")}}).<br> + Also available via the {{domxref("XMLHttpRequestEventTarget/onloadend", "onloadend")}} property.</dd> + <dt>{{domxref("XMLHttpRequest/loadstart_event", "loadstart")}}</dt> + <dd>Fired when a request has started to load data.<br> + Also available via the {{domxref("XMLHttpRequestEventTarget/onloadstart", "onloadstart")}} property.</dd> + <dt>{{domxref("XMLHttpRequest/progress_event", "progress")}}</dt> + <dd>Fired periodically when a request receives more data.<br> + Also available via the {{domxref("XMLHttpRequestEventTarget/onprogress", "onprogress")}} property.</dd> + <dt>{{domxref("XMLHttpRequest/timeout_event", "timeout")}}</dt> + <dd>Fired when progress is terminated due to preset time expiring.<br> + Also available via the {{domxref("XMLHttpRequestEventTarget/ontimeout", "ontimeout")}} property.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('XMLHttpRequest')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>Live standard, latest version</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<div>{{Compat("api.XMLHttpRequest")}}</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("XMLSerializer")}}: Serializing a DOM tree into XML</li> + <li>MDN tutorials covering <code>XMLHttpRequest</code>: + <ul> + <li><a href="/en-US/docs/AJAX/Getting_Started">Ajax — Getting Started</a></li> + <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li> + <li><a href="/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a></li> + <li><a href="/en-US/docs/Web/API/Fetch_API" title="Fetch API">Fetch API</a></li> + </ul> + </li> + <li><a class="external" href="http://www.html5rocks.com/en/tutorials/file/xhr2/">HTML5 Rocks — New Tricks in XMLHttpRequest2</a></li> + <li>Feature-Policy directive {{httpheader("Feature-Policy/sync-xhr", "sync-xhr")}}</li> +</ul> diff --git a/files/id/web/api/xmlhttprequest/using_xmlhttprequest/index.html b/files/id/web/api/xmlhttprequest/using_xmlhttprequest/index.html new file mode 100644 index 0000000000..1de088b719 --- /dev/null +++ b/files/id/web/api/xmlhttprequest/using_xmlhttprequest/index.html @@ -0,0 +1,793 @@ +--- +title: Using XMLHttpRequest +slug: Web/API/XMLHttpRequest/Using_XMLHttpRequest +translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest +--- +<div>{{APIRef("XMLHttpRequest")}}</div> + +<div>Dalam panduan ini, kita akan melihat bagaimana cara untuk mengunakan <span class="seoSummary">{{domxref("XMLHttpRequest")}} untuk menyelesaikan permasalahan HTTP request yang dalam penggunaan untuk pertukaran data antara halaman web dan server. Contoh umum dan </span> <span class="tlid-translation translation" lang="id"><span title="">kasus penggunaan lebih jelas untuk XMLHttpRequest disertakan.</span></span></div> + +<div></div> + +<div>Untuk mengirim HTTP request, buatlah sebuah object <code>XMLHttpRequest</code> , buka sebuah URL dan kirim request tersebut. setelah <span class="tlid-translation translation" lang="id"><span title="">transaksi selesai, objek akan berisi informasi yang berguna seperti badan respon dan status HTTP dari hasilnya.</span></span></div> + +<div></div> + +<pre class="brush: js">function reqListener () { + console.log(this.responseText); +} + +var oReq = new XMLHttpRequest(); +oReq.addEventListener("load", reqListener); +oReq.open("GET", "http://www.example.org/example.txt"); +oReq.send();</pre> + +<h2 id="Tipe-Tipe_dari_Request">Tipe-Tipe dari Request</h2> + +<p>Sebuh request yang dihasilkan melalui <code>XMLHttpRequest</code> dapat mengambil data dari salah satu cara, asynchronously or synchronously. Tipe dari request ditentukan onleh opsi async argument (argument ke-tiga) yang telah diset dialam metode {{domxref("XMLHttpRequest.open()")}}. Jika argument tersebut <code>true</code> atau tidak ditentukan. <code>XMLHttpRequest</code> akan diproses secara asynchronous,jika tidak proses akan berjalan secara synchronous. Diskusi detail dan demonstrasi dari kedua cara merequest tersebut dapat ditemukan pada halaman <a href="/en-US/docs/DOM/XMLHttpRequest/Synchronous_and_Asynchronous_Requests">synchronous and asynchronous requests. </a> <span class="tlid-translation translation" lang="id"><span title="">Jangan gunakan permintaan synchronous di luar Pekerja Web.</span></span></p> + +<div class="note"><strong>Note:</strong> Dimulai dari Gecko 30.0 {{ geckoRelease("30.0") }}, <span class="tlid-translation translation" lang="id"><span title="">permintaan synchronous pada utas utama telah ditinggalkan karena efek negatif terhadap pengalaman pengguna.</span></span></div> + +<div class="note"><strong>Note:</strong> fungsi konstruksi <code>XMLHttpRequest</code> <span class="tlid-translation translation" lang="id"><span title="">tidak terbatas hanya pada dokumen XML.</span> <span title="">Itu dimulai dengan "XML" karena ketika itu dibuat format utama yang awalnya digunakan untuk Asynchronous Data Exchange adalah XML</span></span></div> + +<h2 id="Menangani_Respons">Menangani Respons</h2> + +<p>Ada beberapa jenis <a href="https://xhr.spec.whatwg.org/">atribut respons </a> <span class="tlid-translation translation" lang="id"><span title="">ditentukan oleh spesifikasi standar untuk </span></span>{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}} constructor. <span class="tlid-translation translation" lang="id"><span title="">Ini memberi tahu klien membuat informasi penting </span></span><code>XMLHttpRequest</code> <span class="tlid-translation translation" lang="id"><span title=""> tentang status respons.</span> <span title="">Beberapa kasus di mana berurusan dengan jenis respons non-teks mungkin melibatkan beberapa manipulasi dan analisis diuraikan dalam bagian berikut.</span></span></p> + +<h3 id="Menganalisa_dan_Memanipulasi_Properti_responseXML">Menganalisa dan Memanipulasi Properti responseXML</h3> + +<p>Jika kamu mengunakan <code>XMLHttpRequest</code> untuk mendapatkan <span class="tlid-translation translation" lang="id"><span title="">konten dokumen XML jarak jauh,</span></span> properti {{domxref("XMLHttpRequest.responseXML", "responseXML")}} akan menjadi <span class="tlid-translation translation" lang="id"><span title="">objek DOM yang berisi dokumen XML parsing. Ini terbentuk sulit untuk dimanipulasi dan dianalisis. Ada empat cara utama untuk menganalisis dokumen XML ini:</span></span></p> + +<ol> + <li>Menggunakan <a href="/en-US/docs/Web/XPath">XPath</a> <span class="tlid-translation translation" lang="id"><span title="">untuk mengatasi (atau menunjuk ke) bagian-bagiannya.</span></span></li> + <li>Secara manual <a href="/en-US/docs/Web/Guide/Parsing_and_serializing_XML">Parsing dan men-serialisasikan XML</a> ke string atau objek</li> + <li>Menggunakan {{domxref("XMLSerializer")}} untuk meng-serialisasi <strong>Pohon DOM ke strings atau ke file</strong>.</li> + <li>{{jsxref("RegExp")}} bisa digunakan jika kamu selalu tau konten dari XML document sebelumnya. Kamu <span class="tlid-translation translation" lang="id"><span title="">mungkin ingin menghapus jeda baris, jika Anda menggunakan RegEx untuk memindai berkenaan dengan jeda baris.</span> <span title="">Namun, metode ini adalah "pilihan terakhir" karena jika kode XML sedikit berubah, metode ini kemungkinan akan gagal.</span></span></li> +</ol> + +<div class="note"> +<p><strong>Note:</strong> <code>XMLHttpRequest</code> <span class="tlid-translation translation" lang="id"><span title="">sekarang dapat menafsirkan HTML untuk Anda menggunakan</span></span> properti {{domxref("XMLHttpRequest.responseXML", "responseXML")}}. Baca artikel <a href="/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML dalam XMLHttpRequest</a> untuk mempelajari cara untuk melakukannya.</p> +</div> + +<h3 id="Memproses_sebuah_Properti_responseText_yang_Berisi_HTML_Dokument">Memproses sebuah Properti responseText yang Berisi HTML Dokument</h3> + +<p>Jika kamu mengunakan <code>XMLHttpRequest</code> untuk mendapatkan konten dari halaman web HTML jarak jauh. Properti {{domxref("XMLHttpRequest.responseText", "responseText")}} adalah sebuah string yang berisi data HTML mentah. Hal ini terbukti sulit untuk dimanipulasi dan dianalisi. Karenanya ada tiga cara utama untuk</p> + +<p>If you use <code>XMLHttpRequest</code> to get the content of a remote HTML webpage, the {{domxref("XMLHttpRequest.responseText", "responseText")}} property is a string containing the raw HTML. This could prove difficult to manipulate and analyze. <span class="tlid-translation translation" lang="id"><span title="">Ada tiga cara utama untuk menganalisis dan mengurai string HTML mentah ini:</span></span></p> + +<ol> + <li>Use the <code>XMLHttpRequest.responseXML</code> property as covered in the article <a href="/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a>.</li> + <li>Inject the content into the body of a <a href="/en-US/docs/Web/API/DocumentFragment">document fragment</a> via <code>fragment.body.innerHTML</code> and traverse the DOM of the fragment.</li> + <li>{{jsxref("RegExp")}} can be used if you always know the content of the HTML <code>responseText</code> beforehand. You might want to remove line breaks, if you use RegExp to scan with regard to linebreaks. However, this method is a "last resort" since if the HTML code changes slightly, the method will likely fail.</li> +</ol> + +<h2 id="Handling_binary_data">Handling binary data</h2> + +<p>Although {{domxref("XMLHttpRequest")}} is most commonly used to send and receive textual data, it can be used to send and receive binary content. There are several well tested methods for coercing the response of an <code>XMLHttpRequest</code> into sending binary data. These involve utilizing the {{domxref("XMLHttpRequest.overrideMimeType", "overrideMimeType()")}} method on the <code>XMLHttpRequest</code> object and is a workable solution.</p> + +<pre class="brush:js">var oReq = new XMLHttpRequest(); +oReq.open("GET", url); +// retrieve data unprocessed as a binary string +oReq.overrideMimeType("text/plain; charset=x-user-defined"); +/* ... */ +</pre> + +<p>However, more modern techniques are available, since the {{domxref("XMLHttpRequest.responseType", "responseType")}} attribute now supports a number of additional content types, which makes sending and receiving binary data much easier.</p> + +<p>For example, consider this snippet, which uses the <code>responseType</code> of <code>"arraybuffer"</code> to fetch the remote content into a {{jsxref("ArrayBuffer")}} object, which stores the raw binary data.</p> + +<pre class="brush:js">var oReq = new XMLHttpRequest(); + +oReq.onload = function(e) { + var arraybuffer = oReq.response; // not responseText + /* ... */ +} +oReq.open("GET", url); +oReq.responseType = "arraybuffer"; +oReq.send();</pre> + +<p>For more examples check out the <a href="/en-US/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data">Sending and Receiving Binary Data</a> page</p> + +<h2 id="Monitoring_progress">Monitoring progress</h2> + +<p><code>XMLHttpRequest</code> provides the ability to listen to various events that can occur while the request is being processed. This includes periodic progress notifications, error notifications, and so forth.</p> + +<p>Support for DOM {{event("progress")}} event monitoring of <code>XMLHttpRequest</code> transfers follows the <a href="https://xhr.spec.whatwg.org/#interface-progressevent">specification for progress events</a>: these events implement the {{domxref("ProgressEvent")}} interface. The actual events you can monitor to determine the state of an ongoing transfer are:</p> + +<dl> + <dt>{{event("progress")}}</dt> + <dd>The amount of data that has been retrieved has changed.</dd> + <dt>{{event("load")}}</dt> + <dd>The transfer is complete; all data is now in the <code>response</code></dd> +</dl> + +<pre class="brush:js">var oReq = new XMLHttpRequest(); + +oReq.addEventListener("progress", updateProgress); +oReq.addEventListener("load", transferComplete); +oReq.addEventListener("error", transferFailed); +oReq.addEventListener("abort", transferCanceled); + +oReq.open(); + +// ... + +// progress on transfers from the server to the client (downloads) +function updateProgress (oEvent) { + if (oEvent.lengthComputable) { + var percentComplete = oEvent.loaded / oEvent.total * 100; + // ... + } else { + // Unable to compute progress information since the total size is unknown + } +} + +function transferComplete(evt) { + console.log("The transfer is complete."); +} + +function transferFailed(evt) { + console.log("An error occurred while transferring the file."); +} + +function transferCanceled(evt) { + console.log("The transfer has been canceled by the user."); +}</pre> + +<p>Lines 3-6 add event listeners for the various events that are sent while performing a data transfer using <code>XMLHttpRequest</code>.</p> + +<div class="note"><strong>Note:</strong> You need to add the event listeners before calling <code>open()</code> on the request. Otherwise the <code>progress</code> events will not fire.</div> + +<p>The progress event handler, specified by the <code>updateProgress()</code> function in this example, receives the total number of bytes to transfer as well as the number of bytes transferred so far in the event's <code>total</code> and <code>loaded</code> fields. However, if the <code>lengthComputable</code> field is false, the total length is not known and will be zero.</p> + +<p>Progress events exist for both download and upload transfers. The download events are fired on the <code>XMLHttpRequest</code> object itself, as shown in the above sample. The upload events are fired on the <code>XMLHttpRequest.upload</code> object, as shown below:</p> + +<pre class="brush:js">var oReq = new XMLHttpRequest(); + +oReq.upload.addEventListener("progress", updateProgress); +oReq.upload.addEventListener("load", transferComplete); +oReq.upload.addEventListener("error", transferFailed); +oReq.upload.addEventListener("abort", transferCanceled); + +oReq.open(); +</pre> + +<div class="note"><strong>Note:</strong> Progress events are not available for the <code>file:</code> protocol.</div> + +<div class="note"> +<p><strong>Note:</strong> Starting in {{Gecko("9.0")}}, progress events can now be relied upon to come in for every chunk of data received, including the last chunk in cases in which the last packet is received and the connection closed before the progress event is fired. In this case, the progress event is automatically fired when the load event occurs for that packet. This lets you now reliably monitor progress by only watching the "progress" event.</p> +</div> + +<div class="note"> +<p><strong>Note:</strong> As of {{Gecko("12.0")}}, if your progress event is called with a <code>responseType</code> of "moz-blob", the value of response is a {{domxref("Blob")}} containing the data received so far.</p> +</div> + +<p>One can also detect all three load-ending conditions (<code>abort</code>, <code>load</code>, or <code>error</code>) using the <code>loadend</code> event:</p> + +<pre class="brush:js">req.addEventListener("loadend", loadEnd); + +function loadEnd(e) { + console.log("The transfer finished (although we don't know if it succeeded or not)."); +} +</pre> + +<p>Note there is no way to be certain, from the information received by the <code>loadend</code> event, as to which condition caused the operation to terminate; however, you can use this to handle tasks that need to be performed in all end-of-transfer scenarios.</p> + +<h2 id="Submitting_forms_and_uploading_files">Submitting forms and uploading files</h2> + +<p>Instances of <code>XMLHttpRequest</code> can be used to submit forms in two ways:</p> + +<ul> + <li>using only AJAX</li> + <li>using the {{domxref("XMLHttpRequest.FormData", "FormData")}} API</li> +</ul> + +<p>Using the <code>FormData</code> API is the simplest and fastest, but has the disadvantage that data collected can not be <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">stringified</a>.<br> + Using only AJAX is more complex, but typically more flexible and powerful.</p> + +<h3 id="Using_nothing_but_XMLHttpRequest">Using nothing but <code>XMLHttpRequest</code></h3> + +<p>Submitting forms without the <code>FormData</code> API does not require other APIs for most use cases. The only case where you need an additional API is <strong>if you want to upload one or more files</strong>, where you use the {{domxref("FileReader")}} API.</p> + +<h4 id="A_brief_introduction_to_the_submit_methods">A brief introduction to the submit methods</h4> + +<p>An html {{ HTMLElement("form") }} can be sent in four ways:</p> + +<ul> + <li>using the <code>POST</code> method and setting the <code>enctype</code> attribute to <code>application/x-www-form-urlencoded</code> (default);</li> + <li>using the <code>POST</code> method and setting the <code>enctype</code> attribute to <code>text/plain</code>;</li> + <li>using the <code>POST</code> method and setting the <code>enctype</code> attribute to <code>multipart/form-data</code>;</li> + <li>using the <code>GET</code> method (in this case the <code>enctype</code> attribute will be ignored).</li> +</ul> + +<p>Now, consider the submission of a form containing only two fields, named <code>foo</code> and <code>baz</code>. If you are using the <code>POST</code> method the server will receive a string similar to one of the following three examples, depending on the encoding type you are using:</p> + +<ul> + <li> + <p>Method: <code>POST</code>; Encoding type: <code>application/x-www-form-urlencoded</code> (default):</p> + + <pre class="brush:plain">Content-Type: application/x-www-form-urlencoded + +foo=bar&baz=The+first+line.%0D%0AThe+second+line.%0D%0A</pre> + </li> + <li> + <p>Method: <code>POST</code>; Encoding type: <code>text/plain</code>:</p> + + <pre class="brush:plain">Content-Type: text/plain + +foo=bar +baz=The first line. +The second line.</pre> + </li> + <li> + <p>Method: <code>POST</code>; Encoding type: <code><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#multipartform-data">multipart/form-data</a></code>:</p> + + <pre class="brush:plain">Content-Type: multipart/form-data; boundary=---------------------------314911788813839 + +-----------------------------314911788813839 +Content-Disposition: form-data; name="foo" + +bar +-----------------------------314911788813839 +Content-Disposition: form-data; name="baz" + +The first line. +The second line. + +-----------------------------314911788813839--</pre> + </li> +</ul> + +<p>However, if you are using the <code>GET</code> method, a string like the following will be simply added to the URL:</p> + +<pre class="brush:plain">?foo=bar&baz=The%20first%20line.%0AThe%20second%20line.</pre> + +<h4 id="A_little_vanilla_framework">A little vanilla framework</h4> + +<p>All these effects are done automatically by the web browser whenever you submit a {{HTMLElement("form")}}. If you want to perform the same effects using JavaScript you have to instruct the interpreter about <em>everything</em>. Therefore, how to send forms in <em>pure</em> AJAX is too complex to be explained here in detail. For this reason, here we place <strong>a complete (yet didactic) framework</strong>, able to use all four ways to <em>submit</em>, and to <strong>upload files</strong>:</p> + +<div style="height: 400px; margin-bottom: 12px; overflow: auto;"> +<pre class="brush: html"><!doctype html> +<html> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> +<title>Sending forms with pure AJAX &ndash; MDN</title> +<script type="text/javascript"> + +"use strict"; + +/*\ +|*| +|*| :: XMLHttpRequest.prototype.sendAsBinary() Polyfill :: +|*| +|*| https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#sendAsBinary() +\*/ + +if (!XMLHttpRequest.prototype.sendAsBinary) { + XMLHttpRequest.prototype.sendAsBinary = function(sData) { + var nBytes = sData.length, ui8Data = new Uint8Array(nBytes); + for (var nIdx = 0; nIdx < nBytes; nIdx++) { + ui8Data[nIdx] = sData.charCodeAt(nIdx) & 0xff; + } + /* send as ArrayBufferView...: */ + this.send(ui8Data); + /* ...or as ArrayBuffer (legacy)...: this.send(ui8Data.buffer); */ + }; +} + +/*\ +|*| +|*| :: AJAX Form Submit Framework :: +|*| +|*| https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest +|*| +|*| This framework is released under the GNU Public License, version 3 or later. +|*| https://www.gnu.org/licenses/gpl-3.0-standalone.html +|*| +|*| Syntax: +|*| +|*| AJAXSubmit(HTMLFormElement); +\*/ + +var AJAXSubmit = (function () { + + function ajaxSuccess () { + /* console.log("AJAXSubmit - Success!"); */ + console.log(this.responseText); + /* you can get the serialized data through the "submittedData" custom property: */ + /* console.log(JSON.stringify(this.submittedData)); */ + } + + function submitData (oData) { + /* the AJAX request... */ + var oAjaxReq = new XMLHttpRequest(); + oAjaxReq.submittedData = oData; + oAjaxReq.onload = ajaxSuccess; + if (oData.technique === 0) { + /* method is GET */ + oAjaxReq.open("get", oData.receiver.replace(/(?:\?.*)?$/, + oData.segments.length > 0 ? "?" + oData.segments.join("&") : ""), true); + oAjaxReq.send(null); + } else { + /* method is POST */ + oAjaxReq.open("post", oData.receiver, true); + if (oData.technique === 3) { + /* enctype is multipart/form-data */ + var sBoundary = "---------------------------" + Date.now().toString(16); + oAjaxReq.setRequestHeader("Content-Type", "multipart\/form-data; boundary=" + sBoundary); + oAjaxReq.sendAsBinary("--" + sBoundary + "\r\n" + + oData.segments.join("--" + sBoundary + "\r\n") + "--" + sBoundary + "--\r\n"); + } else { + /* enctype is application/x-www-form-urlencoded or text/plain */ + oAjaxReq.setRequestHeader("Content-Type", oData.contentType); + oAjaxReq.send(oData.segments.join(oData.technique === 2 ? "\r\n" : "&")); + } + } + } + + function processStatus (oData) { + if (oData.status > 0) { return; } + /* the form is now totally serialized! do something before sending it to the server... */ + /* doSomething(oData); */ + /* console.log("AJAXSubmit - The form is now serialized. Submitting..."); */ + submitData (oData); + } + + function pushSegment (oFREvt) { + this.owner.segments[this.segmentIdx] += oFREvt.target.result + "\r\n"; + this.owner.status--; + processStatus(this.owner); + } + + function plainEscape (sText) { + /* How should I treat a text/plain form encoding? + What characters are not allowed? this is what I suppose...: */ + /* "4\3\7 - Einstein said E=mc2" ----> "4\\3\\7\ -\ Einstein\ said\ E\=mc2" */ + return sText.replace(/[\s\=\\]/g, "\\$&"); + } + + function SubmitRequest (oTarget) { + var nFile, sFieldType, oField, oSegmReq, oFile, bIsPost = oTarget.method.toLowerCase() === "post"; + /* console.log("AJAXSubmit - Serializing form..."); */ + this.contentType = bIsPost && oTarget.enctype ? oTarget.enctype : "application\/x-www-form-urlencoded"; + this.technique = bIsPost ? + this.contentType === "multipart\/form-data" ? 3 : this.contentType === "text\/plain" ? 2 : 1 : 0; + this.receiver = oTarget.action; + this.status = 0; + this.segments = []; + var fFilter = this.technique === 2 ? plainEscape : escape; + for (var nItem = 0; nItem < oTarget.elements.length; nItem++) { + oField = oTarget.elements[nItem]; + if (!oField.hasAttribute("name")) { continue; } + sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT"; + if (sFieldType === "FILE" && oField.files.length > 0) { + if (this.technique === 3) { + /* enctype is multipart/form-data */ + for (nFile = 0; nFile < oField.files.length; nFile++) { + oFile = oField.files[nFile]; + oSegmReq = new FileReader(); + /* (custom properties:) */ + oSegmReq.segmentIdx = this.segments.length; + oSegmReq.owner = this; + /* (end of custom properties) */ + oSegmReq.onload = pushSegment; + this.segments.push("Content-Disposition: form-data; name=\"" + + oField.name + "\"; filename=\"" + oFile.name + + "\"\r\nContent-Type: " + oFile.type + "\r\n\r\n"); + this.status++; + oSegmReq.readAsBinaryString(oFile); + } + } else { + /* enctype is application/x-www-form-urlencoded or text/plain or + method is GET: files will not be sent! */ + for (nFile = 0; nFile < oField.files.length; + this.segments.push(fFilter(oField.name) + "=" + fFilter(oField.files[nFile++].name))); + } + } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) { + /* NOTE: this will submit _all_ submit buttons. Detecting the correct one is non-trivial. */ + /* field type is not FILE or is FILE but is empty */ + this.segments.push( + this.technique === 3 ? /* enctype is multipart/form-data */ + "Content-Disposition: form-data; name=\"" + oField.name + "\"\r\n\r\n" + oField.value + "\r\n" + : /* enctype is application/x-www-form-urlencoded or text/plain or method is GET */ + fFilter(oField.name) + "=" + fFilter(oField.value) + ); + } + } + processStatus(this); + } + + return function (oFormElement) { + if (!oFormElement.action) { return; } + new SubmitRequest(oFormElement); + }; + +})(); + +</script> +</head> +<body> + +<h1>Sending forms with pure AJAX</h1> + +<h2>Using the GET method</h2> + +<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;"> + <fieldset> + <legend>Registration example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> +</form> + +<h2>Using the POST method</h2> +<h3>Enctype: application/x-www-form-urlencoded (default)</h3> + +<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;"> + <fieldset> + <legend>Registration example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> +</form> + +<h3>Enctype: text/plain</h3> + +<form action="register.php" method="post" enctype="text/plain" + onsubmit="AJAXSubmit(this); return false;"> + <fieldset> + <legend>Registration example</legend> + <p> + Your name: <input type="text" name="user" /> + </p> + <p> + Your message:<br /> + <textarea name="message" cols="40" rows="8"></textarea> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> +</form> + +<h3>Enctype: multipart/form-data</h3> + +<form action="register.php" method="post" enctype="multipart/form-data" + onsubmit="AJAXSubmit(this); return false;"> + <fieldset> + <legend>Upload example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /><br /> + Sex: + <input id="sex_male" type="radio" name="sex" value="male" /> + <label for="sex_male">Male</label> + <input id="sex_female" type="radio" name="sex" value="female" /> + <label for="sex_female">Female</label><br /> + Password: <input type="password" name="secret" /><br /> + What do you prefer: + <select name="image_type"> + <option>Books</option> + <option>Cinema</option> + <option>TV</option> + </select> + </p> + <p> + Post your photos: + <input type="file" multiple name="photos[]"> + </p> + <p> + <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> + <label for="vehicle_bike">I have a bike</label><br /> + <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> + <label for="vehicle_car">I have a car</label> + </p> + <p> + Describe yourself:<br /> + <textarea name="description" cols="50" rows="8"></textarea> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> +</form> + +</body> +</html></pre> +</div> + +<p>To test this, create a page named <strong>register.php</strong> (which is the <code>action</code> attribute of these sample forms), and put the following <em>minimalistic</em> content:</p> + +<pre class="brush: php"><?php +/* register.php */ + +header("Content-type: text/plain"); + +/* +NOTE: You should never use `print_r()` in production scripts, or +otherwise output client-submitted data without sanitizing it first. +Failing to sanitize can lead to cross-site scripting vulnerabilities. +*/ + +echo ":: data received via GET ::\n\n"; +print_r($_GET); + +echo "\n\n:: Data received via POST ::\n\n"; +print_r($_POST); + +echo "\n\n:: Data received as \"raw\" (text/plain encoding) ::\n\n"; +if (isset($HTTP_RAW_POST_DATA)) { echo $HTTP_RAW_POST_DATA; } + +echo "\n\n:: Files received ::\n\n"; +print_r($_FILES); + +</pre> + +<p>The syntax to activate this script is simply:</p> + +<pre class="syntaxbox">AJAXSubmit(myForm);</pre> + +<div class="note"><strong>Note:</strong> This framework uses the {{domxref("FileReader")}} API to transmit file uploads. This is a recent API and is not implemented in IE9 or below. For this reason, the AJAX-only upload is considered <strong>an experimental technique</strong>. If you do not need to upload binary files, this framework works fine in most browsers.</div> + +<div class="note"><strong>Note:</strong> The best way to send binary content is via {{jsxref("ArrayBuffer", "ArrayBuffers")}} or {{domxref("Blob", "Blobs")}} in conjuncton with the {{domxref("XMLHttpRequest.send()", "send()")}} method and possibly the {{domxref("FileReader.readAsArrayBuffer()", "readAsArrayBuffer()")}} method of the <code>FileReader</code> API. But, since the aim of this script is to work with a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">stringifiable</a> raw data, we used the {{domxref("XMLHttpRequest.sendAsBinary()", "sendAsBinary()")}} method in conjunction with the {{domxref("FileReader.readAsBinaryString()", "readAsBinaryString()")}} method of the <code>FileReader</code> API. As such, the above script makes sense only when you are dealing with small files. If you do not intend to upload binary content, consider instead using the <code>FormData</code> API.</div> + +<div class="note"><strong>Note:</strong> The non-standard <code>sendAsBinary</code> method is considered deprecated as of Gecko 31 {{geckoRelease(31)}} and will be removed soon. The standard <code>send(Blob data)</code> method can be used instead.</div> + +<h3 id="Using_FormData_objects">Using FormData objects</h3> + +<p>The {{domxref("XMLHttpRequest.FormData", "FormData")}} constructor lets you compile a set of key/value pairs to send using <code>XMLHttpRequest</code>. Its primary use is in sending form data, but can also be used independently from a form in order to transmit user keyed data. The transmitted data is in the same format the form's <code>submit()</code> method uses to send data, if the form's encoding type were set to "multipart/form-data". FormData objects can be utilized in a number of ways with an <code>XMLHttpRequest</code>. For examples, and explanations of how one can utilize FormData with XMLHttpRequests, see the <a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects">Using FormData Objects</a> page. For didactic purposes here is <strong>a <em>translation</em> of <a href="#A_little_vanilla_framework">the previous example</a> transformed to use the <code>FormData</code> API</strong>. Note the brevity of the code:</p> + +<div style="height: 400px; margin-bottom: 12px; overflow: auto;"> +<pre class="brush: html"><!doctype html> +<html> +<head> +<meta http-equiv="Content-Type" charset="UTF-8" /> +<title>Sending forms with FormData &ndash; MDN</title> +<script> +"use strict"; + +function ajaxSuccess () { + console.log(this.responseText); +} + +function AJAXSubmit (oFormElement) { + if (!oFormElement.action) { return; } + var oReq = new XMLHttpRequest(); + oReq.onload = ajaxSuccess; + if (oFormElement.method.toLowerCase() === "post") { + oReq.open("post", oFormElement.action); + oReq.send(new FormData(oFormElement)); + } else { + var oField, sFieldType, nFile, sSearch = ""; + for (var nItem = 0; nItem < oFormElement.elements.length; nItem++) { + oField = oFormElement.elements[nItem]; + if (!oField.hasAttribute("name")) { continue; } + sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? + oField.getAttribute("type").toUpperCase() : "TEXT"; + if (sFieldType === "FILE") { + for (nFile = 0; nFile < oField.files.length; + sSearch += "&" + escape(oField.name) + "=" + escape(oField.files[nFile++].name)); + } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) { + sSearch += "&" + escape(oField.name) + "=" + escape(oField.value); + } + } + oReq.open("get", oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), true); + oReq.send(null); + } +} +</script> +</head> +<body> + +<h1>Sending forms with FormData</h1> + +<h2>Using the GET method</h2> + +<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;"> + <fieldset> + <legend>Registration example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> +</form> + +<h2>Using the POST method</h2> +<h3>Enctype: application/x-www-form-urlencoded (default)</h3> + +<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;"> + <fieldset> + <legend>Registration example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> +</form> + +<h3>Enctype: text/plain</h3> + +<p>The text/plain encoding is not supported by the FormData API.</p> + +<h3>Enctype: multipart/form-data</h3> + +<form action="register.php" method="post" enctype="multipart/form-data" + onsubmit="AJAXSubmit(this); return false;"> + <fieldset> + <legend>Upload example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /><br /> + Sex: + <input id="sex_male" type="radio" name="sex" value="male" /> + <label for="sex_male">Male</label> + <input id="sex_female" type="radio" name="sex" value="female" /> + <label for="sex_female">Female</label><br /> + Password: <input type="password" name="secret" /><br /> + What do you prefer: + <select name="image_type"> + <option>Books</option> + <option>Cinema</option> + <option>TV</option> + </select> + </p> + <p> + Post your photos: + <input type="file" multiple name="photos[]"> + </p> + <p> + <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> + <label for="vehicle_bike">I have a bike</label><br /> + <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> + <label for="vehicle_car">I have a car</label> + </p> + <p> + Describe yourself:<br /> + <textarea name="description" cols="50" rows="8"></textarea> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> +</form> +</body> +</html></pre> +</div> + +<div class="note"><strong>Note:</strong> As we said,<strong> {{domxref("FormData")}} objects are not <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">stringifiable</a> objects</strong>. If you want to stringify a submitted data, use <a href="#A_little_vanilla_framework">the previous <em>pure</em>-AJAX example</a>. Note also that, although in this example there are some <code>file</code> {{ HTMLElement("input") }} fields, <strong>when you submit a form through the <code>FormData</code> API you do not need to use the {{domxref("FileReader")}} API also</strong>: files are automatically loaded and uploaded.</div> + +<h2 id="Get_last_modified_date">Get last modified date</h2> + +<pre class="brush: js">function getHeaderTime () { + console.log(this.getResponseHeader("Last-Modified")); /* A valid GMTString date or null */ +} + +var oReq = new XMLHttpRequest(); +oReq.open("HEAD" /* use HEAD if you only need the headers! */, "yourpage.html"); +oReq.onload = getHeaderTime; +oReq.send();</pre> + +<h3 id="Do_something_when_last_modified_date_changes">Do something when last modified date changes</h3> + +<p>Let's create two functions:</p> + +<pre class="brush: js">function getHeaderTime () { + var nLastVisit = parseFloat(window.localStorage.getItem('lm_' + this.filepath)); + var nLastModif = Date.parse(this.getResponseHeader("Last-Modified")); + + if (isNaN(nLastVisit) || nLastModif > nLastVisit) { + window.localStorage.setItem('lm_' + this.filepath, Date.now()); + isFinite(nLastVisit) && this.callback(nLastModif, nLastVisit); + } +} + +function ifHasChanged(sURL, fCallback) { + var oReq = new XMLHttpRequest(); + oReq.open("HEAD" /* use HEAD - we only need the headers! */, sURL); + oReq.callback = fCallback; + oReq.filepath = sURL; + oReq.onload = getHeaderTime; + oReq.send(); +}</pre> + +<p>And to test:</p> + +<pre class="brush: js">/* Let's test the file "yourpage.html"... */ + +ifHasChanged("yourpage.html", function (nModif, nVisit) { + console.log("The page '" + this.filepath + "' has been changed on " + (new Date(nModif)).toLocaleString() + "!"); +});</pre> + +<p>If you want to know <strong><em>if</em> <em>the current page</em> has changed</strong>, please read the article about {{domxref("document.lastModified")}}.</p> + +<h2 id="Cross-site_XMLHttpRequest">Cross-site XMLHttpRequest</h2> + +<p>Modern browsers support cross-site requests by implementing the <a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing</a> (CORS) standard. As long as the server is configured to allow requests from your web application's origin, <code>XMLHttpRequest</code> will work. Otherwise, an <code>INVALID_ACCESS_ERR</code> exception is thrown.</p> + +<h2 id="Bypassing_the_cache">Bypassing the cache</h2> + +<p>A cross-browser compatible approach to bypassing the cache is appending a timestamp to the URL, being sure to include a "?" or "&" as appropriate. For example:</p> + +<pre class="brush:plain">http://foo.com/bar.html -> http://foo.com/bar.html?12345 +http://foo.com/bar.html?foobar=baz -> http://foo.com/bar.html?foobar=baz&12345 +</pre> + +<p>As the local cache is indexed by URL, this causes every request to be unique, thereby bypassing the cache.</p> + +<p>You can automatically adjust URLs using the following code:</p> + +<pre class="brush:js">var oReq = new XMLHttpRequest(); + +oReq.open("GET", url + ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime()); +oReq.send(null);</pre> + +<h2 id="Security">Security</h2> + +<p>{{fx_minversion_note(3, "Versions of Firefox prior to Firefox 3 allowed you to set the preference <code>capability.policy.<policyname>.XMLHttpRequest.open</policyname></code> to <code>allAccess</code> to give specific sites cross-site access. This is no longer supported.")}}</p> + +<p>{{fx_minversion_note(5, "Versions of Firefox prior to Firefox 5 could use <code>netscape.security.PrivilegeManager.enablePrivilege(\"UniversalBrowserRead\");</code> to request cross-site access. This is no longer supported, even though it produces no warning and permission dialog is still presented.")}}</p> + +<p>The recommended way to enable cross-site scripting is to use the <code>Access-Control-Allow-Origin</code> HTTP header in the response to the XMLHttpRequest.</p> + +<h3 id="XMLHttpRequests_being_stopped">XMLHttpRequests being stopped</h3> + +<p>If you conclude with an XMLHttpRequest receiving <code>status=0</code> and <code>statusText=null</code>, this means the request was not allowed to be performed. It was <code><a href="https://xhr.spec.whatwg.org/#dom-xmlhttprequest-unsent">UNSENT</a></code>. A likely cause for this is when the <a href="https://www.w3.org/TR/2010/CR-XMLHttpRequest-20100803/#xmlhttprequest-origin"><code>XMLHttpRequest</code> origin</a> (at the creation of the XMLHttpRequest) has changed when the XMLHttpRequest is subsequently <code>open()</code>. This case can happen, for example, when one has an XMLHttpRequest that gets fired on an onunload event for a window, the expected XMLHttpRequest is created when the window to be closed is still there, and finally sending the request (in otherwords, <code>open()</code>) when this window has lost its focus and another window gains focus. The most effective way to avoid this problem is to set a listener on the new window's {{event("activate")}} event which is set once the terminated window has its {{event("unload")}} event triggered.</p> + +<h2 id="Workers">Workers</h2> + +<p>Setting <code>overrideMimeType</code> does not work from a {{domxref("Worker")}}. See {{bug(678057)}} for more details. Other browsers may handle this differently.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('XMLHttpRequest')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>Live standard, latest version</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.XMLHttpRequest")}}</p> + +<h2 id="See_also">See also</h2> + +<ol> + <li><a href="/en-US/docs/AJAX/Getting_Started">MDN AJAX introduction</a></li> + <li><a href="/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a></li> + <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control</a></li> + <li><a href="/en-US/docs/How_to_check_the_security_state_of_an_XMLHTTPRequest_over_SSL">How to check the security state of an XMLHTTPRequest over SSL</a></li> + <li><a href="http://www.peej.co.uk/articles/rich-user-experience.html">XMLHttpRequest - REST and the Rich User Experience</a></li> + <li><a href="https://msdn.microsoft.com/library/ms535874">Microsoft documentation</a></li> + <li><a href="http://jibbering.com/2002/4/httprequest.html">"Using the XMLHttpRequest Object" (jibbering.com)</a></li> + <li><a href="https://xhr.spec.whatwg.org/">The <code>XMLHttpRequest</code> object: WHATWG specification</a></li> +</ol> diff --git a/files/id/web/css/@font-face/font-display/index.html b/files/id/web/css/@font-face/font-display/index.html new file mode 100644 index 0000000000..50fed7426a --- /dev/null +++ b/files/id/web/css/@font-face/font-display/index.html @@ -0,0 +1,101 @@ +--- +title: font-display +slug: Web/CSS/@font-face/font-display +translation_of: Web/CSS/@font-face/font-display +--- +<div>{{CSSRef}}</div> + +<p>The <strong><code>font-display</code></strong> descriptor determines how a font face is displayed based on whether and when it is downloaded and ready to use.</p> + +<h2 id="The_font_display_timeline">The font display timeline</h2> + +<p>The font display timeline is based on a timer that begins the moment the user agent attempts to use a given downloaded font face. The timeline is divided into the three periods below which dictate the rendering behavior of any elements using the font face.</p> + +<dl> + <dt>Font block period</dt> + <dd>If the font face is not loaded, any element attempting to use it must render an <em>invisible</em> fallback font face. If the font face successfully loads during this period, it is used normally.</dd> + <dt>Font swap period</dt> + <dd>If the font face is not loaded, any element attempting to use it must render a fallback font face. If the font face successfully loads during this period, it is used normally.</dd> + <dt>Font failure period</dt> + <dd>If the font face is not loaded, the user agent treats it as a failed load causing normal font fallback.</dd> +</dl> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css;">/* Keyword values */ +font-display: auto; +font-display: block; +font-display: swap; +font-display: fallback; +font-display: optional;</pre> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>The font display strategy is defined by the user agent.</dd> + <dt><code>block</code></dt> + <dd>Gives the font face a short block period and an infinite swap period.</dd> + <dt><code>swap</code></dt> + <dd>Gives the font face an extremely small block period and an infinite swap period.</dd> + <dt><code>fallback</code></dt> + <dd>Gives the font face an extremely small block period and a short swap period.</dd> + <dt><code>optional</code></dt> + <dd>Gives the font face an extremely small block period and no swap period.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: css; highlight[7]">@font-face { + font-family: ExampleFont; + src: url(/path/to/fonts/examplefont.woff) format('woff'), + url(/path/to/fonts/examplefont.eot) format('eot'); + font-weight: 400; + font-style: normal; + font-display: fallback; +}</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Fonts', '#font-display-desc', 'font-display')}}</td> + <td>{{Spec2('CSS4 Fonts')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.at-rules.font-face.font-display")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{cssxref("@font-face/font-family", "font-family")}}</li> + <li>{{cssxref("@font-face/font-stretch", "font-stretch")}}</li> + <li>{{cssxref("@font-face/font-style", "font-style")}}</li> + <li>{{cssxref("@font-face/font-weight", "font-weight")}}</li> + <li>{{cssxref("@font-face/font-variant", "font-variant")}}</li> + <li>{{cssxref("font-feature-settings", "font-feature-settings")}}</li> + <li>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</li> + <li>{{cssxref("@font-face/src", "src")}}</li> + <li>{{cssxref("@font-face/unicode-range", "unicode-range")}}</li> +</ul> diff --git a/files/id/web/css/@font-face/index.html b/files/id/web/css/@font-face/index.html new file mode 100644 index 0000000000..940386b922 --- /dev/null +++ b/files/id/web/css/@font-face/index.html @@ -0,0 +1,199 @@ +--- +title: '@font-face' +slug: Web/CSS/@font-face +tags: + - '@font-face' + - At-rule + - CSS + - CSS Fonts + - Fonts + - NeedsTranslation + - Reference + - TopicStub + - typography +translation_of: Web/CSS/@font-face +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary">The <strong><code>@font-face</code></strong> <a href="/en-US/docs/CSS">CSS</a> <a href="/en-US/docs/CSS/At-rule">at-rule</a> specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's own computer.</span> If the <code>local()</code> function is provided, specifying a font name to look for on the user's computer, and the {{Glossary("user agent")}} finds a match, that local font is used. Otherwise, the font resource specified using the <code>url()</code> function is downloaded and used.</p> + +<p>By allowing authors to provide their own fonts, <code>@font-face</code> makes it possible to design content without being limited to the so-called "web-safe" fonts (that is, the fonts which are so common that they're considered to be universally available). The ability to specify the name of a locally-installed font to look for and use makes it possible to customize the font beyond the basics while making it possible to do so without relying on an Internet connection.</p> + +<p>It's common to use both <code>url()</code> and <code>local()</code> together, so that the user's installed copy of the font is used if available, falling back to downloading a copy of the font if it's not found on the user's device.</p> + +<p>The <code>@font-face</code> at-rule may be used not only at the top level of a CSS, but also inside any <a href="/en-US/docs/Web/CSS/At-rule#Conditional_group_rules">CSS conditional-group at-rule</a>.</p> + +<pre class="brush: css no-line-numbers">@font-face { + font-family: "Open Sans"; + src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), + url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); +}</pre> + +<h2 id="Syntax">Syntax</h2> + +<h3 id="Descriptors">Descriptors</h3> + +<dl> + <dt>{{cssxref("@font-face/font-display", "font-display")}}</dt> + <dd>Determines how a font face is displayed based on whether and when it is downloaded and ready to use.</dd> + <dt>{{cssxref("@font-face/font-family", "font-family")}}</dt> + <dd>Specifies a name that will be used as the font face value for font properties.</dd> + <dt>{{cssxref("@font-face/font-stretch", "font-stretch")}}</dt> + <dd>A {{cssxref("font-stretch")}} value. Since Firefox 61 (and in other modern browsers) this also accepts two values to specify a range that is supported by a font-face, for example <code>font-stretch: 50% 200%;</code></dd> + <dt>{{cssxref("@font-face/font-style", "font-style")}}</dt> + <dd>A {{cssxref("font-style")}} value. Since Firefox 61 (and in other modern browsers) this also accepts two values to specify a range that is supported by a font-face, for example <code>font-style: oblique 20deg 50deg;</code></dd> + <dt>{{cssxref("@font-face/font-weight", "font-weight")}}</dt> + <dd>A {{cssxref("font-weight")}} value. Since Firefox 61 (and in other modern browsers) this also accepts two values to specify a range that is supported by a font-face, for example <code>font-weight: 100 400;</code></dd> + <dt>{{cssxref("@font-face/font-variant", "font-variant")}}</dt> + <dd>A {{cssxref("font-variant")}} value.</dd> + <dt>{{cssxref("font-feature-settings", "font-feature-settings")}}</dt> + <dd>Allows control over advanced typographic features in OpenType fonts.</dd> + <dt>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</dt> + <dd>Allows low-level control over OpenType or TrueType font variations, by specifying the four letter axis names of the features to vary, along with their variation values.</dd> + <dt>{{cssxref("@font-face/src", "src")}}</dt> + <dd> + <p>Specifies the resource containing the font data. This can be a URL to a remote font file location or the name of a font on the user's computer.</p> + + <p>To provide the browser with a hint as to what format a font resource is — so it can select a suitable one — it is possible to include a format type inside a <code>format()</code> function:</p> + + <pre class="brush: css">src: url(ideal-sans-serif.woff) <strong>format("woff")</strong>, + url(basic-sans-serif.ttf) <strong>format("truetype")</strong>;</pre> + + <p>The available types are: <code>"woff"</code>, <code>"woff2"</code>, <code>"truetype"</code>, <code>"opentype"</code>, <code>"embedded-opentype"</code>, and <code>"svg"</code>.</p> + </dd> + <dt>{{cssxref("@font-face/unicode-range", "unicode-range")}}</dt> + <dd>The range of Unicode code points to be used from the font.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<p>This example simply specifies a downloadable font to use, applying it to the entire body of the document:</p> + +<p><a href="https://mdn.mozillademos.org/files/7775/webfont-sample.html">View the live example</a></p> + +<pre class="brush: html"><html> +<head> + <title>Web Font Sample</title> + <style type="text/css" media="screen, print"> + @font-face { + font-family: "Bitstream Vera Serif Bold"; + src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf"); + } + + body { font-family: "Bitstream Vera Serif Bold", serif } + </style> +</head> +<body> + This is Bitstream Vera Serif Bold. +</body> +</html> +</pre> + +<p>In this example, the user's local copy of "Helvetica Neue Bold" is used; if the user does not have that font installed (two different names are tried), then the downloadable font named "MgOpenModernaBold.ttf" is used instead:</p> + +<pre class="brush: css">@font-face { + font-family: MyHelvetica; + src: local("Helvetica Neue Bold"), + local("HelveticaNeue-Bold"), + url(MgOpenModernaBold.ttf); + font-weight: bold; +} +</pre> + +<h2 id="Font_MIME_Types">Font MIME Types</h2> + +<table> + <thead> + <tr> + <th>Format</th> + <th>MIME type</th> + </tr> + </thead> + <tbody> + <tr> + <td>TrueType</td> + <td><code>font/ttf</code></td> + </tr> + <tr> + <td>OpenType</td> + <td><code>font/otf</code></td> + </tr> + <tr> + <td>Web Open Font Format</td> + <td><code>font/woff</code></td> + </tr> + <tr> + <td>Web Open Font Format 2</td> + <td><code>font/woff2</code></td> + </tr> + </tbody> +</table> + +<h2 id="Notes">Notes</h2> + +<ul> + <li>Web fonts are subject to the same domain restriction (font files must be on the same domain as the page using them), unless <a href="/en-US/docs/HTTP_access_control">HTTP access controls</a> are used to relax this restriction.</li> + <li><code>@font-face</code> cannot be declared within a CSS selector. For example, the following will not work: + <pre class="brush: css; example-bad">.className { + @font-face { + font-family: MyHelvetica; + src: local("Helvetica Neue Bold"), + local("HelveticaNeue-Bold"), + url(MgOpenModernaBold.ttf); + font-weight: bold; + } +}</pre> + </li> +</ul> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('WOFF2.0', '', 'WOFF2 font format')}}</td> + <td>{{Spec2('WOFF2.0')}}</td> + <td>Font format specification with new compression algorithm</td> + </tr> + <tr> + <td>{{SpecName('WOFF1.0', '', 'WOFF font format')}}</td> + <td>{{Spec2('WOFF1.0')}}</td> + <td>Font format specification</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Fonts', '#font-face-rule', '@font-face')}}</td> + <td>{{Spec2('CSS3 Fonts')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.at-rules.font-face")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/WOFF">About WOFF</a></li> + <li><a href="https://everythingfonts.com/font-face">Everythingfonts font-face generator</a></li> + <li><a class="external" href="http://www.fontsquirrel.com/fontface/generator">FontSquirrel @font-face generator</a></li> + <li><a class="external" href="http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/">Beautiful fonts with @font-face</a></li> + <li><a class="external" href="http://openfontlibrary.org/">Open Font Library</a></li> + <li><a class="external" href="http://caniuse.com/woff">When can I use WOFF?</a></li> + <li><a class="external" href="http://caniuse.com/svg-fonts">When can I use SVG Fonts?</a></li> + <li><a href="https://coolfont.org">Free Fancy Cool Fonts</a></li> +</ul> diff --git a/files/id/web/css/_colon_active/index.html b/files/id/web/css/_colon_active/index.html new file mode 100644 index 0000000000..67d9357bef --- /dev/null +++ b/files/id/web/css/_colon_active/index.html @@ -0,0 +1,143 @@ +--- +title: ':active' +slug: 'Web/CSS/:active' +translation_of: 'Web/CSS/:active' +--- +<div>{{CSSRef}}</div> + +<h2 id="Rangkuman">Rangkuman</h2> + +<p><code>:active</code> CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a> menunjukkan kapan sebuah elemen telah diaktifasi oleh pengguna. Hal ini memperbolehkan halaman memberikan feedback (korelasi) sehingga aktivasi telah terdeteksi oleh browser. Ketika berinteraksi dengan mouse, hal ini secara tipikal waktu antara pengguna menekan tombol mouse dan merelasisasikannya. :<code>active</code> pseudo-class juga secara tipical ditampilkan ketika menggunakan tombol tab pada keyboard. Hal ini sering digunakan pada element HTML {{HTMLElement("a")}} dan {{HTMLElement("button")}}, tetapi boleh jadi tidak terbatas pada hal tersebut.</p> + +<p>Style ini boleh jadi digunakan lebih oleh sebuah link-related pseudo-classes (tautan-terhubung dengan pseudo kelas) lainnya, yang mana merupakan {{cssxref(":link")}}, {{cssxref(":hover")}}, and {{cssxref(":visited")}}, ditampilkan dalam aturan bagian-bagiannya. Dalam memperoleh penampilan yang teraprofiasi dengan link, kamu membutuhkan menempatkan aturan :active setelah seluruh yang lainnya terhubungan dengan aturan link (link-related-rules), seperti diuraikan oleh <em>LHVA-order</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p> + +<div class="note"><strong>Cataan:</strong> Pada system dengan multi tombol mouse, CSS 3 spesifik bahwa <code>:active</code> pseudo-class harus hanya diterapkan pada tombol utama; pada klik kanan mouse, ini secara tipikal kebanyakan pada tombol kiri.</div> + +<h2 id="Example" name="Example">Contoh</h2> + +<div id="example"> +<h3 id="HTML">HTML</h3> + +<pre class="brush: html; highlight:[3]"><body> + <h1>:active CSS selector example</h1> + <p>The following link will turn lime during the time you click it and release the click: <a href="#">Mozilla Developer Network</a>.</p> +</body></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css; highlight:[5]">body { background-color: #ffffc9 } +a:link { color: blue } /* unvisited links */ +a:visited { color: purple } /* visited links */ +a:hover { <span class="st">font-weight: bold</span> } /* user hovers */ +a:active { color: lime } /* active links */</pre> +</div> + +<div>{{EmbedLiveSample('example',600,140)}}</div> + +<h2 id="Spesifikasi"><span>Spesifikasi</span></h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Dukungan_Browser">Dukungan Browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>4.0</td> + <td>5.0</td> + <td>1.0</td> + </tr> + <tr> + <td>Support on non-<code><a></code> elements</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>8.0</td> + <td>7.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + <tr> + <td>Support on non-<code><a></code> elements</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}} [1]</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Secara menyeluruh, Safari Mobile tidak menggunakan {{cssxref(":active")}} kesatuan yang tidak ada pada sebuah <a href="/en-US/docs/Web/Reference/Events/touchstart"><code>touchstart</code></a> event handler pada elemen yang relevan atau pada {{HTMLElement("body")}}.</p> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>Link-related pseudo-classes: {{cssxref(":link")}}, {{cssxref(":visited")}}, and {{cssxref(":hover")}}.</li> +</ul> diff --git a/files/id/web/css/background-color/index.html b/files/id/web/css/background-color/index.html new file mode 100644 index 0000000000..920b4d28e5 --- /dev/null +++ b/files/id/web/css/background-color/index.html @@ -0,0 +1,149 @@ +--- +title: background-color +slug: Web/CSS/background-color +translation_of: Web/CSS/background-color +--- +<div>{{CSSRef}}</div> + +<p><strong><code>Background-color</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> digunakan untuk seting warna latar belakang dari element yang di inginkan.</p> + +<div>{{EmbedInteractiveExample("pages/css/background-color.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css no-line-numbers">/* Keyword values */ +background-color: red; +background-color: indigo; + +/* Hexadecimal value */ +background-color: #bbff00; /* Fully opaque */ +background-color: #11ffee00; /* Fully transparent */ +background-color: #11ffeeff; /* Fully opaque */ + +/* RGB value */ +background-color: rgb(255, 255, 128); /* Fully opaque */ +background-color: rgba(117, 190, 218, 0.5); /* 50% transparent */ + +/* HSL value */ +background-color: hsl(50, 33%, 25%); /* Fully opaque */ +background-color: hsla(50, 33%, 25%, 0.75); /* 75% transparent */ + +/* Special keyword values */ +background-color: currentcolor; +background-color: transparent; + +/* Global values */ +background-color: inherit; +background-color: initial; +background-color: unset;</pre> + +<p><code>Background-color</code> menggunakan hanya satu jenis warna <code><a href="#<color>"><color></a></code> nilai.</p> + +<h3 id="Values">Values</h3> + +<dl> + <dt><a id="<color>"></a>{{cssxref("<color>")}}</dt> + <dd>The uniform color of the background. It is rendered behind any {{cssxref("background-image")}} that is specified, although the color will still be visible through any transparency in the image.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="exampleone"> + Lorem ipsum dolor sit amet, consectetuer +</div> + +<div class="exampletwo"> + Lorem ipsum dolor sit amet, consectetuer +</div> + +<div class="examplethree"> + Lorem ipsum dolor sit amet, consectetuer +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css; highlight:[2,7,12];">.exampleone { + background-color: teal; + color: white; +} + +.exampletwo { + background-color: rgb(153,102,153); + color: rgb(255,255,204); +} + +.examplethree { + background-color: #777799; + color: #FFFFFF; +} +</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Examples", 200, 150)}}</p> + +<h2 id="Accessibility_concerns">Accessibility concerns</h2> + +<p>It is important to ensure that the contrast ratio between the background color and the color of the text placed over it is high enough that people experiencing low vision conditions will be able to read the content of the page.</p> + +<p>Color contrast ratio is determined by comparing the luminosity of the text and background color values. In order to meet current <a href="https://www.w3.org/WAI/intro/wcag">Web Content Accessibility Guidelines (WCAG)</a>, a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and <a href="/en-US/docs/Web/CSS/font-weight">bold</a> or larger, or 24px or larger.</p> + +<ul> + <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Backgrounds', '#background-color', 'background-color')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Though technically removing the <code>transparent</code> keyword, this doesn't change anything as it has been incorporated as a true {{cssxref("<color>")}}</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-color', 'background-color')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#background-color', 'background-color')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<div>{{cssinfo}}</div> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("css.properties.background-color")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">Multiple backgrounds</a></li> + <li>The {{cssxref("<color>")}} data type</li> + <li>Other color-related properties: {{cssxref("color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, and {{cssxref("column-rule-color")}}</li> + <li><a href="/en-US/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a></li> +</ul> diff --git a/files/id/web/css/css_box_model/index.html b/files/id/web/css/css_box_model/index.html new file mode 100644 index 0000000000..08152c9c16 --- /dev/null +++ b/files/id/web/css/css_box_model/index.html @@ -0,0 +1,115 @@ +--- +title: CSS Basic Box Model +slug: Web/CSS/CSS_Box_Model +tags: + - CSS + - CSS Box Model + - NeedsTranslation + - Overview + - Reference + - TopicStub +translation_of: Web/CSS/CSS_Box_Model +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Basic Box Model</strong> is a module of CSS that defines the rectangular boxes—including their padding and margin—that are generated for elements and laid out according to the <a href="/en-US/docs/Web/CSS/Visual_formatting_model">visual formatting model</a>.</p> + +<h2 id="Reference">Reference</h2> + +<h3 id="Properties">Properties</h3> + +<h4 id="Properties_controlling_the_flow_of_content_in_a_box">Properties controlling the flow of content in a box</h4> + +<div class="index"> +<ul> + <li>{{CSSxRef("overflow")}}</li> + <li>{{CSSxRef("overflow-x")}}</li> + <li>{{CSSxRef("overflow-y")}}</li> +</ul> +</div> + +<h4 id="Properties_controlling_the_size_of_a_box">Properties controlling the size of a box</h4> + +<div class="index"> +<ul> + <li>{{CSSxRef("height")}}</li> + <li>{{CSSxRef("width")}}</li> + <li>{{CSSxRef("max-height")}}</li> + <li>{{CSSxRef("max-width")}}</li> + <li>{{CSSxRef("min-height")}}</li> + <li>{{CSSxRef("min-width")}}</li> +</ul> +</div> + +<h4 id="Properties_controlling_the_margins_of_a_box">Properties controlling the margins of a box</h4> + +<div class="index"> +<ul> + <li>{{CSSxRef("margin")}}</li> + <li>{{CSSxRef("margin-bottom")}}</li> + <li>{{CSSxRef("margin-left")}}</li> + <li>{{CSSxRef("margin-right")}}</li> + <li>{{CSSxRef("margin-top")}}</li> + <li>{{CSSxRef("margin-trim")}} {{Experimental_Inline}}</li> +</ul> +</div> + +<h4 id="Properties_controlling_the_paddings_of_a_box">Properties controlling the paddings of a box</h4> + +<div class="index"> +<ul> + <li>{{CSSxRef("padding")}}</li> + <li>{{CSSxRef("padding-bottom")}}</li> + <li>{{CSSxRef("padding-left")}}</li> + <li>{{CSSxRef("padding-right")}}</li> + <li>{{CSSxRef("padding-top")}}</li> +</ul> +</div> + +<h4 id="Other_properties">Other properties</h4> + +<div class="index"> +<ul> + <li>{{CSSxRef("visibility")}}</li> +</ul> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">Introduction to the CSS box model</a></dt> + <dd>Explains one of the fundamental concept of CSS: the box model. This model defines how CSS lays out elements, including their content, padding, border, and margin areas.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Mastering margin collapsing</a></dt> + <dd>Sometimes, two adjacent margins are collapsed into one. This article describes the rules that govern when and why this happens, and how to control it.</dd> + <dt><a href="/en-US/docs/Web/CSS/Visual_formatting_model">Visual formatting model</a></dt> + <dd>Explains the visual formatting model.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Box")}}</td> + <td>{{Spec2("CSS3 Box")}}</td> + <td>Added <code style="white-space: nowrap;">margin-trim</code></td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "box.html")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("CSS1")}}</td> + <td>{{Spec2("CSS1")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> diff --git a/files/id/web/css/css_box_model/introduction_to_the_css_box_model/index.html b/files/id/web/css/css_box_model/introduction_to_the_css_box_model/index.html new file mode 100644 index 0000000000..d81bae36e6 --- /dev/null +++ b/files/id/web/css/css_box_model/introduction_to_the_css_box_model/index.html @@ -0,0 +1,73 @@ +--- +title: Introduction to the CSS basic box model +slug: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model +translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model +--- +<div>{{CSSRef}}</div> + +<p>When laying out a document, the browser's rendering engine represents each element as a rectangular box according to the standard <strong>CSS basic box model</strong>. CSS determines the size, position, and properties (color, background, border size, etc.) of these boxes.</p> + +<p>Every box is composed of four parts (or <em>areas</em>), defined by their respective edges: the <em>content edge</em>, <em>padding edge</em>, <em>border edge</em>, and <em>margin edge</em>.</p> + +<p><img alt="CSS Box model" src="https://mdn.mozillademos.org/files/8685/boxmodel-(3).png" style="height: 384px; width: 548px;"></p> + +<p id="content-area">The <strong>content area</strong>, bounded by the content edge, contains the "real" content of the element, such as text, an image, or a video player. Its dimensions are the <em>content width</em> (or <em>content-box width</em>) and the <em>content height</em> (or <em>content-box height</em>). It often has a background color or background image.</p> + +<p>If the {{cssxref("box-sizing")}} property is set to <code>content-box</code> (default) and if the element is a block element, the content area's size can be explicitly defined with the {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height") }}, {{cssxref("min-height")}}, and {{cssxref("max-height")}} properties.</p> + +<p id="padding-area">The <strong>padding area</strong>, bounded by the padding edge, extends the content area to include the element's padding. Its dimensions are the <em>padding-box width</em> and the <em>padding-box height</em>.</p> + +<p>The thickness of the padding is determined by the {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}, and shorthand {{cssxref("padding")}} properties.</p> + +<p id="border-area">The <strong>border area</strong>, bounded by the border edge, extends the padding area to include the element's borders. Its dimensions are the <em>border-box width</em> and the <em>border-box height</em>.</p> + +<p>The thickness of the borders are determined by the {{cssxref("border-width")}} and shorthand {{cssxref("border")}} properties. If the {{cssxref("box-sizing")}} property is set to <code>border-box</code>, the border area's size can be explicitly defined with the {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height") }}, {{cssxref("min-height")}}, and {{cssxref("max-height")}} properties. When there is a background ({{cssxref("background-color")}} or {{cssxref("background-image")}}) set on a box, it extends to the outer edge of the border (i.e. extends underneath the border in z-ordering). This default behavior can be altered with the {{cssxref("background-clip")}} css property.</p> + +<p id="margin-area">The <strong>margin area</strong>, bounded by the margin edge, extends the border area to include an empty area used to separate the element from its neighbors. Its dimensions are the <em>margin-box width </em>and the <em>margin-box height</em>.</p> + +<p>The size of the margin area is determined by the {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}}, and shorthand {{cssxref("margin")}} properties. When <a href="/en/CSS/margin_collapsing" title="en/CSS/margin_collapsing">margin collapsing</a> occurs, the margin area is not clearly defined since margins are shared between boxes.</p> + +<p>Finally, note that for non-replaced inline elements, the amount of space taken up (the contribution to the height of the line) is determined by the {{cssxref('line-height')}} property, even though the borders and padding are still displayed around the content.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Containing_block">Layout and the containing block</a></li> + <li><a href="/en-US/docs/Web/CSS/Cascade">Introducing the CSS Cascade</a></li> + <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance">Cascade and inheritance</a></li> +</ul> + +<h2 id="Specification">Specification</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Box', '#intro')}}</td> + <td>{{Spec2('CSS3 Box')}}</td> + <td></td> + </tr> + <tr> + <td>{{ SpecName("CSS2.1","box.html#box-dimensions")}}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Though more precisely worded, there is no practical change.</td> + </tr> + <tr> + <td>{{ SpecName("CSS1","#formatting-model")}}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="See_also_2">See also</h2> + +<ul> + <li>{{css_key_concepts}}</li> +</ul> diff --git a/files/id/web/css/css_selectors/index.html b/files/id/web/css/css_selectors/index.html new file mode 100644 index 0000000000..8bf3fb0034 --- /dev/null +++ b/files/id/web/css/css_selectors/index.html @@ -0,0 +1,154 @@ +--- +title: CSS Selectors +slug: Web/CSS/CSS_Selectors +tags: + - CSS + - CSS Selectors + - NeedsTranslation + - Overview + - Reference + - Selectors + - TopicStub +translation_of: Web/CSS/CSS_Selectors +--- +<div>{{CSSRef}}</div> + +<p><strong>Selectors</strong> define to which elements a set of CSS rules apply.</p> + +<h2 id="Dasar_Selektor">Dasar Selektor</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/Type_selectors">Type selectors</a> (Jenis-Jenis Seleksi)</dt> + <dd>Dasar selektor ini memilih seluruh elemen sehingga ditampilkan dengan pemberian nama.<br> + <strong>Syntax:</strong> <code><var>eltname</var></code><br> + <strong>Example:</strong> <font face="Consolas, Liberation Mono, Courier, monospace">Input akan menampilkan sebuah elemen </font> {{HTMLElement('input')}}.</dd> + <dt><a href="/en-US/docs/Web/CSS/Class_selectors">Class selectors</a> (Selektor Class)</dt> + <dd>Dasar selektor ini memilih elemen yang didasarkan pada nilai attribut classnya.<br> + <strong>Syntax:</strong> <code>.<var>classname</var></code><br> + <strong>Example:</strong> <code>.index</code> akan menampilkan sebuah elemen yang mempunyai indeks class (seperti didefenisikan oleh sebuah attribut <code>class="index"</code> atau yang serupa).</dd> + <dt><a href="/en-US/docs/Web/CSS/ID_selectors">ID selectors</a> (selektor ID)</dt> + <dd>Dasar selektor ini memilih cabangan (nodes) didasarkan pada nilai attribut idnya. Bisa jadi hanya satu elemen dengan sebuah pemberian ID dalam sebuah dokumen.<br> + <strong>Syntax:</strong> <code>#<var>idname</var></code><br> + <strong>Example:</strong> <code>#toc</code> akan menampilkan elemen yang mempunyai id toc (seperti didefenisikan dengan atrribut <code>id="toc"</code> atau yang serupa).</dd> + <dt><a href="/en-US/docs/Web/CSS/Universal_selectors">Universal selectors</a> (selektor seluruhnya)</dt> + <dd>Dasar selektor ini memilih seluruh nodes (cabangan). Ini juga ada dalam hanya sebuah satu-kumpulan nama (namespace) dan dalam seluruh kumpulan nama (all-namespace) yang juga bervariasi.<br> + <strong>Syntax:</strong> <code>* ns|* *|*</code><br> + <strong>Example:</strong> <code>*</code> akan menampilkan seluruh elemen dari dokumen.</dd> + <dt><a href="/en-US/docs/Web/CSS/Attribute_selectors">Attribute selectors</a> (selektor attribut)</dt> + <dd>Dasar selektor ini memilih nodes (cabangan) didasarkan pada sebuah nilai dari atributnya.<br> + <strong>Syntax:</strong> <code>[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]</code><br> + <strong>Example:</strong> <code>[autoplay]</code> akan menampilkan seluruh elemen yang mempunyai attribut <code>autoplay</code> pengaturan (pada sebuah nilai).</dd> +</dl> + +<h2 id="Combinators">Combinators</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/Adjacent_sibling_selectors">Adjacent sibling selectors</a></dt> + <dd>The <code>'+'</code> combinator selects nodes that immediately follow the former specified element.<br> + <strong>Syntax:</strong> <code><var>A</var> + <var>B</var></code><br> + <strong>Example:</strong> <code>ul + li</code> will match any {{HTMLElement('li')}} that immediately follows a {{HTMLElement('ul')}}.</dd> + <dt><a href="/en-US/docs/Web/CSS/General_sibling_selectors">General sibling selectors</a></dt> + <dd>The <code>'~'</code> combinator selects nodes that follow (not necessarily immediately) the former specified element, if both elements shared the same parent.<br> + <strong>Syntax:</strong> <code><var>A</var> ~ <var>B</var></code><br> + <strong>Example:</strong> <code>p ~ span</code> will match all {{HTMLElement('span')}} elements that follow a {{HTMLElement('p')}} element inside the same element.</dd> + <dt><a href="/en-US/docs/Web/CSS/Child_selectors">Child selectors</a></dt> + <dd>The <code>'>'</code> combinator selects nodes that are direct children of the former specified element.<br> + <strong>Syntax:</strong> <code><var>A</var> > <var>B</var></code><br> + <strong>Example:</strong> <code>ul > li</code> will match all {{HTMLElement('li')}} elements that are inside a {{HTMLElement('ul')}} element.</dd> + <dt><a href="/en-US/docs/Web/CSS/Descendant_selectors">Descendant selectors</a></dt> + <dd>The <code>' '</code> combinator selects nodes that are children (not necessary direct children) of the former specified element.<br> + <strong>Syntax:</strong> <code>A B</code><br> + <strong>Example:</strong> <code>div span</code> will match any {{HTMLElement('span')}} element that is inside a {{HTMLElement('div')}} element.</dd> +</dl> + +<h2 id="Pseudo-elements">Pseudo-elements</h2> + +<p><a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo-elements</a> are abstractions of the tree representing entities beyond what HTML does. For example, HTML doesn't have an element describing the first letter or line of a paragraph, or the marker of a list. Pseudo-elements represent these entities and allow CSS rules to be associated with them. that way, these entitities can be styled independently.</p> + +<h2 id="Pseudo-classes">Pseudo-classes</h2> + +<p><a href="/en-US/docs/Web/CSS/Pseudo-classes">Pseudo-classes</a> allow to select elements based on information that is not contained in the document tree like a state or that is particularly complex to extract. E.g. they match if a link has been previously visited or not.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS1')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>3.0</td> + <td>3.5</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.5</td> + <td>{{CompatGeckoMobile("1.9.2")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/id/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html b/files/id/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html new file mode 100644 index 0000000000..9ec7339a95 --- /dev/null +++ b/files/id/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html @@ -0,0 +1,64 @@ +--- +title: 'Using the :target pseudo-class in selectors' +slug: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors' +translation_of: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors' +--- +<p><span class="comment">When a URL points at a specific piece of a document, it can be difficult to ascertain. Find out how you can use some simple CSS to draw attention to the target of a URL and improve the user's experience.</span> {{CSSRef}}</p> + +<p>Membantu mengidentifikasi tujuan dari sebuah tautan yang ditujukan pada sebuan bagian khusus sebuah dokumen, <a class="external" href="http://www.w3.org/TR/css3-selectors/#target-pseudo">CSS3 Selectors</a> mengenalkan <strong>{{ Cssxref(":target") }} </strong><a href="/en/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<h3 id="Picking_a_Target" name="Picking_a_Target">Penentuan Sebuah Target</h3> + +<p>pseudo-class<code> {{ Cssxref(":target") }} digunakan pada menampilkan target elemen dari sebuah URI berisikan sebuah pengidentifikasi menurut bagian bagian. Sebagai contoh, pada </code>URI <code><span class="nowiki">http://developer.mozilla.org/en/docs/Using_the_:target_selector#Example berisi bagian bagian pengidentifikasi #Example. Dalam HTML, pengidentifikasi ditemukan sebagai nilai dari masing masing id atau nama attribut, sejak keduanya membagi namespace (kelompok id atau nama) yang sama. Dengan begitu, contoh URI akan menunjukkan kop "Example" dalam dokumen ini.</span> </code></p> + +<p>Misalkan kamu berharap untuk menampilkan sebuah elemen h2 yang merupakan target sebuah URI, tetapi tidak menginginkan sesuatu jenis dari elemen lainnya untuk menemukan sebuah target tampilan. Ini cukup menyederhakan:</p> + +<pre>h2:target {font-weight: bold;} +</pre> + +<p>Ini juga memungkinkan untuk membuat tampilan yang spesifik dari sebuah bagian bagian terkecil sebuah dokumen. Ini dilakukan menggunakan identifikasi nilai yang menemukan URI didalamnya. Dengan begitu, untuk menambahkan sebuah border pada #Example terpisah, kita dapat menuliskannya dengan:</p> + +<pre>#Example:target {border: 1px solid black;}</pre> + +<h3 id="Targeting_the_Root_Element" name="Targeting_the_Root_Element">Menargetkan Seluruh Elemen</h3> + +<p>Jika intensif (berkelanjutan) untuk membuat sebuah "blanket" tampilan yang akan diterapkan pada seluruh target element, selanjutnya seleksi secara umum yang dapat diterapkan didalamnya:</p> + +<pre>:target {color: red;} +</pre> + +<h3 id="Example" name="Example">Contoh</h3> + +<p>Berikut contoh, ada lima poin tautan elemen dalam dokumen yang sama. Menyeleksi link "First", sebagai contoh, akan menyebabkan <h1 id="one"> menjadi target elemen. Catatan bahwa dokumen boleh melompat pada sebuah scroll posisi baru, selama target elemen ditempatkan pada posisi atas dari jendela browser jika memungkinkan. </p> + +<div id="example"> +<pre><h4 id="one">...</h4> <p id="two">...</p> +<div id="three">...</div> <a id="four">...</a> <em id="five">...</em> + +<a href="#one">First</a> +<a href="#two">Second</a> +<a href="#three">Third</a> +<a href="#four">Fourth</a> +<a href="#five">Fifth</a></pre> +</div> + +<h3 id="Conclusion" name="Conclusion">Kesimpulan</h3> + +<p>Dalam kasus dimana sebuah pengidentifikasi poin bagian bagian dari sebuah bagian dokumen, para pembaca bisa jadi dibingungkan tentang yang mana bagian dari dokumen yang mereka anggap untuk dapat dibaca (diseleksi). Dengan gaya target sebuah URI, kebingungan pembaca dapat dikurangi atau dihilangkan. </p> + +<h3 id="Related_Links" name="Related_Links">Related Links</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/css3-selectors/#target-pseudo">CSS3 Selectors #target-pseudo</a></li> + <li><a class="internal" href="/En/CSS/:target" title="En/CSS/:target">CSS Reference :target</a></li> +</ul> + +<div class="originaldocinfo"> +<h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3> + +<ul> + <li>Author(s): Eric Meyer, Standards Evangelist, Netscape Communications</li> + <li>Original Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.</li> + <li>Note: This reprinted article was originally part of the DevEdge site.</li> +</ul> +</div> diff --git a/files/id/web/css/flex-direction/index.html b/files/id/web/css/flex-direction/index.html new file mode 100644 index 0000000000..7406212148 --- /dev/null +++ b/files/id/web/css/flex-direction/index.html @@ -0,0 +1,155 @@ +--- +title: flex-direction +slug: Web/CSS/flex-direction +translation_of: Web/CSS/flex-direction +--- +<div>{{CSSRef}}</div> + +<p><br> +</p> + +<p dir="ltr"><strong id="docs-internal-guid-3c370947-7fff-bd87-9412-328b8bc6d405">flex-direction </strong>adalah properti css yang menentukan sumbu utama dan arah (normal atau terbalik ) dari flex item yang ditempatkan di flex container / wadah .</p> + +<div>{{EmbedInteractiveExample("pages/css/flex-direction.html")}}</div> + + + +<p>Note that the values <code>row</code> and <code>row-reverse</code> are affected by the directionality of the flex container. If its {{HTMLAttrxRef("dir")}} attribute is <code>ltr</code>, <code>row</code> represents the horizontal axis oriented from the left to the right, and <code>row-reverse</code> from the right to the left; if the <code>dir</code> attribute is <code>rtl</code>, <code>row</code> represents the axis oriented from the right to the left, and <code>row-reverse</code> from the left to the right.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css no-line-numbers notranslate">/* The direction text is laid out in a line */ +flex-direction: row; + +/* Like <row>, but reversed */ +flex-direction: row-reverse; + +/* The direction in which lines of text are stacked */ +flex-direction: column; + +/* Like <column>, but reversed */ +flex-direction: column-reverse; + +/* Global values */ +flex-direction: inherit; +flex-direction: initial; +flex-direction: unset; +</pre> + +<h3 id="Values">Values</h3> + +<p>The following values are accepted:</p> + +<dl> + <dt><code>row</code></dt> + <dd>The flex container's main-axis is defined to be the same as the text direction. The <strong>main-start</strong> and <strong>main-end</strong> points are the same as the content direction.</dd> + <dt><code>row-reverse</code></dt> + <dd>Behaves the same as <code>row</code> but the <strong>main-start</strong> and <strong>main-end</strong> points are permuted.</dd> + <dt><code>column</code></dt> + <dd>The flex container's main-axis is the same as the block-axis. The <strong>main-start</strong> and <strong>main-end</strong> points are the same as the <strong>before</strong> and <strong>after</strong> points of the writing-mode.</dd> + <dt><code>column-reverse</code></dt> + <dd>Behaves the same as <code>column</code> but the <strong>main-start</strong> and <strong>main-end</strong> are permuted.</dd> +</dl> + +<h2 id="Accessibility_concerns">Accessibility concerns</h2> + +<p>Using the <code>flex-direction</code> property with values of <code>row-reverse</code> or <code>column-reverse</code> will create a disconnect between the visual presentation of content and DOM order. This will adversely affect users experiencing low vision navigating with the aid of assistive technology such as a screen reader. If the visual (CSS) order is important, then screen reader users will not have access to the correct reading order.</p> + +<ul> + <li><a class="external external-icon" href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/" rel="noopener">Flexbox & the keyboard navigation disconnect — Tink</a></li> + <li><a class="external external-icon" href="http://adrianroselli.com/2015/09/source-order-matters.html" rel="noopener">Source Order Matters | Adrian Roselli</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">MDN Understanding WCAG, Guideline 1.3 explanations</a></li> + <li><a class="external external-icon" href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html" rel="noopener">Understanding Success Criterion 1.3.2 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Formal_definition">Formal definition</h2> + +<p>{{cssinfo}}</p> + +<h2 id="Formal_syntax">Formal syntax</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="Reversing_flex_container_columns_and_rows">Reversing flex container columns and rows</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><h4>This is a Column-Reverse</h4> +<div id="content"> + <div class="box" style="background-color:red;">A</div> + <div class="box" style="background-color:lightblue;">B</div> + <div class="box" style="background-color:yellow;">C</div> +</div> +<h4>This is a Row-Reverse</h4> +<div id="content1"> + <div class="box1" style="background-color:red;">A</div> + <div class="box1" style="background-color:lightblue;">B</div> + <div class="box1" style="background-color:yellow;">C</div> +</div> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">#content { + width: 200px; + height: 200px; + border: 1px solid #c3c3c3; + display: flex; + flex-direction: column-reverse; +} + +.box { + width: 50px; + height: 50px; +} + +#content1 { + width: 200px; + height: 200px; + border: 1px solid #c3c3c3; + display: flex; + flex-direction: row-reverse; +} + +.box1 { + width: 50px; + height: 50px; +}</pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample('Reversing_flex_container_columns_and_rows', '', '550')}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Flexbox', '#flex-direction-property', 'flex-direction')}}</td> + <td>{{Spec2('CSS3 Flexbox')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("css.properties.flex-direction")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li> + <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordering flex items</a></em></li> +</ul> diff --git a/files/id/web/css/index.html b/files/id/web/css/index.html new file mode 100644 index 0000000000..c4f9c56adb --- /dev/null +++ b/files/id/web/css/index.html @@ -0,0 +1,64 @@ +--- +title: CSS +slug: Web/CSS +translation_of: Web/CSS +--- +<p><span class="seoSummary"><strong>Cascading Style Sheets</strong>, dikenal juga sebagai <strong>CSS</strong>, adalah bahasa <a href="/en-US/docs/DOM/stylesheet">stylesheet</a> yang digunakan untuk merubah tampilan dokumen yang terulis dalam <a href="/en-US/docs/HTML" title="The HyperText Mark-up Language">HTML</a></span> atau <a href="/en-US/docs/XML" title="en-US/docs/XML">XML</a> (termasuk variasi bahasa XML seperti <a href="/en-US/docs/SVG" title="en-US/docs/SVG">SVG</a> atau <a href="/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML</a>). CSS menjelaskan bagaimana elemen terstruktur yang harus ditampilkan di layar, di kertas, dalam cara komunikasi, atau dalam media yang lain.</p> + +<p>CSS adalah salah satu dari bahasa inti dari <em>open web</em> (web berbasis terbuka) dan telah berstandar <a class="external" href="http://w3.org/Style/CSS/#specs">W3C specification</a>. Dibangun dalam berbagai level, CSS1 sekarang sudah kuno, CSS2.1 direkomendasi dan <a href="/en-US/docs/CSS/CSS3" title="CSS3">CSS3</a>, sekarang terbagi dalam modul kecil, bergerak dalam jalur standar.</p> + +<section id="sect1"> +<ul class="card-grid"> + <li><span>Referensi CSS</span> + + <p><a href="/en-US/docs/Web/CSS/Reference" title="en-US/docs/CSS/CSS_Reference">Referensi lengkap</a> untuk <u>pengembang Web musiman</u> menjelaskan setiap properti dan konsep CSS.</p> + </li> + <li><span>CSS Tutorial</span> + <p><a href="/en-US/docs/CSS/Getting_Started" title="en-US/docs/CSS/Getting_Started">Pengenalan langkah demi langkah</a> untuk membantu <u>para pemula</u> yang baru memulai. Di sini menyajikan semua hal yang dibutuhkan.</p> + </li> + <li><span>Demo CSS3</span> + <p><a href="/en-US/demos/tag/tech:css3" title="https://developer.mozilla.org/en-US/demos/tag/tech:css3">Kumpulan Demo</a> memperlihatkan <u>teknologi terakhir CSS</u> dalam aksinya: dorongan untuk berkreatifitas.</p> + </li> +</ul> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Documentation" name="Documentation">Dokumentasi dan tutorial</h2> + +<dl> + <dt>Kunci konsep CSS</dt> + <dd>Menjelaskan <a href="/en-US/docs/CSS/Syntax" title="/en-US/docs/CSS/Syntax">syntax dan lembar bahasa</a> dan memperkenalkan dasar-dasar seperti <a href="/en-US/docs/CSS/Specificity" title="Specificity">specificity</a> dan <a href="/en-US/docs/CSS/inheritance" title="inheritance">inheritance</a>, <a href="/en-US/docs/CSS/box_model" title="Box model">box model</a> dan <a href="/en-US/docs/CSS/margin_collapsing" title="Margin collapsing">margin collapsing</a>, <a href="/en-US/docs/CSS/Understanding_z-index/The_stacking_context" title="The stacking context">stacking</a> dan konteks <a href="/en-US/docs/CSS/block_formatting_context" title="block formatting context">block-formatting</a>, atau <a href="/en-US/docs/CSS/initial_value" title="initial value">initial</a>, <a href="/en-US/docs/CSS/computed_value" title="computed value">computed</a>, <a href="/en-US/docs/CSS/used_value" title="used value">used</a> dan nilai <a href="/en-US/docs/CSS/actual_value" title="actual value">actual</a>. Entitas seperti <a href="/en-US/docs/CSS/Shorthand_properties" title="CSS/Shorthand_properties">CSS shorthand properties</a> juga dijelaskan.</dd> + <dt><a href="/en-US/docs/Web/Guide/CSS" title="/en-US/docs/Web/Guide/CSS">Panduan Pengembang CSS</a></dt> + <dd>Artikel yang membantu mempelajari tehnik CSS untuk membuat konten anda bersinar.</dd> +</dl> + +<h2 class="Tools" id="Tools" name="Tools">Alat untuk pengembang CSS</h2> + +<ul> + <li><a class="external" href="http://jigsaw.w3.org/css-validator/">W3C CSS Validation Service</a> mengecek bila CSS yang diberikan adalah valid. Ini adalah alat debugging yang berguna.</li> + <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1843">Firebug extension </a><span class="external">milik Firefox, extensi populer</span> yang mengizinkan untuk merubah secara langsung CSS dalam situs yang dilihat. Sangat praktis untuk beberapa perubahan, bahkan ekstensi ini berguna lebih banyak.</li> + <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/60">Web Developer extension</a> milik FireFox juga mengizinkan melihat dan merubah scara langsung CSS dalam situs yang dilihat. lebih mudah daripada Firebug, walaupun kurang berguna.</li> + <li><a class="external link-https" href="https://addons.mozilla.org/en-US/firefox/addon/179">EditCSS extension</a> milik FireFox mengizinkan mengubah CSS dalam sidebar.</li> +</ul> + +<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Topik yang berhubungan</h2> + +<ul> + <li>Pembelajaran Mozilla <a href="/en-US/learn/css" title="https://developer.mozilla.org/en-US/learn/css">sumber CSS</a>.</li> + <li>Bahasa Web terbuka dimana CSS sering digunakan: <a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a>, <a href="/en-US/docs/SVG" title="SVG">SVG</a>, <a href="/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML</a>, <a href="/en-US/docs/XML" title="en-US/docs/XML">XML</a>.</li> + <li>Teknologi Mozilla dimana ada penggunaan CSS: <a href="/en-US/docs/XUL" title="en-US/docs/XUL">XUL</a>, Firefox dan Thunderbird <a href="/en-US/docs/Extensions" title="en-US/docs/Extensions">extensions</a> dan <a href="/en-US/docs/Themes" title="en-US/docs/Themes">themes</a>.</li> +</ul> +</div> + +<div class="section"> +<h2 class="Related_Topics" id="News" name="News">Berita</h2> + +<ul> + <li><a href="http://www.w3.org/TR/css-text-decor-3/" title="http://www.w3.org/TR/css-text-decor-3/">CSS Text-decoration Level 3</a> mencapai status <em>Candidate Recommandation</em>, termasuk properti <code>text-decoration-*</code> dan <code>text-emphasis-*</code>. Berikut lingk yang menjelaskan hal ini {{cssxref("text-shadow")}}. (<em>August 1st, 2013)</em></li> + <li>Gecko sekarang suport {{cssxref("background-origin")}}<code>: local</code>. Ini tersedia dari Firefox 25 (dan siap juga dalam Nightly). <em>(July 25th, 2013)</em></li> + <li><a href="http://www.w3.org/TR/pointerevents/" title="http://www.w3.org/TR/pointerevents/">Pointer Events</a> mencapai status <em>Candidate Recommandation</em>, berarti properti CSS <code>touch-action</code>, yang hanya dapat diimplementasikan pada IE10 (dengan prefiks <code>-ms-</code> ), sekarang bukan percobaan lagi. <em>(May 6th, 2013)</em></li> + <li>Gecko suport <a href="/en-US/docs/CSS/Tutorials/Using_CSS_flexible_boxes" title="/en-US/docs/CSS/Tutorials/Using_CSS_flexible_boxes"><em>flexible boxes</em></a> yang telah ditambahkan untuk menyesuaikan spesifikasi terkini tercantum: dari Firefox 23 {{cssxref("::before")}} dan {{cssxref("::after")}} bersama dengan item fleksibel, dan semacam itu, dapat dipindah menggunakan {{cssxref("order")}} dan {{cssxref("align-self")}}. <em>(May 3rd, 2013)</em></li> +</ul> +</div> +</div> +</section> diff --git a/files/id/web/css/mask-border-width/index.html b/files/id/web/css/mask-border-width/index.html new file mode 100644 index 0000000000..b017ac4a56 --- /dev/null +++ b/files/id/web/css/mask-border-width/index.html @@ -0,0 +1,104 @@ +--- +title: mask-border-width +slug: Web/CSS/mask-border-width +translation_of: Web/CSS/mask-border-width +--- +<div>{{CSSRef}}</div> + +<p>The <strong><code>mask-border-width</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> properti mengatur lebar elemen <a href="/en-US/docs/Web/CSS/mask-border">mask border</a>.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css no-line-numbers notranslate">/* Keyword value */ +mask-border-width: auto; + +/* <length> value */ +mask-border-width: 1rem; + +/* <percentage> value */ +mask-border-width: 25%; + +/* <number> value */ +mask-border-width: 3; + +/* vertical | horizontal */ +mask-border-width: 2em 3em; + +/* top | horizontal | bottom */ +mask-border-width: 5% 15% 10%; + +/* top | right | bottom | left */ +mask-border-width: 5% 2em 10% auto; + +/* Global values */ +mask-border-width: inherit; +mask-border-width: initial; +mask-border-width: unset; +</pre> + +<p>The <code>mask-border-width</code> properti dapat ditentukan menggunakan satu, dua, tiga, atau empat nilai yang dipilih dari daftar nilai di bawah.</p> + +<ul> + <li>Ketika <strong>satu</strong> nilai ditentukan, ini menerapkan lebar yang sama ke <strong>keempat sisinya.</strong></li> + <li>Ketika <strong>dua</strong> nilai ditentukan, lebar pertama diterapkan ke <strong>atas dan bawah</strong>, yang kedua setelah <strong>kiri dan kanan.</strong></li> + <li>Ketika <strong>tiga</strong> nilai ditentukan, lebar pertama diterapkan ke <strong>atas</strong>, yang kedua setelah <strong>kiri dan kanan</strong>, yang kedua setelah <strong>bawah</strong>.</li> + <li>Ketika <strong>empat</strong> nilai ditentukan, lebar berlaku untuk <strong>atas</strong>, <strong>kanan</strong>, <strong>bawah</strong>, dan <strong>kiri</strong> dalam urutan itu (searah jarum jam).</li> +</ul> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code><length-percentage></code></dt> + <dd>Lebar batas topeng, ditetapkan sebagai {{cssxref ("<length>")}} atau {{cssxref ("<percentage>")}}. Persentase relatif terhadap lebar area perbatasan untuk offset horizontal dan tinggi area perbatasan untuk offset vertikal. Tidak boleh negatif.</dd> + <dt><code><number></code></dt> + <dd>Lebar batas topeng, ditentukan sebagai kelipatan yang sesuai {{cssxref("border-width")}}. Tidak boleh negatif.</dd> + <dt><code>auto</code></dt> + <dd>Lebar batas topeng dibuat sama dengan lebar atau tinggi intrinsik (mana yang dapat diterapkan) yang sesuai {{cssxref("mask-border-slice")}}. Jika gambar tidak memiliki dimensi intrinsik yang diperlukan, sesuai <code>border-width</code> digunakan sebagai gantinya.</dd> +</dl> + +<h2 id="Formal_definition">Formal definition</h2> + +<p>{{cssinfo}}</p> + +<h2 id="Formal_syntax">Formal syntax</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="Basic_usage">Basic usage</h3> + +<p>Properti ini tampaknya belum didukung di mana pun. Ketika akhirnya mulai didukung, itu akan berfungsi untuk menentukan lebar topeng perbatasan - mengatur ini ke nilai yang berbeda menjadi <code><a href="/en-US/docs/Web/CSS/mask-border-slice">mask-border-slice</a></code> akan menyebabkan irisan diskalakan agar sesuai dengan topeng perbatasan.</p> + +<pre class="brush: css notranslate">mask-border-width: 30 fill;</pre> + +<p>Browser berbasis Chromium mendukung versi lama properti ini — <code>mask-box-image-width</code> — dengan awalan:</p> + +<pre class="brush: css notranslate">-webkit-mask-box-image-width: 20px;</pre> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: The <code><a href="/en-US/docs/Web/CSS/mask-border">mask-border</a></code> Halaman menampilkan contoh yang berfungsi (menggunakan properti topeng perbatasan awalan kedaluwarsa yang didukung di Chromium), sehingga Anda bisa mendapatkan gambaran tentang efeknya.</p> +</div> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Masks", "#propdef-mask-border-width", "mask-border-width")}}</td> + <td>{{Spec2("CSS Masks")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>TBD</p> diff --git a/files/id/web/css/referensi/index.html b/files/id/web/css/referensi/index.html new file mode 100644 index 0000000000..7609391ca5 --- /dev/null +++ b/files/id/web/css/referensi/index.html @@ -0,0 +1,185 @@ +--- +title: Referensi CSS +slug: Web/CSS/referensi +translation_of: Web/CSS/Reference +--- +<div>{{CSSRef}}</div> + +<p>Gunakan <strong>referensi CSS </strong>ini untuk menelusuri indeks alfabetikal dari semua properti <a href="/id/docs/web/CSS">CSS</a> umum, <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classes</a>, <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elements</a>, <a href="/en-US/docs/Web/CSS/CSS_Types">data types</a>, dan <a href="/en-US/docs/Web/CSS/At-rule">at-rules</a>. Anda juga dapat menulusuri <a href="/en-US/docs/Web/CSS#concepts">konsep dasar</a> and a list of <a href="/en-US/docs/Web/CSS/Reference#selectors">selektor berdasarkan jenis</a>. Juga ada <a href="#DOM-CSS_CSSOM">referensi DOM-CSS / CSSOM</a>.</p> + +<h2 id="Basic_rule_syntax">Basic rule syntax</h2> + +<h3 id="Style_rule_syntax">Style rule syntax</h3> + +<pre class="syntaxbox notranslate"><var>style-rule</var> <strong>::=</strong> + <var>selectors-list</var> <strong>{</strong> + <var>properties-list</var> + <strong>}</strong> +</pre> + +<p>... where :</p> + +<pre class="syntaxbox notranslate"><var>selectors-list</var> <strong>::=</strong> + <var>selector</var>[<strong>:</strong><var>pseudo-class</var>] [<strong>::</strong><var>pseudo-element</var>] + [<strong>,</strong> <var>selectors-list</var>] + +<var>properties-list</var> <strong>::=</strong> + [<var>property</var> <strong>:</strong> <var>value</var>] [<strong>;</strong> <var>properties-list</var>] +</pre> + +<p>See the index of <a href="#Selectors"><em>selectors</em></a>, <a href="#Pseudo"><em>pseudo-classes</em></a>, and <em><a href="#Pseudo">pseudo-elements</a></em> below. The syntax for each specified <em>value</em> depends on the data type defined for each specified <em>property</em>.</p> + +<h4 id="Style_rule_examples">Style rule examples</h4> + +<pre class="brush: css notranslate">strong { + color: red; +} + +div.menu-bar li:hover > ul { + display: block; +} +</pre> + +<p>For a beginner-level introduction to the syntax of selectors, see our <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">guide on CSS Selectors</a>. Be aware that any <a href="/en-US/docs/Web/CSS/syntax">syntax</a> error in a rule definition invalidates the entire rule. Invalid rules are ignored by the browser. Note that CSS rule definitions are entirely (ASCII) <a href="https://www.w3.org/TR/css-syntax-3/#intro">text-based</a>, whereas DOM-CSS / CSSOM (the rule management system) is <a href="https://www.w3.org/TR/cssom/#introduction">object-based</a>.</p> + +<h3 id="At-rule_syntax">At-rule syntax</h3> + +<p>As the structure of at-rules varies widely, please see <a href="/en-US/docs/Web/CSS/At-rule">At-rule</a> to find the syntax of the specific one you want.</p> + +<h2 id="Keyword_index">Keyword index</h2> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> The property names in this index do <strong>not</strong> include the <a href="/en-US/docs/Web/CSS/CSS_Properties_Reference">JavaScript names</a> where they differ from the CSS standard names.</p> +</div> + +<div>{{CSS_Ref}}</div> + +<h2 id="Selectors">Selectors</h2> + +<p>The following are the various <a href="/en-US/docs/Web/CSS/CSS_Selectors">selectors</a>, which allow styles to be conditional based on various features of elements within the DOM.</p> + +<h3 id="Basic_selectors">Basic selectors</h3> + +<p><strong>Basic selectors</strong> are fundamental selectors; these are the most basic selectors that are frequently combined to create other, more complex selectors.</p> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Universal_selectors">Universal selector</a> <code>*</code>, <code>ns|*</code>, <code>*|*</code>, <code>|*</code></li> + <li><a href="/en-US/docs/Web/CSS/Type_selectors">Type selector</a> <code><var>elementname</var></code></li> + <li><a href="/en-US/docs/Web/CSS/Class_selectors">Class selector</a> <code>.<var>classname</var></code></li> + <li><a href="/en-US/docs/Web/CSS/ID_selectors">ID selector</a> <code>#<var>idname</var></code></li> + <li><a href="/en-US/docs/Web/CSS/Attribute_selectors">Attribute selector</a> <code>[<var>attr</var>=<var>value</var>]</code></li> +</ul> + +<h3 id="Grouping_selectors">Grouping selectors</h3> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/Selector_list">Selector list</a> <code><var>A</var>, <var>B</var></code></dt> + <dd>Specifies that both <code><var>A</var></code> and <code><var>B</var></code> elements are selected. This is a grouping method to select several matching elements.</dd> +</dl> + +<h3 id="Combinators">Combinators</h3> + +<p>Combinators are selectors that establish a relationship between two or more simple selectors, such as "<code><var>A</var></code> is a child of <code><var>B</var></code>" or "<code><var>A</var></code> is adjacent to <code><var>B</var></code>."</p> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/Adjacent_sibling_combinator">Adjacent sibling combinator</a> <code><var>A</var> + <var>B</var></code></dt> + <dd>Specifies that the elements selected by both <code><var>A</var></code> and <code><var>B</var></code> have the same parent and that the element selected by <code><var>B</var></code> immediately follows the element selected by <code><var>A</var></code> horizontally.</dd> + <dt><a href="/en-US/docs/Web/CSS/General_sibling_combinator">General sibling combinator</a> <code><var>A</var> ~ <var>B</var></code></dt> + <dd>Specifies that the elements selected by both <code><var>A</var></code> and <code><var>B</var></code> share the same parent and that the element selected by <code><var>A</var></code> comes before—but not necessarily immediately before—the element selected by <code><var>B</var></code>.</dd> + <dt><a href="/en-US/docs/Web/CSS/Child_combinator">Child combinator</a> <code><var>A</var> > <var>B</var></code></dt> + <dd>Specifies that the element selected by <code><var>B</var></code> is the direct child of the element selected by <code><var>A</var></code>.</dd> + <dt><a href="/en-US/docs/Web/CSS/Descendant_combinator">Descendant combinator</a> <code><var>A</var> <var>B</var></code></dt> + <dd>Specifies that the element selected by <code><var>B</var></code> is a descendant of the element selected by <code><var>A</var></code>, but is not necessarily a direct child.</dd> + <dt><a href="/en-US/docs/Web/CSS/Column_combinator">Column combinator</a> <code><var>A</var> || <var>B</var></code> {{Experimental_Inline}}</dt> + <dd>Specifies that the element selected by <code><var>B</var></code> is located within the table column specified by <code><var>A</var></code>. Elements which span multiple columns are considered to be a member of all of those columns.</dd> +</dl> + +<h3 id="Pseudo">Pseudo</h3> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/Pseudo-classes">Pseudo classes</a> <code>:</code></dt> + <dd>Specifies a special state of the selected element(s).</dd> + <dt><a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo elements</a> <code>::</code></dt> + <dd>Represents entities that are not included in HTML.</dd> +</dl> + +<div class="blockIndicator note"> +<p><strong>See also:</strong> <a href="https://www.w3.org/TR/selectors/#overview">Selectors in the Selectors Level 4 specification</a>.</p> +</div> + +<h2 id="Concepts">Concepts</h2> + +<h3 id="Syntax_and_semantics">Syntax and semantics</h3> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Syntax">CSS syntax</a></li> + <li><a href="/en-US/docs/Web/CSS/At-rule">At-rules</a></li> + <li><a href="/en-US/docs/Web/CSS/Cascade">Cascade</a></li> + <li><a href="/en-US/docs/Web/CSS/Comments">Comments</a></li> + <li><a href="/en-US/docs/Glossary/Descriptor_(CSS)">Descriptor</a></li> + <li><a href="/en-US/docs/Web/CSS/inheritance">Inheritance</a></li> + <li><a href="/en-US/docs/Web/CSS/Shorthand_properties">Shorthand properties</a></li> + <li><a href="/en-US/docs/Web/CSS/Specificity">Specificity</a></li> + <li><a href="/en-US/docs/Web/CSS/Value_definition_syntax">Value definition syntax</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Values_and_Units">CSS unit and value types</a></li> +</ul> + +<h3 id="Values">Values</h3> + +<ul> + <li><a href="/en-US/docs/Web/CSS/actual_value">Actual value</a></li> + <li><a href="/en-US/docs/Web/CSS/computed_value">Computed value</a></li> + <li><a href="/en-US/docs/Web/CSS/initial_value">Initial value</a></li> + <li><a href="/en-US/docs/Web/CSS/resolved_value">Resolved value</a></li> + <li><a href="/en-US/docs/Web/CSS/specified_value">Specified value</a></li> + <li><a href="/en-US/docs/Web/CSS/used_value">Used value</a></li> +</ul> + +<h3 id="Layout">Layout</h3> + +<ul> + <li><a href="/en-US/docs/Web/Guide/CSS/Block_formatting_context">Block formatting context</a></li> + <li><a href="/en-US/docs/Web/CSS/box_model">Box model</a></li> + <li><a href="/en-US/docs/Web/CSS/All_About_The_Containing_Block">Containing block</a></li> + <li><a href="/en-US/docs/Web/CSS/Layout_mode">Layout mode</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Margin collapsing</a></li> + <li><a href="/en-US/docs/Web/CSS/Replaced_element">Replaced elements</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">Stacking context</a></li> + <li><a href="/en-US/docs/Web/Guide/CSS/Visual_formatting_model">Visual formatting model</a></li> +</ul> + +<h2 id="DOM-CSS_CSSOM">DOM-CSS / CSSOM</h2> + +<h3 id="Major_object_types">Major object types</h3> + +<ul> + <li>{{DOMxRef("DocumentOrShadowRoot.styleSheets")}}</li> + <li><code>{{DOMxRef("StyleSheetList", "styleSheets", "", 1)}}[i].{{DOMxRef("CSSRuleList", "cssRules", "", 1)}}</code></li> + <li><code>cssRules[i].{{DOMxRef("CSSRule.cssText", "cssText", "", 1)}}</code> <span style="white-space: nowrap;">(selector & style)</span></li> + <li><code>cssRules[i].{{DOMxRef("CSSStyleRule.selectorText", "selectorText", "", 1)}}</code></li> + <li>{{DOMxRef("HTMLElement.style")}}</li> + <li><code>HTMLElement.style.{{DOMxRef("CSSStyleDeclaration.cssText", "cssText", "", 1)}}</code> (just style)</li> + <li>{{DOMxRef("Element.className")}}</li> + <li>{{DOMxRef("Element.classList")}}</li> +</ul> + +<h3 id="Important_methods">Important methods</h3> + +<ul> + <li>{{DOMxRef("CSSStyleSheet.insertRule()")}}</li> + <li>{{DOMxRef("CSSStyleSheet.deleteRule()")}}</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Mozilla_Extensions">Mozilla CSS extensions</a> (prefixed with <code style="white-space: nowrap;">-moz-</code>)</li> + <li><a href="/en-US/docs/Web/CSS/WebKit_Extensions">WebKit CSS extensions</a> (mostly prefixed with <code style="white-space: nowrap;">-webkit-</code>)</li> + <li><a href="/en-US/docs/Web/CSS/Microsoft_Extensions">Microsoft CSS extensions</a> (prefixed with <code style="white-space: nowrap;">-ms-</code>)</li> +</ul> + +<h2 id="External_Links">External Links</h2> + +<ul> + <li><a href="https://www.w3.org/TR/CSS/#indices">CSS Indices (w3.org)</a></li> +</ul> diff --git a/files/id/web/css/text-transform/index.html b/files/id/web/css/text-transform/index.html new file mode 100644 index 0000000000..41db13ecf4 --- /dev/null +++ b/files/id/web/css/text-transform/index.html @@ -0,0 +1,307 @@ +--- +title: text-transform +slug: Web/CSS/text-transform +translation_of: Web/CSS/text-transform +--- +<div>{{CSSRef}}</div> + +<p>Properti CSS <strong><code>text-transform</code></strong> menerangkan bagaimana mengatur teks sebuah elemen. Properti ini dapat digunakan untuk membuat sebuah teks menjadi besar atau kecil semua, atau membuat setiap kata dikapitalisasi.</p> + +<pre class="brush:css no-line-numbers">/* Nilai Kata-kunci */ +text-transform: capitalize; +text-transform: uppercase; +text-transform: lowercase; +text-transform: none; +text-transform: full-width; + +/* Nilai Global */ +text-transform: inherit; +text-transform: initial; +text-transform: unset; +</pre> + +<p>Properti <code>text-transform</code> memperhatikan peraturan khusus untuk setiap bahasa, seperti:</p> + +<ul> + <li> + <p>Dalam bahasa daerah Turki, seperti bahasa Turki (<code>tr</code>), bahasa Azerbaijan (<code>az</code>), Tatar Krimean (<code>crh</code>), Tatar Volga (<code>tt</code>), dan bahasa Bashkir (<code>ba</code>), terdapat dua macam i, yaitu dengan dan tanpa titik, dan dua pasangan huruf: <code>i</code>/<code>İ</code> and <code>ı</code>/<code>I</code>.</p> + </li> + <li> + <p>Dalam bahasa Jerman (<code>de</code>), huruf besar <code>ß</code> menjadi <code>SS</code>.</p> + </li> + <li> + <p>Dalam bahasa Belanda (<code>nl</code>), dwihuruf <code>ij</code> diubah menjadi <code>IJ</code>, bahkan dengan pilihan <code>text-transform: capitalize</code>, yang seharusnya hanya mengubah huruf pertama dari kata menjadi huruf besar.</p> + </li> + <li> + <p>Dalam bahasa Yunani (<code>el</code>), huruf vokal kehilangan aksen saat semua huruf dalam kata adalah huruf besar (<code>ά</code>/<code>Α</code>), kecuali untuk huruf <span lang="el">eta</span> disjungtif (<code>ή</code>/<code>Ή</code>). Diftong dengan aksen pada huruf vokal pertama dihilangkan dan mendapat diaeresis pada huruf vokal kedua (<code>άι</code>/<code>ΑΪ</code>).</p> + </li> + <li> + <p>Dalam bahasa Yunani (<code>el</code>), huruf sigma kecil mempunyai dua bentuk: <code>σ</code> dan <code>ς</code>. <code>ς</code> digunakan hanya saat sigma terdapat di akhir kata. Sewaktu menerapkan <code>text-transform: lowercase</code> kepada huruf sigma besar (<code>Σ</code>), peramban perlu memilih huruf kecil yang tepat berdasarkan konteksnya.</p> + </li> + <li>Dalam bahasa Irlandia (<code>ga</code>), huruf pendahulu tertentu tetap menjadi huruf kecil saat dasar awal dikapitalkan, contohnya <code>text-transform: uppercase</code> akan mengubah <code>ar aon tslí</code> menjadi <code>AR AON tSLÍ</code> dan bukan menjadi seperti yang dikira orang <code>AR AON TSLÍ </code>(hanya Firefox). Pada beberapa kasus, garis-sambung juga dihilangkan saat pengubahan menjadi huruf besar: <code>an t-uisce</code> berubah menjadi <code>AN tUISCE </code>(dan garis-sambung ditambahkan kembali saat dilakukan <code>text-transform: lowercase</code>)</li> +</ul> + +<p>Pilihan bahasa didefinisikan dengan atribut HTML <code>lang</code> atau dengan atribut XML <code>xml:lang</code>.</p> + +<p>Dukungan untuk kasus-kasus tertentu tidak sama untuk semua peramban, harap periksa <a href="#Browser_compatibility">tabel kompatibilitas peramban</a>.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<dl> + <dt><code>capitalize</code></dt> + <dd> + <p>Adalah kata kunci yang mengubah secara paksa <em>huruf</em> pertama dari setiap kata menjadi huruf besar. Karakter lainnya tidak berubah; huruf-huruf tersebut akan tetap seperti pertama kali dituliskan pada katanya. Sebuah huruf adalah karakter Unicode dari kategori Huruf atau Angka umum {{experimental_inline}} : pilihan ini tidak memasukkan tanda baca atau simbal pada awal kata.</p> + + <div class="note">Penulis tidak seharusnya mengharapkan <code class="css">capitalize</code> untuk mengikuti konvensi huruf besar untuk bahasa tertentu (seperti mengabaikan artikel dalam bahasa Inggris).</div> + + <div class="note">Kata kunci <code>capitalize</code> kurang dispesifikasikan pada CSS 1 dan CSS 2.1. Terdapat perbedaan antara peramban untuk memperhitungkan huruf pertama (Firefox menganggap - dan _ sebagai huruf, tetapi peramban lain tidak. Baik Webkit dan Gecko tidak dengan tepat menanggap simbol berdasarkan huruf seperti <code>ⓐ</code> sebagai benar-benar huruf. Internet Explorer 9 menerapkan definisi CSS 2 yang paling mendekati, tetapi dengan beberapa kasus sangat aneh). Dengan mendefinisikan bagaimana penerapan yang benar secara jelas, CSS Text Level 3 membersihkan kekacauan ini. Baris <code>capitalize</code> di tabel kompatibilitas peramban mempunyai informasi pada versi berapa mesin peramban mulai mendukung penerapan ini</div> + </dd> + <dt><code>uppercase</code></dt> + <dd>Adalah kata kunci yang mengubah semua karakter menjadi huruf besar.</dd> + <dt><code>lowercase</code></dt> + <dd>Adalah kata kunci yang mengubah semua karakter menjadi huruf kecil.</dd> + <dt><code>none</code></dt> + <dd>Adalah kata kunci yang mencegah perubahan dari semua karakter.</dd> + <dt><code>full-width</code> {{experimental_inline}}</dt> + <dd>Adalah kata kunci yang mengharuskan penulisan karakter — biasanya ideogram dan tulisan latin — di dalam kotak persegi, yang membuat mereka dapat sejajar dalam tulisan Asia Timur kebanyakan (seperti bahasa Cina atau Jepang).</dd> + +</dl> + +<h3 id="Sintaksis_Formal">Sintaksis Formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="none" name="none"><code>none</code></h3> + +<pre class="brush: html"><p>Kalimat Awal + <strong><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong> +</p></code> +<p>text-transform: none + <strong><span><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></span></strong> +</p> +</pre> + +<pre class="brush: css">span { + text-transform: none; +} +strong { float: right; }</pre> + +<p>This demonstrates no text transformation.</p> + +<p>{{ EmbedLiveSample('none', '100%', '100px') }}</p> + +<h3 id="capitalize_(General)" name="capitalize_(General)"><code>capitalize</code> (Umum)</h3> + +<pre class="brush: html"><p>Kalimat Awal + <strong><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong> +</p></code> +<p>text-transform: capitalize +<code> <strong></code><span><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></span><code></strong></code> +</p></pre> + +<pre class="brush: css">span { + text-transform: capitalize; +} +strong { float: right; }</pre> + +<p>Contoh ini menunjukkan kata yang dikapitalkan.</p> + +<p>{{ EmbedLiveSample('capitalize_(General)', '100%', '100px') }}</p> + +<h3 id="capitalize_(Punctuation)" name="capitalize_(Punctuation)"><code>capitalize</code> (Tanda Baca)</h3> + +<pre class="brush: html"><p>Kalimat Awal + <strong><code>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</code><code></strong> +</p></code> +<p>text-transform: capitalize + <code><strong></code><span><code>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</code></span><code></strong></code> +</p></pre> + +<pre class="brush: css">span { + text-transform: capitalize; +} +strong { float: right; }</pre> + +<p>Contoh ini mennjukkan bagaimana tanda baca di awal sebuah kata diabaikan. Kata kunci ini bekerja pada huruf pertama yang termasuk dalam bagian karakter Unicode dari kategori Huruf dan Angka umum.</p> + +<p>{{ EmbedLiveSample('capitalize_(Punctuation)', '100%', '100px') }}</p> + +<h3 id="capitalize_(Symbols)" name="capitalize_(Symbols)"><code>capitalize</code> (Simbol)</h3> + +<pre class="brush: html"><p>Kalimat Awal + <strong><code>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</code><code></strong> +</p></code> +<p>text-transform: capitalize + <code><strong></code><span><code>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</code></span><code></strong></code> +</p></pre> + +<pre class="brush: css">span { + text-transform: capitalize; +} +strong { float: right; }</pre> + +<p>Contoh ini menunjukkan bagaimana simbol di awal kata diabaikan. Kata kunci ini bekerja pada huruf pertama yang termasuk dalam bagian karakter Unicode dari kategori Huruf dan Angka umum.</p> + +<p>{{ EmbedLiveSample('capitalize_(Symbols)', '100%', '100px') }}</p> + +<h3 id="capitalize_(Dutch_ij_digraph)" name="capitalize_(Dutch_ij_digraph)"><code>capitalize</code> (dwihuruf Belanda <em>ij</em>)</h3> + +<pre class="brush: html"><p>Kalimat Awal + <strong lang="nl"><code>The Dutch word: "<span lang="nl">ijsland</span>" starts with a digraph.</code><code></strong> +</p></code> +<p>text-transform: capitalize + <code><strong></code><span lang="nl"><code>The Dutch word: "<span lang="nl">ijsland</span>" starts with a digraph.</code></span><code></strong></code> +</p></pre> + +<pre class="brush: css">span { + text-transform: capitalize; +} +strong { float: right; }</pre> + +<p>Contoh ini menunjukkan bagaimana dwihuruf bahasa Belanda <em>ij</em> harus diperlakukan sebagai huruf tunggal.</p> + +<p>{{ EmbedLiveSample('capitalize_(Dutch_ij_digraph)', '100%', '100px') }}</p> + +<h3 id="uppercase_(General)" name="uppercase_(General)"><code>uppercase</code> (Umum)</h3> + +<pre class="brush: html"><p>Kalimat Awal + <strong><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code><code></strong> +</p></code> +<p>text-transform: uppercase + <code><strong></code><span><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></span><code></strong></code> +</p></pre> + +<pre class="brush: css">span { + text-transform: uppercase; +} +strong { float: right; }</pre> + +<p>Contoh ini menunjukkan bagaimana kalimat diubah menjadi huruf besar.</p> + +<p>{{ EmbedLiveSample('uppercase_(General)', '100%', '100px') }}</p> + +<h3 id="uppercase_(Greek_Vowels)" name="uppercase_(Greek_Vowels)"><code>uppercase</code> (Huruf Vokal Yunani)</h3> + +<pre class="brush: html"><p>Kalimat Awal + <strong><code>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</code><code></strong> +</p></code> +<p>text-transform: uppercase + <code><strong></code><span><code>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</code></span><code></strong></code> +</p></pre> + +<pre class="brush: css">span { + text-transform: uppercase; +} +strong { float: right; }</pre> + +<p>Contoh ini menunjukkan bagaimana huruf vokal bahasa Yunani, kecuali huruf disjungtif <em>eta</em>, kehilangan aksen, dan aksen pada huruf vokal pertama dari pasangan vokal menjadi diaeresis pada huruf vokal kedua.</p> + +<p>{{ EmbedLiveSample('uppercase_(Greek_Vowels)', '100%', '100px') }}</p> + +<h3 id="lowercase_(General)" name="lowercase_(General)"><code>lowercase</code> (Umum)</h3> + +<pre class="brush: html"><p>Kalimat Awal + <strong><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code><code></strong> +</p></code> +<p>text-transform: lowercase + <code><strong></code><span><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></span><code></strong></code> +</p></pre> + +<pre class="brush: css">span { + text-transform: lowercase; +} +strong { float: right; }</pre> + +<p>Contoh ini menunjukkan bagaimana kalimat diubah menjadi huruf kecil.</p> + +<p>{{ EmbedLiveSample('lowercase_(General)', '100%', '100px') }}</p> + +<h3 id="lowercase_(Greek_Σ)" name="lowercase_(Greek_Σ)"><code>lowercase</code> (Huruf Yunani Σ)</h3> + +<pre class="brush: html"><p>Kalimat Awal + <strong><code>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</code><code></strong> +</p></code> +<p>text-transform: lowercase + <code><strong></code><span><code>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</code></span><code></strong></code> +</p></pre> + +<pre class="brush: css">span { + text-transform: lowercase; +} +strong { float: right; }</pre> + +<p>Contoh ini menunjukkan bagaimana karakter bahasa Yunani sigma (<code>Σ</code>) diubah menjadi huruf kecil sigma biasa (<code>σ</code>) atau varian akhir-kata (<code>ς</code>), tergantung kepada konteksnya.</p> + +<p>{{ EmbedLiveSample('lowercase_(Greek_Σ)', '100%', '100px') }}</p> + +<h3 id="full-width_(General)" name="full-width_(General)"><code>full-width</code> (Umum)</h3> + +<pre class="brush: html"><p>Kalimat Awal + <strong>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~<code></strong> +</p></code> +<p>text-transform: full-width + <code><strong></code><span>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</span><code></strong></code> +</p></pre> + +<pre class="brush: css">span { + text-transform: full-width; +} +strong { width: 100%; float: right; }</pre> + +<p>Beberapa karakter mempunyai dua bentuk, yaitu lebar normal dan penuh, dengan kode nilai Unicode yang berbeda. Versi lebar-penuh digunakan untuk membuat penggabungan penulisan dengan karakter ideografi Asia dengan mulus.</p> + +<p>{{ EmbedLiveSample('full-width_(General)', '100%', '175px') }}</p> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Komentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Text', '#text-transform', 'text-transform')}}</td> + <td>{{Spec2('CSS4 Text')}}</td> + <td>Dari {{SpecName('CSS3 Text', '#text-transform', 'text-transform')}}, menambahkan kata kunci <code>full-size-kana</code> dan membolehkan kata kunci <code>full-width</code> digunakan bersama dengan kata kunci lainnya.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Text', '#text-transform', 'text-transform')}}</td> + <td>{{Spec2('CSS3 Text')}}</td> + <td>Dari {{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}}, memperluas cakupan huruf ke semua karakter Unicode dalam kategori Angka dan Huruf umum. Mengubah penerapan <code>capitalize</code> ke huruf pertama kata, mengabaikan tanda baca atau simbol di awal. Menambahkan kata kunci <code>full-width</code> untuk membuat penggabungan penulisan dengan karakter ideografi dan alfabet menjadi mulus.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Dari {{SpecName('CSS1', '#text-transform', 'text-transform')}}, memperluas cakupan huruf dengan tulisan bikameral non-latin.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#text-transform', 'text-transform')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Definisi awal</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatibilitas_Peramban">Kompatibilitas Peramban</h2> + +<p> </p> + +<div class="hidden">Tabel kompatibilitas di halaman ini dibuat dari data terstruktur. Apabaila anda mau menambahkan data, harap lakukan <em>check-out</em> pada <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> dan mengirimkan <em>pull-request</em> kepada kami.</div> + +<p>{{Compat("css.properties.text-transform")}}</p> + +<p> </p> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{cssxref("font-variant")}}</li> +</ul> diff --git a/files/id/web/css/type_selectors/index.html b/files/id/web/css/type_selectors/index.html new file mode 100644 index 0000000000..5302eef6eb --- /dev/null +++ b/files/id/web/css/type_selectors/index.html @@ -0,0 +1,121 @@ +--- +title: Type selectors +slug: Web/CSS/Type_selectors +translation_of: Web/CSS/Type_selectors +--- +<div>{{CSSRef("Selectors")}}</div> + +<h2 id="Rangkuman">Rangkuman</h2> + +<p>Gaya seleksi CSS menampilkan elemen dengan nama node (bagian khusus nama elemen). Digunakan tersendiri, karenanya, sebuah tipe seleksi untuk sebuah nama node bagian terkecil menyeleksi seluruh bagian bagian dari tipe tersebut -- yang mana bahwa, dengan nama node tersebut -- didalam dokumen.</p> + +<h2 id="Bentuk_Penulisan">Bentuk Penulisan</h2> + +<pre class="syntaxbox">element { <em>style properties</em> } +</pre> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">span { + background-color: DodgerBlue; + color: #ffffff; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><span>Here's a span with some text.</span> +<p>Here's a p with some text.</p> +</pre> + +<h3 id="Hasil">Hasil</h3> + +<p>{{EmbedLiveSample('Example', 200, 100)}}</p> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Komentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Tanpa Perubahan</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Tanpa Perubahan</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Defenisi Tanda</td> + </tr> + </tbody> +</table> + +<h2 id="Dukungan_Browser">Dukungan Browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/id/web/events/cached/index.html b/files/id/web/events/cached/index.html new file mode 100644 index 0000000000..195f18f846 --- /dev/null +++ b/files/id/web/events/cached/index.html @@ -0,0 +1,74 @@ +--- +title: cached +slug: Web/Events/cached +translation_of: Archive/Events/cached +--- +<p>Event <code>cached</code> dijalankan ketika resource pada daftar application cache manifest telah terunduh, dan aplikasi sekarang ter-cache.</p> + +<h2 id="Info_Umum">Info Umum</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Spesifikasi</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="https://html.spec.whatwg.org/multipage/browsers.html#offline">Offline</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">Event</dd> + <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> + <dd style="margin: 0 0 0 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> + <dd style="margin: 0 0 0 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">Target</dt> + <dd style="margin: 0 0 0 120px;">applicationCache</dd> + <dt style="float: left; text-align: right; width: 120px;">Default Action</dt> + <dd style="margin: 0 0 0 120px;">None</dd> +</dl> + +<h2 id="Properti">Properti</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Properti</td> + <td class="header">Type</td> + <td class="header">Deskripsi</td> + </tr> + <tr> + <td><code>target</code></td> + <td>EventTarget (DOM element)</td> + <td>The event target (the topmost target in the DOM tree). Read Only.</td> + </tr> + <tr> + <td><code>type</code></td> + <td>string</td> + <td>The type of event. Read only.</td> + </tr> + <tr> + <td><code>canBubble</code></td> + <td>boolean</td> + <td>Does the event normally bubble? Read only.</td> + </tr> + <tr> + <td><code>cancelable</code></td> + <td>boolean</td> + <td>Is it possible to cancel the event? Read only.</td> + </tr> + </tbody> +</table> + +<h2 id="Event_Terkait">Event Terkait</h2> + +<ul> + <li>{{Event("checking")}}</li> + <li>{{Event("noupdate")}}</li> + <li>{{Event("downloading")}}</li> + <li>{{Event("progress_(appcache_event)", "progress")}}</li> + <li>{{Event("cached")}}</li> + <li>{{Event("updateready")}}</li> + <li>{{Event("obsolete")}}</li> + <li>{{Event("error_(appcache_event)", "error")}}</li> +</ul> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li><a href="/en-US/docs/Offline_resources_in_Firefox">Using the Application Cache</a></li> +</ul> diff --git a/files/id/web/events/error/index.html b/files/id/web/events/error/index.html new file mode 100644 index 0000000000..a5c531c19c --- /dev/null +++ b/files/id/web/events/error/index.html @@ -0,0 +1,71 @@ +--- +title: error +slug: Web/Events/error +translation_of: Web/API/Element/error_event +--- +<p>Event <code>error</code> ditampilkan ketika sumberdaya gagal dimuat.</p> + +<h2 id="Informasi_umum">Informasi umum</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Spesifikasi</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-error">DOM L3</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Antar muka</dt> + <dd style="margin: 0 0 0 120px;">UIEvent jika digenerasikan dari antarmuka pengguna, event sebaliknya.</dd> + <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> + <dd style="margin: 0 0 0 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> + <dd style="margin: 0 0 0 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">Target</dt> + <dd style="margin: 0 0 0 120px;">Element</dd> + <dt style="float: left; text-align: right; width: 120px;">Default Action</dt> + <dd style="margin: 0 0 0 120px;">None</dd> +</dl> + +<h2 id="Properti">Properti</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event is cancellable or not.</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> + <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>0.</td> + </tr> + </tbody> +</table> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<p>{{domxref("GlobalEventHandlers.onerror")}} - <code>window.onerror</code> dan <code>element.onerror</code>.</p> diff --git a/files/id/web/events/index.html b/files/id/web/events/index.html new file mode 100644 index 0000000000..3560bde99a --- /dev/null +++ b/files/id/web/events/index.html @@ -0,0 +1,2310 @@ +--- +title: Event reference +slug: Web/Events +tags: + - NeedsTranslation + - TopicStub + - events +translation_of: Web/Events +--- +<p>DOM Events are sent to notify code of interesting things that have taken place. Each event is represented by an object which is based on the {{domxref("Event")}} interface, and may have additional custom fields and/or functions used to get additional information about what happened. Events can represent everything from basic user interactions to automated notifications of things happening in the rendering model.</p> + +<p>This article offers a list of events that can be sent; some are standard events defined in official specifications, while others are events used internally by specific browsers; for example, Mozilla-specific events are listed so that <a href="/en-US/docs/Mozilla/Add-ons">add-ons</a> can use them to interact with the browser.</p> + +<h2 id="Standard_events">Standard events</h2> + +<p>These events are defined in official Web specifications, and should be common across browsers. Each event is listed along with the interface representing the object sent to recipients of the event (so you can find information about what data is provided with each event) as well as a link to the specification or specifications that define the event.</p> + +<table class="standard-table" style="width: 100%;"> + <thead> + <tr> + <th class="header" style="width: 220px;">Event Name</th> + <th class="header" style="width: 90px;">Event Type</th> + <th class="header" style="width: 100px;">Specification</th> + <th class="header">Fired when...</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{event("abort")}}</td> + <td>{{domxref("UIEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-abort">DOM L3</a></td> + <td>The loading of a resource has been aborted.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/abort_(ProgressEvent)">abort</a></code></td> + <td>{{domxref("ProgressEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a> and <a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-abort">XMLHttpRequest</a></td> + <td>Progression has been terminated (not due to an error).</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/abort_indexedDB">abort</a></code></td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#database-interface">IndexedDB</a></td> + <td>A transaction has been aborted.</td> + </tr> + <tr> + <td>{{event("afterprint")}}{{gecko_minversion_inline("6")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/webappapis.html#printing">HTML5</a></td> + <td>The associated document has started printing or the print preview has been closed.</td> + </tr> + <tr> + <td>{{event("animationend")}}</td> + <td>{{domxref("AnimationEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></td> + <td>A <a href="/en-US/docs/CSS/CSS_animations">CSS animation</a> has completed.</td> + </tr> + <tr> + <td>{{event("animationiteration")}}</td> + <td>{{domxref("AnimationEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></td> + <td>A <a href="/en-US/docs/CSS/CSS_animations">CSS animation</a> is repeated.</td> + </tr> + <tr> + <td>{{event("animationstart")}}</td> + <td>{{domxref("AnimationEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></td> + <td>A <a href="/en-US/docs/CSS/CSS_animations">CSS animation</a> has started.</td> + </tr> + <tr> + <td>{{event("audioprocess")}}</td> + <td>{{domxref("AudioProcessingEvent")}}</td> + <td style="white-space: nowrap;">{{SpecName('Web Audio API', '#AudioProcessingEvent', 'audioprocess')}}</td> + <td>The input buffer of a {{domxref("ScriptProcessorNode")}} is ready to be processed.</td> + </tr> + <tr> + <td>{{event("audioend")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> + <td>The user agent has finished capturing audio for speech recognition.</td> + </tr> + <tr> + <td>{{event("audiostart")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> + <td>The user agent has started to capture audio for speech recognition.</td> + </tr> + <tr> + <td>{{event("beforeprint")}} {{gecko_minversion_inline("6")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/webappapis.html#printing">HTML5</a></td> + <td>The associated document is about to be printed or previewed for printing.</td> + </tr> + <tr> + <td>{{event("beforeunload")}}</td> + <td>{{domxref("BeforeUnloadEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/browsers.html#unloading-documents">HTML5 </a></td> + <td> </td> + </tr> + <tr> + <td>{{event("beginEvent")}}</td> + <td>{{domxref("TimeEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> + <td>A <a href="/en-US/docs/SVG/SVG_animation_with_SMIL">SMIL</a> animation element begins.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/blocked_indexedDB">blocked</a></code></td> + <td> </td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td> + <td>An open connection to a database is blocking a <code>versionchange</code> transaction on the same database.</td> + </tr> + <tr> + <td>{{event("blur")}}</td> + <td>{{domxref("FocusEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-blur">DOM L3</a></td> + <td>An element has lost focus (does not bubble).</td> + </tr> + <tr> + <td>{{event("boundary")}}</td> + <td>{{domxref("SpeechSynthesisEvent")}}</td> + <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> + <td>The spoken utterance reaches a word or sentence boundary</td> + </tr> + <tr> + <td>{{event("cached")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td> + <td>The resources listed in the manifest have been downloaded, and the application is now cached.</td> + </tr> + <tr> + <td>{{event("canplay")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-canplay">HTML5 media</a></td> + <td>The user agent can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.</td> + </tr> + <tr> + <td>{{event("canplaythrough")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-canplaythrough">HTML5 media</a></td> + <td>The user agent can play the media, and estimates that enough data has been loaded to play the media up to its end without having to stop for further buffering of content.</td> + </tr> + <tr> + <td>{{event("change")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM L2</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#event-input-change">HTML5</a></td> + <td>The <code>change</code> event is fired for {{HTMLElement("input")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}} elements when a change to the element's value is committed by the user.</td> + </tr> + <tr> + <td>{{event("chargingchange")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html">Battery status</a></td> + <td>The battery begins or stops charging.</td> + </tr> + <tr> + <td>{{event("chargingtimechange")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html">Battery status</a></td> + <td>The <code>chargingTime</code> attribute has been updated.</td> + </tr> + <tr> + <td>{{event("checking")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td> + <td>The user agent is checking for an update, or attempting to download the cache manifest for the first time.</td> + </tr> + <tr> + <td>{{event("click")}}</td> + <td>{{domxref("MouseEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-click">DOM L3</a></td> + <td>A pointing device button has been pressed and released on an element.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/close_websocket">close</a></code></td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td> + <td>A WebSocket connection has been closed.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/complete_indexedDB">complete</a></code></td> + <td> </td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#transaction">IndexedDB</a></td> + <td> </td> + </tr> + <tr> + <td>{{event("complete")}}</td> + <td>{{domxref("OfflineAudioCompletionEvent")}}</td> + <td style="white-space: nowrap;">{{SpecName('Web Audio API', '#OfflineAudioCompletionEvent-section', 'OfflineAudioCompletionEvent')}}</td> + <td>The rendering of an {{domxref("OfflineAudioContext")}} is terminated.</td> + </tr> + <tr> + <td>{{event("compositionend")}}{{gecko_minversion_inline("9")}}</td> + <td>{{domxref("CompositionEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-compositionend">DOM L3</a></td> + <td>The composition of a passage of text has been completed or canceled.</td> + </tr> + <tr> + <td>{{event("compositionstart")}}{{gecko_minversion_inline("9")}}</td> + <td>{{domxref("CompositionEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-compositionstart">DOM L3</a></td> + <td>The composition of a passage of text is prepared (similar to keydown for a keyboard input, but works with other inputs such as speech recognition).</td> + </tr> + <tr> + <td>{{event("compositionupdate")}}{{gecko_minversion_inline("9")}}</td> + <td>{{domxref("CompositionEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-compositionupdate">DOM L3</a></td> + <td>A character is added to a passage of text being composed.</td> + </tr> + <tr> + <td>{{event("contextmenu")}}</td> + <td>{{domxref("MouseEvent")}}</td> + <td style="white-space: nowrap;"><a href="https://html.spec.whatwg.org/multipage/forms.html#context-menus">HTML5</a></td> + <td>The right button of the mouse is clicked (before the context menu is displayed).</td> + </tr> + <tr> + <td>{{event("copy")}}</td> + <td>{{domxref("ClipboardEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/clipboard-apis/#copy-event">Clipboard</a></td> + <td>The text selection has been added to the clipboard.</td> + </tr> + <tr> + <td>{{event("cut")}}</td> + <td>{{domxref("ClipboardEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/clipboard-apis/#cut-event">Clipboard</a></td> + <td>The text selection has been removed from the document and added to the clipboard.</td> + </tr> + <tr> + <td>{{event("dblclick")}}</td> + <td>{{domxref("MouseEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-dblclick">DOM L3</a></td> + <td>A pointing device button is clicked twice on an element.</td> + </tr> + <tr> + <td>{{event("devicelight")}}</td> + <td>{{domxref("DeviceLightEvent")}}</td> + <td style="white-space: nowrap;"><a class="external" href="http://dvcs.w3.org/hg/dap/raw-file/tip/light/Overview.html" lang="en" title="The definition of 'Ambient Light Events' in that specification.">Ambient Light Events</a></td> + <td>Fresh data is available from a light sensor.</td> + </tr> + <tr> + <td>{{event("devicemotion")}}</td> + <td>{{domxref("DeviceMotionEvent")}}</td> + <td style="white-space: nowrap;"><a class="external" href="http://dev.w3.org/geo/api/spec-source-orientation.html" lang="en" title="The 'Device Orientation Events' specification">Device Orientation Events</a></td> + <td>Fresh data is available from a motion sensor.</td> + </tr> + <tr> + <td>{{event("deviceorientation")}}</td> + <td>{{domxref("DeviceOrientationEvent")}}</td> + <td style="white-space: nowrap;"><a class="external" href="http://dev.w3.org/geo/api/spec-source-orientation.html" lang="en" title="The 'Device Orientation Events' specification">Device Orientation Events</a></td> + <td>Fresh data is available from an orientation sensor.</td> + </tr> + <tr> + <td>{{event("deviceproximity")}}</td> + <td>{{domxref("DeviceProximityEvent")}}</td> + <td style="white-space: nowrap;"><a class="external" href="http://dvcs.w3.org/hg/dap/raw-file/tip/proximity/Overview.html" lang="en" title="The definition of 'Proximity Events' in that specification.">Proximity Events</a></td> + <td>Fresh data is available from a proximity sensor (indicates an approximated distance between the device and a nearby object).</td> + </tr> + <tr> + <td>{{event("dischargingtimechange")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html">Battery status</a></td> + <td>The <code>dischargingTime</code> attribute has been updated.</td> + </tr> + <tr> + <td><code>DOMActivate</code> {{deprecated_inline}}</td> + <td>{{domxref("UIEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMActivate">DOM L3</a></td> + <td>A button, link or state changing element is activated (use {{event("click")}} instead).</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMAttributeNameChanged</a></code> {{deprecated_inline}}</td> + <td>{{domxref("MutationNameEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/2011/WD-DOM-Level-3-Events-20110531/#event-type-DOMAttributeNameChanged">DOM L3</a> Removed</td> + <td>The name of an attribute changed (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMAttrModified</a></code> {{deprecated_inline}}</td> + <td>{{domxref("MutationEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMAttrModified">DOM L3</a></td> + <td>The value of an attribute has been modified (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMCharacterDataModified</a></code> {{deprecated_inline}}</td> + <td>{{domxref("MutationEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMCharacterDataModified">DOM L3</a></td> + <td>A text or another <a href="/en-US/docs/DOM/CharacterData">CharacterData</a> has changed (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td> + </tr> + <tr> + <td>{{event("DOMContentLoaded")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-end.html#the-end">HTML5</a></td> + <td>The document has finished loading (but not its dependent resources).</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMElementNameChanged</a></code> {{deprecated_inline}}</td> + <td>{{domxref("MutationNameEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/2011/WD-DOM-Level-3-Events-20110531/#event-type-DOMElementNameChanged">DOM L3</a> Removed</td> + <td>The name of an element changed (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td> + </tr> + <tr> + <td><code>DOMFocusIn</code> {{deprecated_inline}}</td> + <td>{{domxref("FocusEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMFocusIn">DOM L3</a></td> + <td>An element has received focus (use {{event("focus")}} or {{event("focusin")}} instead).</td> + </tr> + <tr> + <td><code>DOMFocusOut</code> {{deprecated_inline}}</td> + <td>{{domxref("FocusEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMFocusOut">DOM L3</a></td> + <td>An element has lost focus (use {{event("blur")}} or {{event("focusout")}} instead).</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeInserted</a></code> {{deprecated_inline}}</td> + <td>{{domxref("MutationEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeInserted">DOM L3</a></td> + <td>A node has been added as a child of another node (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeInsertedIntoDocument</a></code> {{deprecated_inline}}</td> + <td>{{domxref("MutationEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeInsertedIntoDocument">DOM L3</a></td> + <td>A node has been inserted into the document (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeRemoved</a></code> {{deprecated_inline}}</td> + <td>{{domxref("MutationEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeRemoved">DOM L3</a></td> + <td>A node has been removed from its parent node (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeRemovedFromDocument</a></code> {{deprecated_inline}}</td> + <td>{{domxref("MutationEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeRemovedFromDocument">DOM L3</a></td> + <td>A node has been removed from the document (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMSubtreeModified</a></code> {{deprecated_inline}}</td> + <td>{{domxref("MutationEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMSubtreeModified">DOM L3</a></td> + <td>A change happened in the document (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td> + </tr> + <tr> + <td>{{event("downloading")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td> + <td>The user agent has found an update and is fetching it, or is downloading the resources listed by the cache manifest for the first time.</td> + </tr> + <tr> + <td>{{event("drag")}}</td> + <td>{{domxref("DragEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-drag">HTML5</a></td> + <td>An element or text selection is being dragged (every 350ms).</td> + </tr> + <tr> + <td>{{event("dragend")}}</td> + <td>{{domxref("DragEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragend">HTML5</a></td> + <td>A drag operation is being ended (by releasing a mouse button or hitting the escape key).</td> + </tr> + <tr> + <td>{{event("dragenter")}}</td> + <td>{{domxref("DragEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragenter">HTML5</a></td> + <td>A dragged element or text selection enters a valid drop target.</td> + </tr> + <tr> + <td>{{event("dragleave")}}</td> + <td>{{domxref("DragEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragleave">HTML5</a></td> + <td>A dragged element or text selection leaves a valid drop target.</td> + </tr> + <tr> + <td>{{event("dragover")}}</td> + <td>{{domxref("DragEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragover">HTML5</a></td> + <td>An element or text selection is being dragged over a valid drop target (every 350ms).</td> + </tr> + <tr> + <td>{{event("dragstart")}}</td> + <td>{{domxref("DragEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragstart">HTML5</a></td> + <td>The user starts dragging an element or text selection.</td> + </tr> + <tr> + <td>{{event("drop")}}</td> + <td>{{domxref("DragEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-drop">HTML5</a></td> + <td>An element is dropped on a valid drop target.</td> + </tr> + <tr> + <td>{{event("durationchange")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-durationchange">HTML5 media</a></td> + <td>The <code>duration</code> attribute has been updated.</td> + </tr> + <tr> + <td>{{event("emptied")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-emptied">HTML5 media</a></td> + <td>The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the <a href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" rel="internal"><code>load()</code></a> method is called to reload it.</td> + </tr> + <tr> + <td>{{event("end_(SpeechRecognition)","end")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> + <td>The speech recognition service has disconnected.</td> + </tr> + <tr> + <td>{{event("end_(SpeechSynthesis)","end")}}</td> + <td>{{domxref("SpeechSynthesisEvent")}}</td> + <td style="white-space: nowrap;">{{SpecName("Web Speech API")}}</td> + <td>The utterance has finished being spoken.</td> + </tr> + <tr> + <td>{{event("ended")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-ended">HTML5 media</a></td> + <td>Playback has stopped because the end of the media was reached.</td> + </tr> + <tr> + <td>{{event("ended_(Web_Audio)", "ended")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;">{{SpecName("Web Audio API")}}</td> + <td> </td> + </tr> + <tr> + <td>{{event("endEvent")}}</td> + <td>{{domxref("TimeEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> + <td>A <a href="/en-US/docs/SVG/SVG_animation_with_SMIL">SMIL</a> animation element ends.</td> + </tr> + <tr> + <td>{{event("error")}}</td> + <td>{{domxref("UIEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-error">DOM L3</a></td> + <td>A resource failed to load.</td> + </tr> + <tr> + <td>{{event("error")}}</td> + <td>{{domxref("ProgressEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> and </span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-error">XMLHttpRequest</a></td> + <td>Progression has failed.</td> + </tr> + <tr> + <td>{{event("error")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td> + <td>An error occurred while downloading the cache manifest or updating the content of the application.</td> + </tr> + <tr> + <td>{{event("error")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td> + <td>A WebSocket connection has been closed with prejudice (some data couldn't be sent for example).</td> + </tr> + <tr> + <td>{{event("error")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/eventsource/">Server Sent Events</a></td> + <td>An event source connection has been failed.</td> + </tr> + <tr> + <td>{{event("error")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td> + <td>A request caused an error and failed.</td> + </tr> + <tr> + <td>{{event("error_(SpeechRecognitionError)","error")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> + <td>A speech recognition error occurs.</td> + </tr> + <tr> + <td>{{event("error_(SpeechSynthesisError)","error")}}</td> + <td>{{domxref("SpeechSynthesisErrorEvent")}}</td> + <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> + <td>An error occurs that prevents the utterance from being successfully spoken.</td> + </tr> + <tr> + <td>{{event("focus")}}</td> + <td>{{domxref("FocusEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focus">DOM L3</a></td> + <td>An element has received focus (does not bubble).</td> + </tr> + <tr> + <td>{{event("focusin")}}</td> + <td>{{domxref("FocusEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusIn">DOM L3</a></td> + <td>An element is about to receive focus (bubbles).</td> + </tr> + <tr> + <td>{{event("focusout")}}</td> + <td>{{domxref("FocusEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusout">DOM L3</a></td> + <td>An element is about to lose focus (bubbles).</td> + </tr> + <tr> + <td>{{event("fullscreenchange")}}{{gecko_minversion_inline("9")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api">Full Screen</a></td> + <td>An element was turned to fullscreen mode or back to normal mode.</td> + </tr> + <tr> + <td>{{event("fullscreenerror")}}{{gecko_minversion_inline("9")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api">Full Screen</a></td> + <td>It was impossible to switch to fullscreen mode for technical reasons or because the permission was denied.</td> + </tr> + <tr> + <td>{{event("gamepadconnected")}}</td> + <td>{{domxref("GamepadEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/gamepad/#the-gamepadconnected-event">Gamepad</a></td> + <td>A gamepad has been connected.</td> + </tr> + <tr> + <td>{{event("gamepaddisconnected")}}</td> + <td>{{domxref("GamepadEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/gamepad/#the-gamepaddisconnected-event">Gamepad</a></td> + <td>A gamepad has been disconnected.</td> + </tr> + <tr> + <td>{{event("gotpointercapture")}}</td> + <td>{{domxref("PointerEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-gotpointercapture-event">Pointer Events</a></td> + <td>Element receives pointer capture.</td> + </tr> + <tr> + <td>{{event("hashchange")}}</td> + <td>{{domxref("HashChangeEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-hashchange">HTML5</a></td> + <td>The fragment identifier of the URL has changed (the part of the URL after the #).</td> + </tr> + <tr> + <td>{{event("lostpointercapture")}}</td> + <td>{{domxref("PointerEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-lostpointercapture-event">Pointer Events</a></td> + <td>Element lost pointer capture.</td> + </tr> + <tr> + <td>{{event("input")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/forms.html#common-event-behaviors">HTML5</a></td> + <td>The value of an element changes or the content of an element with the attribute <a href="/en-US/docs/DOM/Element.contentEditable">contenteditable</a> is modified.</td> + </tr> + <tr> + <td>{{event("invalid")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#constraint-validation">HTML5</a></td> + <td>A submittable element has been checked and doesn't satisfy its constraints.</td> + </tr> + <tr> + <td>{{event("keydown")}}</td> + <td>{{domxref("KeyboardEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keydown">DOM L3</a></td> + <td>A key is pressed down.</td> + </tr> + <tr> + <td>{{event("keypress")}}</td> + <td>{{domxref("KeyboardEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keypress">DOM L3</a></td> + <td>A key is pressed down and that key normally produces a character value (use input instead).</td> + </tr> + <tr> + <td>{{event("keyup")}}</td> + <td>{{domxref("KeyboardEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keyup">DOM L3</a></td> + <td>A key is released.</td> + </tr> + <tr> + <td>{{event("languagechange")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;">{{ SpecName('HTML5.1', '#dom-navigator-languages', 'NavigatorLanguage.languages') }}</td> + <td> </td> + </tr> + <tr> + <td>{{event("levelchange")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html">Battery status</a></td> + <td>The <code>level</code> attribute has been updated.</td> + </tr> + <tr> + <td>{{event("load")}}</td> + <td>{{domxref("UIEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-load">DOM L3</a></td> + <td>A resource and its dependent resources have finished loading.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/load_(ProgressEvent)">load</a></code></td> + <td>{{domxref("ProgressEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-load">XMLHttpRequest</a></td> + <td>Progression has been successful.</td> + </tr> + <tr> + <td>{{event("loadeddata")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-loadeddata">HTML5 media</a></td> + <td>The first frame of the media has finished loading.</td> + </tr> + <tr> + <td>{{event("loadedmetadata")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-loadedmetadata">HTML5 media</a></td> + <td>The metadata has been loaded.</td> + </tr> + <tr> + <td>{{event("loadend")}}</td> + <td>{{domxref("ProgressEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-loadend">XMLHttpRequest</a></td> + <td>Progress has stopped (after "error", "abort" or "load" have been dispatched).</td> + </tr> + <tr> + <td>{{event("loadstart")}}</td> + <td>{{domxref("ProgressEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress </a><span>and </span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-loadstart">XMLHttpRequest</a></td> + <td>Progress has begun.</td> + </tr> + <tr> + <td>{{event("mark")}}</td> + <td>{{domxref("SpeechSynthesisEvent")}}</td> + <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> + <td>The spoken utterance reaches a named SSML "mark" tag.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/message_websocket">message</a></code></td> + <td>{{domxref("MessageEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td> + <td>A message is received through a WebSocket.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/message_webworker">message</a></code></td> + <td>{{domxref("MessageEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/workers/#communicating-with-a-dedicated-worker">Web Workers</a></td> + <td>A message is received from a Web Worker.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/message_webmessaging">message</a></code></td> + <td>{{domxref("MessageEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/webmessaging/">Web Messaging</a></td> + <td>A message is received from a child (i)frame or a parent window.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/message_serversentevents">message</a></code></td> + <td>{{domxref("MessageEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/eventsource/">Server Sent Events</a></td> + <td>A message is received through an event source.</td> + </tr> + <tr> + <td>{{event("message_(ServiceWorker)","message")}}</td> + <td>{{domxref("ServiceWorkerMessageEvent")}} or {{domxref("ExtendableMessageEvent")}}, depending on context.</td> + <td style="white-space: nowrap;"><a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a></td> + <td>A message is received from a service worker, or a message is received in a service worker from another context.</td> + </tr> + <tr> + <td>{{event("mousedown")}}</td> + <td>{{domxref("MouseEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mousedown">DOM L3</a></td> + <td>A pointing device button (usually a mouse) is pressed on an element.</td> + </tr> + <tr> + <td>{{event("mouseenter")}}</td> + <td>{{domxref("MouseEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseenter">DOM L3</a></td> + <td>A pointing device is moved onto the element that has the listener attached.</td> + </tr> + <tr> + <td>{{event("mouseleave")}}</td> + <td>{{domxref("MouseEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseleave">DOM L3</a></td> + <td>A pointing device is moved off the element that has the listener attached.</td> + </tr> + <tr> + <td>{{event("mousemove")}}</td> + <td>{{domxref("MouseEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mousemove">DOM L3</a></td> + <td>A pointing device is moved over an element.</td> + </tr> + <tr> + <td>{{event("mouseout")}}</td> + <td>{{domxref("MouseEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseout">DOM L3</a></td> + <td>A pointing device is moved off the element that has the listener attached or off one of its children.</td> + </tr> + <tr> + <td>{{event("mouseover")}}</td> + <td>{{domxref("MouseEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseover">DOM L3</a></td> + <td>A pointing device is moved onto the element that has the listener attached or onto one of its children.</td> + </tr> + <tr> + <td>{{event("mouseup")}}</td> + <td>{{domxref("MouseEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseup">DOM L3</a></td> + <td>A pointing device button is released over an element.</td> + </tr> + <tr> + <td>{{event("nomatch")}}</td> + <td>{{domxref("SpeechRecognitionEvent")}}</td> + <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> + <td>The speech recognition service returns a final result with no significant recognition.</td> + </tr> + <tr> + <td>{{event("notificationclick")}}</td> + <td>{{domxref("NotificationEvent")}}</td> + <td style="white-space: nowrap;">{{SpecName('Web Notifications','#dom-serviceworkerglobalscope-onnotificationclick','onnotificationclick')}}</td> + <td>A system notification<span style="line-height: 19.0909080505371px;"> spawned by {{domxref("ServiceWorkerRegistration.showNotification()")}} has been clicked.</span></td> + </tr> + <tr> + <td>{{event("noupdate")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td> + <td>The manifest hadn't changed.</td> + </tr> + <tr> + <td>{{event("obsolete")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td> + <td>The manifest was found to have become a 404 or 410 page, so the application cache is being deleted.</td> + </tr> + <tr> + <td>{{event("offline")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#event-offline">HTML5 offline</a></td> + <td>The browser has lost access to the network.</td> + </tr> + <tr> + <td>{{event("online")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#event-online">HTML5 offline</a></td> + <td>The browser has gained access to the network (but particular websites might be unreachable).</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/open_websocket">open</a></code></td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td> + <td>A WebSocket connection has been established.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/open_serversentevents">open</a></code></td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/eventsource/">Server Sent Events</a></td> + <td>An event source connection has been established.</td> + </tr> + <tr> + <td>{{event("orientationchange")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/screen-orientation/">Screen Orientation</a></td> + <td>The orientation of the device (portrait/landscape) has changed</td> + </tr> + <tr> + <td>{{event("pagehide")}}</td> + <td>{{domxref("PageTransitionEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-pagehide">HTML5</a></td> + <td>A session history entry is being traversed from.</td> + </tr> + <tr> + <td>{{event("pageshow")}}</td> + <td>{{domxref("PageTransitionEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-pageshow">HTML5</a></td> + <td>A session history entry is being traversed to.</td> + </tr> + <tr> + <td>{{event("paste")}}</td> + <td>{{domxref("ClipboardEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/clipboard-apis/#paste-event">Clipboard</a></td> + <td>Data has been transferred from the system clipboard to the document.</td> + </tr> + <tr> + <td>{{event("pause")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-pause">HTML5 media</a></td> + <td>Playback has been paused.</td> + </tr> + <tr> + <td>{{event("pause_(SpeechSynthesis)", "pause")}}</td> + <td>{{domxref("SpeechSynthesisEvent")}}</td> + <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> + <td>The utterance is paused part way through.</td> + </tr> + <tr> + <td>{{event("pointercancel")}}</td> + <td>{{domxref("PointerEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointercancel-event">Pointer Events</a></td> + <td>The pointer is unlikely to produce any more events.</td> + </tr> + <tr> + <td>{{event("pointerdown")}}</td> + <td>{{domxref("PointerEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointerdown-event">Pointer Events</a></td> + <td>The pointer enters the active buttons state.</td> + </tr> + <tr> + <td>{{event("pointerenter")}}</td> + <td>{{domxref("PointerEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointerenter-event">Pointer Events</a></td> + <td>Pointing device is moved inside the hit-testing boundary.</td> + </tr> + <tr> + <td>{{event("pointerleave")}}</td> + <td>{{domxref("PointerEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointerleave-event">Pointer Events</a></td> + <td>Pointing device is moved out of the hit-testing boundary.</td> + </tr> + <tr> + <td>{{event("pointerlockchange")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerlock/#pointerlockchange-and-pointerlockerror-events">Pointer Lock</a></td> + <td>The pointer was locked or released.</td> + </tr> + <tr> + <td>{{event("pointerlockerror")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerlock/#pointerlockchange-and-pointerlockerror-events">Pointer Lock</a></td> + <td>It was impossible to lock the pointer for technical reasons or because the permission was denied.</td> + </tr> + <tr> + <td>{{event("pointermove")}}</td> + <td>{{domxref("PointerEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointermove-event">Pointer Events</a></td> + <td>The pointer changed coordinates.</td> + </tr> + <tr> + <td>{{event("pointerout")}}</td> + <td>{{domxref("PointerEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointerout-event">Pointer Events</a></td> + <td>The pointing device moved out of hit-testing boundary or leaves detectable hover range.</td> + </tr> + <tr> + <td>{{event("pointerover")}}</td> + <td>{{domxref("PointerEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointerover-event">Pointer Events</a></td> + <td>The pointing device is moved into the hit-testing boundary.</td> + </tr> + <tr> + <td>{{event("pointerup")}}</td> + <td>{{domxref("PointerEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointerup-event">Pointer Events</a></td> + <td>The pointer leaves the active buttons state.</td> + </tr> + <tr> + <td>{{event("play")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-play">HTML5 media</a></td> + <td>Playback has begun.</td> + </tr> + <tr> + <td>{{event("playing")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-playing">HTML5 media</a></td> + <td>Playback is ready to start after having been paused or delayed due to lack of data.</td> + </tr> + <tr> + <td>{{event("popstate")}}</td> + <td>{{domxref("PopStateEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-popstate">HTML5</a></td> + <td>A session history entry is being navigated to (in certain cases).</td> + </tr> + <tr> + <td>{{event("progress")}}</td> + <td>{{domxref("ProgressEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-progress">XMLHttpRequest</a></td> + <td>In progress.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/progress_(appcache_event)">progress</a></code></td> + <td>{{domxref("ProgressEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td> + <td>The user agent is downloading resources listed by the manifest.</td> + </tr> + <tr> + <td>{{event("push")}}</td> + <td>{{domxref("PushEvent")}}</td> + <td style="white-space: nowrap;">{{SpecName("Push API")}}</td> + <td>A <a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker</a> has received a push message.</td> + </tr> + <tr> + <td>{{event("pushsubscriptionchange")}}</td> + <td>{{domxref("PushEvent")}}</td> + <td style="white-space: nowrap;">{{SpecName("Push API")}}</td> + <td>A <a href="/en-US/docs/Web/API/PushSubscription">PushSubscription</a> has expired.</td> + </tr> + <tr> + <td>{{event("ratechange")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-ratechange">HTML5 media</a></td> + <td>The playback rate has changed.</td> + </tr> + <tr> + <td>{{event("readystatechange")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><span>HTML5 <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-readystatechange">XMLHttpRequest</a></td> + <td>The readyState attribute of a document has changed.</td> + </tr> + <tr> + <td>{{event("repeatEvent")}}</td> + <td>{{domxref("TimeEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> + <td>A <a href="/en-US/docs/SVG/SVG_animation_with_SMIL">SMIL</a> animation element is repeated.</td> + </tr> + <tr> + <td>{{event("reset")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM L2</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#form-submission-0#resetting-a-form">HTML5</a></td> + <td>A form is reset.</td> + </tr> + <tr> + <td>{{event("resize")}}</td> + <td>{{domxref("UIEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-resize">DOM L3</a></td> + <td>The document view has been resized.</td> + </tr> + <tr> + <td>{{event("resourcetimingbufferfull")}}</td> + <td>{{domxref("Performance")}}</td> + <td style="white-space: nowrap;"><a href="https://w3c.github.io/resource-timing/#dom-performance-onresourcetimingbufferfull">Resource Timing</a></td> + <td>The browser's resource timing buffer is full.</td> + </tr> + <tr> + <td>{{event("result")}}</td> + <td>{{domxref("SpeechRecognitionEvent")}}</td> + <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> + <td>The speech recognition service returns a result — a word or phrase has been positively recognized and this has been communicated back to the app.</td> + </tr> + <tr> + <td>{{event("resume")}}</td> + <td>{{domxref("SpeechSynthesisEvent")}}</td> + <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> + <td>A paused utterance is resumed.</td> + </tr> + <tr> + <td>{{event("scroll")}}</td> + <td>{{domxref("UIEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-scroll">DOM L3</a></td> + <td>The document view or an element has been scrolled.</td> + </tr> + <tr> + <td>{{event("seeked")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-seeked">HTML5 media</a></td> + <td>A <em>seek</em> operation completed.</td> + </tr> + <tr> + <td>{{event("seeking")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-seeking">HTML5 media</a></td> + <td>A <em>seek</em> operation began.</td> + </tr> + <tr> + <td>{{event("select")}}</td> + <td>{{domxref("UIEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-select">DOM L3</a></td> + <td>Some text is being selected.</td> + </tr> + <tr> + <td>{{event("selectstart")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;">{{ SpecName('Selection API')}}</td> + <td>A selection just started.</td> + </tr> + <tr> + <td>{{event("selectionchange")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;">{{ SpecName('Selection API')}}</td> + <td>The selection in the document has been changed.</td> + </tr> + <tr> + <td>{{event("show")}}</td> + <td>{{domxref("MouseEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/interactive-elements.html#context-menus">HTML5</a></td> + <td>A contextmenu event was fired on/bubbled to an element that has a <a href="/en-US/docs/DOM/element.contextmenu">contextmenu</a> attribute</td> + </tr> + <tr> + <td>{{event("soundend")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> + <td>Any sound — recognisable speech or not — has stopped being detected.</td> + </tr> + <tr> + <td>{{event("soundstart")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> + <td>Any sound — recognisable speech or not — has been detected.</td> + </tr> + <tr> + <td>{{event("speechend")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> + <td>Speech recognised by the speech recognition service has stopped being detected.</td> + </tr> + <tr> + <td>{{event("speechstart")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> + <td>Sound that is recognised by the speech recognition service as speech has been detected.</td> + </tr> + <tr> + <td>{{event("stalled")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-stalled">HTML5 media</a></td> + <td>The user agent is trying to fetch media data, but data is unexpectedly not forthcoming.</td> + </tr> + <tr> + <td>{{event("start_(SpeechRecognition)","start")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> + <td>The speech recognition service has begun listening to incoming audio with intent to recognize grammars associated with the current <code>SpeechRecognition</code>.</td> + </tr> + <tr> + <td>{{event("start_(SpeechSynthesis)","start")}}</td> + <td>{{domxref("SpeechSynthesisEvent")}}</td> + <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> + <td>The utterance has begun to be spoken.</td> + </tr> + <tr> + <td>{{event("storage")}}</td> + <td>{{domxref("StorageEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/webstorage/#the-storage-event">Web Storage</a></td> + <td>A storage area (<a href="/en-US/docs/DOM/Storage#localStorage">localStorage</a> or <a href="/en-US/docs/DOM/Storage#sessionStorage">sessionStorage</a>) has changed.</td> + </tr> + <tr> + <td>{{event("submit")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM L2</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#form-submission-algorithm">HTML5</a></td> + <td>A form is submitted.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/success_indexedDB">success</a></code></td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td> + <td>A request successfully completed.</td> + </tr> + <tr> + <td>{{event("suspend")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-suspend">HTML5 media</a></td> + <td>Media data loading has been suspended.</td> + </tr> + <tr> + <td>{{event("SVGAbort")}}</td> + <td>{{domxref("SVGEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> + <td>Page loading has been stopped before the <a href="/en-US/docs/SVG">SVG</a> was loaded.</td> + </tr> + <tr> + <td>{{event("SVGError")}}</td> + <td>{{domxref("SVGEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> + <td>An error has occurred before the <a href="/en-US/docs/SVG">SVG</a> was loaded.</td> + </tr> + <tr> + <td>{{event("SVGLoad")}}</td> + <td>{{domxref("SVGEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> + <td>An <a href="/en-US/docs/SVG">SVG</a> document has been loaded and parsed.</td> + </tr> + <tr> + <td>{{event("SVGResize")}}</td> + <td>{{domxref("SVGEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> + <td>An <a href="/en-US/docs/SVG">SVG</a> document is being resized.</td> + </tr> + <tr> + <td>{{event("SVGScroll")}}</td> + <td>{{domxref("SVGEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> + <td>An <a href="/en-US/docs/SVG">SVG</a> document is being scrolled.</td> + </tr> + <tr> + <td>{{event("SVGUnload")}}</td> + <td>{{domxref("SVGEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> + <td>An <a href="/en-US/docs/SVG">SVG</a> document has been removed from a window or frame.</td> + </tr> + <tr> + <td>{{event("SVGZoom")}}</td> + <td>{{domxref("SVGZoomEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> + <td>An <a href="/en-US/docs/SVG">SVG</a> document is being zoomed.</td> + </tr> + <tr> + <td>{{event("timeout")}}</td> + <td>{{domxref("ProgressEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-timeout">XMLHttpRequest</a></td> + <td> </td> + </tr> + <tr> + <td>{{event("timeupdate")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-timeupdate">HTML5 media</a></td> + <td>The time indicated by the <code>currentTime</code> attribute has been updated.</td> + </tr> + <tr> + <td>{{event("touchcancel")}}</td> + <td>{{domxref("TouchEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/">Touch Events</a></td> + <td>A touch point has been disrupted in an implementation-specific manners (too many touch points for example).</td> + </tr> + <tr> + <td>{{event("touchend")}}</td> + <td>{{domxref("TouchEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/#the-touchend-event">Touch Events</a></td> + <td>A touch point is removed from the touch surface.</td> + </tr> + <tr> + <td>{{event("touchenter")}}</td> + <td>{{domxref("TouchEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/">Touch Events</a> Removed</td> + <td>A touch point is moved onto the interactive area of an element.</td> + </tr> + <tr> + <td>{{event("touchleave")}}</td> + <td>{{domxref("TouchEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/">Touch Events</a> Removed</td> + <td>A touch point is moved off the interactive area of an element.</td> + </tr> + <tr> + <td>{{event("touchmove")}}</td> + <td>{{domxref("TouchEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/#the-touchmove-event">Touch Events</a></td> + <td>A touch point is moved along the touch surface.</td> + </tr> + <tr> + <td>{{event("touchstart")}}</td> + <td>{{domxref("TouchEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/#the-touchstart---------event">Touch Events</a></td> + <td>A touch point is placed on the touch surface.</td> + </tr> + <tr> + <td>{{event("transitionend")}}</td> + <td>{{domxref("TransitionEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/css3-transitions/#transition-events">CSS Transitions</a></td> + <td>A <a href="/en-US/docs/CSS/CSS_transitions">CSS transition</a> has completed.</td> + </tr> + <tr> + <td>{{event("unload")}}</td> + <td>{{domxref("UIEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-unload">DOM L3</a></td> + <td>The document or a dependent resource is being unloaded.</td> + </tr> + <tr> + <td>{{event("updateready")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/spec/offline.html">Offline</a></td> + <td>The resources listed in the manifest have been newly redownloaded, and the script can use <code>swapCache()</code> to switch to the new cache.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/upgradeneeded_indexedDB">upgradeneeded</a></code></td> + <td> </td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td> + <td>An attempt was made to open a database with a version number higher than its current version. A <code>versionchange</code> transaction has been created.</td> + </tr> + <tr> + <td>{{event("userproximity")}}</td> + <td>{{domxref("UserProximityEvent")}}</td> + <td style="white-space: nowrap;">{{SpecName("Proximity Events")}}</td> + <td>Fresh data is available from a proximity sensor (indicates whether the nearby object is <code>near</code> the device or not).</td> + </tr> + <tr> + <td>{{event("voiceschanged")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;">{{SpecName('Web Speech API')}}</td> + <td>The list of {{domxref("SpeechSynthesisVoice")}} objects that would be returned by the {{domxref("SpeechSynthesis.getVoices()")}} method has changed (when the {{event("voiceschanged")}} event fires.)</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/versionchange_indexedDB">versionchange</a></code></td> + <td> </td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#database-interface">IndexedDB</a></td> + <td>A <code>versionchange</code> transaction completed.</td> + </tr> + <tr> + <td>{{event("visibilitychange")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/page-visibility/#sec-visibilitychange-event">Page visibility</a></td> + <td>The content of a tab has become visible or has been hidden.</td> + </tr> + <tr> + <td>{{event("volumechange")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-volumechange">HTML5 media</a></td> + <td>The volume has changed.</td> + </tr> + <tr> + <td>{{event("waiting")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-waiting">HTML5 media</a></td> + <td>Playback has stopped because of a temporary lack of data.</td> + </tr> + <tr> + <td>{{event("wheel")}}{{gecko_minversion_inline("17")}}</td> + <td>{{domxref("WheelEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-wheel">DOM L3</a></td> + <td>A wheel button of a pointing device is rotated in any direction.</td> + </tr> + </tbody> +</table> + +<h2 id="Non-standard_events">Non-standard events</h2> + +<table class="standard-table" style="width: 100%;"> + <thead> + <tr> + <th class="header" style="width: 220px;">Event Name</th> + <th class="header" style="width: 90px;">Event Type</th> + <th class="header" style="width: 100px;">Specification</th> + <th class="header">Fired when...</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{event("afterscriptexecute")}}</td> + <td>{{domxref("Event")}}</td> + <td><em>Mozilla Specific</em></td> + <td>A script has been executed.</td> + </tr> + <tr> + <td>{{event("beforescriptexecute")}}</td> + <td>{{domxref("Event")}}</td> + <td><em>Mozilla Specific</em></td> + <td>A script is about to be executed.</td> + </tr> + <tr> + <td>{{event("beforeinstallprompt")}}</td> + <td>{{domxref("Event")}}</td> + <td><em>Chrome specific</em></td> + <td>A user is prompted to save a web site to a home screen on mobile.</td> + </tr> + <tr> + <td>{{event("cardstatechange")}}</td> + <td> </td> + <td><em>Firefox OS specific</em></td> + <td>The {{domxref("MozMobileConnection.cardState")}} property changes value.</td> + </tr> + <tr> + <td>{{event("change")}}</td> + <td>{{domxref("DeviceStorageChangeEvent")}}</td> + <td><em>Firefox OS specific</em></td> + <td>This event is triggered each time a file is created, modified or deleted on a given storage area.</td> + </tr> + <tr> + <td>{{event("connectionInfoUpdate")}}</td> + <td> </td> + <td><a href="http://mxr.mozilla.org/mozilla-central/source/dom/wifi/nsIWifi.idl?rev=3e586802f478#176"><em>Firefox OS specific</em></a></td> + <td>The informations about the signal strength and the link speed have been updated.</td> + </tr> + <tr> + <td>{{event("cfstatechange")}}</td> + <td> </td> + <td><em>Firefox OS specific</em></td> + <td>The call forwarding state changes.</td> + </tr> + <tr> + <td>{{event("datachange")}}</td> + <td> </td> + <td><em>Firefox OS specific</em></td> + <td>The {{domxref("MozMobileConnection.data")}} object changes values.</td> + </tr> + <tr> + <td>{{event("dataerror")}}</td> + <td> </td> + <td><em>Firefox OS specific</em></td> + <td>The {{domxref("MozMobileConnection.data")}} object receive an error from the <abbr title="Radio Interface Layer">RIL</abbr>.</td> + </tr> + <tr> + <td>{{event("DOMMouseScroll")}}{{deprecated_inline}}</td> + <td> </td> + <td><em>Mozilla specific</em></td> + <td>The wheel button of a pointing device is rotated (detail attribute is a number of lines). (use {{event("wheel")}} instead)</td> + </tr> + <tr> + <td><code>dragdrop</code> {{deprecated_inline}}</td> + <td><code>DragEvent</code></td> + <td><em>Mozilla specific</em></td> + <td>An element is dropped (use {{event("drop")}} instead).</td> + </tr> + <tr> + <td><code>dragexit</code> {{deprecated_inline}}</td> + <td><code>DragEvent</code></td> + <td><em>Mozilla specific</em></td> + <td>A drag operation is being ended(use {{event("dragend")}} instead).</td> + </tr> + <tr> + <td><code>draggesture</code> {{deprecated_inline}}</td> + <td><code>DragEvent</code></td> + <td><em>Mozilla specific</em></td> + <td>The user starts dragging an element or text selection (use {{event("dragstart")}} instead).</td> + </tr> + <tr> + <td>{{event("icccardlockerror")}}</td> + <td> </td> + <td><em>Firefox OS specific</em></td> + <td>the {{domxref("MozMobileConnection.unlockCardLock()")}} or {{domxref("MozMobileConnection.setCardLock()")}} methods fails.</td> + </tr> + <tr> + <td>{{event("iccinfochange")}}</td> + <td> </td> + <td><em>Firefox OS specific</em></td> + <td>The {{domxref("MozMobileConnection.iccInfo")}} object changes.</td> + </tr> + <tr> + <td>{{event("localized")}}</td> + <td> </td> + <td><em><a href="https://github.com/fabi1cazenave/webL10n">Mozilla Specific</a></em></td> + <td>The page has been localized using data-l10n-* attributes.</td> + </tr> + <tr> + <td>{{event("mousewheel")}}{{deprecated_inline}}</td> + <td> </td> + <td><a href="http://msdn.microsoft.com/en-us/library/ie/ms536951%28v=vs.85%29.aspx"><em>IE invented</em></a></td> + <td>The wheel button of a pointing device is rotated.</td> + </tr> + <tr> + <td>{{event("MozAudioAvailable")}}</td> + <td>{{domxref("Event")}}</td> + <td><em>Mozilla specific</em></td> + <td>The audio buffer is full and the corresponding raw samples are available.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/MozBeforeResize"><code>MozBeforeResize</code></a> {{obsolete_inline}}</td> + <td> </td> + <td><em>Mozilla specific</em></td> + <td>A window is about to be resized.</td> + </tr> + <tr> + <td>{{event("mozbrowseractivitydone")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when some activity has been completed (complete description TBD.)</td> + </tr> + <tr> + <td>{{event("mozbrowserasyncscroll")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when the scroll position within a browser<code> </code>{{HTMLElement("iframe")}} changes.</td> + </tr> + <tr> + <td>{{event("mozbrowseraudioplaybackchange")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when audio starts or stops playing within the browser {{HTMLElement("iframe")}} content.</td> + </tr> + <tr> + <td>{{event("mozbrowsercaretstatechanged")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when the text selected inside the browser {{HTMLElement("iframe")}} content changes.</td> + </tr> + <tr> + <td>{{event("mozbrowserclose")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when window.close() is called within a browser {{HTMLElement("iframe")}}.</td> + </tr> + <tr> + <td>{{event("mozbrowsercontextmenu")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when a browser {{HTMLElement("iframe")}} try to open a context menu.</td> + </tr> + <tr> + <td>{{event("mozbrowserdocumentfirstpaint")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when a new paint occurs on any document in the browser {{HTMLElement("iframe")}}.</td> + </tr> + <tr> + <td>{{event("mozbrowsererror")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when an error occured while trying to load a content within a browser iframe</td> + </tr> + <tr> + <td>{{event("mozbrowserfindchange")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when a search operation is performed on the browser {{HTMLElement("iframe")}} content (see <a href="/en-US/docs/Web/API/HTMLIFrameElement#Search_methods">HTMLIFrameElement search methods</a>.)</td> + </tr> + <tr> + <td>{{event("mozbrowserfirstpaint")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when the {{HTMLElement("iframe")}} paints content for the first time (this doesn't include the initial paint from <em>about:blank</em>.)</td> + </tr> + <tr> + <td>{{event("mozbrowsericonchange")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when the favicon of a browser iframe changes.</td> + </tr> + <tr> + <td>{{event("mozbrowserlocationchange")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when an browser iframe's location changes.</td> + </tr> + <tr> + <td>{{event("mozbrowserloadend")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when the browser iframe has finished loading all its assets.</td> + </tr> + <tr> + <td>{{event("mozbrowserloadstart")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when the browser iframe starts to load a new page.</td> + </tr> + <tr> + <td>{{event("mozbrowsermanifestchange")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when a the path to the app manifest changes, in the case of a browser {{HTMLElement("iframe")}} with an open web app embedded in it.</td> + </tr> + <tr> + <td>{{event("mozbrowsermetachange")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when a {{htmlelement("meta")}} elelment is added to, removed from or changed in the browser {{HTMLElement("iframe")}}'s content.</td> + </tr> + <tr> + <td>{{event("mozbrowseropensearch")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when a link to a search engine is found.</td> + </tr> + <tr> + <td>{{event("mozbrowseropentab")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when a new tab is opened within a browser {{HTMLElement("iframe")}} as a result of the user issuing a command to open a link target in a new tab (for example <kbd>ctrl</kbd>/<kbd>cmd</kbd> + click.)</td> + </tr> + <tr> + <td>{{event("mozbrowseropenwindow")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when {{domxref("window.open()")}} is called within a browser iframe.</td> + </tr> + <tr> + <td>{{event("mozbrowserresize")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when the browser {{HTMLElement("iframe")}}'s window size has changed.</td> + </tr> + <tr> + <td>{{event("mozbrowserscroll")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when the browser {{HTMLElement("iframe")}} content scrolls.</td> + </tr> + <tr> + <td>{{event("mozbrowserscrollareachanged")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when the available scrolling area in the browser {{HTMLElement("iframe")}} changes. This can occur on resize and when the page size changes (while loading for example.)</td> + </tr> + <tr> + <td>{{event("mozbrowserscrollviewchange")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when asynchronous scrolling (i.e. APCZ) starts or stops.</td> + </tr> + <tr> + <td>{{event("mozbrowsersecuritychange")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when the SSL state changes within a browser iframe.</td> + </tr> + <tr> + <td>{{event("mozbrowserselectionstatechanged")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when the text selected inside the browser {{HTMLElement("iframe")}} content changes. Note that this is deprecated, and newer implementations use {{event("mozbrowsercaretstatechanged")}} instead.</td> + </tr> + <tr> + <td>{{event("mozbrowsershowmodalprompt")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when {{domxref("window.alert","alert()")}}, {{domxref("window.confirm","confirm()")}} or {{domxref("window.prompt","prompt()")}} are called within a browser iframe</td> + </tr> + <tr> + <td>{{event("mozbrowsertitlechange")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when the document.title changes within a browser iframe.</td> + </tr> + <tr> + <td>{{event("mozbrowserusernameandpasswordrequired")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when an HTTP authentification is requested.</td> + </tr> + <tr> + <td>{{event("mozbrowservisibilitychange")}}</td> + <td> </td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when the visibility state of the current browser iframe {{HTMLElement("iframe")}} changes, for example due to a call to {{domxref("HTMLIFrameElement.setVisible","setVisible()")}}.</td> + </tr> + <tr> + <td>{{event("MozGamepadButtonDown")}}</td> + <td> </td> + <td><em>To be specified</em></td> + <td>A gamepad button is pressed down.</td> + </tr> + <tr> + <td>{{event("MozGamepadButtonUp")}}</td> + <td> </td> + <td><em>To be specified</em></td> + <td>A gamepad button is released.</td> + </tr> + <tr> + <td>{{event("MozMousePixelScroll")}} {{deprecated_inline}}</td> + <td> </td> + <td><em>Mozilla specific</em></td> + <td>The wheel button of a pointing device is rotated (detail attribute is a number of pixels). (use wheel instead)</td> + </tr> + <tr> + <td>{{event("MozOrientation")}} {{deprecated_inline}}</td> + <td> </td> + <td><em>Mozilla specific</em></td> + <td>Fresh data is available from an orientation sensor (see deviceorientation).</td> + </tr> + <tr> + <td>{{event("MozScrolledAreaChanged")}}</td> + <td>{{domxref("UIEvent")}}</td> + <td><em>Mozilla specific</em></td> + <td>The document view has been scrolled or resized.</td> + </tr> + <tr> + <td>{{event("moztimechange")}}</td> + <td> </td> + <td><em>Mozilla specific</em></td> + <td>The time of the device has been changed.</td> + </tr> + <tr> + <td><a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchDown</a> {{deprecated_inline}}</td> + <td> </td> + <td><em>Mozilla specific</em></td> + <td>A touch point is placed on the touch surface (use touchstart instead).</td> + </tr> + <tr> + <td><a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchMove</a> {{deprecated_inline}}</td> + <td> </td> + <td><em>Mozilla specific</em></td> + <td>A touch point is moved along the touch surface (use touchmove instead).</td> + </tr> + <tr> + <td><a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchUp</a> {{deprecated_inline}}</td> + <td> </td> + <td><em>Mozilla specific</em></td> + <td>A touch point is removed from the touch surface (use touchend instead).</td> + </tr> + <tr> + <td>{{event("alerting")}}</td> + <td>{{domxref("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>The correspondent is being alerted (his/her phone is ringing).</td> + </tr> + <tr> + <td>{{event("busy")}}</td> + <td>{{domxref("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>The line of the correspondent is busy.</td> + </tr> + <tr> + <td>{{event("callschanged")}}</td> + <td>{{domxref("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>A call has been added or removed from the list of current calls.</td> + </tr> + <tr> + <td><a href="/en-US/docs/DOM/onconnected">onconnected</a> {{event("connected")}}</td> + <td>{{domxref("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>A call has been connected.</td> + </tr> + <tr> + <td>{{event("connecting")}}</td> + <td>{{domxref("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>A call is about to connect.</td> + </tr> + <tr> + <td>{{event("delivered")}}</td> + <td>{{domxref("SMSEvent")}}</td> + <td><em>To be specified</em></td> + <td>An SMS has been successfully delivered.</td> + </tr> + <tr> + <td>{{event("dialing")}}</td> + <td>{{domxref("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>The number of a correspondent has been dialed.</td> + </tr> + <tr> + <td>{{event("disabled")}}</td> + <td> </td> + <td><a href="http://mxr.mozilla.org/mozilla-central/source/dom/wifi/nsIWifi.idl?rev=3e586802f478#182"><em>Firefox OS specific</em></a></td> + <td>Wifi has been disabled on the device.</td> + </tr> + <tr> + <td>{{event("disconnected")}}</td> + <td>{{domxref("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>A call has been disconnected.</td> + </tr> + <tr> + <td>{{event("disconnecting")}}</td> + <td>{{domxref("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>A call is about to disconnect.</td> + </tr> + <tr> + <td>{{event("enabled")}}</td> + <td> </td> + <td><a href="http://mxr.mozilla.org/mozilla-central/source/dom/wifi/nsIWifi.idl?rev=3e586802f478#182"><em>Firefox OS specific</em></a></td> + <td>Wifi has been enabled on the device.</td> + </tr> + <tr> + <td>{{event("error_(Telephony)","error")}}</td> + <td>{{domxref("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>An error occurred.</td> + </tr> + <tr> + <td>{{event("held")}}</td> + <td>{{domxref("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>A call has been held.</td> + </tr> + <tr> + <td>{{event("holding")}}</td> + <td>{{domxref("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>A call is about to be held.</td> + </tr> + <tr> + <td>{{event("incoming")}}</td> + <td>{{domxref("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>A call is being received.</td> + </tr> + <tr> + <td>{{event("received")}}</td> + <td>{{domxref("SMSEvent")}}</td> + <td><em>To be specified</em></td> + <td>An SMS has been received.</td> + </tr> + <tr> + <td>{{event("resuming")}}</td> + <td>{{domxref("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>A call is about to resume.</td> + </tr> + <tr> + <td>{{event("sent")}}</td> + <td>{{domxref("SMSEvent")}}</td> + <td><em>To be specified</em></td> + <td>An SMS has been sent.</td> + </tr> + <tr> + <td>{{event("statechange")}}</td> + <td>{{domxref("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>The state of a call has changed.</td> + </tr> + <tr> + <td>{{event("statuschange")}}</td> + <td> </td> + <td><a href="http://mxr.mozilla.org/mozilla-central/source/dom/wifi/nsIWifi.idl?rev=3e586802f478#156"><em>Firefox OS specific</em></a></td> + <td>The status of the Wifi connection changed.</td> + </tr> + <tr> + <td>{{event("overflow")}}</td> + <td>{{domxref("UIEvent")}}</td> + <td><em>Mozilla specific</em></td> + <td>An element has been overflowed by its content or has been rendered for the first time in this state (only works for elements styled with <code>overflow</code> != <code>visible</code>).</td> + </tr> + <tr> + <td>{{event("smartcard-insert")}}</td> + <td> </td> + <td><em>Mozilla specific</em></td> + <td>A <a href="/en-US/docs/JavaScript_crypto">smartcard</a> has been inserted.</td> + </tr> + <tr> + <td>{{event("smartcard-remove")}}</td> + <td> </td> + <td><em>Mozilla specific</em></td> + <td>A <a href="/en-US/docs/JavaScript_crypto">smartcard</a> has been removed.</td> + </tr> + <tr> + <td>{{event("stkcommand")}}</td> + <td> </td> + <td><em>Firefox OS specific</em></td> + <td>The <abbr title="SIM Application Toolkit">STK</abbr> Proactive Command is issued from <abbr title="Integrated Circuit Card">ICC</abbr>.</td> + </tr> + <tr> + <td>{{event("stksessionend")}}</td> + <td> </td> + <td><em>Firefox OS specific</em></td> + <td>The <abbr title="SIM Application Toolkit">STK</abbr> Session is terminated by <abbr title="Integrated Circuit Card">ICC</abbr>.</td> + </tr> + <tr> + <td><code>text</code></td> + <td> </td> + <td><em>Mozilla Specific</em></td> + <td>A generic composition event occurred.</td> + </tr> + <tr> + <td>{{event("underflow")}}</td> + <td>{{domxref("UIEvent")}}</td> + <td><em>Mozilla specific</em></td> + <td>An element is no longer overflowed by its content (only works for elements styled with <code>overflow</code> != <code>visible</code>).</td> + </tr> + <tr> + <td><code>uploadprogress</code> {{deprecated_inline}}</td> + <td>{{domxref("ProgressEvent")}}</td> + <td><em>Mozilla Specific</em></td> + <td>Upload is in progress (see {{event("progress")}}).</td> + </tr> + <tr> + <td> + <p>{{event("ussdreceived")}}</p> + </td> + <td> </td> + <td><em>Firefox OS specific</em></td> + <td>A new <abbr title="Unstructured Supplementary Service Data">USSD</abbr> message is received</td> + </tr> + <tr> + <td>{{event("voicechange")}}</td> + <td> </td> + <td><em>Firefox OS specific</em></td> + <td>The {{domxref("MozMobileConnection.voice")}} object changes values.</td> + </tr> + </tbody> +</table> + +<h2 id="Mozilla-specific_events">Mozilla-specific events</h2> + +<div class="note"> +<p><strong>Note:</strong> those events are never exposed to web content and can only be used in chrome content context.</p> +</div> + +<h3 id="XUL_events">XUL events</h3> + +<table class="standard-table" style="width: 100%;"> + <tbody> + <tr> + <th class="header" style="width: 220px;">Event Name</th> + <th class="header" style="width: 90px;">Event Type</th> + <th class="header" style="width: 100px;">Specification</th> + <th class="header">Fired when...</th> + </tr> + <tr> + <td>{{event("broadcast")}}</td> + <td> </td> + <td><a href="/en-US/docs/XUL/Tutorial/Broadcasters_and_Observers#Broadcast_event">XUL</a></td> + <td>An <code>observer</code> noticed a change to the attributes of a watched broadcaster.</td> + </tr> + <tr> + <td>{{event("CheckboxStateChange")}}</td> + <td> </td> + <td>XUL</td> + <td>The state of a <code>checkbox</code> has been changed either by a user action or by a script (useful for accessibility).</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/close_event">close</a></td> + <td> </td> + <td>XUL</td> + <td>The close button of the window has been clicked.</td> + </tr> + <tr> + <td>{{event("command")}}</td> + <td> </td> + <td>XUL</td> + <td>An element has been activated.</td> + </tr> + <tr> + <td>{{event("commandupdate")}}</td> + <td> </td> + <td>XUL</td> + <td>A command update occurred on a <code>commandset</code> element.</td> + </tr> + <tr> + <td>{{event("DOMMenuItemActive")}}</td> + <td> </td> + <td>XUL</td> + <td>A menu or menuitem has been hovered or highlighted.</td> + </tr> + <tr> + <td>{{event("DOMMenuItemInactive")}}</td> + <td> </td> + <td><em>XUL</em></td> + <td>A menu or menuitem is no longer hovered or highlighted.</td> + </tr> + <tr> + <td>{{event("popuphidden")}}</td> + <td><code>PopupEvent</code></td> + <td><a href="/en-US/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td> + <td>A menupopup, panel or tooltip has been hidden.</td> + </tr> + <tr> + <td>{{event("popuphiding")}}</td> + <td><code>PopupEvent</code></td> + <td><a href="/en-US/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td> + <td>A menupopup, panel or tooltip is about to be hidden.</td> + </tr> + <tr> + <td>{{event("popupshowing")}}</td> + <td><code>PopupEvent</code></td> + <td><a href="/en-US/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td> + <td>A menupopup, panel or tooltip is about to become visible.</td> + </tr> + <tr> + <td>{{event("popupshown")}}</td> + <td><code>PopupEvent</code></td> + <td><a href="/en-US/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td> + <td>A menupopup, panel or tooltip has become visible.</td> + </tr> + <tr> + <td>{{event("RadioStateChange")}}</td> + <td> </td> + <td>XUL</td> + <td>The state of a <code>radio</code> has been changed either by a user action or by a script (useful for accessibility).</td> + </tr> + <tr> + <td>{{event("ValueChange")}}</td> + <td> </td> + <td>XUL</td> + <td>The value of an element has changed (a progress bar for example, useful for accessibility).</td> + </tr> + </tbody> +</table> + +<h3 id="Add-on-specific_events">Add-on-specific events</h3> + +<table class="standard-table" style="width: 100%;"> + <tbody> + <tr> + <th class="header" style="width: 220px;">Event Name</th> + <th class="header" style="width: 90px;">Event Type</th> + <th class="header" style="width: 100px;">Specification</th> + <th class="header">Fired when...</th> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/MozSwipeGesture">MozSwipeGesture</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>A touch point is swiped across the touch surface</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/MozMagnifyGestureStart">MozMagnifyGestureStart</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>Two touch points start to move away from each other.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/MozMagnifyGestureUpdate">MozMagnifyGestureUpdate</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>Two touch points move away from each other (after a MozMagnifyGestureStart).</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/MozMagnifyGesture">MozMagnifyGesture</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>Two touch points moved away from each other (after a sequence of MozMagnifyGestureUpdate).</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/MozRotateGestureStart">MozRotateGestureStart</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>Two touch points start to rotate around a point.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/MozRotateGestureUpdate">MozRotateGestureUpdate</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>Two touch points rotate around a point (after a MozRotateGestureStart).</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/MozRotateGesture">MozRotateGesture</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>Two touch points rotate around a point (after a sequence of MozRotateGestureUpdate).</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/MozTapGesture">MozTapGesture</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>Two touch points are tapped on the touch surface.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/MozPressTapGesture">MozPressTapGesture</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>A "press-tap" gesture happened on the touch surface (first finger down, second finger down, second finger up, first finger up).</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/MozEdgeUIGesture">MozEdgeUIGesture</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>A touch point is swiped across the touch surface to invoke the edge UI (Win8 only).</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/MozAfterPaint">MozAfterPaint</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>Content has been repainted.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/DOMPopupBlocked">DOMPopupBlocked</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>A popup has been blocked</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/DOMWindowCreated">DOMWindowCreated</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>A window has been created.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/DOMWindowClose">DOMWindowClose</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>A window is about to be closed.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/DOMTitleChanged">DOMTitleChanged</a></td> + <td> </td> + <td><em>Addons specifc</em></td> + <td>The title of a window has changed.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/DOMLinkAdded">DOMLinkAdded</a></td> + <td> </td> + <td><em>Addons specifc</em></td> + <td>A link has been added a document.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/DOMLinkRemoved">DOMLinkRemoved</a></td> + <td> </td> + <td><em>Addons specifc</em></td> + <td>A link has been removed inside from a document.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/DOMMetaAdded">DOMMetaAdded</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>A <code>meta</code> element has been added to a document.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/DOMMetaRemoved">DOMMetaRemoved</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>A <code>meta</code> element has been removed from a document.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/DOMWillOpenModalDialog">DOMWillOpenModalDialog</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>A modal dialog is about to open.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/DOMModalDialogClosed">DOMModalDialogClosed</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>A modal dialog has been closed.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/DOMAutoComplete">DOMAutoComplete</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>The content of an element has been auto-completed.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/DOMFrameContentLoaded">DOMFrameContentLoaded</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>The frame has finished loading (but not its dependent resources).</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/AlertActive">AlertActive</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>A <code><a href="/en-US/docs/XUL/notification">notification</a></code> element is shown.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/AlertClose">AlertClose</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>A <code><a href="/en-US/docs/XUL/notification">notification</a></code> element is closed.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/fullscreen">fullscreen</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>Browser fullscreen mode has been entered or left.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/sizemodechange">sizemodechange</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>Window has entered/left fullscreen mode, or has been minimized/unminimized.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/MozEnteredDomFullscreen">MozEnteredDomFullscreen</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td><a href="/en-US/docs/DOM/Using_full-screen_mode">DOM fullscreen</a> mode has been entered.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/SSWindowClosing">SSWindowClosing</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>The session store will stop tracking this window.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/SSTabClosing">SSTabClosing</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>The session store will stop tracking this tab.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/SSTabRestoring">SSTabRestoring</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>A tab is about to be restored.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/SSTabRestored">SSTabRestored</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>A tab has been restored.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/SSWindowStateReady">SSWindowStateReady</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>A window state has switched to "ready".</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/SSWindowStateBusy">SSWindowStateBusy</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>A window state has switched to "busy".</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/tabviewsearchenabled">tabviewsearchenabled</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>The search feature of Panorama has been activated</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/tabviewsearchdisabled">tabviewsearchdisabled</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>The search feature of Panorama has been deactivated</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/tabviewframeinitialized">tabviewframeinitialized</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>The frame container of Panorama has been initialized</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/tabviewshown">tabviewshown</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>The Panorama tab has been shown</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/tabviewhidden">tabviewhidden</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>The Panorama tab has been hidden</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/TabOpen">TabOpen</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>A tab has been opened.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/TabClose">TabClose</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>A tab has been closed.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/TabSelect">TabSelect</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>A tab has been selected.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/TabShow">TabShow</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>A tab has been shown.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/TabHide">TabHide</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>A tab has been hidden.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/TabPinned">TabPinned</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>A tab has been pinned.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/TabUnpinned">TabUnpinned</a></td> + <td> </td> + <td><em>Addons specific</em></td> + <td>A tab has been unpinned.</td> + </tr> + </tbody> +</table> + +<h3 id="Developer_tool-specific_events">Developer tool-specific events</h3> + +<table class="standard-table" style="width: 100%;"> + <tbody> + <tr> + <th class="header" style="width: 220px;">Event Name</th> + <th class="header" style="width: 90px;">Event Type</th> + <th class="header" style="width: 100px;">Specification</th> + <th class="header">Fired when...</th> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/CssRuleViewRefreshed">CssRuleViewRefreshed</a></td> + <td> </td> + <td><em>devtools specific</em></td> + <td>The "Rules" view of the style inspector has been updated.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/CssRuleViewChanged">CssRuleViewChanged</a></td> + <td> </td> + <td><em>devtools specific</em></td> + <td>The "Rules" view of the style inspector has been changed.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/CssRuleViewCSSLinkClicked">CssRuleViewCSSLinkClicked</a></td> + <td> </td> + <td><em>devtools specific</em></td> + <td>A link to a CSS file has been clicked in the "Rules" view of the style inspector.</td> + </tr> + </tbody> +</table> + +<h2 id="Categories">Categories</h2> + +<h3 id="Animation_events">Animation events</h3> + +<p>{{event("animationend")}}, {{event("animationiteration")}}, {{event("animationstart")}}, {{event("beginEvent")}}, {{event("endEvent")}}, {{event("repeatEvent")}}</p> + +<h3 id="Battery_events">Battery events</h3> + +<p>{{event("chargingchange")}} {{event("chargingtimechange")}}, {{event("dischargingtimechange")}} {{event("levelchange")}}</p> + +<h3 id="Call_events">Call events</h3> + +<p>{{event("alerting")}}, {{event("busy")}}, {{event("callschanged")}} {{event("cfstatechange")}}, {{event("connected")}}, {{event("connecting")}}, {{event("dialing")}}, {{event("disconnected")}}, {{event("disconnecting")}}, {{event("error_(Telephony)","error")}}, {{event("held")}}, {{event("holding")}}, {{event("incoming")}}, {{event("resuming")}}, {{event("statechange")}}, {{event("voicechange")}}</p> + +<h3 id="CSS_events">CSS events</h3> + +<p><a href="/en-US/docs/Web/Reference/Events/CssRuleViewRefreshed">CssRuleViewRefreshed</a>, <a href="/en-US/docs/Web/Reference/Events/CssRuleViewChanged">CssRuleViewChanged</a>, <a href="/en-US/docs/Web/Reference/Events/CssRuleViewCSSLinkClicked">CssRuleViewCSSLinkClicked</a>, {{event("transitionend")}}</p> + +<h3 id="Database_events">Database events</h3> + +<p><code><a href="/en-US/docs/Web/Reference/Events/abort_indexedDB">abort</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/blocked_indexedDB">blocked</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/complete_indexedDB">complete</a></code>, {{event("error")}} (<a href="/en-US/docs/Web/Reference/Events/error">link</a>), <code><a href="/en-US/docs/Web/Reference/Events/success_indexedDB">success</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/upgradeneeded_indexedDB">upgradeneeded</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/versionchange_indexedDB">versionchange</a></code></p> + +<h3 id="Document_events">Document events</h3> + +<p><a href="/en-US/docs/Web/Reference/Events/DOMLinkAdded">DOMLinkAdded</a>, <a href="/en-US/docs/Web/Reference/Events/DOMLinkRemoved">DOMLinkRemoved</a>, <a href="/en-US/docs/Web/Reference/Events/DOMMetaAdded">DOMMetaAdded</a>, <a href="/en-US/docs/Web/Reference/Events/DOMMetaRemoved">DOMMetaRemoved</a>, <a href="/en-US/docs/Web/Reference/Events/DOMWillOpenModalDialog">DOMWillOpenModalDialog</a>, <a href="/en-US/docs/Web/Reference/Events/DOMModalDialogClosed">DOMModalDialogClosed</a>, {{event("unload")}}</p> + +<h3 id="DOM_mutation_events">DOM mutation events</h3> + +<p><code><a href="/en-US/docs/DOM/Mutation_events">DOMAttributeNameChanged</a></code>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMAttrModified</a></code>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMCharacterDataModified</a></code>, {{event("DOMContentLoaded")}}, <code><a href="/en-US/docs/DOM/Mutation_events">DOMElementNameChanged</a></code>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeInserted</a></code>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeInsertedIntoDocument</a></code>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeRemoved</a></code>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeRemovedFromDocument</a></code>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMSubtreeModified</a></code></p> + +<h3 id="Drag_events">Drag events</h3> + +<p>{{event("drag")}}, <code>dragdrop</code>, {{event("dragend")}}, {{event("dragenter")}}, <code>dragexit</code>, <code>draggesture</code>, {{event("dragleave")}}, {{event("dragover")}}, {{event("dragstart")}}, {{event("drop")}}</p> + +<h3 id="Element_events">Element events</h3> + +<p>{{event("invalid")}}, {{event("overflow")}}, {{event("underflow")}}, <a href="/en-US/docs/Web/Reference/Events/DOMAutoComplete">DOMAutoComplete</a>, {{event("command")}}, {{event("commandupdate")}}</p> + +<h3 id="Focus_events">Focus events</h3> + +<p>{{event("blur")}}, {{event("change")}}, <code>DOMFocusIn</code>, <code>DOMFocusOut</code>, {{event("focus")}}, {{event("focusin")}}, {{event("focusout")}}</p> + +<h3 id="Form_events">Form events</h3> + +<p>{{event("reset")}}, {{event("submit")}}</p> + +<h3 id="Frame_events">Frame events</h3> + +<p>{{event("mozbrowserclose")}}, {{event("mozbrowsercontextmenu")}}, {{event("mozbrowsererror")}}, {{event("mozbrowsericonchange")}}, {{event("mozbrowserlocationchange")}}, {{event("mozbrowserloadend")}}, {{event("mozbrowserloadstart")}}, {{event("mozbrowseropenwindow")}}, {{event("mozbrowsersecuritychange")}}, {{event("mozbrowsershowmodalprompt")}} (<a href="/en-US/docs/Web/Reference/Events/mozbrowsershowmodalprompt">link</a>), {{event("mozbrowsertitlechange")}}, <a href="/en-US/docs/Web/Reference/Events/DOMFrameContentLoaded">DOMFrameContentLoaded</a></p> + +<h3 id="Input_device_events">Input device events</h3> + +<p>{{event("click")}}, {{event("contextmenu")}}, {{event("DOMMouseScroll")}}, {{event("dblclick")}}, {{event("gamepadconnected")}}, {{event("gamepaddisconnected")}}, {{event("keydown")}}, {{event("keypress")}}, {{event("keyup")}}, {{event("MozGamepadButtonDown")}}, {{event("MozGamepadButtonUp")}}, {{event("mousedown")}}, {{event("mouseenter")}}, {{event("mouseleave")}}, {{event("mousemove")}}, {{event("mouseout")}}, {{event("mouseover")}}, {{event("mouseup")}}, {{event("mousewheel")}}, {{event("MozMousePixelScroll")}}, {{event("pointerlockchange")}}, {{event("pointerlockerror")}},{{event("wheel")}}</p> + +<h3 id="Media_events">Media events</h3> + +<p>{{event("audioprocess")}}, {{event("canplay")}}, {{event("canplaythrough")}}, {{event("durationchange")}}, {{event("emptied")}}, {{event("ended")}}, {{event("ended_(Web_Audio)", "ended")}}, {{event("loadeddata")}}, {{event("loadedmetadata")}}, {{event("MozAudioAvailable")}}, {{event("pause")}}, {{event("play")}}, {{event("playing")}}, {{event("ratechange")}}, {{event("seeked")}}, {{event("seeking")}}, {{event("stalled")}}, {{event("suspend")}}, {{event("timeupdate")}}, {{event("volumechange")}}, {{event("waiting")}}, {{event("complete")}}</p> + +<h3 id="Menu_events">Menu events</h3> + +<p>{{event("DOMMenuItemActive")}}, {{event("DOMMenuItemInactive")}}</p> + +<h3 id="Network_events">Network events</h3> + +<p>{{event("datachange")}}, {{event("dataerror")}}, {{event("disabled")}}, {{event("enabled")}}, {{event("offline")}}, {{event("online")}}, {{event("statuschange")}}, {{event("connectionInfoUpdate")}},</p> + +<h3 id="Notification_events">Notification events</h3> + +<p><a href="/en-US/docs/Web/Reference/Events/AlertActive">AlertActive</a>, <a href="/en-US/docs/Web/Reference/Events/AlertClose">AlertClose</a></p> + +<h3 id="Pointer_events">Pointer events</h3> + +<p>{{event("pointerover")}}, {{event("pointerenter")}}, {{event("pointerdown")}}, {{event("pointermove")}}, {{event("pointerup")}}, {{event("pointercancel")}}, {{event("pointerout")}}, {{event("pointerleave")}}, {{event("gotpointercapture")}}, {{event("lostpointercapture")}}</p> + +<h3 id="Popup_events">Popup events</h3> + +<p>{{event("popuphidden")}}, {{event("popuphiding")}}, {{event("popupshowing")}}, {{event("popupshown")}}, <a href="/en-US/docs/Web/Reference/Events/DOMPopupBlocked">DOMPopupBlocked</a></p> + +<h3 id="Printing_events">Printing events</h3> + +<p>{{event("afterprint")}}, {{event("beforeprint")}}</p> + +<h3 id="Progress_events">Progress events</h3> + +<p><code><a href="/en-US/docs/Web/Reference/Events/abort_(ProgressEvent)">abort</a></code>, {{event("error")}}, <code><a href="/en-US/docs/Web/Reference/Events/load_(ProgressEvent)">load</a></code>, {{event("loadend")}}, {{event("loadstart")}}, {{event("progress")}}, <code><a href="/en-US/docs/Web/Reference/Events/progress_(appcache_event)">progress</a></code>, {{event("timeout")}}, <code>uploadprogress</code></p> + +<h3 id="Resource_events">Resource events</h3> + +<p>{{event("abort")}}, {{event("cached")}}, {{event("error")}}, {{event("load")}}</p> + +<h3 id="Script_events">Script events</h3> + +<p>{{event("afterscriptexecute")}}, {{event("beforescriptexecute")}}</p> + +<h3 id="Sensor_events">Sensor events</h3> + +<p>{{event("compassneedscalibration")}}, {{event("devicelight")}}, {{event("devicemotion")}}, {{event("deviceorientation")}}, {{event("deviceproximity")}}, {{event("MozOrientation")}}, {{event("orientationchange")}}, {{event("userproximity")}}</p> + +<h3 id="Session_history_events">Session history events</h3> + +<p>{{event("pagehide")}}, {{event("pageshow")}}, {{event("popstate")}}</p> + +<h3 id="Smartcard_events">Smartcard events</h3> + +<p>{{event("icccardlockerror")}}, {{event("iccinfochange")}}, {{event("smartcard-insert")}}, {{event("smartcard-remove")}}, {{event("stkcommand")}}, {{event("stksessionend")}}, {{event("cardstatechange")}}</p> + +<h3 id="SMS_and_USSD_events">SMS and USSD events</h3> + +<p>{{event("delivered")}}, {{event("received")}}, {{event("sent")}}, {{event("ussdreceived")}}</p> + +<h3 id="Storage_events">Storage events</h3> + +<p>{{event("change")}} (see {{anch("Non-standard events")}}), {{event("storage")}}</p> + +<h3 id="SVG_events">SVG events</h3> + +<p>{{event("SVGAbort")}}, {{event("SVGError")}}, {{event("SVGLoad")}}, {{event("SVGResize")}}, {{event("SVGScroll")}}, {{event("SVGUnload")}}, {{event("SVGZoom")}}</p> + +<h3 id="Tab_events">Tab events</h3> + +<p><a href="/en-US/docs/Web/Reference/Events/tabviewsearchenabled">tabviewsearchenabled</a>, <a href="/en-US/docs/Web/Reference/Events/tabviewsearchdisabled">tabviewsearchdisabled</a>, <a href="/en-US/docs/Web/Reference/Events/tabviewframeinitialized">tabviewframeinitialized</a>, <a href="/en-US/docs/Web/Reference/Events/tabviewshown">tabviewshown</a>, <a href="/en-US/docs/Web/Reference/Events/tabviewhidden">tabviewhidden</a>, <a href="/en-US/docs/Web/Reference/Events/TabOpen">TabOpen</a>, <a href="/en-US/docs/Web/Reference/Events/TabClose">TabClose</a>, <a href="/en-US/docs/Web/Reference/Events/TabSelect">TabSelect</a>, <a href="/en-US/docs/Web/Reference/Events/TabShow">TabShow</a>, <a href="/en-US/docs/Web/Reference/Events/TabHide">TabHide</a>, <a href="/en-US/docs/Web/Reference/Events/TabPinned">TabPinned</a>, <a href="/en-US/docs/Web/Reference/Events/TabUnpinned">TabUnpinned</a>, <a href="/en-US/docs/Web/Reference/Events/SSTabClosing">SSTabClosing</a>, <a href="/en-US/docs/Web/Reference/Events/SSTabRestoring">SSTabRestoring</a>, <a href="/en-US/docs/Web/Reference/Events/SSTabRestored">SSTabRestored</a>, {{event("visibilitychange")}}</p> + +<h3 id="Text_events">Text events</h3> + +<p>{{event("compositionend")}}, {{event("compositionstart")}}, {{event("compositionupdate")}}, {{event("copy")}}, {{event("cut")}}, {{event("paste")}}, {{event("select")}}, <code>text</code></p> + +<h3 id="Touch_events">Touch events</h3> + +<p><a href="/en-US/docs/Web/Reference/Events/MozEdgeUIGesture">MozEdgeUIGesture</a>, <a href="/en-US/docs/Web/Reference/Events/MozMagnifyGesture">MozMagnifyGesture</a>, <a href="/en-US/docs/Web/Reference/Events/MozMagnifyGestureStart">MozMagnifyGestureStart</a>, <a href="/en-US/docs/Web/Reference/Events/MozMagnifyGestureUpdate">MozMagnifyGestureUpdate</a>, <a href="/en-US/docs/Web/Reference/Events/MozPressTapGesture">MozPressTapGesture</a>, <a href="/en-US/docs/Web/Reference/Events/MozRotateGesture">MozRotateGesture</a>, <a href="/en-US/docs/Web/Reference/Events/MozRotateGestureStart">MozRotateGestureStart</a>, <a href="/en-US/docs/Web/Reference/Events/MozRotateGestureUpdate">MozRotateGestureUpdate</a>, <a href="/en-US/docs/Web/Reference/Events/MozSwipeGesture">MozSwipeGesture</a>, <a href="/en-US/docs/Web/Reference/Events/MozTapGesture">MozTapGesture</a>, <a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchDown</a>, <a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchMove</a>, <a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchUp</a>, {{event("touchcancel")}}, {{event("touchend")}}, {{event("touchenter")}}, {{event("touchleave")}}, {{event("touchmove")}}, {{event("touchstart")}}</p> + +<h3 id="Update_events">Update events</h3> + +<p>{{event("checking")}}, {{event("downloading")}}, {{event("error")}}, {{event("noupdate")}}, {{event("obsolete")}}, {{event("updateready")}}</p> + +<h3 id="Value_change_events">Value change events</h3> + +<p>{{event("broadcast")}}, {{event("CheckboxStateChange")}}, {{event("hashchange")}}, {{event("input")}}, {{event("RadioStateChange")}}, {{event("readystatechange")}}, {{event("ValueChange")}}</p> + +<h3 id="View_events">View events</h3> + +<p><a href="/en-US/docs/Web/Reference/Events/fullscreen">fullscreen</a>, {{event("fullscreenchange")}}, {{event("fullscreenerror")}}, <a href="/en-US/docs/Web/Reference/Events/MozEnteredDomFullscreen">MozEnteredDomFullscreen</a>, {{event("MozScrolledAreaChanged")}}, {{event("resize")}}, {{event("scroll")}}, <a href="/en-US/docs/Web/Reference/Events/sizemodechange">sizemodechange</a></p> + +<h3 id="Websocket_events">Websocket events</h3> + +<p><code><a href="/en-US/docs/Web/Reference/Events/close_websocket">close</a></code>, {{event("error")}}, <code><a href="/en-US/docs/Web/Reference/Events/message_websocket">message</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/open_websocket">open</a></code></p> + +<h3 id="Window_events">Window events</h3> + +<p><a href="/en-US/docs/Web/Reference/Events/DOMWindowCreated">DOMWindowCreated</a>, <a href="/en-US/docs/Web/Reference/Events/DOMWindowClose">DOMWindowClose</a>, <a href="/en-US/docs/Web/Reference/Events/DOMTitleChanged">DOMTitleChanged</a>, <a href="/en-US/docs/Web/Reference/Events/MozBeforeResize">MozBeforeResize</a> {{obsolete_inline}}, <a href="/en-US/docs/Web/Reference/Events/SSWindowClosing">SSWindowClosing</a>, <a href="/en-US/docs/Web/Reference/Events/SSWindowStateReady">SSWindowStateReady</a>, <a href="/en-US/docs/Web/Reference/Events/SSWindowStateBusy">SSWindowStateBusy</a>, <a href="/en-US/docs/Web/Reference/Events/close_event">close</a></p> + +<h3 id="Uncategorized_events">Uncategorized events</h3> + +<p>{{event("beforeunload")}}, {{event("localized")}}, <code><a href="/en-US/docs/Web/Reference/Events/message_webworker">message</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/message_webmessaging">message</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/message_serversentevents">message</a></code>, <a href="/en-US/docs/Web/Reference/Events/MozAfterPaint">MozAfterPaint</a>, {{event("moztimechange")}}, <code><a href="/en-US/docs/Web/Reference/Events/open_serversentevents">open</a></code>, {{event("show")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("Event")}}</li> + <li><a href="/en-US/docs/Web/Guide/DOM/Events">Event developer guide</a></li> +</ul> diff --git a/files/id/web/guide/api/index.html b/files/id/web/guide/api/index.html new file mode 100644 index 0000000000..4e0e34c483 --- /dev/null +++ b/files/id/web/guide/api/index.html @@ -0,0 +1,26 @@ +--- +title: Guide to Web APIs +slug: Web/Guide/API +tags: + - API + - Guide + - Landing + - NeedsTranslation + - TopicStub + - Web +translation_of: Web/Guide/API +--- +<p>Here you'll find links to each of the guides introducing and explaining each of the APIs that make up the Web development architecture.</p> + +<h2 id="Web_APIs_from_A_to_Z">Web APIs from A to Z</h2> + +<p>{{ListGroups}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API">Web API interface reference</a> (an index of all of the interfaces comprising all of these APIs)</li> + <li><a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model</a> (DOM)</li> + <li><a href="/en-US/docs/Web/Events">Web API event reference</a></li> + <li><a href="/en-US/docs/Learn">Learning web development</a></li> +</ul> diff --git a/files/id/web/guide/api/webrtc/index.html b/files/id/web/guide/api/webrtc/index.html new file mode 100644 index 0000000000..93c1a489eb --- /dev/null +++ b/files/id/web/guide/api/webrtc/index.html @@ -0,0 +1,34 @@ +--- +title: WebRTC +slug: Web/Guide/API/WebRTC +translation_of: Web/API/WebRTC_API +--- +<p><strong>WebRTC</strong> (RTC mengacu pada <em>Real-Time Communications</em>) adalah sebuah teknologi yang memungkinkan pengiriman audio atau video serta berbagi data antar peramban web (<em>peer</em>). Sebagai sebuah standar, WebRTC menghadirkan fitur pada peramban web untuk berbagi data dan melakukan telekonferensi secara <em>peer-to-peer</em>, tanpa perlu memasang <em>plugins</em> atau aplikasi pihak ketiga.</p> + +<p>Komponen WebRTC dapat diakses melalui JavaScript API, di antaranya: Nework Stream API, yang merepresentasikan audio atau video dalam bentuk data <em>stream</em>; PeerConnection API, yang memungkinkan dua atau lebih pengguna untuk berkomunikasi langsung melalui peramban web; dan DataChannel API, yang memungkinkan bentuk komunikasi lainnya secara <em>real-time</em> untuk <em>gaming</em>, <em>text chat</em>, <em>file transfer</em>, dan lainnya.</p> + +<div class="note"> +<p><span style="color: #000000;"><strong>Catatan:</strong> Dokumentasi ini sedang dalam proses pemindahan ke <a href="/id/docs/Web/API/WebRTC_API">laman baru</a>.</span></p> +</div> + +<h2 id="Panduan">Panduan</h2> + +<dl> + <dt><a href="/en-US/docs/WebRTC/Peer-to-peer_communications_with_WebRTC" title="/en-US/docs/WebRTC/Peer-to-peer_communications_with_WebRTC">Komunikasi <em>peer-to-peer</em> pada WebRTC</a></dt> + <dd>Bagaimana cara melakukan komunikasi <em>peer-to-peer</em> menggunakan WebRTC API.</dd> + <dt><a href="/en-US/docs/Web/Guide/API/WebRTC/WebRTC_architecture" title="/en-US/docs/Web/Guide/API/WebRTC/WebRTC_architecture">Pengantar arsitektur WebRTC</a></dt> + <dd>WebRTC memiliki banyak bagian di dalamnya, dan itu sangat membingungkan. Artikel ini bertujuan untuk menjelaskan bagian-bagian tersebut, dan bagaimana semuanya bekerja.</dd> + <dt><a href="/en-US/docs/Web/Guide/API/WebRTC/WebRTC_basics" title="/en-US/docs/Web/Guide/API/WebRTC/WebRTC_basics">Dasar-dasar WebRTC</a></dt> + <dd>Setelah Anda memahami arsitektur WebRTC, Anda dapat melanjutkan ke artikel selanjutnya yang akan menjelaskan proses pengembangan aplikasi dasar RTC yang bekerja pada peramban web.</dd> +</dl> + +<h2 id="Referensi">Referensi</h2> + +<dl> + <dt><a href="/en-US/docs/Web/API/Navigator.getUserMedia">Navigator.getUserMedia</a></dt> + <dd>API yang berfungsi untuk menangkap media (audio atau video).</dd> + <dt><a href="/en-US/docs/Web/API/RTCPeerConnection"><span style="color: #0095dd;">RTCPeerConnection</span></a></dt> + <dd>Antarmuka yang berfungsi untuk menangani data <em>streaming</em> antar dua <em>peer</em>.</dd> + <dt><a href="/en-US/docs/Web/API/RTCDataChannel">RTCDataChannel</a></dt> + <dd>Antarmuka yang berfungsi untuk mengirimkan data antar <em>peer</em>.</dd> +</dl> diff --git a/files/id/web/guide/css/getting_started/index.html b/files/id/web/guide/css/getting_started/index.html new file mode 100644 index 0000000000..c37ce973fa --- /dev/null +++ b/files/id/web/guide/css/getting_started/index.html @@ -0,0 +1,32 @@ +--- +title: Getting started with CSS +slug: Web/Guide/CSS/Getting_started +translation_of: Learn/CSS/First_steps +--- +<p><span class="seoSummary">This tutorial introduces you to the basic features and language (the syntax) for <a href="/en-US/docs/Web/Guide/CSS" title="/en-US/docs/Web/Guide/CSS"><strong>Cascading Style Sheets</strong></a> (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. </span></p> +<p>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 <a href="/en-US/docs/Web/Guide/CSS" title="/en-US/docs/Web/Guide/CSS">lists</a> more advanced resources.</p> +<nav class="fancyTOC"> + <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/What_is_CSS" rel="next" title="Chapter 'What is CSS' of the CSS tutorial">What is CSS</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS" title="Chapter 'Why use CSS' of the CSS tutorial">Why use CSS</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/How_CSS_works" title="Chapter 'How CSS works' of the CSS tutorial">How CSS works</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance" title="Chapter 'Cascading and inheritance' of the CSS tutorial">Cascading and inheritance</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors" title="Chapter 'Selectors' of the CSS tutorial">Selectors</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS" title="Chapter 'Readable_CSS' of the CSS tutorial">Readable CSS</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles" title="Chapter 'Text_styles' of the CSS tutorial">Text styles</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Color" title="Chapter 'Color' of the CSS tutorial">Color</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Content" title="Chapter 'Content' of the CSS tutorial">Content</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Lists" title="Chapter 'Lists' of the CSS tutorial">Lists</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes" title="Chapter 'Boxes' of the CSS tutorial">Boxes</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Layout" title="Chapter 'Layout' of the CSS tutorial">Layout</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Tables" title="Chapter 'Tables' of the CSS tutorial">Tables</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Media" title="Chapter 'Media' of the CSS tutorial">Media</a></nav> +<h2 id="What_you_need_to_get_started">What you need to get started</h2> +<ul> + <li>A text editor</li> + <li>A modern browser</li> + <li>Some experience working with a text editor and browser</li> +</ul> +<p>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.</p> +<p><strong>Note:</strong> The tutorial covers how CSS works with color. It will be easier to complete these sections with a color display and normal color vision.</p> +<h2 id="How_to_use_this_tutorial">How to use this tutorial</h2> +<p>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.</p> +<h3 id="Part_I_The_Basics_of_CSS">Part I: The Basics of CSS</h3> +<p>On each page, use the <em>Information</em> section to understand how CSS works. Use the <em>Action</em> section to try using CSS on your own computer.</p> +<p>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.</p> +<p>To understand CSS in more depth, read the information that you find in boxes captioned <em>More details</em>. Use the links there to find reference information about CSS.</p> +<h3 id="Part_II_The_Scope_of_CSS">Part II: The Scope of CSS</h3> +<p>A second part of the tutorial provides examples, which show the scope of CSS with other web and Mozilla technologies.</p> +<ol> + <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/JavaScript" title="en/CSS/Getting_Started/JavaScript">JavaScript</a></li> + <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/SVG_and_CSS" title="en/CSS/Getting_Started/SVG_graphics">SVG graphics</a></li> + <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/XML_data" title="en/CSS/Getting_Started/XML_data">XML data</a></li> + <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/XBL_bindings" title="en/CSS/Getting_Started/XBL_bindings">XBL bindings</a></li> + <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/XUL_user_interfaces" title="en/CSS/Getting_Started/XUL_user_interfaces">XUL user interfaces</a></li> +</ol> diff --git a/files/id/web/guide/css/media_queries/index.html b/files/id/web/guide/css/media_queries/index.html new file mode 100644 index 0000000000..3fe883c5f6 --- /dev/null +++ b/files/id/web/guide/css/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 +--- +<p><span class="seoSummary">M<strong>edia query</strong> 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 <a href="/en-US/docs/CSS/CSS3" title="/en-US/docs/CSS/CSS3">CSS3</a>, memungkinkan tampilan konten disesuaikan dengan alat penampil tertentu tanpa harus mengubah konten itu sendiri.</span></p> + +<h2 id="Sintaks">Sintaks</h2> + +<p>Media query terdiri dari jenis media (<a class="internal" href="/en-US/docs/CSS/@media" title="/en-US/docs/CSS/@media">media type</a>) 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 <strong>dan</strong> semua ekspresi di dalam media query adalah benar.</p> + +<pre class="brush: html"><code class="brush: html"><!-- Media query CSS pada elemen link --> +</code><link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> + +<code class="brush: html"><!-- Media query CSS di dalam style sheet --> +<style> +@media (max-width: 600px) { + .facet_sidebar { + display: none; + } +} +</style></code></pre> + +<p>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 <code><link></code> <a href="http://scottjehl.github.com/CSS-Download-Tests/" title="http://scottjehl.github.com/CSS-Download-Tests/">masih akan diunduh</a> bahkan jika media query tersebut adalah salah (false) (namun tidak akan diterapkan).</p> + +<p>Kecuali jika Anda menggunakan operator <code>not</code> atau <code>only</code>, jenis media adalah opsional dan jenis <code>all</code><span style="line-height: 1.572;"> akan diterapkan</span><span style="font-family: courier new,andale mono,monospace; line-height: normal;">.</span></p> + +<h3 id="Operator_logika">Operator logika</h3> + +<p>Anda dapat merancang media query kompleks menggunakan operator logika, termasuk <code>not</code>, <code>and</code>, dan <code>only</code>. Operator <code>and</code> digunakan untuk menggabungkan banyak fitur media (<a href="#Media_features" title="#Media_features">media features</a>) ke dalam satu media query tunggal, setiap fitur terkait harus benar (true) agar query benar (true). Operator <code>not</code> digunakan untuk menegasikan keseluruhan media query. Operator <code>only</code> digunakan untuk menerapkan suatu style hanya jika keseluruhan query cocok, berguna untuk mencegah browser lama menerapkan style-style tertentu. Jika Anda menggunakan operator-operator <code>not</code> atau <code>only</code>, Anda <em>harus</em> menyebutkan jenis media secara eksplisit.</p> + +<p>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 <code>or</code>.</p> + +<h4 id="and">and</h4> + +<p>Kata kunci <code>and</code> 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 <code>all</code> secara implisit, dapat terlihat seperti ini:</p> + +<pre class="brush: css">@media (min-width: 700px) { ... }</pre> + +<p>Namun, jika, Anda menginginkan hal ini diterapkan hanya untuk tampilan lanskap, Anda dapat menggunakan operator <code>and</code> untuk menggabungkan fitur-fitur media tersebut.</p> + +<pre class="brush: css">@media (min-width: 700px) and (orientation: landscape) { ... }</pre> + +<p>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 <code>and</code>.</p> + +<pre class="brush: css">@media tv and (min-width: 700px) and (orientation: landscape) { ... }</pre> + +<p>Sekarang, media query di atas hanya akan diterapkan jika jenis media adalah TV, lebar viewport adalah 700px atau lebih, dan tampilan adalah lanskap.</p> + +<h4 id="daftar_terpisah_koma">daftar terpisah koma</h4> + +<p>Daftar terpisah koma adalah seperti operator logika <code>or</code> 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.</p> + +<p>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:</p> + +<pre class="brush: css">@media (min-width: 700px), handheld and (orientation: landscape) { ... }</pre> + +<p>Pada contoh di atas, jika saya menggunakan perangkat <code>screen</code> dengan lebar viewport 800px, pernyataan media akan benar (true) karena bagian pertama, yang diinterpetasikan sebagai <code>@media all and (min-width: 700px)</code> akan berlaku pada perangkat saya dan oleh karena itu benar (true), terlepas dari fakta bahwa perangkat <code>screen</code> saya akan gagal dalam pengecekan jenis media <code>handheld</code> di media query kedua. Demikian pula, jika saya menggunakan perangkat genggam <code>handheld</code> 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).</p> + +<h4 id="not">not</h4> + +<p>Kata kunci <code>not</code> berlaku pada keseluruhan media query dan memberikan nilai benar (true) jika media query akan sebaliknya memberikan nilai salah (false) (seperti fitur query <code>monochrome</code> pada warna tampilan atau lebar layar 600px dengan <code>min-width: 700px</code>). Sebuah <code>not</code> hanya akan menegasikan media query yang ditetapkan dan bukan setiap media query jika ada dalam daftar media query terpisah koma. Kata kunci <code>not</code> tidak dapat digunakan untuk menegasikan sebuah fitur query individual, hanya untuk media query secara keseluruhan. Sebagai contoh<span style="line-height: 1.572;">, </span><code style="font-size: 14px;">not</code><span style="line-height: 1.572;"> dievaluasi paling akhir dalam query berikut ini:</span></p> + +<pre class="brush: css" style="font-size: 14px;">@media not all and (monochrome) { ... } +</pre> + +<p>Ini berarti bahwa query tersebut dievaluasi seperti ini:</p> + +<pre class="brush: css" style="font-size: 14px;">@media not (all and (monochrome)) { ... } +</pre> + +<p>... bukan seperti ini:</p> + +<pre class="brush: css" style="font-size: 14px;">@media (not all) and (monochrome) { ... }</pre> + +<p>Sebagai contoh lain, lihat media query berikut ini:</p> + +<pre class="brush: css" style="font-size: 14px;">@media not screen and (color), print and (color) +</pre> + +<p>Yang dievaluasi seperti ini:</p> + +<pre class="brush: css" style="font-size: 14px;">@media (not (screen and (color))), print and (color)</pre> + +<h4 id="only">only</h4> + +<p><span style="line-height: 21px;">Kata kunci </span><code style="font-size: 14px;">only</code><span style="line-height: 21px;"> mencegah browser lama yang tidak mendukung media query dengan fitur media menerapkan style yang disediakan:</span></p> + +<pre class="brush: html"><link rel="stylesheet" media="only screen and (color)" href="example.css" /> +</pre> + +<h3 id="Pseudo-BNF_(untuk_Anda_yang_gemar_hal_seperti_ini)">Pseudo-BNF (untuk Anda yang gemar hal seperti ini)</h3> + +<pre>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</pre> + +<p>Media query adalah case insensitive. Media query yang melibatkan jenis media yang tidak diketahui selalu salah (false).</p> + +<div class="note"><strong>Catatan:</strong> Tanda kurung wajib digunakan di sekitar ekspresi; jika tidak digunakan akan mengakibatkan kesalahan.</div> + +<h2 id="Fitur_media">Fitur media</h2> + +<p>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.</p> + +<div class="note"><strong>Catatan:</strong> 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).</div> + +<h3 id="color">color</h3> + +<p><strong>Nilai:</strong> {{cssxref("<color>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Menerima prefiks min/max prefixes:</strong> ya</p> + +<p>Menunjukkan jumlah per komponen warna dari alat penampil. Jika alat tersebut bukan alat yang memiliki warna, nilai ini adalah nol.</p> + +<div class="note"><strong>Catatan:</strong> 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.</div> + +<h4 id="Contoh">Contoh</h4> + +<p>Untuk menerapkan style sheet pada semua alat berwarna:</p> + +<pre class="brush: css">@media all and (color) { ... } +</pre> + +<p>Untuk menerapkan style sheet pada alat yang memiliki paling sedikit 4 bit per komponen warna:</p> + +<pre class="brush: css">@media all and (min-color: 4) { ... } +</pre> + +<h3 id="color-index">color-index</h3> + +<p><strong>Nila:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Menerima prefiks min/max:</strong> ya</p> + +<p>Menunjukkan jumlah entri dalam tabel pencarian warna untuk alat penampil.</p> + +<h4 id="Contoh_2">Contoh</h4> + +<p>Untuk menunjukkan bahwa suatu style sheet harus diterapkan pada semua alat yang menggunakan warna terindeks, Anda dapat melakukan:</p> + +<pre class="brush: css">@media all and (color-index) { ... } +</pre> + +<p>Untuk menerapkan style sheet pada alat berwarna terindeks dengan paling sedikit 256 warna:</p> + +<pre class="brush: html"><link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" /> +</pre> + +<h3 id="aspect-ratio">aspect-ratio</h3> + +<p><strong>Nilai:</strong> {{cssxref("<ratio>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> + <strong>Menerima prefiks min/max:</strong> ya</p> + +<p>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).</p> + +<h4 id="Contoh_3">Contoh</h4> + +<p>Berikut ini memilih style sheet khusus untuk digunakan ketika daerah tampilan paling tidak selebar tingginya.</p> + +<pre class="brush: css">@media screen and (min-aspect-ratio: 1/1) { ... }</pre> + +<p>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.</p> + +<h3 id="device-aspect-ratio">device-aspect-ratio</h3> + +<p><strong>Nilai:</strong> {{cssxref("<ratio>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> + <strong>Menerima prefiks min/max:</strong> ya</p> + +<p>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).</p> + +<h4 id="Contoh_4">Contoh</h4> + +<p>Berikut ini memilih style sheet khusus yang digunakan untuk tampilan layar lebar.</p> + +<pre class="brush: css">@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }</pre> + +<p>Ini memilih style ketika rasio aspek adalah 16:9 atau 16:10.</p> + +<h3 id="device-height">device-height</h3> + +<p><strong>Nilai:</strong> {{cssxref("<length>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> + <strong>Menerima prefiks min/max:</strong> ya</p> + +<p>Menggambarkan tinggi alat penampil (berarti keseluruhan layar atau halaman, bukan hanya area render, seperti jendela dokumen).</p> + +<h4 id="Contoh_5">Contoh</h4> + +<p>Untuk menerapkan style sheet pada sebuah dokument ketika ditampilkan pada layar yang memiliki panjang kurang dari 800 piksel, Anda dapat menggunakan ini:</p> + +<pre class="brush: html"><link rel="stylesheet" media="screen and (max-device-height: 799px)" /> +</pre> + +<h3 id="device-width">device-width</h3> + +<p><strong>Nilai:</strong> {{cssxref("<length>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> + <strong>Menerima prefiks min/max:</strong> ya</p> + +<p>Menggambarkan lebar alat penampil (berarti keseluruhan layar atau halaman, bukan hanya area render, seperti jendela dokumen).</p> + +<h4 id="Contoh_6">Contoh</h4> + +<p>Untuk menerapkan style sheet pada sebuah dokumen ketika ditampilkan pada layar yang memiliki lebar kurang dari 800 piksel wide, Anda dapat menggunakan ini:</p> + +<pre class="brush: html" style="font-size: 14px;"><link rel="stylesheet" media="screen and (max-device-width: 799px)" /></pre> + +<h3 id="grid">grid</h3> + +<p><strong>Nilai:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> all<br> + <strong>Menerima prefiks min/max:</strong> tidak</p> + +<p>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.</p> + +<h4 id="Contoh_7">Contoh</h4> + +<p>Untuk menerapkan suatu style pada alat genggam dengan layar selebar 15-karakter atau kurang:</p> + +<pre class="brush: css">@media handheld and (grid) and (max-width: 15em) { ... } +</pre> + +<div class="note"><strong>Catatan:</strong> 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.</div> + +<h3 id="height">height</h3> + +<p><strong>Nilai:</strong> {{cssxref("<length>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> + <strong>Menerima prefiks min/max:</strong> ya</p> + +<p>Fitur media <code>height</code> (tinggi) menggambarkan tinggi permukaan rendering alat penampil (seperti tinggi viewport atau kotak halaman pada sebuah printer).</p> + +<div class="note"><strong>Catatan:</strong> Ketika user mengubah ukuran window, Firefox mengganti style sheets dengan yang paling sesuai berdasarkan media query menggunakan fitur media <code>width</code> dan <code>height</code>.</div> + +<h3 id="monochrome">monochrome</h3> + +<p><strong>Nilai:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Menerima prefiks min/max:</strong> ya</p> + +<p>Menunjukkan jumlah bit per piksel pada alat monokrom (keabuan). Jika alat tersebut bukan monokrom, nilai alat tersebut adalah 0.</p> + +<h4 id="Contoh_8">Contoh</h4> + +<p>Untuk menerapkan style sheet pada semua alat monokrom:</p> + +<pre class="brush: css">@media all and (monochrome) { ... } +</pre> + +<p>Untuk menerapkan style sheet pada alat monokrom dengan paling sedikit 8 bit per piksel:</p> + +<pre class="brush: css">@media all and (min-monochrome: 8) { ... } +</pre> + +<h3 id="orientation">orientation</h3> + +<p><strong>Nilai:</strong> <code>landscape</code> | <code>portrait</code><br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Menerima prefiks min/max:</strong> tidak</p> + +<p>Menunjukkan apakah viewport dalam mode lanskap (tampilan lebih lebar daripada tingginya) atau potret (tampilan lebih tinggi daripada lebarnya).</p> + +<h4 id="Contoh_9">Contoh</h4> + +<p>Untuk menerapkan style sheet hanya pada orientasi potret:</p> + +<pre class="brush: css">@media all and (orientation: portrait) { ... }</pre> + +<h3 id="resolution">resolution</h3> + +<p><strong>Nilai:</strong> {{cssxref("<resolution>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Bitmap", "bitmap")}}<br> + <strong>Menerima prefiks min/max:</strong> ya</p> + +<p>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).</p> + +<h4 id="Contoh_10">Contoh</h4> + +<p>Untuk menerapkan style sheet pada alat dengan resolusi paling sedikit 300 dpi:</p> + +<pre class="brush: css">@media print and (min-resolution: 300dpi) { ... } +</pre> + +<p>Untuk mengganti sintaks lama <span style="font-family: courier new,andale mono,monospace; line-height: normal;">(min-device-pixel-ratio: 2)</span>:</p> + +<pre class="brush: css">@media screen and (min-resolution: 2dppx) { ... }</pre> + +<h3 id="scan">scan</h3> + +<p><strong>Nilai:</strong> <code>progressive</code> | <code>interlace</code><br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/TV")}}<br> + <strong>Menerima prefiks min/max:</strong> tidak</p> + +<p>Menggambarkan proses pemindaian alat penampil televisi.</p> + +<h4 id="Contoh_11">Contoh</h4> + +<p>Untuk menerapkan style sheet hanya pada televisi pemindai progresif:</p> + +<pre class="brush: css">@media tv and (scan: progressive) { ... } +</pre> + +<h3 id="width">width</h3> + +<p><strong>Nilai:</strong> {{cssxref("<length>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> + <strong>Menerima prefiks min/max:</strong> ya</p> + +<p>Fitur media <code>width</code> menggambarkan lebar permukaan rendering alat penampil (seperti lebar jendela dokumen, atau lebar kotak halaman sebuah printer).</p> + +<div class="note"><strong>Catatan:</strong> Ketika user mengubah ukuran jendela, Firefox mengganti style sheets yang sesuai berdasarkan media query menggunakan fitur media <code>width</code> dan <code>height</code>.</div> + +<h4 id="Contoh_12">Contoh</h4> + +<p>Jika Anda ingin menentukan sebuah style sheet untuk perangkat genggam, atau perangkat layar dengan lebar lebih besar dari 20em, Anda dapat menggunakan query ini:</p> + +<pre class="brush: css">@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... } +</pre> + +<p>Query Media ini menentukan style sheet yang berlaku untuk media cetak lebih lebar dari 8,5 inci:</p> + +<pre class="brush: html"><link rel="stylesheet" media="print and (min-width: 8.5in)" + href="http://foo.com/mystyle.css" /> +</pre> + +<p>Query ini menentukan style sheet yang digunakan saat lebar viewport adalah antara 500 dan 800 pixel:</p> + +<pre class="brush: css">@media screen and (min-width: 500px) and (max-width: 800px) { ... } +</pre> + +<h2 id="Fitur_Media_Spesifik_Mozilla">Fitur Media Spesifik Mozilla</h2> + +<p>Mozilla menawarkan beberapa fitur media spesifik Gecko. Beberapa di antaranya mungkin diusulkan sebagai fitur media resmi.</p> + +<p>{{ h3_gecko_minversion("-moz-images-in-menus", "1.9.2") }}</p> + +<p><strong>Nilai:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Meneriman prefiks min/max:</strong> tidak</p> + +<p>Jika perangkat memungkinkan gambar untuk muncul dalam menu, ini adalah 1; jika tidak, nilainya adalah 0. Ini berhubungan dengan <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a> CSS {{ cssxref(":-moz-system-metric(images-in-menus)") }}.</p> + +<p>{{ h3_gecko_minversion("-moz-mac-graphite-theme", "1.9.2") }}</p> + +<p><strong>Nilai:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Menerima prefiks min/max:</strong> no</p> + +<p>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.</p> + +<p>Ini berkaitan dengan <a href="/en-US/docs/CSS/Pseudo-classes" style="line-height: 1.5;" title="Pseudo-classes">pseudo-class</a><span style="line-height: 1.5;"> CSS </span><span style="line-height: 1.5;">{{ cssxref(":-moz-system-metric(mac-graphite-theme)") }}</span><span style="line-height: 1.5;">.</span></p> + +<p>{{ h3_gecko_minversion("-moz-maemo-classic", "1.9.2") }}</p> + +<p><strong>Nilai:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Menerima prefiks min/max:</strong> tidak</p> + +<p>Jika user menggunakan Maemo dengan tema asli, ini adalah 1; jika menggunakan tema Fremantle yang lebih baru, ini adalah 0.</p> + +<p>Ini berkaitan dengan <a href="/en-US/docs/CSS/Pseudo-classes" style="line-height: 1.5;" title="Pseudo-classes">pseudo-class</a><span style="line-height: 1.5;"> CSS </span><span style="line-height: 1.5;">{{ cssxref(":-moz-system-metric(maemo-classic)") }}</span><span style="line-height: 1.5;">.</span></p> + +<p>{{ h3_gecko_minversion("-moz-device-pixel-ratio", "2.0") }} {{ deprecated_inline("gecko&16") }}</p> + +<p><strong>Nilai:</strong> {{cssxref("<number>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Menerima prefiks min/max:</strong> ya</p> + +<p>Memberikan jumlah piksel perangkat per piksel CSS.</p> + +<div class="geckoVersionNote"> +<p><strong>Jangan gunakan fitur ini. </strong></p> + +<p>Tapi gunakanlah fitur <code>resolution</code> dengan <span style="line-height: 1.5;">unit </span><code style="font-style: normal; line-height: 1.5;">dppx</code><span style="line-height: 1.5;">.</span></p> + +<p><br> + <code>-moz-device-pixel-ratio</code> mungkin digunakan sebagai kompatibilitas dengan Firefox lebih tua daripada 16 dan <code>-webkit-device-pixel-ratio</code> dengan browser-browser berbasis <span style="line-height: 1.5;">WebKit</span><span style="line-height: 1.5;"> yang tidak mendukung </span><code style="font-style: normal; line-height: 1.5;">dppx</code><span style="line-height: 1.5;">.</span></p> + +<p>Contoh:</p> + +<pre>@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 <span style="font-size: 1rem;">dppx </span><span style="font-size: 1rem;">*/ </span></pre> + +<p>Lihat <a href="http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/" title="http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/">artikel CSSWG</a> ini untuk praktek kompatibilitas yang baik terkait <code>resolution</code> dan <code>dppx</code>.</p> +</div> + +<div class="note"><strong>Catatan</strong>: Fitur media ini juga diimplementasikan oleh Webkit sebagai <span style="font-family: courier new;">-webkit-device-pixel-ratio</span>. Prefiks min dan max seperti diimplementasikan oleh Gecko dinamakan <span style="font-family: courier new;">min--moz-device-pixel-ratio</span> dan <span style="font-family: courier new;">max--moz-device-pixel-ratio</span>; tetapi prefiks yang sama seperti yang diimplementasikan oleh Webkit dinamakan <span style="font-family: courier new;">-webkit-min-device-pixel-ratio</span> dan <span style="font-family: courier new;">-webkit-max-device-pixel-ratio</span>.</div> + +<p>{{ h3_gecko_minversion("-moz-os-version", "25.0") }}</p> + +<p><strong>Nilai:</strong> <code>windows-xp</code> | <code>windows-vista</code> | <code>windows-win7</code> | <code>windows-win8</code><br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Menerima prefiks min/max:</strong> tidak</p> + +<p>Menunjukkan versi sistem operasi mana yang sedang digunakan saat ini. Saat ini hanya diimplementasikan pada Windows. Nilai-nilai yang mungkin adalah:</p> + +<ul> + <li><code>windows-xp</code></li> + <li><code>windows-vista</code></li> + <li><code>windows-win7</code></li> + <li><code>windows-win8</code></li> +</ul> + +<p>Ini disediakan untuk aplikasi skins dan kode chrome lainnya agar dapat beradaptasi untuk bekerja dengan baik dengan versi sistem operasi saat ini.</p> + +<p>{{ h3_gecko_minversion("-moz-scrollbar-end-backward", "1.9.2") }}</p> + +<p><strong>Nilai:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Menerima prefiks min/max:</strong> no</p> + +<p>Jika user interface perangkat menampilkan tombol panah kembali di akhir scrollbar, ini adalah 1. Jika tidak, bernilai 0.</p> + +<p>Ini berkaitan dengan <a href="/en-US/docs/CSS/Pseudo-classes" style="line-height: 1.5;" title="Pseudo-classes">pseudo-class</a><span style="line-height: 1.5;"> CSS </span><span style="line-height: 1.5;">{{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }}.</span></p> + +<p>{{ h3_gecko_minversion("-moz-scrollbar-end-forward", "1.9.2") }}</p> + +<p><strong>Nilai:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Menerima prefiks min/max:</strong> tidak</p> + +<p>If the device's user interface displays a forward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-scrollbar-start-backward", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the device's user interface displays a backward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-scrollbar-start-forward", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the device's user interface displays a forward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-scrollbar-thumb-proportional", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>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.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-touch-enabled", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the device supports touch events (for a touch screen), this is 1. Otherwise it's 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(touch-enabled)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<h4 id="Example">Example</h4> + +<p>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.</p> + +<p>{{ h3_gecko_minversion("-moz-windows-classic", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the user is using Windows unthemed (in classic mode instead of using uxtheme), this is 1; otherwise it's 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(windows-classic)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-windows-compositor", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the user is using Windows with the DWM compositor, this is 1; otherwise it's 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(windows-compositor)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-windows-default-theme", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>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.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(windows-default-theme)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-windows-glass", "21.0") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>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.</p> + +<p>{{ h3_gecko_minversion("-moz-windows-theme", "2.0") }}</p> + +<p><strong>Value:</strong> <code>aero</code> | <code>luna-blue</code> | <code>luna-olive</code> | <code>luna-silver</code> | <code>royale</code> | <code>generic</code> | <code>zune</code><br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>Indicates which Windows theme is currently being used. Only available on Windows. Possible values are:</p> + +<ul> + <li><code>aero</code></li> + <li><code>luna-blue</code></li> + <li><code>luna-olive</code></li> + <li><code>luna-silver</code></li> + <li><code>royale</code></li> + <li><code>generic</code></li> + <li><code>zune</code></li> +</ul> + +<p>This is provided for application skins and other chrome code to be able to adapt to work well with the current Windows theme.</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatChrome("21") }}</td> + <td>{{ CompatGeckoDesktop("1.9.1") }}</td> + <td>{{ CompatIE("9.0") }}</td> + <td>{{ CompatOpera("9") }}</td> + <td>{{ CompatSafari("4") }}</td> + </tr> + <tr> + <td>grid</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }} (<code>grid</code> media type is not supported)</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>resolution</td> + <td>{{ CompatChrome("29") }}</td> + <td>{{ CompatGeckoDesktop("1.9.1") }} supports {{cssxref("<integer>")}} values;<br> + {{ CompatGeckoDesktop("8.0") }} supports {{cssxref("<number>")}} values, as per the spec.</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>scan</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }} (<code>tv</code> media type is not supported)</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/css3-mediaqueries/" title="http://www.w3.org/TR/css3-mediaqueries/">CSS 3 media query specification</a></li> + <li><a class="internal" href="/en-US/docs/CSS/@media" title="En/CSS/@media">Media types</a></li> + <li><a href="/en-US/docs/CSS/Using_media_queries_from_code" title="en/CSS/Using media queries from code">Using media queries from code</a></li> + <li><a href="http://i-skool.co.uk/mobile-development/web-design-for-mobiles-and-tablets-viewport-sizes/">List of mobile and tablet viewport sizes with pixel ratios and physical sizes</a></li> + <li><a href="http://davidwalsh.name/animate-media-queries">CSS Animations Between Media Queries</a> by David Walsh</li> +</ul> diff --git a/files/id/web/guide/grafis/index.html b/files/id/web/guide/grafis/index.html new file mode 100644 index 0000000000..43fb9b5954 --- /dev/null +++ b/files/id/web/guide/grafis/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 +--- +<p><span class="seoSummary">Situs web moderen dan aplikasi sering membutuhkan tampilan grafis.</span> Gambar statis dapat dengan mudah ditamilkan dengan menggunakan elemen <code>{{HTMLElement("img")}}</code> , atau mengatur tampilan background dari elemen HTML dengan menggunakan properti css<code> {{cssxref("background-image")}}</code>. anda sering menginginkan tampilan grafis melayang, atau memanipulasi gambar dari gambar nyatanya. <span class="seoSummary">Artikel ini memberikan wawasan tentang bagaimana anda dapat melakukannya</span></p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Grafik_2D">Grafik 2D</h2> + +<dl> + <dt><a href="/en-US/docs/HTML/Canvas">Canvas</a></dt> + <dd>Elemen <code>{{HTMLElement("canvas")}}</code> menyediakan API untuk menggambar grafik 2D menggunakan javascript.</dd> + <dt><a href="/en-US/docs/Web/SVG">SVG</a></dt> + <dd><strong>Scalable Vector Graphics</strong> (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.</dd> +</dl> + +<p><span class="alllinks"><a href="/en-US/docs/tag/Graphics">Lihat Semua...</a></span> </p> +</div> + +<div class="section"> +<h2 class="Documentation" id="Grafik_3D">Grafik 3D</h2> + +<dl> + <dt><a href="/en-US/docs/Web/WebGL">WebGL</a></dt> + <dd>Sebuah panduan untuk memulai menggunakan WebGL, API grafis 3D untuk Web. Teknologi ini memungkinkan anda menggunakan standar OpenGL ES dalam konten Web.</dd> +</dl> + +<h2 id="Video">Video</h2> + +<dl> + <dt><a href="/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video">Menggunakan HTML5 audio dan video</a></dt> + <dd>Embedding video dan / atau audio di halaman web dan mengendalikan pemutaran nya.</dd> + <dt><a href="/en-US/docs/WebRTC">WebRTC</a></dt> + <dd>RTC pada WebRTC artinya Real-Time Communications, teknologi yang memungkinkan streaming audio/video serta berbagi data antar browser pengguna (peers).</dd> +</dl> +</div> +</div> diff --git a/files/id/web/guide/html/forms/index.html b/files/id/web/guide/html/forms/index.html new file mode 100644 index 0000000000..9daf1d6077 --- /dev/null +++ b/files/id/web/guide/html/forms/index.html @@ -0,0 +1,340 @@ +--- +title: HTML forms guide +slug: Web/Guide/HTML/Forms +translation_of: Learn/Forms +--- +<p><span class="seoSummary">Panduan ini adalah seri dari artikel-artikel yang akan membantu anda menguasai form HTML.</span> 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!</p> +<h2 id="Articles">Articles</h2> +<ol> + <li><a href="/en-US/docs/HTML/Forms/My_first_HTML_form" title="/en-US/docs/HTML/Forms/My_first_HTML_form">Form HTML pertama saya</a></li> + <li><span><a href="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form" title="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form">Cara membuat struktur form HTML</a></span></li> + <li><a href="/en-US/docs/HTML/Forms/The_native_form_widgets" title="/en-US/docs/HTML/Forms/The_native_form_widgets"><span>Form Widget native</span></a></li> + <li>CSS dengan form HTML + <ol> + <li><a href="/en-US/docs/HTML/Forms/Styling_HTML_forms" title="/en-US/docs/HTML/Forms/Styling_HTML_forms"><span>Pemberian style form HTML</span></a></li> + <li><a href="/en-US/docs/Advanced_styling_for_HTML_forms" title="/en-US/docs/Advanced_styling_for_HTML_forms">Pemberian style form HTML Lanjut</a></li> + <li><a href="/en-US/docs/Property_compatibility_table_for_form_widgets" title="/en-US/docs/Property_compatibility_table_for_form_widgets">Tabel kompatibilitas property widget form</a></li> + </ol> + </li> + <li><span><a href="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data">Mengirim dan menerima data form</a></span></li> + <li><a href="/en-US/docs/HTML/Forms/Data_form_validation" title="/en-US/docs/HTML/Forms/Data_form_validation">Validasi data form</a></li> + <li><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">Bagaimana cara membuat gidget form buatan</a></li> + <li><a href="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript" title="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript">Mengirimkan form melalui JavaScript </a> + <ol> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects">Menggunakan object FormData</a></li> + </ol> + </li> + <li><a href="/en-US/docs/HTML/Forms/HTML_forms_in_legacy_browsers" title="/en-US/docs/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li> +</ol> +<h2 id="Dokumentasi_HTML">Dokumentasi HTML</h2> +<h3 id="Elemen-elemen_HTML">Elemen-elemen HTML</h3> +<table> + <thead> + <tr> + <th scope="col">Element</th> + <th scope="col">Related DOM interface</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td style="vertical-align: top;">{{HTMLElement("button")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLButtonElement")}}</td> + <td style="vertical-align: top;">Elemen <code>button</code> menampilkan tombol yang dapat diklik.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("datalist")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLDataListElement")}}</td> + <td style="vertical-align: top;">Elemen <span style="font-family: Courier New;">datalist</span> menampung kumpulan dari elemen {{ HTMLElement("option") }} yang merepresentasikan pilihan-pilihan yang mungkin untuk nilai dari elemen form lainnya.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("fieldset")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLFieldSetElement")}}</td> + <td style="vertical-align: top;"><span style="font-family: Courier New;">fieldset</span> digunakan untuk menggabungkan beberapa elemen form dalam sebuah form.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("form")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLFormElement")}}</td> + <td style="vertical-align: top;">Elemen <code>form</code> merepresentasikan bagian dari dokumen yang memiliki elemen interaktif yang memungkinkan pengguna mengirimkan informasi ke web server.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("input")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLInputElement")}}</td> + <td style="vertical-align: top;">Elemen <code>input</code> digunakan untuk membuat kontrol interaktif untuk form.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("keygen")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLKeygenElement")}}</td> + <td style="vertical-align: top;">Elemen <code>keygen</code> memfasilitasi pembuatan key secara otomatis dan pengiriman public ke sebagai bagian dari form HTML.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("label")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLLabelElement")}}</td> + <td style="vertical-align: top;">Elemen <code>label</code> merepresentasikan judul dari sebuah item dalam antar muka user</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("legend")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLLegendElement")}}</td> + <td style="vertical-align: top;">Elemen <code>legend</code> merepresentasikan judul utama dari konten parentnya {{ HTMLElement("fieldset") }}.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("meter")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLMeterElement")}}</td> + <td style="vertical-align: top;">Elemen <code>meter</code> merepresentasikan nilai skalar dalam jangkauan yang diketahui atau nilai fraksi.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("optgroup")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLOptGroupElement")}}</td> + <td style="vertical-align: top;">Elemen <code>optgroup </code>membuat grup dari pilihan-pilihan dalam sebuah elemen {{ HTMLElement("select") }}.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("option")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLOptionElement")}}</td> + <td style="vertical-align: top;">Elemen HTML<em> </em><code>option<em> </em></code>digunakan untuk membuat kontrol yang merepresentasikan item yang terdapat dalam sebuah elemen {{ HTMLElement("select") }}, {{ HTMLElement("optgroup") }} atau {{ HTMLElement("datalist") }}.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("output")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLOutputElement")}}</td> + <td style="vertical-align: top;">Element <code>output</code> merepresentasikan hasil dari sebuah kalkulasi.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("progress")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLProgressElement")}}</td> + <td style="vertical-align: top;">Element <code>progress</code> digunakan untuk menampilkan progress dari sebuah tugas.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("select")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLSelectElement")}}</td> + <td style="vertical-align: top;">Elemen <code>select</code> merepresentasikan kontrol yang menyajikan pilihan-pilihan menu.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("textarea")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLTextAreaElement")}}</td> + <td style="vertical-align: top;">Elemen <code>textarea</code> merepresentasikan sebuah kontrol edit dengan multi baris.</td> + </tr> + </tbody> +</table> +<div class="note"> + <p><strong>Note:</strong> All form elements, as all HTML elements, support the {{domxref("HTMLElement")}} DOM interface.</p> +</div> +<h3 id="HTML_Attributes">HTML Attributes</h3> +<table class="standard-table"> + <thead> + <tr> + <th>Attribute Name</th> + <th>Elements</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>accept</td> + <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td> + <td>List of types the server accepts, typically a file type.</td> + </tr> + <tr> + <td style="white-space: nowrap;">accept-charset</td> + <td>{{ HTMLElement("form") }}</td> + <td>List of supported charsets.</td> + </tr> + <tr> + <td>action</td> + <td>{{ HTMLElement("form") }}</td> + <td>The URI of a program that processes the information submitted via the form.</td> + </tr> + <tr> + <td>autocomplete</td> + <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td> + <td>Indicates whether controls in this form can by default have their values automatically completed by the browser.</td> + </tr> + <tr> + <td>autofocus</td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>The element should be automatically focused after the page loaded.</td> + </tr> + </tbody> + <tbody> + <tr> + <td>challenge</td> + <td>{{ HTMLElement("keygen") }}</td> + <td>A challenge string that is submitted along with the public key.</td> + </tr> + <tr> + <td>checked</td> + <td>{{ HTMLElement("input") }}</td> + <td>Indicates whether the element should be checked on page load.</td> + </tr> + <tr> + <td>cols</td> + <td>{{ HTMLElement("textarea") }}</td> + <td>Defines the number of columns in a textarea.</td> + </tr> + <tr> + <td>data</td> + <td>{{ HTMLElement("object") }}</td> + <td>Specifies the URL of the resource.</td> + </tr> + <tr> + <td>dirname</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td> </td> + </tr> + <tr> + <td>disabled</td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>Indicates whether the user can interact with the element.</td> + </tr> + <tr> + <td>enctype</td> + <td>{{ HTMLElement("form") }}</td> + <td>Defines the content type of the form date when the <code>method</code> is POST.</td> + </tr> + <tr> + <td>for</td> + <td>{{ HTMLElement("label") }}, {{ HTMLElement("output") }}</td> + <td>Describes elements which belongs to this one.</td> + </tr> + <tr> + <td>form</td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>Indicates the form that is the owner of the element.</td> + </tr> + </tbody> + <tbody> + <tr> + <td>high</td> + <td>{{ HTMLElement("meter") }}</td> + <td>Indicates the lower bound of the upper range.</td> + </tr> + <tr> + <td>keytype</td> + <td>{{ HTMLElement("keygen") }}</td> + <td>Specifies the type of key generated.</td> + </tr> + <tr> + <td>list</td> + <td>{{ HTMLElement("input") }}</td> + <td>Identifies a list of pre-defined options to suggest to the user.</td> + </tr> + <tr> + <td>low</td> + <td>{{ HTMLElement("meter") }}</td> + <td>Indicates the upper bound of the lower range.</td> + </tr> + <tr> + <td>max</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td> + <td>Indicates the maximum value allowed.</td> + </tr> + <tr> + <td>maxlength</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>Defines the maximum number of characters allowed in the element.</td> + </tr> + <tr> + <td>method</td> + <td>{{ HTMLElement("form") }}</td> + <td>Defines which HTTP method to use when submitting the form. Can be GET (default) or POST.</td> + </tr> + <tr> + <td>min</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}</td> + <td>Indicates the minimum value allowed.</td> + </tr> + <tr> + <td>multiple</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td> + <td>Indicates whether multiple values can be entered in an input of the type <code>email</code> or <code>file</code>.</td> + </tr> + <tr> + <td>name</td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>Name of the element. For example used by the server to identify the fields in form submits.</td> + </tr> + <tr> + <td>novalidate</td> + <td>{{ HTMLElement("form") }}</td> + <td>This attribute indicates that the form shouldn't be validated when submitted.</td> + </tr> + <tr> + <td>optimum</td> + <td>{{ HTMLElement("meter") }}</td> + <td>Indicates the optimal numeric value.</td> + </tr> + <tr> + <td>pattern</td> + <td>{{ HTMLElement("input") }}</td> + <td>Defines a regular expression which the element's value will be validated against.</td> + </tr> + <tr> + <td>placeholder</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>Provides a hint to the user of what can be entered in the field.</td> + </tr> + <tr> + <td>readonly</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>Indicates whether the element can be edited.</td> + </tr> + <tr> + <td>required</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>Indicates whether this element is required to fill out or not.</td> + </tr> + <tr> + <td>rows</td> + <td>{{ HTMLElement("textarea") }}</td> + <td>Defines the number of rows in a textarea.</td> + </tr> + <tr> + <td>selected</td> + <td>{{ HTMLElement("option") }}</td> + <td>Defines a value which will be selected on page load.</td> + </tr> + <tr> + <td>size</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td> + <td>Defines the width of the element (in pixels). If the element's <code>type</code> attribute is <code>text</code> or <code>password</code> then it's the number of characters.</td> + </tr> + <tr> + <td>src</td> + <td>{{ HTMLElement("input") }}</td> + <td>The URL of the embeddable content.</td> + </tr> + <tr> + <td>step</td> + <td>{{ HTMLElement("input") }}</td> + <td> </td> + </tr> + <tr> + <td>target</td> + <td>{{ HTMLElement("form") }}</td> + <td> </td> + </tr> + <tr> + <td>type</td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}</td> + <td>Defines the type of the element.</td> + </tr> + <tr> + <td>usemap</td> + <td>{{ HTMLElement("input") }}</td> + <td> </td> + </tr> + <tr> + <td>value</td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td> + <td>Defines a default value which will be displayed in the element on page load.</td> + </tr> + <tr> + <td>wrap</td> + <td>{{ HTMLElement("textarea") }}</td> + <td>Indicates whether the text should be wrapped.</td> + </tr> + </tbody> +</table> +<h3 id="Normative_reference">Normative reference</h3> +<ul> + <li><a href="http://www.w3.org/TR/html5/forms.html" lang="en" rel="external" title="http://www.w3.org/TR/html5/forms.html">W3C HTML5 Specification (Forms)</a></li> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#forms" rel="external" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#forms">WHATWG HTML Living Standard (Forms)</a></li> +</ul> diff --git a/files/id/web/guide/html/html5/index.html b/files/id/web/guide/html/html5/index.html new file mode 100644 index 0000000000..48e2349af7 --- /dev/null +++ b/files/id/web/guide/html/html5/index.html @@ -0,0 +1,179 @@ +--- +title: HTML5 +slug: Web/Guide/HTML/HTML5 +tags: + - HTML + - HTML5 + - NeedsTranslation + - References + - TopicStub + - Web Development +translation_of: Web/Guide/HTML/HTML5 +--- +<p><span class="seoSummary"><strong>HTML5</strong> adalah evolusi terbaru dari standard yang mendefinisikan <a href="/en-US/docs/HTML" title="HTML">HTML</a>. </span>Istilah ini merepresentasikan dua konsep yang berbeda:</p> + +<ul> + <li><span class="seoSummary">Ini adalah versi baru dari <em>bahasa</em> HTML, dengan <em>element</em>, <em>attribute</em>, dan <em>behaviour </em>baru,</span></li> + <li><span class="seoSummary">dan sebuah <strong>teknologi</strong> dengan kelengkapan yang lebih besar yang memungkinkan situs Web dan aplikasi yang lebih beragam dan lebih berguna. Kelengkapan ini kadang-kadang disebut <em>HTML5 and friends</em> dan sering disingkat menjadi <em>HTML5</em> saja</span>.</li> +</ul> + +<p>Dirancang untuk dapat digunakan oleh semua pengembang<em> </em>Web Terbuka, Berikut ini adalah tautan halaman referensi ke beberapa <em>resource</em> tentang teknologi HTML5, diklasifikasikan ke dalam beberapa kelompok berdasarkan fungsinya masing-masing.</p> + +<ul> + <li><em>Semantik</em>: memungkinkan Anda untuk mendeskripsikan konten dengan lebih presisi.</li> + <li><em>Konektivitas</em>: memungkinkan Anda untuk berkomunikasi dengan server dengan cara baru dan inovatif.</li> + <li><em>Offline & Storage</em>: memungkinkan halaman <em>web</em> untuk menyimpan data di sisi <em>client</em> secara local dan beroperasi secara <em>offline</em> dengan lebih efisien.</li> + <li><em>Multimedia</em>: membuat <em>video</em> dan <em>audio</em> terbaik di Web Terbuka.</li> + <li><em>Grafik 2D/3D & Efek</em>: memungkinkan lebih banyak pilihan presentasi yang lebih beragam.</li> + <li><em>Performa & Integrasi</em>: memberikan optimalisasi pemakaian yang lebih cepat dan lebih baik dari perangkat keras komputer.</li> + <li><em>Akses Perangkat</em>: memungkinkan untuk menggunakan berbagai perangkat <em>input</em> dan <em>output</em>.</li> + <li><em>Styling</em>: memberi keleluasaan kepada para penulis untuk menulis tema yang lebih canggih.</li> +</ul> + +<div class="cleared row topicpage-table"> +<div class="section"> +<h2 id="Semantik" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Semantik</h2> + +<dl> + <dt><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document"><em>"Sections" </em>dan <em>"outlines"</em> pada HTML5</a></dt> + <dd>Sebuah tampilan pada elemen baru yaitu <em>outline</em> dan<em> section</em> pada HTML5: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}} and {{HTMLElement("aside")}}.</dd> + <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Menggunakan fungsi "<em>audio</em>" dan "<em>video</em>" pada HTML5</a></dt> + <dd>Elemen {{HTMLElement("audio")}} dan {{HTMLElement("video")}} ditanamkan sehingga kita dapat memanipulasi sebuah konten multimedia.</dd> + <dt><a href="/en-US/docs/HTML/Forms_in_HTML" title="Forms in HTML5"><em>"Forms"</em> pada HTML5</a></dt> + <dd>Perbaikan pada form di HTML5: the constraint validation API, beberapa attribute baru, nilai baru untuk {{HTMLElement("input")}} atribut {{htmlattrxref("type", "input")}} dan elemen baru yaitu {{HTMLElement("output")}}.</dd> + <dt>Elemen-elemen baru Semantik</dt> + <dd>Disamping section, media dan form elements, there are numerous new elements, like {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, or {{HTMLElement("meter")}} and {{HTMLElement("main")}}, increasing the amount of <a href="/en-US/docs/HTML/HTML5/HTML5_element_list" title="HTML/HTML5/HTML5_element_list">valid HTML5 elements</a>.</dd> + <dt>Perbaikan pada {{HTMLElement("iframe")}}</dt> + <dd>Using the {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, and {{htmlattrxref("srcdoc", "iframe")}} attributes, authors can now be precise about the level of security and the wished rendering of an {{HTMLElement("iframe")}} element.</dd> + <dt><a href="/en-US/docs/MathML" title="MathML">MathML</a></dt> + <dd>Allows directly embedding mathematical formulas.</dd> + <dt><a href="/en-US/docs/HTML/HTML5/Introduction_to_HTML5" title="HTML/HTML5/Introduction_to_HTML5">Introduction to HTML5</a></dt> + <dd>This article introduces how to indicate to the problem that you are using HTML5 in your web design or web application.</dd> + <dt><a href="/en-US/docs/HTML/HTML5/HTML5_Parser" title="HTML/HTML5/HTML5 parser">HTML5-compliant parser</a></dt> + <dd>The parser, which turns the bytes of an HTML document into a DOM, has been extended and now precisely defines the behavior to use in all cases, even when faced with invalid HTML. This leads to far greater predictability and interoperability between HTML5-compliant browsers.</dd> +</dl> + +<h2 id="Connectivity" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Connectivity</h2> + +<dl> + <dt><a href="/en-US/docs/WebSockets" title="WebSockets">Web Sockets</a></dt> + <dd>Allows creating a permanent connection between the page and the server and to exchange non-HTML data through that means.</dd> + <dt><a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="Server-sent_events/Using_server-sent_events">Server-sent events</a></dt> + <dd>Allows a server to push events to a client, rather than the classical paradigm where the server could send data only in response to a client's request.</dd> + <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt> + <dd>This technology, where RTC stands for Real-Time Communication, allows connecting to other people and controlling videoconferencing directly in the browser, without the need for a plugin or an external application.</dd> +</dl> + +<h2 id="Offline_storage" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Offline & storage</h2> + +<dl> + <dt><a href="/en-US/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">Offline resources: the application cache</a></dt> + <dd>Firefox fully supports the HTML5 offline resource specification. Most others have offline resource support at some level.</dd> + <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Online and offline events</a></dt> + <dd>Firefox 3 supports WHATWG online and offline events, which let applications and extensions detect whether or not there's an active Internet connection, as well as to detect when the connection goes up and down.</dd> + <dt><a href="/en-US/docs/DOM/Storage" title="DOM/Storage">WHATWG client-side session and persistent storage (aka DOM Storage)</a></dt> + <dd>Client-side session and persistent storage allows web applications to store structured data on the client side.</dd> + <dt><a href="/en-US/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt> + <dd>IndexedDB is a web standard for the storage of significant amounts of structured data in the browser and for high performance searches on this data using indexes.</dd> + <dt><a href="/en-US/docs/Using_files_from_web_applications" title="Using_files_from_web_applications">Using files from web applications</a></dt> + <dd>Support for the new HTML5 File API has been added to Gecko, making it possible for web applications to access local files selected by the user. This includes support for selecting multiple files using the <span style="font-family: monospace;">{{HTMLElement("input")}}</span> of <a href="/en-US/docs/HTML/Element/Input#attr-type" title="HTML/Element/input#attr-type"><strong>type</strong></a> <span style="font-family: courier new;">file</span> HTML element's new <a href="/en-US/docs/HTML/Element/Input#attr-multiple" title="HTML/Element/input#attr-multiple"><strong>multiple</strong></a> attribute. There also is <a href="/en-US/docs/DOM/FileReader" title="DOM/FileReader"><code>FileReader</code></a>.</dd> +</dl> + +<h2 id="Multimedia" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Multimedia</h2> + +<dl> + <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Using HTML5 audio and video</a></dt> + <dd>The {{HTMLElement("audio")}} and {{HTMLElement("video")}} elements embed and allow the manipulation of new multimedia content.</dd> + <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt> + <dd>This technology, where RTC stands for Real-Time Communication, allows connecting to other people and controlling videoconferencing directly in the browser, without the need for a plugin or an external application.</dd> + <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Using the Camera API</a></dt> + <dd>Allows using, manipulating, and storing an image from the computer's camera.</dd> + <dt>Track and WebVTT</dt> + <dd>The {{HTMLElement("track")}} element allows subtitles and chapters. <a href="/en-US/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT</a> is a text track format.</dd> +</dl> + +<h2 id="3D_graphics_effects" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">3D, graphics & effects</h2> + +<dl> + <dt><a href="/en-US/docs/Canvas_tutorial" title="Canvas tutorial">Canvas Tutorial</a></dt> + <dd>Learn about the new <code>{{HTMLElement("canvas")}}</code> element and how to draw graphs and other objects in Firefox.</dd> + <dt><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">HTML5 text API for <code><canvas></code> elements</a></dt> + <dd>The HTML5 text API is now supported by {{HTMLElement("canvas")}} elements.</dd> + <dt><a href="/en-US/docs/WebGL" title="WebGL">WebGL</a></dt> + <dd>WebGL brings 3D graphics to the Web by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5 {{HTMLElement("canvas")}} elements.</dd> + <dt><a href="/en-US/docs/SVG" title="SVG">SVG</a></dt> + <dd>An XML-based format of vectorial images that can directly be embedded in the HTML.</dd> + <dt> </dt> +</dl> +</div> + +<div class="section"> +<h2 id="Performance_integration" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Performance & integration</h2> + +<dl> + <dt><a href="/en-US/docs/DOM/Using_web_workers" title="Using web workers">Web Workers</a></dt> + <dd>Allows delegation of JavaScript evaluation to background threads, allowing these activities to prevent slowing down interactive events.</dd> + <dt><code><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> Level 2</dt> + <dd>Allows fetching asynchronously some parts of the page, allowing it to display dynamic content, varying according to the time and user actions. This is the technology behind <a href="/en-US/docs/AJAX" title="AJAX">Ajax</a>.</dd> + <dt>JIT-compiling JavaScript engines</dt> + <dd>The new generation of JavaScript engines is much more powerful, leading to greater performance.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating_the_browser_history">History API</a></dt> + <dd>Allows the manipulation of the browser history. This is especially useful for pages loading interactively new information.</dd> + <dt><a href="/en-US/docs/HTML/Content_Editable" title="HTML/Content Editable">The contentEditable attribute: transform your website to a wiki!</a></dt> + <dd>HTML5 has standardized the contentEditable attribute. Learn more about this feature.</dd> + <dt><a href="/en-US/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag_and_Drop">Drag and drop</a></dt> + <dd>The HTML5 drag and drop API allows support for dragging and dropping items within and between web sites. This also provides a simpler API for use by extensions and Mozilla-based applications.</dd> + <dt><a href="/en-US/docs/Focus_management_in_HTML" title="Focus_management_in_HTML">Focus management in HTML</a></dt> + <dd>The new HTML5 <code>activeElement</code> and <code>hasFocus</code> attributes are supported.</dd> + <dt><a href="/en-US/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">Web-based protocol handlers</a></dt> + <dd>You can now register web applications as protocol handlers using the <code>navigator.registerProtocolHandler()</code> method.</dd> + <dt><a href="/en-US/docs/DOM/window.requestAnimationFrame" title="DOM/window.requestAnimationFrame"><code>requestAnimationFrame</code></a></dt> + <dd>Allows control of animations rendering to obtain optimal performance.</dd> + <dt><a href="/en-US/docs/DOM/Using_full-screen_mode" title="DOM/Using_full-screen_mode">Fullscreen API</a></dt> + <dd>Controls the usage of the whole screen for a Web page or application, without the browser UI displayed.</dd> + <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt> + <dd>Allows locking the pointer to the content, so games and similar applications don't lose focus when the pointer reaches the window limit.</dd> + <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Online and offline events</a></dt> + <dd>In order to build a good offline-capable web application, you need to know when your application is actually offline. Incidentally, you also need to know when your application has returned to an online status again.</dd> +</dl> + +<h2 id="Device_access" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Device access</h2> + +<dl> + <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Using the Camera API</a></dt> + <dd>Allows using, manipulating, and storing an image from the computer's camera.</dd> + <dt><a href="/en-US/docs/DOM/Touch_events" title="DOM/Touch_events">Touch events</a></dt> + <dd>Handlers to react to events created by a user pressing touch screens.</dd> + <dt><a href="/en-US/docs/Using_geolocation" title="Using geolocation">Using geolocation</a></dt> + <dd>Let browsers locate the position of the user using geolocation.</dd> + <dt><a href="/en-US/docs/Detecting_device_orientation" title="Detecting_device_orientation">Detecting device orientation</a></dt> + <dd>Get the information when the device on which the browser runs changes orientation. This can be used as an input device (e.g., to make games that react to the position of the device) or to adapt the layout of a page to the orientation of the screen (portrait or landscape).</dd> + <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt> + <dd>Allows locking the pointer to the content, so games and similar application don't lose focus when the pointer reaches the window limit.</dd> +</dl> + +<h2 id="Styling" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3829/HTML5_Styling_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Styling</h2> + +<p><a href="/en-US/docs/CSS" title="CSS">CSS</a> has been extended to be able to style elements in a much more complex way. This is often referred as <a href="/en-US/docs/CSS/CSS3" title="CSS/CSS3">CSS3</a>, though CSS is not a monolithic specification any more and the different modules are not all at level 3: some are at level 1 and others at level 4, with all the intermediate levels covered.</p> + +<dl> + <dt>New background styling features</dt> + <dd>It is now possible to put a shadow to a box, using {{cssxref("box-shadow")}} and <a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple_backgrounds">multiple backgrounds</a> can be set.</dd> + <dt>More fancy borders</dt> + <dd>Not only it is now possible to use images to style borders, using {{cssxref("border-image")}} and its associated longhand properties, but rounded borders are supported via the {{cssxref("border-radius")}} property.</dd> + <dt>Animating your style</dt> + <dd>Using <a href="/en-US/docs/CSS/Using_CSS_transitions" title="CSS/Using_CSS_transitions">CSS Transitions</a> to animate between different states or using <a href="/en-US/docs/CSS/Using_CSS_animations" title="CSS/Using_CSS_animations">CSS Animations</a> to animate parts of the page without a triggering event, you can now control mobile elements on your page.</dd> + <dt>Typography improvement</dt> + <dd>Authors have better control to reach better typography. They can control {{cssxref("text-overflow")}} and <a href="/en-US/docs/CSS/hyphens" title="CSS/hyphens">hyphenation</a>, but also can add a <a href="/en-US/docs/CSS/text-shadow" title="CSS/text-shadow">shadow</a> to it or control more precisely its <a href="/en-US/docs/CSS/text-decoration" title="SVG/Attribute/text-decoration">decorations</a>. Custom typefaces can be downloaded and applied thanks to the new {{cssxref("@font-face")}} at-rule.</dd> + <dt>New presentational layouts</dt> + <dd>In order to improve the flexibility of designs, two new layouts have been added: the <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="CSS/Using_CSS_multi-column_layouts">CSS multi-column layout</a>, and the <a href="/en-US/docs/CSS/Flexbox" title="CSS/Flexbox">CSS flexible box layout</a>.</dd> +</dl> +</div> +</div> + +<h4 id="External_References_Html5_Tutorial">External References<br> + <br> + <a href="http://www.html5andcss3.org" title="http://www.html5andcss3.org"><span style="color: #0000cd;">Html5 Tutorial</span></a><br> + </h4> + +<p> </p> diff --git a/files/id/web/guide/index.html b/files/id/web/guide/index.html new file mode 100644 index 0000000000..5e7889fa77 --- /dev/null +++ b/files/id/web/guide/index.html @@ -0,0 +1,55 @@ +--- +title: Paduan Pengembang Web +slug: Web/Guide +tags: + - Landing + - Paduan + - TopicStub + - Web +translation_of: Web/Guide +--- +<p><span class="seoSummary"><strong>Artikel ini memberikan informasi untuk membantu anda menggunakan teknologi dan API secara spesifik.</strong></span></p> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt class="landingPageList"><a href="/id/docs/Learn/HTML">Area Belajar HTML</a></dt> + <dd class="landingPageList"><strong>HyperText Markup Language (HTML)</strong> merupakan inti bahasa untuk hampir semua konten Web. Hampir keseluruhan yang anda lihat di layar browser, pada dasarnya, menggunakan HTML.</dd> + <dt class="landingPageList"><a href="/id/docs/Learn/CSS">Area Belajar CSS</a></dt> + <dd class="landingPageList"><strong>Cascading Style Sheets (CSS)</strong> adalah bahasa stylesheet yang digunakan untuk mendeskripsikan tampilan dokumen yang ditulis di HTML.</dd> + <dt class="landingPageList"><a href="/id/docs/Web/Guide/Events">Paduan pegembang Event</a></dt> + <dd class="landingPageList">Events mengacu baik pada pola desain yang digunakan untuk penanganan secara <em>asynchronous</em> pada berbagai peristiwa di halaman web dan penamaan, karakterisasi, dan penggunaan sejumlah besar peristiwa dari berbagai tipe.</dd> + <dt class="landingPageList"><a href="/id/docs/Web/Guide/Graphics">Grafis di Web</a></dt> + <dd class="landingPageList">Website modern dan aplikasi sering memerlukan menyajikan grafis dari berbagai kecanggihan.</dd> + <dt class="landingPageList"><a href="/id/docs/Web/Guide/API">Paduan Web API</a></dt> + <dd class="landingPageList">Daftar semua Web API dan apa yang dihasilkan.</dd> + <dt><a href="/id/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a></dt> + <dd><strong>JavaScript</strong> adalah bahasa scripting yang ampuh digunakan untuk membuat aplikasi Web.</dd> + <dt class="landingPageList"><a href="/id/docs/Localizations_and_character_encodings">Lokalisasi dan pengkodean karakter</a></dt> + <dd class="landingPageList">Browser memproses teks sebagai Unicode secara internal. Namun, cara merepresentasikan karakter dalam bentuk bytes <strong>(character encoding)</strong> yang digunakan untuk mengirim teks melalui jaringan ke browser. <a class="external external-icon" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset">Spesifikasi HTML menyarankan penggunaan UTF-8 encoding</a> (dimana mewakili semua Unicode), dan terlepas dari pengkode-an yang digunakan, dibutuhkan konten Web untuk mendeklarasikan pengkode-an tersebut.</dd> + <dt class="landingPageList"><a href="/id/docs/Web/Guide/Mobile">Pengembangan Mobile Web</a></dt> + <dd class="landingPageList">Halaman ini memberikan gambaran dari beberapa teknik utama yang dibutuhkan desain Website sehingga berjalan dengan baik di perangkat mobile. Jika anda mencari informasi di proyek Mozilla's Firefox OS, lihat halaman <a href="/id/Mozilla/Firefox_OS" title="Boot to Gecko">Firefox OS</a>. Atau anda mungkin tertarik pada detail tentang <a href="/id/Mozilla/Firefox_for_Android">Firefox for Android</a>.</dd> +</dl> +</div> + +<div class="section"> +<dl> + <dt class="landingPageList"><a href="/id/docs/Web/Guide/Performance">Optimasi dan kinerja</a></dt> + <dd class="landingPageList">Ketika membangun modern Web apps dan situs, sangat penting untuk membuat konten yang bekerja dengan cepat dan efisien. Ini memungkinkan situs bekerja dengan baik pada keduanya, sistem Desktop yang kuat dan perngkat genggam yang lemah.</dd> + <dt class="landingPageList"><a href="/id/docs/Web/Guide/Parsing_and_serializing_XML">Parsing and serializing XML</a></dt> + <dd class="landingPageList">Platform Web menyediakan metode yang berbeda dari parsing and serializing XML, dengan masing-masing pro dan kontra.</dd> + <dt class="landingPageList"><a href="/id/docs/Web/Guide/WOFF">Open Web Font Format (WOFF)</a></dt> + <dd class="landingPageList"><strong>WOFF</strong> (<strong>Web Open Font Format</strong>) adalah file format font yang gratis untuk semua pengguna di web.</dd> + <dt class="landingPageList"><a href="/id/docs/Web/Guide/Using_FormData_Objects">Menggunakan Objek FormData</a></dt> + <dd class="landingPageList">Objek <a href="https://developer.mozilla.org/en/DOM/XMLHttpRequest/FormData"><code>FormData</code></a> memungkinkan anda menkompilasi serangkaian <code>key/value pairs</code> untuk dikirim menggunakan <code>XMLHttpRequest</code>. Utamanya ditujukan untuk mengirim format data, namun dapat digunakan secara terpisah dari format dengan tujuan untuk mengirim keyed data. Pengiriman dengan format yang sama dengan bentuk method <code>submit()</code> digunakan untuk mengirim data jika bentuk tipe encoding ditetapkan ke <code>"multipart/form-data"</code>.</dd> + <dt class="landingPageList"><a href="/id/docs/Glossary">Glosarium</a></dt> + <dd class="landingPageList">Menjelaskan berbagai istilah teknis terkait Web dan Internet.</dd> +</dl> +</div> +</div> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li><a href="/id/docs/Web/Reference" title="/en-US/docs/Web/Reference">Referensi Pengembang Web</a></li> +</ul> diff --git a/files/id/web/html/element/base/index.html b/files/id/web/html/element/base/index.html new file mode 100644 index 0000000000..6b4a556381 --- /dev/null +++ b/files/id/web/html/element/base/index.html @@ -0,0 +1,154 @@ +--- +title: <base> +slug: Web/HTML/Element/base +translation_of: Web/HTML/Element/base +--- +<p id="Summary">{{HTMLRef}}</p> + +<p>The <strong>HTML <code><base></code> element</strong> specifies the base URL to use for all relative URLs contained within a document. There can be only one <code><base></code> element in a document. </p> + +<p>The base URL of a document can be queried from a script using {{domxref('document.baseURI')}}.</p> + +<table class="properties"> + <tbody> + <tr> + <th><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td>Metadata content.</td> + </tr> + <tr> + <th>Permitted content</th> + <td>None, it is an {{Glossary("empty element")}}.</td> + </tr> + <tr> + <th>Tag omission</th> + <td>There must be no closing tag.</td> + </tr> + <tr> + <th>Permitted parents</th> + <td>Any {{HTMLElement("head")}} that doesn't contain any other {{HTMLElement("base")}} element</td> + </tr> + <tr> + <th>Permitted ARIA roles</th> + <td>None</td> + </tr> + <tr> + <th>DOM interface</th> + <td>{{domxref("HTMLBaseElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes">Attributes</h2> + +<p>This element's attributes include the <a href="/en-US/docs/HTML/Global_attributes">global attributes</a>.</p> + +<dl> + <dt>{{htmlattrdef("href")}}</dt> + <dd>The base URL to be used throughout the document for relative URL addresses. If this attribute is specified, this element must come before any other elements with attributes whose values are URLs. Absolute and relative URLs are allowed.</dd> + <dt>{{htmlattrdef("target")}}</dt> + <dd>A name or keyword indicating the default location to display the result when hyperlinks or forms cause navigation, for elements that do not have an explicit target reference. It is a name of, or keyword for, a <em>browsing context</em> (for example: tab, window, or inline frame). The following keywords have special meanings: + <ul> + <li><code>_self</code>: Load the result into the same browsing context as the current one. This value is the default if the attribute is not specified.</li> + <li><code>_blank</code>: Load the result into a new unnamed browsing context.</li> + <li><code>_parent</code>: Load the result into the parent browsing context of the current one. If there is no parent, this option behaves the same way as <code>_self</code>.</li> + <li><code>_top</code>: Load the result into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as <code>_self</code>.</li> + </ul> + </dd> +</dl> + +<h2 id="Usage_notes">Usage notes</h2> + +<p>If multiple <code><base></code> elements are specified, only the first <strong>href</strong> and first <strong>target</strong> value are used; all others are ignored.</p> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: html"><base href="http://www.example.com/page.html"> +<base target="_blank" href="http://www.example.com/page.html"> +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-base-element', '<base>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change since last snapshot.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata#the-base-element', '<base>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Specified the behavior of <code>target</code></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.4', '<base>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Added the <code>target</code> attribute</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}} [1]</td> + <td>{{CompatVersionUnknown}} [2]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}} [1]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Support of relative URIs for <code>href</code> was added in Gecko 2.0 (Firefox 4.0)</p> + +<p>[2] Before Internet Explorer 7, <code><base></code> could be positioned anywhere in the document and the nearest value of <code><base></code> was used. Support for relative URLs has been removed in Internet Explorer 8</p> diff --git a/files/id/web/html/element/dialog/index.html b/files/id/web/html/element/dialog/index.html new file mode 100644 index 0000000000..ac51fecd40 --- /dev/null +++ b/files/id/web/html/element/dialog/index.html @@ -0,0 +1,165 @@ +--- +title: '<dialog>: The Dialog element' +slug: Web/HTML/Element/dialog +translation_of: Web/HTML/Element/dialog +--- +<p>Elemen<strong> <code><dialog></code> </strong>menampilkan sebuah kotak dialog atau komponen interaktif lainnya seperti halnya inspektor atau jendela.</p> + +<p> </p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Kategori konten</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Alur Konten</a>, <a href="/en-US/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document#Sectioning_roots">bagian akar</a></td> + </tr> + <tr> + <th scope="row">Konten yang diijinkan</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Alur konten</a></td> + </tr> + <tr> + <th scope="row">Penanda kesalahan</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Tingkatan yang diijinkan</th> + <td>Setiap elemen yang menerima <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">alur konten</a></td> + </tr> + <tr> + <th scope="row">Peran Aria yang diijinkan</th> + <td>{{ARIARole("alertdialog")}}</td> + </tr> + <tr> + <th scope="row">Antarmuka DOM</th> + <td>{{domxref("HTMLDialogElement")}}</td> + </tr> + </tbody> +</table> + +<p><strong><span style="">Atribut</span></strong></p> + +<p>Elemen ini memiliki <a href="/en-US/docs/Web/HTML/Global_attributes">atribut global</a>. Penggunaan atribut <code>tabindex</code> harus dihindari pada elemen <code><dialog></code> .</p> + +<dl> + <dt>{{htmlattrdef("open")}}</dt> + <dd>Menandakan bahwa dialog telah aktif dan dapat digunakan. Ketika atribut <code>open</code> belum diatur, maka dialog tidak akan tampil kepada pengguna.</dd> +</dl> + +<h2 id="Catatan_penggunaan">Catatan penggunaan</h2> + +<p> </p> + +<ul> + <li>Elemen <code><form></code> dapat diintegrasikan didalam dialog dengan menspesifikasikannya menggunakan atribut <code>method="dialog"</code>. Ketika isi form dikirim, dialog akan tertutup dengan sebuah atribut <code>returnValue</code> dari <code>value</code> dari tombol kirim yang digunakan.</li> + <li>Elemen-pseudo CSS {{cssxref('::backdrop')}} dapat digunakan untuk menghiasi elemen <code><dialog></code>, sebagai contoh untuk membuat redup konten yand tidak boleh diakses saat dialog sedang aktif.</li> +</ul> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Contoh_sederhana">Contoh sederhana</h3> + +<pre class="brush: html"><dialog open> + <p>Greetings, one and all!</p> +</dialog> +</pre> + +<h3 id="Contoh_lanjutan">Contoh lanjutan</h3> + +<p>Pada contoh ini akan terbuka kotak dialog saat tombol "Update details" diklik.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><!-- Simple pop-up dialog box, containing a form --> +<dialog open id="favDialog"> + <form method="dialog"> + <section> + <p><label for="favAnimal">Favorite animal:</label> + <select id="favAnimal"> + <option></option> + <option>Brine shrimp</option> + <option>Red panda</option> + <option>Spider monkey</option> + </select></p> + </section> + <menu> + <button id="cancel" type="reset">Cancel</button> + <button type="submit">Confirm</button> + </menu> + </form> +</dialog> + +<menu> + <button id="updateDetails">Update details</button> +</menu> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">(function() { + var updateButton = document.getElementById('updateDetails'); + var cancelButton = document.getElementById('cancel'); + var favDialog = document.getElementById('favDialog'); + + // Update button opens a modal dialog + updateButton.addEventListener('click', function() { + favDialog.showModal(); + }); + + // Form cancel button closes the dialog box + cancelButton.addEventListener('click', function() { + favDialog.close(); + }); +})(); +</pre> + +<h3 id="Hasil">Hasil</h3> + +<p>{{EmbedLiveSample("Contoh_lanjutan", "100%", 300)}}</p> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Keterangan</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-dialog-element', '<dialog>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5.2', 'interactive-elements.html#the-dialog-element', '<dialog>')}}</td> + <td>{{Spec2('HTML5.2')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatibilitas_browser">Kompatibilitas browser</h2> + +<div class="hidden"> +<p>Tabel kompatibilitas pada halaman ini dihasilkan dari struktur data.Jika ingin berkontribusi untuk data, silakan kunjungi <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> dan kirimkan kami <em>pull request</em>.</p> +</div> + +<p>{{Compat("html.elements.dialog")}}</p> + +<h2 id="Polyfills">Polyfills</h2> + +<p>Sertakan polyfill ini untuk menyediakan dukungan terhadap <em>browser</em> lawas</p> + +<p><a href="https://github.com/GoogleChrome/dialog-polyfill">dialog-polyfill</a></p> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>The {{event("close")}} event</li> + <li>The {{event("cancel")}} event</li> + <li><a href="/en-US/docs/Web/Guide/HTML/Forms">HTML forms guide</a>.</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/id/web/html/element/image/index.html b/files/id/web/html/element/image/index.html new file mode 100644 index 0000000000..047ac8f8b4 --- /dev/null +++ b/files/id/web/html/element/image/index.html @@ -0,0 +1,16 @@ +--- +title: <image> +slug: Web/HTML/Element/image +translation_of: Web/HTML/Element/image +--- +<div>{{non-standard_header}}</div> + +<h2 id="Ringkasan">Ringkasan</h2> + +<p>Elemen HTML <image> adalah elemen eksperimental yang dirancang untuk menampilkan gambar. Ini tidak pernah di implementasikan dan standar elemen {{HTMLElement ("img")}} harus digunakan.</p> + +<div class="note"> +<p><strong>Jangan Gunakan!<em> </em></strong>Untuk menampilkan gambar, gunakan standar elemen {{HTMLElement ("img")}} .</p> +</div> + +<p>Catatan sampai Firefox 22, meskipun tidak didukung, elemen <image> diasosiasikan dengan {{domxref ("HTMLSpanElement")}}. Kemudian diperbaiki dan sekarang diasosiasikan dengan {{domxref ("HTMLElement")}} mengikuti spesifikasi yang diminta.</p> diff --git a/files/id/web/html/element/index.html b/files/id/web/html/element/index.html new file mode 100644 index 0000000000..6651addc38 --- /dev/null +++ b/files/id/web/html/element/index.html @@ -0,0 +1,106 @@ +--- +title: HTML element reference +slug: Web/HTML/Element +tags: + - Elemen + - HTML + - Referensi + - Web + - dasar +translation_of: Web/HTML/Element +--- +<div>{{HTMLSidebar("Elements")}}</div> + +<p><span class="seoSummary">Halaman ini menampilkan semua daftar {{Glossary("HTML")}} {{Glossary("Element","elements")}}, yang dibuat menggunakan {{Glossary("Tag", "tags")}}.</span> Ini dikelompokkan berdasarkan fungsi untuk membantu Anda mengingat lebih mudah. Daftar abjad semua element tersedia di sidebar pada setiap halaman element seperti yang ini.</p> + +<div class="note"> +<p>Untuk informasi lebih tentang dasar-dasar element HTML dan attribut, lihat <a href="/id/docs/Web/Guide/HTML/Introduction#Elements_%E2%80%94_the_basic_building_blocks">artikel bagian pengenalan HTML</a>.</p> +</div> + +<h2 id="Akar_Utama">Akar Utama</h2> + +<p>{{HTMLRefTable("HTML Root Element")}}</p> + +<h2 id="Document_metadata">Document metadata</h2> + +<p>Metadata mengandung informasi halaman. Ini terdapat informasi tentang <em lang="en">styles, scripts</em> dan data untuk membantu perangkat lunak ({{Glossary("search engine", "search engines")}}, {{Glossary("Browser","browsers")}}, dsb.) gunakan dan alihkan halaman. Metadata untuk style dan script bisa didefinisikan di halaman atau link untuk berkas lainnya yabg memiliki informasinya.</p> + +<p>{{HTMLRefTable("HTML Document Metadata")}}</p> + +<h2 id="Bagian_Dasar">Bagian Dasar</h2> + +<p>{{HTMLRefTable("Sectioning Root Element")}}</p> + +<h2 id="Kontent_Bagian">Kontent Bagian</h2> + +<p>Element konten bagian memungkinkan Ansa mengatur konten dokumen menjadi kepingan-kepingan logis. Gunakan element bagian untuk membuat sebagian besar konten halaman Anda, termasuk navigasi header dan footer, dan judul element untuk mengidentifikasi bagian kontent.</p> + +<p>{{HTMLRefTable("HTML Sections")}}</p> + +<h2 id="Konten_kalimat">Konten kalimat</h2> + +<p>Kegunaan element teks konten HTML mengatur blok atau bagian konten yang ditempatkan antara tag pembuka {{HTMLElement("body")}} dan penutup <code></body></code> . Penting untuk {{Glossary("accessibility")}} and {{Glossary("SEO")}}, element-element ini mengenali tujuan atau struktur kontennya.</p> + +<p>{{HTMLRefTable("HTML Grouping Content")}}</p> + +<h2 id="Teks_semantik_dalam_baris">Teks semantik dalam baris</h2> + +<p>Kegunaan teks semantik dalam baris HTML untuk memberikan tujuan, struktur, atau gaya kata, baris, atau potongan kata sembarang.</p> + +<p>{{HTMLRefTable("HTML Text-Level Semantics")}}</p> + +<h2 id="Gambar_dan_multimedia">Gambar dan multimedia</h2> + +<p>HTML mendukung beragam sumber multimedia seperti gambar, audio, dan vidio.</p> + +<p>{{HTMLRefTable("multimedia")}}</p> + +<h2 id="Embedded_content">Embedded content</h2> + +<p>Selain konten multimedia biasa, HTML dapat menyertakan konten lainnya, walaupun tidak selalu mudah menyertakannya.</p> + +<p>{{HTMLRefTable({"include":["HTML embedded content"], "exclude":["multimedia"]})}}</p> + +<h2 id="Scripting">Scripting</h2> + +<p>Untuk membuat konten dinamis dan aplikasi web, HTML mendukung penggunaan bahasa skripsi, secara paling jelas JavaScript. Element tertentu mendukung kemampuan ini.</p> + +<p>{{HTMLRefTable("HTML Scripting")}}</p> + +<h2 id="Batas_Pengubahan">Batas Pengubahan</h2> + +<p>Element ini memungkinkan Anda menyediakan indikasi bagian spesifik bagian kalimat yang telah diubah.</p> + +<p>{{HTMLRefTable("HTML Edits")}}</p> + +<h2 id="Konten_tabel">Konten tabel</h2> + +<p>Element ini digunakan untuk membuat dan menangani data tabular.</p> + +<p>{{HTMLRefTable("HTML tabular data")}}</p> + +<h2 id="Formulir">Formulir</h2> + +<p>HTML menyediakan beberapa element yang dapat digunakan bersama untuk membuat formulir, dimana pengguna dapat mengisi dan memasukan ke situs web atau aplikasi. Terdapat banyak informasi ini tersedia di <a href="/en-US/docs/Web/Guide/HTML/Forms">panduan formulir HTML</a>.</p> + +<p>{{HTMLRefTable({"include": ["HTML forms"], "exclude":["Deprecated"]})}}</p> + +<h2 id="Element_interaktif">Element interaktif</h2> + +<p>HTML menawarkan pilihan element yang membantu untuk membuat pengguna interaktif berhadapan dengan objek.</p> + +<p>{{HTMLRefTable("HTML interactive elements")}}</p> + +<h2 id="Komponen_Web">Komponen Web</h2> + +<p>Komponen Web adalah teknologi HTML terhubung yang memungkinkan untuk, secara inti, membuat dan menggunakan element khusus seperti itu HTML umum. Selain itu, Anda dapat membuat versi khusus element HTML standar.</p> + +<p>{{HTMLRefTable({"include":["Web Components"],"elements":["shadow"]})}}</p> + +<h2 id="Element_Usang_dan_Dihilangkan">Element Usang dan Dihilangkan</h2> + +<div class="warning"> +<p><strong>Peringatan:</strong> Ini adalah element HTML lama yang dihilangkan dan seharusnya tidak digunakan. <strong>Anda harus tidak pernah menggunakannya pada proyek baru, dan harus mengubahnya pada proyek lama secepat yang Anda bisa.</strong> Berikut ini adalah daftarnya, hanya untuk informasi saja.</p> +</div> + +<p>{{HTMLRefTable({"include":["Deprecated","Obsolete"]})}}</p> diff --git a/files/id/web/html/index.html b/files/id/web/html/index.html new file mode 100644 index 0000000000..11a63d028d --- /dev/null +++ b/files/id/web/html/index.html @@ -0,0 +1,97 @@ +--- +title: HTML +slug: Web/HTML +translation_of: Web/HTML +--- +<div>{{HTMLSidebar}}</div> + +<p class="summary"><span class="seoSummary"><strong>HTML</strong> (HyperText Markup Language) merupakan <em lang="en">building block</em> web paling dasar. Ini memberikan arti dan struktur konten web. Teknologi-teknologi lainnya disamping HTML umumnya digunakan untuk menggambarkan penampilan/gambaran (<a href="/id/docs/Web/CSS">CSS</a>) atau fungsionalitas/tingkah laku (<a href="/id/docs/Web/JavaScript">JavaScript</a>).</span></p> + +<p>"Hypertext" merujuk ke link yang menghubungkan halaman web satu dengan lainnya, baik dalam satu situs maupun antar situs web. Dengan mengunggah konten ke internet dan menghubungkannya ke halaman yang dibuat oleh orang lain, Anda menjadi pertisipasi aktif di World Wide Web.</p> + +<p>HTML menggunakan "markup" untuk anotasi teks, gambar, dan konten lainnya untuk ditampilkan dalam peramban Web. Markip HTML terdapat "elements" khusus seperti {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("datalist")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("nav")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("video")}}, {{HTMLElement("ul")}}, {{HTMLElement("ol")}}, {{HTMLElement("li")}} dan masih banyak lagi.</p> + +<p>Elemen HTML dibedakan dari teks lain dalam dokumen dengan "tags", yang terdiri dari nama elemen yang dikelilingi oleh "<code><</code>" dan "<code>></code>". Nama elemen dalam tag itu insensitif. Yakni, dapat ditulis dengan huruf besar, huruf kecil, atau gabungan. Contohnya tag <code><title></code> dapat ditulis sebagai <code><Title></code>, <code><TITLE></code>, atau dengan cara lainnya.</p> + +<p>Artikel-artikel dibawah dalat membantu Amda belajar lebih banyak tentang HTML.</p> + +<section class="cleared" id="sect1"> +<ul class="card-grid"> + <li><span>Pengenalan HTML</span> + + <p>Jika kamu baru di pengembangan Web, pastima untum membaca artikel <a href="/id/docs/Learn/Getting_started_with_the_web/HTML_basics">Dasar-dasar HTML</a> kami untuk belajar apa HTML itu dan cara menggunakannya.</p> + </li> + <li><span>Tutorial HTML</span> + <p>Untuk artikel tentang cara menggunakan HTML, tutorial yang bagus dan dipenuhi contoh, periksa artikel <a href="/id/docs/Learn/HTML">Ruang Belajar HTML</a>.</p> + </li> + <li><span>Referensi HTML</span> + <p>Di bagian <a href="/id/docs/Web/HTML/Reference">Referensi HTML</a> yang luas, Anda akan menemukan setiap detail elemen dan attribut dalam HTML.</p> + </li> +</ul> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Tools" id="Tutorial_Pemula">Tutorial Pemula</h2> + +<p>Fitur-fitur modul ganda <a href="/id/docs/Learn/HTML">Ruang Belajar HTML</a> yang mengajari HTML dari bawah ke atas — tanpa dibutuhkan pengetahuan sebelumnya.</p> + +<dl> + <dt><a href="/id/docs/Learn/HTML/Introduction_to_HTML">Pengenalan pada HTML</a></dt> + <dd>Tahap kumpulan modul ini, membuat Anda terbiasa menggunakan konsep dan sintaks penting seperti melihat pengaplikasian HTML pada teks, cara untuk membuat hyperlink, dan cara menggunakan HTML untuk struktur halaman web.</dd> + <dt><a href="/id/docs/Learn/HTML/Multimedia_and_embedding">Multimedia and embedding</a></dt> + <dd>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 other webpages.</dd> + <dt><a href="/id/docs/Learn/HTML/Tables">Tabel-tabel HTML</a></dt> + <dd>Mewakili data tabular di halaman web yang dapat dimengerti, cara keaksesan dapat menantang. Modul ini mencangkup markup dasar tabel, bersama dengan fitur lebih kompleks seperti keterangan implementasi dan ringkasan.</dd> + <dt><a href="/id/docs/Learn/HTML/Forms">Formulir HTML</a></dt> + <dd>Formulir merupakan bagian sangat penting di Web — ini menyediakan banyak kegunaan yang Anda butuhkan untuk berinteraksi dengan situs-situs web, msl. pendaftaran dan masuk, pengiriman masukan, pembelian produk, dan lainnya. Modul ini membantu Anda dengan membuat formulir sisi klien/bagian awal hingga akhir.</dd> + <dt><a href="/id/docs/Learn/HTML/Howto">Pakai HTML untuk memperbaiki kesalahan umum.</a></dt> + <dd>Menyediakan link ke bagian-bagian konten menjelaskan cara menggubakan HTML untuk menyelesaikan masalah sangat umum ketika membuat halaman web: mengatur judul, menambahkan gambar atau vidio, penekanan konten, pembuatan formulir dasar, dsb.</dd> +</dl> + +<h2 id="Topik_Lanjut">Topik Lanjut</h2> + +<dl> + <dt class="landingPageList"><a href="/id/docs/Web/HTML/CORS_enabled_image">Gambar diaktifkan CORS</a></dt> + <dd class="landingPageList">Attribut {{htmlattrxref("crossorigin", "img")}}, di kombinasikan dengan bagian kepala {{glossary("CORS")}} yang sesuai, memungkinkan gambar didefinisikan dengan elemen {{HTMLElement("img")}} untuk dimuat dari origin asing dan digunakan di elemen {{HTMLElement("canvas")}} seolah sedang dimuat dari asal saat ini.</dd> + <dt class="landingPageList"><a href="/id/docs/Web/HTML/CORS_settings_attributes">CORS mengatur atribut</a></dt> + <dd class="landingPageList">Beberapa elemen HTML mendukung <a href="/id/docs/HTTP/Access_control_CORS">CORS</a>, seperti {{HTMLElement("img")}} atau {{HTMLElement("video")}}, memiliki atribut <code>crossorigin</code> (properti <code>crossOrigin</code>), yang memungkinkan Anda mengkonfigurasikan permintaan CORS untuk mengambil data elemen.</dd> + <dt class="landingPageList"><a href="/id/docs/Web/HTML/Focus_management_in_HTML">Fokus manajemen di HTML</a></dt> + <dd class="landingPageList">Metode Atribut DOM <code><a href="/id/docs/Web/API/Document/activeElement">activeElement</a></code> dan DOM <code><a href="/id/docs/Web/API/Document/hasFocus">hasFocus()</a></code> membantu Anda melacak dan mengendalikan interaksi pengguna dengan elemen di halaman web.</dd> + <dt class="landingPageList"><a href="/id/docs/Web/HTML/Preloading_content">Mem-<em lang="en">preloading</em> konten dengan rel="preload"</a></dt> + <dd class="landingPageList">The <code>preload</code> value of the {{htmlelement("link")}} element's {{htmlattrxref("rel", "link")}} attribute allows you to write declarative fetch requests in your HTML {{htmlelement("head")}}, specifying resources that your pages will need very soon after loading, which you therefore want to start preloading early in the lifecycle of a page load, before the browser's main rendering machinery kicks in. This ensures that they are made available earlier and are less likely to block the page's first render, leading to performance improvements. This article provides a basic guide to how <code>preload</code> works.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Documentation" id="Referensi">Referensi</h2> + +<dl> + <dt class="landingPageList"><a href="/id/docs/Web/HTML/Reference">Refensi HTML</a></dt> + <dd class="landingPageList">HTML terdiri dari <strong>elemen</strong>, setiap elemen mugkin dimofikasi dengan beberapa <strong>atribut</strong>. Dokumen HTML terhubung satu sama lain dengan <a href="/id/docs/Web/HTML/Link_types">link</a>.</dd> + <dt class="landingPageList"><a href="/id/docs/Web/HTML/Element">Referensi elemen HTML</a></dt> + <dd class="landingPageList">Kunjungi semua daftar {{glossary("HTML")}} {{glossary("Element", "elements")}}.</dd> + <dt class="landingPageList"><a href="/id/docs/Web/HTML/Attributes">Referensi atribut HTML</a></dt> + <dd class="landingPageList">Elemen HTML memiliki <strong>atribut</strong>. Ini adalah nilai tambahan yang mengkonfigurasikan elemen atau menyesuaikan tingkah lakunya di berbagai cara.</dd> + <dt class="landingPageList"><a href="/id/docs/Web/HTML/Global_attributes">Atribut Global</a></dt> + <dd class="landingPageList">Global attributes may be specified on all <a href="/id/docs/Web/HTML/Element">HTML elements</a>, <em>even those not specified in the standard</em>. This means that any non-standard elements must still permit these attributes, even though those elements make the document HTML5-noncompliant.</dd> + <dt class="landingPageList"><a href="/id/docs/Web/HTML/Inline_elements">Inline elements</a> and <a href="/id/docs/Web/HTML/Block-level_elements">block-level elements</a></dt> + <dd class="landingPageList">Elemen HTML elements biasanya elemen "inline" atau "block-level". Inline elemen hanya menempati ruang yang terikat dengan elemen yang didefinisikan. Block-level menempati seluruh ruang elemen orang tuanya (parent element) (container), dengan demikian membuat sebuah "block."</dd> + <dt class="landingPageList"><a href="/id/docs/Web/HTML/Link_types">Jenis-jenis Link</a></dt> + <dd class="landingPageList">Di HTML, beragam jenis link dapat digunakan untuk membangun dan mendefinisikan hubungan antara dua dokumen. Elemen link yang jenisnya dapat diatur ke dalam {{HTMLElement("a")}}, {{HTMLElement("area")}} dan {{HTMLElement("link")}}.</dd> + <dt class="landingPageList"><a href="/id/docs/Web/Media/Formats">Panduan jenis-jenis media dan format pada web</a></dt> + <dd class="landingPageList">Elemen {{HTMLElement("audio")}} dan {{HTMLElement("video")}} memungkinkan Anda memutar media audio dan vidio secara langsung di konten Anda tidan perlu dukungan perangkat lunak tambahan.</dd> + <dt class="landingPageList"><a href="/id/docs/Web/HTML/Kinds_of_HTML_content">Jenis-jenis konten HTML</a></dt> + <dd class="landingPageList">HTML is comprised of several kinds of content, each of which is allowed to be used in certain contexts and is disallowed in others. Similarly, each has a set of other content categories they can contain and elements which can or can't be used in them. This is a guide to these categories.</dd> + <dt class="landingPageList"><a href="/id/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">Quirks mode and standards mode</a></dt> + <dd class="landingPageList">Historical information on quirks mode and standards mode.</dd> +</dl> + +<h2 class="landingPageList" id="Topik-topik_berhubungan">Topik-topik berhubungan</h2> + +<dl> + <dt><a href="/id/docs/Web/HTML/Applying_color">Mengaplikasikan warna ke elemen HTML menggunakan CSS</a></dt> + <dd>Artikel ini mencakup sebagian besar cara Anda menggunakan CSS untuk memberikan warna pada konten HTML, daftar bagian dokumen apa yang dapat diwarnai dan properti CSS yang digunakan untuk melakukannya. Termasuk contoh, peralatan tempat palet, dan lainnya.</dd> +</dl> +</div> +</div> +<span class="alllinks"><a href="/id/docs/tag/HTML">Lihat semua...</a></span></section> diff --git a/files/id/web/http/basics_of_http/index.html b/files/id/web/http/basics_of_http/index.html new file mode 100644 index 0000000000..a00d7fe410 --- /dev/null +++ b/files/id/web/http/basics_of_http/index.html @@ -0,0 +1,51 @@ +--- +title: Basics of HTTP +slug: Web/HTTP/Basics_of_HTTP +tags: + - Guide + - HTTP + - NeedsTranslation + - Overview + - TopicStub +translation_of: Web/HTTP/Basics_of_HTTP +--- +<div>{{HTTPSidebar}}</div> + +<p>HTTP adalah sebuah protokol yang dapat diperluas. HTTP bergantung pada beberapa konsep dasar seperti the notion of resources and URIs, a simple structure of messages, and a client-server structure for the communication flow. On top of these basic concepts, numerous extensions have appeared over the years, adding new functionality and new semantics by creating new HTTP methods or headers.</p> + +<h2 id="Articles">Articles</h2> + +<dl> + <dt><a href="/en-US/docs/Web/HTTP/Overview">Overview of HTTP</a></dt> + <dd>Describes what HTTP is and its role in the Web architecture, its position in the protocol stack.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP">Evolution of HTTP</a></dt> + <dd>HTTP was created in the early 1990s and has been extended several times. This article goes through its history and describes HTTP/0.9, HTTP/1.0, HTTP/1.1, and the modern HTTP/2 as well as minor novelties introduced over the years.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Negotiating_an_HTTP_version">Negotiating an HTTP version</a></dt> + <dd>Explains how a client and a server can negotiate a specific HTTP version and eventually upgrade the protocol version used.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Resources_and_URIs">Resources and URIs</a></dt> + <dd>A brief introduction of the notion of resources, identifiers, and locations on the Web.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web">Identifying resources on the Web</a></dt> + <dd>Describes how Web resources are referenced and how to locate them.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">Data URIs</a></dt> + <dd>A specific kind of URIs that directly embeds the resource it represents. Data URIs are very convenient, but have some caveats.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Resource_URLs">Resource URLs</a> {{Non-standard_Inline}}</dt> + <dd>Resource URLs, URLs prefixed with the <code>resource:</code> scheme, are used by Firefox and Firefox browser extensions to load resources internally, but some of the information is available to sites the browser connects to as well.</dd> + <dt>Separating identity and location of a resource: the Alt-Svc HTTP header</dt> + <dd>Most of the time identity and location of a Web resource are shared, this can be changed with the {{HTTPHeader("Alt-Svc")}} header.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME types</a></dt> + <dd>Since HTTP/1.0, different types of content can be transmitted. This article explains how this is done using the {{HTTPHeader("Content-Type")}} header and the MIME standard.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Choosing_between_www_and_non-www_URLs">Choosing between www and non-www URLs</a></dt> + <dd>Advice on using a www-prefixed domain or not, this article explains the consequences of the choice as well as how to make it.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Flow_of_an_HTTP_session">Flow of an HTTP session</a></dt> + <dd>This fundamental article describes a typical HTTP session: what happens under the hood when you click on a link in your browser…</dd> + <dt><a href="/en-US/docs/Web/HTTP/Messages">HTTP Messages</a></dt> + <dd>HTTP Messages transmitted during requests or responses have a very clear structure; this introductory article describes this structure, its purpose and its possibilities.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Frame and message structure in HTTP_2">Frame and message structure in HTTP/2</a></dt> + <dd>HTTP/2 encapsulates and represents HTTP/1.x messages in a binary frame. This article explains the frame structure, its purpose and the way it is encoded.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Connection_management_in_HTTP_1.x">Connection management in HTTP/1.x</a></dt> + <dd>HTTP/1.1 was the first version of HTTP to support persistent connection and pipelining. This article explains these two concepts.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Connection_management_in_HTTP_2">Connection management in HTTP/2</a></dt> + <dd>HTTP/2 completely revisited how connections are created and maintained: this article explains how HTTP frames allow multiplexing and solve the 'head-of-line' blocking problem of former HTTP versions.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Content_negotiation">Content Negotiation</a></dt> + <dd>HTTP introduces a set of headers, starting with <code>Accept-</code> as a way for a browser to announce the format, language, or encoding it prefers. This article explains how this advertisement happens, how the server is expected to react and how it will choose the most adequate response.</dd> +</dl> diff --git a/files/id/web/http/gambaran/index.html b/files/id/web/http/gambaran/index.html new file mode 100644 index 0000000000..b06d42ac23 --- /dev/null +++ b/files/id/web/http/gambaran/index.html @@ -0,0 +1,173 @@ +--- +title: Gambaran HTTP +slug: Web/HTTP/Gambaran +translation_of: Web/HTTP/Overview +--- +<div>{{HTTPSidebar}}</div> + +<p class="summary"><span class="seoSummary"><strong>HTTP</strong> adalah</span> 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.</p> + +<p><img alt="A Web document is the composition of different resources" src="https://mdn.mozillademos.org/files/13677/Fetching_a_page.png" style="height: 319px; width: 545px;"></p> + +<p>Client dan Server berkomunikasi dengan bertukar pesan individual (sebagai lawan aliran data). Pesan yang dikirim oleh Client, biasanya browser Web, disebut permintaan (<em>requests</em>) dan pesan yang dikirim oleh server sebagai jawaban disebut respons (<em>responses</em>)</p> + +<p><img alt="HTTP as an application layer protocol, on top of TCP (transport layer) and IP (network layer) and below the presentation layer." src="https://mdn.mozillademos.org/files/13673/HTTP%20&%20layers.png" style="float: left; height: 299px; padding-bottom: 15px; padding-right: 20px; width: 418px;">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.</p> + +<h2 id="Components_of_HTTP-based_systems">Components of HTTP-based systems</h2> + +<p>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.</p> + +<p>Each individual request is sent to a server, which handles it and provides an answer, called the <em>response</em>. 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.</p> + +<p><img alt="Client server chain" src="https://mdn.mozillademos.org/files/13679/Client-server-chain.png"></p> + +<p>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.</p> + +<h3 id="Client_the_user-agent">Client: the user-agent</h3> + +<p>The <em>user-agent</em> 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.</p> + +<p>The browser is <strong>always</strong> the entity initiating the request. It is never the server (though some mechanisms have been added over the years to simulate server-initiated messages).</p> + +<p>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.</p> + +<p>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.</p> + +<h3 id="The_Web_server">The Web server</h3> + +<p>On the opposite side of the communication channel, is the server, which <em>serves</em> 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.</p> + +<p>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.</p> + +<h3 id="Proxies">Proxies</h3> + +<p>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 <strong>proxies</strong>. 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:</p> + +<ul> + <li>caching (the cache can be public or private, like the browser cache)</li> + <li>filtering (like an antivirus scan or parental controls)</li> + <li>load balancing (to allow multiple servers to serve the different requests)</li> + <li>authentication (to control access to different resources)</li> + <li>logging (allowing the storage of historical information)</li> +</ul> + +<h2 id="Basic_aspects_of_HTTP">Basic aspects of HTTP</h2> + +<h3 id="HTTP_is_simple">HTTP is simple</h3> + +<p>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.</p> + +<h3 id="HTTP_is_extensible">HTTP is extensible</h3> + +<p>Introduced in HTTP/1.0, <a href="/en-US/docs/Web/HTTP/Headers">HTTP headers</a> 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.</p> + +<h3 id="HTTP_is_stateless_but_not_sessionless">HTTP is stateless, but not sessionless</h3> + +<p>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.</p> + +<h3 id="HTTP_and_connections">HTTP and connections</h3> + +<p>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 <em>reliable</em>, 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.</p> + +<p>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.</p> + +<p>In order to mitigate this flaw, HTTP/1.1 introduced <em>pipelining</em> (which proved difficult to implement) and <em>persistent connections</em>: 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.</p> + +<p>Experiments are in progress to design a better transport protocol more suited to HTTP. For example, Google is experimenting with <a href="https://en.wikipedia.org/wiki/QUIC">QUIC</a> which builds on UDP to provide a more reliable and efficient transport protocol.</p> + +<h2 id="What_can_be_controlled_by_HTTP">What can be controlled by HTTP</h2> + +<p>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 <em>origin constraint</em>, by contrast, has only been added in the 2010s.</p> + +<p>Here is a list of common features controllable with HTTP.</p> + +<ul> + <li><em><a href="/en-US/docs/Web/HTTP/Caching">Caching</a></em><br> + How documents are cached can be controlled by HTTP. The server can instruct proxies and clients, about what to cache and for how long. The client can instruct intermediate cache proxies to ignore the stored document.</li> + <li><em>Relaxing the origin constraint</em><br> + To prevent snooping and other privacy invasions, Web browsers enforce strict separation between Web sites. Only pages from the <strong>same origin</strong> can access all the information of a Web page. Though such constraint is a burden to the server, HTTP headers can relax this strict separation on the server side, allowing a document to become a patchwork of information sourced from different domains; there could even be security-related reasons to do so.</li> + <li><em>Authentication</em><br> + Some pages may be protected so that only specific users can access them. Basic authentication may be provided by HTTP, either using the {{HTTPHeader("WWW-Authenticate")}} and similar headers, or by setting a specific session using <a href="/en-US/docs/Web/HTTP/Cookies">HTTP cookies</a>.</li> + <li><em><a href="/en-US/docs/Web/HTTP/Proxy_servers_and_tunneling">Proxy and tunneling</a></em><br> + Servers or clients are often located on intranets and hide their true IP address from other computers. HTTP requests then go through proxies to cross this network barrier. Not all proxies are HTTP proxies. The SOCKS protocol, for example, operates at a lower level. Other protocols, like ftp, can be handled by these proxies.</li> + <li><em>Sessions</em><br> + Using HTTP cookies allows you to link requests with the state of the server. This creates sessions, despite basic HTTP being a state-less protocol. This is useful not only for e-commerce shopping baskets, but also for any site allowing user configuration of the output.</li> +</ul> + +<h2 id="HTTP_flow">HTTP flow</h2> + +<p>When a client wants to communicate with a server, either the final server or an intermediate proxy, it performs the following steps:</p> + +<ol> + <li>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.</li> + <li>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: + <pre class="line-numbers language-html notranslate"><code class="language-html">GET / HTTP/1.1 +Host: developer.mozilla.org +Accept-Language: fr</code></pre> + </li> + <li>Read the response sent by the server, such as: + <pre class="line-numbers language-html notranslate"><code class="language-html">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)</code></pre> + </li> + <li>Close or reuse the connection for further requests.</li> +</ol> + +<p>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.</p> + +<h2 id="HTTP_Messages">HTTP Messages</h2> + +<p>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 <em>frame</em>, 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.</p> + +<p>There are two types of HTTP messages, requests and responses, each with its own format.</p> + +<h3 id="Requests">Requests</h3> + +<p>An example HTTP request:</p> + +<p><img alt="A basic HTTP request" src="https://mdn.mozillademos.org/files/13687/HTTP_Request.png" style="height: 336px; width: 693px;"></p> + +<p>Requests consists of the following elements:</p> + +<ul> + <li>An HTTP <a href="/en-US/docs/Web/HTTP/Methods">method</a>, usually a verb like {{HTTPMethod("GET")}}, {{HTTPMethod("POST")}} or a noun like {{HTTPMethod("OPTIONS")}} or {{HTTPMethod("HEAD")}} that defines the operation the client wants to perform. Typically, a client wants to fetch a resource (using <code>GET</code>) or post the value of an <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML form</a> (using <code>POST</code>), though more operations may be needed in other cases.</li> + <li>The path of the resource to fetch; the URL of the resource stripped from elements that are obvious from the context, for example without the {{Glossary("protocol")}} (<code>http://</code>), the {{Glossary("domain")}} (here, <code>developer.mozilla.org</code>), or the TCP {{Glossary("port")}} (here, <code>80</code>).</li> + <li>The version of the HTTP protocol.</li> + <li>Optional <a href="/en-US/docs/Web/HTTP/Headers">headers</a> that convey additional information for the servers.</li> + <li>Or a body, for some methods like <code>POST</code>, similar to those in responses, which contain the resource sent.</li> +</ul> + +<h3 id="Responses">Responses</h3> + +<p>An example response:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13691/HTTP_Response.png" style="height: 494px; width: 758px;"></p> + +<p>Responses consist of the following elements:</p> + +<ul> + <li>The version of the HTTP protocol they follow.</li> + <li>A <a href="/en-US/docs/Web/HTTP/Status">status code</a>, indicating if the request was successful, or not, and why.</li> + <li>A status message, a non-authoritative short description of the status code.</li> + <li>HTTP <a href="/en-US/docs/Web/HTTP/Headers">headers</a>, like those for requests.</li> + <li>Optionally, a body containing the fetched resource.</li> +</ul> + +<h2 id="APIs_based_on_HTTP">APIs based on HTTP</h2> + +<p>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.</p> + +<p>Another API, <a href="/en-US/docs/Web/API/Server-sent_events">server-sent events</a>, 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.</p> + +<h2 id="Conclusion">Conclusion</h2> + +<p>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.</p> + +<p>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 <a href="/en-US/docs/Tools/Network_Monitor">HTTP message monitor</a>.</p> diff --git a/files/id/web/http/index.html b/files/id/web/http/index.html new file mode 100644 index 0000000000..3e2144fb57 --- /dev/null +++ b/files/id/web/http/index.html @@ -0,0 +1,81 @@ +--- +title: HTTP +slug: Web/HTTP +tags: + - HTTP + - Referensi + - Web +translation_of: Web/HTTP +--- +<div>{{HTTPSidebar}}</div> + +<p class="summary"><strong><dfn>Hypertext Transfer Protocol (HTTP)</dfn></strong> adalah sebuah protokol <a class="external" href="http://en.wikipedia.org/wiki/Application_Layer">lapisan-aplikasi</a> untuk mentransmisi dokumen <em>hypermedia</em>, seperti HTML. Ini dirancang untuk komunikasi antara peramban web dan server web, meskipun bisa digunakan untuk keperluan lain juga. Ini mengikuti sebuah <a class="external" href="https://en.wikipedia.org/wiki/Client%E2%80%93server_model">model klien-server</a> klasik, dengan sebuah klien membuka sebuah koneksi, membuat sebuah permintaan (<em>request)</em>, dan menunggu hingga mendapatkan sebuah respon. Ini juga sebuah <a class="external" href="http://en.wikipedia.org/wiki/Stateless_protocol">protokol tanpa-keadaan</a>, maksudnya server tidak menyimpan data (keadaan) antara kedua permintaan. Meskipun kadang berdasarkan pada sebuah lapisan TCP/IP, bisa digunakan pada <a class="external" href="http://en.wikipedia.org/wiki/Transport_Layer">lapisan transport</a> andal apa saja; berarti sebuah protokol tidak kehilangan pesan secara diam-diam, seperti UDP.</p> + +<div class="column-container"> +<div class="column-half"> +<h2 id="Tutorial">Tutorial</h2> + +<p>Belajar bagaimana untuk menggunakan HTTP dengan panduan dan tutorial.</p> + +<dl> + <dt><a href="/en-US/docs/Web/HTTP/Overview">Ikhtisan dari HTTP</a></dt> + <dd>Fitur dasar dari protokol klien-server: apa yang bisa digunakan dan penggunaannya.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Caching">HTTP <em>Cache</em></a></dt> + <dd><em>Caching</em> sangat penting untuk mempercepat situs web. Artikel ini menjelaskan perbedaan metode dalam <em>caching </em> dan bagaimana menggunakan HTTP Headers untuk mengendalikannya.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Cookies">HTTP Kuki</a></dt> + <dd>Bagaimana kuki bekerja didefinisi oleh <a class="external" href="http://tools.ietf.org/html/rfc6265">RFC 6265</a>. Pada penerimaan sebuah permintaan HTTP, sebuah server bisa mengirim sebuah <em>header</em> <code>Set-Cookie</code> dengan responnya. Klien kemudian mengembalikan nilai kuki dengan setiap permintaan ke server yang sama dalam bentuk header permintaan <code>Cookie</code>. Kuki juga dapat ditetapkan untuk kadaluarsa pada tanggal tertentu, atau pembatasan pada domain dan jalur tertentu.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing (CORS)</a></dt> + <dd><strong>Permintaan Cross-site HTTP</strong> adalah permintaan HTTP untuk sumber daya dari <strong>domain lain</strong> kemduian domain dari sumberdaya membuat permintaan. Contohnya, sebuah laman HTML dari Domain A (<code>http://domaina.example/</code>), membuat sebuah permintaan untuk sebuah gambar pada Domain B (<code>http://domainb.foo/image.jpg</code>) malalui elemen <code>img</code>. Laman situs saat ini sangat biasa memuat sumber daya <em>cross-site</em>, termasuk CSS <em>sytlesheets</em>, gambar, skrip, dan sumber daya lainnya. CORS memungkinkan pengembang web untuk mengendaikan bagaimana situs mereka bereaksi kepada permintaan <em>cross-site</em>.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP">Perkembangan dari HTTP</a></dt> + <dd>Sebuah deskripsi dari perubahan antara HTTP veri awal, ke HTTP/2 moderen dan seterusnya.</dd> + <dt><a href="https://wiki.mozilla.org/Security/Guidelines/Web_Security">Panduan keamanan situs Mozilla</a></dt> + <dd>Sebuah koleksi dari tip untuk membantu tim operasional dengan membuat aplikasi web yang aman.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Messages">Pesan HTTP (HTTP <em>Messages</em>)</a></dt> + <dd>Penjelasan tipe dan struktur dari berbagai jenis dan struktur dari HTTP/1.x dan HTTP/2.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Session">Sebuah sesi HTTP yang khas</a></dt> + <dd>Menunjukan dan menjelaskan alur dari sebuah sesi HTTP biasa.</dd> + <dt> </dt> + <dt><a href="/en-US/docs/Web/HTTP/Connection_management_in_HTTP_1.x">Manajemen koneksi pada HTTP/1.x</a></dt> + <dd>Menjelaskan tiga model manajemen koneksi yang tersedia pada HTTP/1.x, serta kelebihan dan kekurangan mereka.</dd> +</dl> +</div> + +<div class="column-half"> +<h2 id="Referensi">Referensi</h2> + +<p>Jelajahi dokumentasi referensi HTTP yang terperinci.</p> + +<dl> + <dt><a href="/en-US/docs/Web/HTTP/Headers">HTTP <em>Headers</em></a></dt> + <dd>Pesan HTTP digunakan untuk menjelaskan secara tepat sumber daya atau perilaku dari server atau klien. <em>header</em> kepemilikan khusus bisa ditambahkan dengan menggunakan awalan <code>X-</code>; yang lain pada sebuah <a class="external" href="http://www.iana.org/assignments/message-headers/perm-headers.html">registri IANA</a>, yang konten aslinya didefiniskan di <a class="external" href="http://tools.ietf.org/html/rfc4229">RFC 4229</a>. IANA juga mengelola <a class="external" href="http://www.iana.org/assignments/message-headers/prov-headers.html">registri dari usulan baru header pesan HTTP</a>.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Methods">Metode Permintaan HTTP</a></dt> + <dd>Berbagai operasi yang bisa dilakukan dengan HTTP: {{HTTPMethod("GET")}}, {{HTTPMethod("POST")}}, tetapi juga permintaan yang kurang umum seperti {{HTTPMethod("OPTIONS")}}, {{HTTPMethod("DELETE")}} atau {{HTTPMethod("TRACE")}}.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Response_codes">Kode Status Respon HTTP</a></dt> + <dd>Kode respon HTTP menunjukan apakah permintaan HTTP tertentu berhasil diselesaikan. Respon dikelompokan dalam lima kelas: respon informasi, respon sukses, pengaihan, kesalahan klien, dan kealahan server.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy">Petunjuk CSP (CSP directives)</a></dt> + <dd>Bidang header respon {{HTTPHeader("Content-Security-Policy")}} memungkinkan administrator situs web untuk mengendalikan sumber daya <em>user agent</em> yang memungkinkan untuk dimuat pada halaman tertentu. Dengan beberapa pengecualian, sebagian besar kebijakan melibatkan penentuan asal server dan skrip titik-akhir (<em>endpoints</em>). </dd> +</dl> + +<h2 id="Alat_sumber_daya">Alat & sumber daya</h2> + +<p>Alat dan sumber daya yang berguna untuk memahami dan <em>debugging</em> HTTP.</p> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Tools">Firefox Developer Tools</a></dt> + <dd><a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor">Network monitor</a></dd> + <dt><a href="https://observatory.mozilla.org/">Mozilla Observatory</a></dt> + <dd> + <p>Sebuah proyek yang dideain untuk membantu pengembang, administrator sistem, dan keamanan profesional mengkonfigurasi situs mereka secara aman.</p> + </dd> + <dt><a href="https://redbot.org/">RedBot</a></dt> + <dd>Alat untuk memeriksa header terkati-cache Anda.</dd> + <dt><a href="http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/">Bagaimana Peramban Bekerja</a></dt> + <dd>Sebuah artikel yang sangat komprehensif tentang internal peramban dan alur permintaan melalui protokol HTTP. Sebuah artikel yang HARUS-DIBACA oleh tiap pengembang web.</dd> +</dl> + +<p> </p> +</div> +</div> diff --git a/files/id/web/http/methods/get/index.html b/files/id/web/http/methods/get/index.html new file mode 100644 index 0000000000..ff8f8cdbab --- /dev/null +++ b/files/id/web/http/methods/get/index.html @@ -0,0 +1,73 @@ +--- +title: GET +slug: Web/HTTP/Methods/GET +tags: + - HTTP + - Referensi + - Request method +translation_of: Web/HTTP/Methods/GET +--- +<div>{{HTTPSidebar}}</div> + +<p>Request <strong>HTTP <code>GET</code> method</strong> merupakan representasi dari resource spesifik. Request menggunakan <code>GET</code> hanya menerima data.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Request has body</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Successful response has body</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">{{Glossary("Safe")}}</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">{{Glossary("Idempotent")}}</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">{{Glossary("Cacheable")}}</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Allowed in HTML forms</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox">GET /index.html +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Judul</th> + </tr> + <tr> + <td>{{RFC("7231", "GET", "4.3.1")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Browser">Kompabilitas Browser</h2> + +<p class="hidden">Tabel Kompabilitas pada halaman ini adalah hasil dari structured data. Jika anda ingin berkontribusi, Silakan cek <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> dan kirimkan pull request.</p> + +<p>{{Compat("http.methods.GET")}}</p> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li>{{HTTPHeader("Range")}}</li> +</ul> diff --git a/files/id/web/http/methods/index.html b/files/id/web/http/methods/index.html new file mode 100644 index 0000000000..1045732cc2 --- /dev/null +++ b/files/id/web/http/methods/index.html @@ -0,0 +1,76 @@ +--- +title: HTTP request methods +slug: Web/HTTP/Methods +tags: + - HTTP + - Methods + - Reference + - TopicStub +translation_of: Web/HTTP/Methods +--- +<div>{{HTTPSidebar}}</div> + +<div>HTTP mendefinisikan seperangkat <strong>metode permintaan</strong> untuk menunjukkan tindakan yang diinginkan yang akan dilakukan untuk sumber daya tertentu. Meskipun mereka juga bisa menjadi kata benda, metode permintaan ini kadang-kadang disebut sebagai <em>verba HTTP</em>. Masing-masing menerapkan semantik yang berbeda, namun beberapa fitur umum digunakan bersama oleh mereka: mis. Metode permintaan dapat berupa {{glossary("safe")}}, {{glossary("idempotent")}}, atau {{glossary("cacheable")}}.</div> + +<div> </div> + +<dl> + <dt><code><a href="/id/docs/Web/HTTP/Methods/GET">GET</a></code></dt> + <dd>Metode <code>GET</code> meminta representasi sumber daya yang ditentukan. Permintaan menggunakan <code>GET</code> seharusnya hanya mengambil data..</dd> + <dt><code><a href="/id/docs/Web/HTTP/Methods/HEAD">HEAD</a></code></dt> + <dd>Metode <code>HEAD </code>meminta tanggapan yang identik dengan permintaan <code>GET</code>, namun tanpa respon body.</dd> + <dt><code><a href="/id/docs/Web/HTTP/Methods/POST">POST</a></code></dt> + <dd>Metode <code>POST </code>digunakan untuk mengirimkan entitas ke sumber daya yang ditentukan, sering menyebabkan perubahan pada keadaan atau efek samping pada server.</dd> + <dt><code><a href="/id/docs/Web/HTTP/Methods/PUT">PUT</a></code></dt> + <dd> + <p>Metode <code>PUT </code>menggantikan semua representasi terkini dari sumber target dengan muatan permintaan.</p> + </dd> + <dt><code><a href="/id/docs/Web/HTTP/Methods/DELETE">DELETE</a></code></dt> + <dd>Metode <code>DELETE </code>akan menghapus sumber daya yang ditentukan.</dd> + <dt><code><a href="/id/docs/Web/HTTP/Methods/CONNECT">CONNECT</a></code></dt> + <dd> + <p>Metode <code>CONNECT </code>menetapkan terowongan ke server yang diidentifikasi oleh sumber target.</p> + </dd> + <dt><code><a href="/id/docs/Web/HTTP/Methods/OPTIONS">OPTIONS</a></code></dt> + <dd>Metode <code>OPTIONS </code>digunakan untuk menggambarkan opsi komunikasi untuk sumber target.</dd> + <dt><code><a href="/id/docs/Web/HTTP/Methods/TRACE">TRACE</a></code></dt> + <dd> + <p>Metode <code>TRACE </code>melakukan tes pesan loop-back di sepanjang jalan menuju sumber daya target.</p> + </dd> + <dt><code><a href="/id/docs/Web/HTTP/Methods/PATCH">PATCH</a></code></dt> + <dd>Metode <code>PATCH </code>digunakan untuk menerapkan modifikasi sebagian pada sumber daya.</dd> +</dl> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Judul</th> + <th scope="col">Komentar</th> + </tr> + <tr> + <td>{{RFC("7231", "Request methods", "4")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> + <td>Specifies GET, HEAD, POST, PUT, DELETE, CONNECT, OPTIONS, TRACE.</td> + </tr> + <tr> + <td>{{RFC("5789", "Patch method", "2")}}</td> + <td>PATCH Method for HTTP</td> + <td>Specifies PATCH.</td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Browser">Kompabilitas Browser</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("http.methods")}}</p> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTTP/Headers">HTTP headers</a></li> +</ul> diff --git a/files/id/web/http/proxy_servers_and_tunneling/index.html b/files/id/web/http/proxy_servers_and_tunneling/index.html new file mode 100644 index 0000000000..f035225649 --- /dev/null +++ b/files/id/web/http/proxy_servers_and_tunneling/index.html @@ -0,0 +1,100 @@ +--- +title: Proxy servers and tunneling +slug: Web/HTTP/Proxy_servers_and_tunneling +tags: + - HTTP + - HTTP Tunneling + - NeedsTranslation + - Proxies + - Proxy + - TopicStub +translation_of: Web/HTTP/Proxy_servers_and_tunneling +--- +<div>{{HTTPSidebar}}</div> + +<p class="summary">When navigating through different networks of the Internet, proxy servers and HTTP tunnels are facilitating access to content on the World Wide Web. A proxy can be on the user's local computer, or anywhere between the user's computer and a destination server on the Internet. This page outlines some basics about proxies and introduces a few configuration options.</p> + +<p>There are two types of proxies: <strong>forward proxies</strong> (or tunnel, or gateway) and<strong> reverse proxies</strong> (used to control and protect access to a server for load-balancing, authentication, decryption or caching).</p> + +<h2 id="Forward_proxies">Forward proxies</h2> + +<p>A forward proxy, or gateway, or just "proxy" provides proxy services to a client or a group of clients. There are likely hundreds of thousands of open forward proxies on the Internet. They store and forward Internet services (like the DNS, or web pages) to reduce and control the bandwidth used by the group.</p> + +<p>Forward proxies can also be anonymous proxies and allow users to hide their IP address while browsing the Web or using other Internet services. <a href="https://www.torproject.org/">TOR</a> (The Onion Router), routes internet traffic through multiple proxies for anonymity.</p> + +<h2 id="Reverse_proxies">Reverse proxies</h2> + +<p>As the name implies, a reverse proxy does the opposite of what a forward proxy does: A forward proxy acts on behalf of clients (or requesting hosts). Forward proxies can hide the identities of clients whereas reverse proxies can hide the identities of servers. Reverse proxies have several use cases, a few are:</p> + +<ul> + <li>Load balancing: distribute the load to several web servers,</li> + <li>Cache static content: offload the web servers by caching static content like pictures,</li> + <li>Compression: compress and optimize content to speed up load time.</li> +</ul> + +<h2 id="Forwarding_client_information_through_proxies">Forwarding client information through proxies</h2> + +<p>Proxies can make requests appear as if they originated from the proxy's IP address. This can be useful if a proxy is used to provide client anonymity, but in other cases information from the original request is lost. The IP address of the original client is often used for debugging, statistics, or generating location-dependent content. A common way to disclose this information is by using the following HTTP headers:</p> + +<p>The standardized header:</p> + +<dl> + <dt>{{HTTPHeader("Forwarded")}}</dt> + <dd>Contains information from the client-facing side of proxy servers that is altered or lost when a proxy is involved in the path of the request.</dd> +</dl> + +<p>Or the de-facto standard versions:</p> + +<dl> + <dt>{{HTTPHeader("X-Forwarded-For")}} {{non-standard_inline}}</dt> + <dd>Identifies the originating IP addresses of a client connecting to a web server through an HTTP proxy or a load balancer.</dd> + <dt>{{HTTPHeader("X-Forwarded-Host")}} {{non-standard_inline}}</dt> + <dd>Identifies the original host requested that a client used to connect to your proxy or load balancer.</dd> + <dt>{{HTTPHeader("X-Forwarded-Proto")}} {{non-standard_inline}}</dt> + <dd>identifies the protocol (HTTP or HTTPS) that a client used to connect to your proxy or load balancer.</dd> +</dl> + +<p>To provide information about the proxy itself (not about the client connecting to it), the <code>Via</code> header can be used.</p> + +<dl> + <dt>{{HTTPHeader("Via")}}</dt> + <dd>Added by proxies, both forward and reverse proxies, and can appear in the request headers and the response headers.</dd> +</dl> + +<h2 id="HTTP_tunneling">HTTP tunneling</h2> + +<p>Tunneling transmits private network data and protocol information through public network by encapsulating the data. HTTP tunneling is using a protocol of higher level (HTTP) to transport a lower level protocol (TCP).</p> + +<p>The HTTP protocol specifies a request method called {{HTTPMethod("CONNECT")}}. It starts two-way communications with the requested resource and can be used to open a tunnel. This is how a client behind an HTTP proxy can access websites using SSL (i.e. HTTPS, port 443). Note, however, that not all proxy servers support the <code>CONNECT</code> method or limit it to port 443 only.</p> + +<p>See also the <a href="https://en.wikipedia.org/wiki/HTTP_tunnel">HTTP tunnel article on Wikipedia</a>.</p> + +<h2 id="Proxy_Auto-Configuration_PAC">Proxy Auto-Configuration (PAC)</h2> + +<p>A <a href="/en-US/docs/Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_(PAC)_file">Proxy Auto-Configuration (PAC)</a> file is a <a href="/en-US/docs/Web/JavaScript">JavaScript</a> function that determines whether web browser requests (HTTP, HTTPS, and FTP) go directly to the destination or are forwarded to a web proxy server. The JavaScript function contained in the PAC file defines the function:</p> + +<p id="Saving_the_Auto-Config_File_Setting_the_MIME_Type">The auto-config file should be saved to a file with a <code>.pac</code> filename extension:</p> + +<pre class="syntaxbox notranslate">proxy.pac</pre> + +<p>And the MIME type set to:</p> + +<pre class="syntaxbox notranslate">application/x-ns-proxy-autoconfig</pre> + +<p>The file consists of a function called <code>FindProxyForURL</code>. The example below 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:</p> + +<pre class="brush: js notranslate">function FindProxyForURL(url, host) { + if (isResolvable(host)) + return "DIRECT"; + else + return "PROXY proxy.mydomain.com:8080"; +}</pre> + +<p>See <a href="/en-US/docs/Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_(PAC)_file">Proxy Auto-Configuration (PAC)</a> for more examples.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{HTTPMethod("CONNECT")}}</li> + <li><a href="https://en.wikipedia.org/wiki/Proxy_server">Proxy server on Wikipedia</a></li> +</ul> 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 +--- +<div>{{HTTPSidebar}}</div> + +<p>File <strong>Proxy Auto-Configuration (PAC)</strong> 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:</p> + +<pre class="brush: js notranslate">function FindProxyForURL(url, host) { + // ... +}</pre> + +<h2 id="Sintaksis">Sintaksis</h2> + +<pre class="syntaxbox notranslate">function FindProxyForURL(<var>url</var>, <var>host</var>)</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code><var>url</var></code></dt> + <dd>URL sedang diakses. Jalur dan komponen kueri <code>https://</code>URL dihilangkan. Di Chrome (versi 52 hingga 73), Anda dapat menonaktifkan ini dengan menyetel <code>PacHttpsUrlStrippingEnabled</code>ke <code>false</code>dalam kebijakan atau dengan meluncurkan dengan <code>--unsafe-pac-url</code>bendera 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 <code>network.proxy.autoconfig_url.include_path</code>.</dd> + <dt><code><var>host</var></code></dt> + <dd>Nama host diekstrak dari URL. Ini hanya untuk kenyamanan; itu adalah string yang sama seperti antara <code>://</code>dan yang pertama <code>:</code>atau <code>/</code>setelah itu. Nomor port tidak termasuk dalam parameter ini. Ini dapat diekstrak dari URL bila perlu.</dd> +</dl> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Mengembalikan string yang menjelaskan konfigurasi. Format string ini ditentukan dalam <strong>format nilai pengembalian</strong> di bawah ini.</p> + +<h3 id="Format_nilai_pengembalian">Format nilai pengembalian</h3> + +<ul> + <li>Fungsi JavaScript mengembalikan satu string</li> + <li>Jika stringnya null, tidak ada proxy yang harus digunakan</li> + <li>String dapat berisi sejumlah blok penyusun berikut, dipisahkan oleh titik koma:</li> +</ul> + +<dl> + <dt><code>DIRECT</code></dt> + <dd>Koneksi harus dibuat secara langsung, tanpa proxy apa pun</dd> + <dt><code>PROXY <em>host:port</em></code></dt> + <dd>Proksi yang ditentukan harus digunakan</dd> + <dt><code>SOCKS <em>host:port</em></code></dt> + <dd>Server SOCKS yang ditentukan harus digunakan</dd> +</dl> + +<p>Versi terbaru Firefox juga mendukung:</p> + +<dl> + <dt><code>HTTP <em>host:port</em></code></dt> + <dd>Proksi yang ditentukan harus digunakan</dd> + <dt><code>HTTPS <em>host:port</em></code></dt> + <dd>Proksi HTTPS yang ditentukan harus digunakan</dd> + <dt><code>SOCKS4 <em>host:port</em></code></dt> + <dt><code>SOCKS5 <em>host:port</em></code></dt> + <dd>Server SOCKS yang ditentukan (dengan versi SOCK yang ditentukan) harus digunakan</dd> +</dl> + +<p>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.</p> + +<p>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.</p> + +<p>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.</p> + +<h4 id="Contoh">Contoh</h4> + +<dl> + <dt><code>PROXY w3proxy.netscape.com:8080; PROXY mozilla.netscape.com:8081</code></dt> + <dd>Proksi utama adalah w3proxy: 8080; jika turun, mulailah menggunakan mozilla: 8081 hingga proxy utama muncul lagi.</dd> + <dt><code>PROXY w3proxy.netscape.com:8080; PROXY mozilla.netscape.com:8081; DIRECT</code></dt> + <dd>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.)</dd> + <dt><code>PROXY w3proxy.netscape.com:8080; SOCKS socks:1080</code></dt> + <dd>Gunakan SOCKS jika proxy utama mati.</dd> +</dl> + +<p id="Saving_the_Auto-Config_File_Setting_the_MIME_Type">File konfigurasi otomatis harus disimpan ke file dengan ekstensi nama file .pac:</p> + +<pre class="syntaxbox notranslate">proxy.pac</pre> + +<p>Dan tipe MIME harus disetel ke:</p> + +<pre class="syntaxbox notranslate">application/x-ns-proxy-autoconfig</pre> + +<p>Selanjutnya, Anda harus mengkonfigurasi server Anda untuk memetakan ekstensi nama file .pac ke jenis MIME.</p> + +<div class="note"> +<p><strong>Catatan: </strong></p> + +<ul> + <li>Fungsi JavaScript harus selalu disimpan ke file dengan sendirinya tetapi tidak disematkan dalam file HTML atau file lainnya.</li> + <li>Contoh-contoh di akhir dokumen ini lengkap. Tidak ada sintaks tambahan yang diperlukan untuk menyimpannya ke dalam file dan menggunakannya. (Tentu saja, JavaScripts harus diedit untuk mencerminkan nama domain dan / atau subnet situs Anda.)</li> +</ul> +</div> + +<h2 id="Fungsi_dan_lingkungan_yang_telah_ditentukan_sebelumnya">Fungsi dan lingkungan yang telah ditentukan sebelumnya</h2> + +<p>Fungsi-fungsi ini dapat digunakan untuk membuat file PAC:</p> + +<ul> + <li>Kondisi berbasis nama host + + <ul> + <li><code><a href="#isPlainHostName">isPlainHostName()</a></code></li> + <li><code><a href="#dnsDomainIs">dnsDomainIs()</a></code></li> + <li><code><a href="#localHostOrDomainIs">localHostOrDomainIs()</a></code></li> + <li><code><a href="#isResolvable">isResolvable()</a></code></li> + <li><code><a href="#isInNet">isInNet()</a></code></li> + </ul> + </li> + <li>Fungsi utilitas terkait + <ul> + <li><code><a href="#dnsResolve">dnsResolve()</a></code></li> + <li><code><a href="#convert_addr">convert_addr()</a></code></li> + <li><code><a href="#myIpAddress">myIpAddress()</a></code></li> + <li><code><a href="#dnsDomainLevels">dnsDomainLevels()</a></code></li> + </ul> + </li> + <li>Ketentuan berbasis URL / hostname + <ul> + <li><code><a href="#shExpMatch(str, shexp)">shExpMatch()</a></code></li> + </ul> + </li> + <li>Kondisi berdasarkan waktu + <ul> + <li><code><a href="#weekdayRange">weekdayRange()</a></code></li> + <li><code><a href="#dateRange">dateRange()</a></code></li> + <li><code><a href="#timeRange">timeRange()</a></code></li> + </ul> + </li> + <li>Utilitas pencatatan + <ul> + <li>{{domxref ("Window / alert", "alert ()")}}</li> + </ul> + </li> + <li>Ada satu larik asosiatif (objek) telah ditentukan, karena pada saat itu kode JavaScript tidak dapat mendefinisikannya sendiri: + <ul> + <li><code>ProxyConfig.bindings</code> {{obsolete_inline}}</li> + </ul> + </li> +</ul> + +<div class="note"> +<p><strong>Catatan:</strong> pactester (bagian dari paket <a href="https://github.com/pacparser/pacparser">pacparser</a> ) digunakan untuk menguji contoh sintaks berikut.</p> + +<ul> + <li>File PAC diberi nama <code>proxy.pac</code></li> + <li>Baris perintah: <code>pactester -p ~/pacparser-master/tests/proxy.pac -u http://www.mozilla.org</code>(melewati <code>host</code>parameter <code>www.mozilla.org</code>dan <code>url</code>parameter <code>http://www.mozilla.org</code>)</li> +</ul> +</div> + +<h3 id="isPlainHostName">isPlainHostName ()</h3> + +<h4 id="Sintaksis_2">Sintaksis</h4> + +<pre class="syntaxbox notranslate">isPlainHostName(<var>host</var>)</pre> + +<h4 id="Parameter_2">Parameter</h4> + +<dl> + <dt>tuan rumah</dt> + <dd>Nama host dari URL (tidak termasuk nomor port).</dd> +</dl> + +<h4 id="Deskripsi_2">Deskripsi</h4> + +<p>Benar jika dan hanya jika tidak ada nama domain di nama host (tidak ada titik).</p> + +<h4 id="Contoh_2">Contoh</h4> + +<pre class="brush: js notranslate">isPlainHostName("www.mozilla.org") // false +isPlainHostName("www") // true +</pre> + +<h3 id="dnsDomainIs"><code>dnsDomainIs()</code></h3> + +<h4 id="Sintaksis_3">Sintaksis</h4> + +<pre class="syntaxbox notranslate">dnsDomainIs(<var>host</var>, <var>domain</var>)</pre> + +<h4 id="Parameter_3">Parameter</h4> + +<dl> + <dt>tuan rumah</dt> + <dd>Apakah nama host dari URL.</dd> + <dt>domain</dt> + <dd>Apakah nama domain untuk menguji nama host.</dd> +</dl> + +<h4 id="Deskripsi_3">Deskripsi</h4> + +<p>Mengembalikan nilai benar jika dan hanya jika domain nama host cocok.</p> + +<h4 id="Contoh_3">Contoh</h4> + +<pre class="brush: js notranslate">dnsDomainIs("www.mozilla.org", ".mozilla.org") // true +dnsDomainIs("www", ".mozilla.org") // false +</pre> + +<h3 id="localHostOrDomainIs">localHostOrDomainIs ()</h3> + +<h4 id="Sintaksis_4">Sintaksis</h4> + +<pre class="syntaxbox notranslate">localHostOrDomainIs(<var>host</var>, <var>hostdom</var>)</pre> + +<h4 id="Parameter_4">Parameter</h4> + +<dl> + <dt>tuan rumah</dt> + <dd>Nama host dari URL.</dd> + <dt>tuan rumah</dt> + <dd>Nama host yang sepenuhnya memenuhi syarat untuk dicocokkan.</dd> +</dl> + +<h4 id="Deskripsi_4">Deskripsi</h4> + +<p>Benar jika nama host <em>sama persis</em> dengan nama host yang ditentukan, atau jika tidak ada bagian nama domain dalam nama host, tetapi nama host yang tidak memenuhi syarat cocok.</p> + +<h4 id="Contoh_4">Contoh</h4> + +<pre class="brush: js notranslate">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)</pre> + +<h3 id="isResolvable">isResolvable ()</h3> + +<h4 id="Sintaksis_5">Sintaksis</h4> + +<pre class="syntaxbox notranslate">isResolvable(<var>host</var>)</pre> + +<h4 id="Parameter_5">Parameter</h4> + +<dl> + <dt>tuan rumah</dt> + <dd>adalah nama host dari URL.</dd> +</dl> + +<p>Mencoba menyelesaikan nama host. Mengembalikan nilai benar jika berhasil.</p> + +<h4 id="Contoh_5">Contoh:</h4> + +<pre class="brush: js notranslate">isResolvable("www.mozilla.org") // true +</pre> + +<h3 id="isInNet">isInNet ()</h3> + +<h4 id="Sintaksis_6">Sintaksis</h4> + +<pre class="syntaxbox notranslate">isInNet(<var>host</var>, <var>pattern</var>, <var>mask</var>)</pre> + +<h4 id="Parameter_6">Parameter</h4> + +<dl> + <dt>tuan rumah</dt> + <dd>nama host DNS, atau alamat IP. Jika nama host dilewatkan, itu akan diselesaikan menjadi alamat IP dengan fungsi ini.</dd> + <dt>pola</dt> + <dd>pola alamat IP dalam format yang dipisahkan titik.</dd> + <dt>topeng</dt> + <dd>mask untuk pola alamat IP yang menginformasikan bagian mana dari alamat IP yang harus dicocokkan. 0 berarti abaikan, 255 berarti cocok.</dd> +</dl> + +<p>True jika dan hanya jika alamat IP dari host cocok dengan pola alamat IP yang ditentukan.</p> + +<p>Spesifikasi pola dan topeng dilakukan dengan cara yang sama seperti untuk konfigurasi SOCKS.</p> + +<h4 id="Contoh_6">Contoh:</h4> + +<pre class="brush: js notranslate">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" +} +</pre> + +<h3 id="dnsResolve">dnsResolve ()</h3> + +<pre class="syntaxbox notranslate">dnsResolve(<em>host</em>)</pre> + +<h4 id="Parameter_7">Parameter</h4> + +<dl> + <dt>tuan rumah</dt> + <dd>nama host untuk diselesaikan.</dd> +</dl> + +<p>Menyelesaikan nama host DNS yang diberikan menjadi alamat IP, dan mengembalikannya dalam format yang dipisahkan titik sebagai string.</p> + +<h4 id="Contoh_7">Contoh</h4> + +<pre class="brush: js notranslate">dnsResolve("www.mozilla.org"); // returns the string "104.16.41.2"</pre> + +<h3 id="convert_addr">convert_addr ()</h3> + +<h4 id="Sintaksis_7">Sintaksis</h4> + +<pre class="syntaxbox notranslate">convert_addr(ipaddr)</pre> + +<h4 id="Parameter_8">Parameter</h4> + +<dl> + <dt>ipaddr</dt> + <dd>Alamat bertitik apa pun seperti alamat IP atau topeng.</dd> +</dl> + +<p>Menggabungkan empat byte yang dipisahkan titik menjadi satu kata 4-byte dan mengubahnya menjadi desimal.</p> + +<h4 id="Contoh_8">Contoh</h4> + +<pre class="brush: js notranslate">convert_addr("104.16.41.2"); // returns the decimal number 1745889538</pre> + +<h3 id="myIpAddress">myIpAddress ()</h3> + +<h4 id="Sintaksis_8">Sintaksis</h4> + +<pre class="syntaxbox notranslate">myIpAddress()</pre> + +<h4 id="Parameter_9">Parameter</h4> + +<p><strong>(tidak ada)</strong></p> + +<p>Mengembalikan alamat IP server dari mesin tempat Firefox dijalankan, sebagai string dalam format bilangan bulat yang dipisahkan titik.</p> + +<div class="warning"> +<p>myIpAddress () mengembalikan alamat IP yang sama dengan alamat server yang dikembalikan oleh <strong><code>nslookup localhost</code> </strong>mesin Linux. Itu tidak mengembalikan alamat IP publik.</p> +</div> + +<h4 id="Contoh_9">Contoh</h4> + +<pre class="brush: js notranslate">myIpAddress() //returns the string "127.0.1.1" if you were running Firefox on that localhost</pre> + +<h3 id="dnsDomainLevels">dnsDomainLevels ()</h3> + +<h4 id="Sintaksis_9">Sintaksis</h4> + +<pre class="syntaxbox notranslate">dnsDomainLevels(<var>host</var>)</pre> + +<h4 id="Parameter_10">Parameter</h4> + +<dl> + <dt>tuan rumah</dt> + <dd>adalah nama host dari URL.</dd> +</dl> + +<p>Mengembalikan angka (bilangan bulat) dari level domain DNS (jumlah titik) di nama host.</p> + +<h4 id="Contoh_10">Contoh:</h4> + +<pre class="brush: js notranslate">dnsDomainLevels("www"); // 0 +dnsDomainLevels("mozilla.org"); // 1 +dnsDomainLevels("www.mozilla.org"); // 2 +</pre> + +<h3 id="shExpMatch">shExpMatch ()</h3> + +<h4 id="Sintaksis_10">Sintaksis</h4> + +<pre class="syntaxbox notranslate">shExpMatch(<var>str</var>, <var>shexp</var>)</pre> + +<h4 id="Parameter_11">Parameter</h4> + +<dl> + <dt>str</dt> + <dd>adalah sembarang string untuk dibandingkan (mis. URL, atau nama host).</dd> + <dt>shexp</dt> + <dd>adalah ekspresi shell untuk dibandingkan.</dd> +</dl> + +<p>Mengembalikan nilai benar jika string cocok dengan ekspresi shell yang ditentukan.</p> + +<p><strong>Perhatikan bahwa polanya adalah <em>ekspresi </em><em>shell</em> glob , bukan ekspresi reguler. </strong><code>*</code>dan <code>?</code>selalu didukung, sementara <code>[characters]</code>dan <code>[^characters]</code>didukung oleh beberapa implementasi termasuk Firefox. Ini terutama karena ekspresi diterjemahkan ke RegExp melalui subsitusi <code>[.*?]</code>. Untuk cara yang dapat diandalkan untuk menggunakan sintaks RegExp ini, cukup gunakan RegExp sebagai gantinya.</p> + +<h4 id="Contoh_11">Contoh</h4> + +<pre class="brush: js notranslate">shExpMatch("http://home.netscape.com/people/ari/index.html" , "*/ari/*"); // returns true +shExpMatch("http://home.netscape.com/people/montulli/index.html", "*/ari/*"); // returns false</pre> + +<h3 id="weekdayRange">weekdayRange ()</h3> + +<h4 id="Sintaksis_11">Sintaksis</h4> + +<pre class="syntaxbox notranslate">weekdayRange(<var>wd1</var>, <var>wd2</var>, [<var>gmt</var>])</pre> + +<div class="note"> +<p><strong>Catatan:</strong> (Sebelum Firefox 49) wd1 harus lebih kecil dari wd2 jika Anda ingin fungsi mengevaluasi parameter ini sebagai rentang. Lihat peringatan di bawah.</p> +</div> + +<h4 id="Parameter_12">Parameter</h4> + +<dl> + <dt>wd1 dan wd2</dt> + <dd>Salah satu string hari kerja yang dipesan:</dd> + <dt> + <pre class="syntaxbox notranslate">"SUN"|"MON"|"TUE"|"WED"|"THU"|"FRI"|"SAT"</pre> + </dt> + <dt>waktu Greenwich</dt> + <dd>Apakah string "GMT" atau ditinggalkan.</dd> +</dl> + +<p>Hanya parameter pertama yang wajib diisi. Entah yang kedua, ketiga, atau keduanya mungkin ditinggalkan.</p> + +<p>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.</p> + +<p>Jika <strong>wd1</strong> dan <strong>wd1</strong> ditentukan, kondisinya benar jika hari kerja saat ini berada di antara dua hari kerja yang <em>dipesan</em> . Batas bersifat inklusif, <em>tetapi batasnya teratur</em> . Jika parameter "GMT" ditentukan, waktu dianggap dalam GMT. Jika tidak, zona waktu lokal digunakan.</p> + +<div class="warning"> +<p><strong>Urutan hari penting</strong> ; Sebelum Firefox 49, akan selalu bernilai true. Sekarang hanya akan mengevaluasi benar jika hari ini adalah Rabu atau Minggu.<code>weekdayRange("<em>SUN", "SAT"</em>)</code><code>weekdayRange("<em>WED", "SUN"</em>)</code></p> +</div> + +<h4 id="Contoh_12">Contoh</h4> + +<pre class="brush: js notranslate">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!)</pre> + +<h3 id="dateRange">dateRange()</h3> + +<h4 id="Syntax">Syntax</h4> + +<pre class="syntaxbox notranslate">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])</pre> + +<div class="note"> +<p><strong>Note:</strong> (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.</p> +</div> + +<h4 id="Parameters">Parameters</h4> + +<dl> + <dt>day</dt> + <dd>Is the ordered day of the month between 1 and 31 (as an integer).</dd> +</dl> + +<pre class="syntaxbox notranslate">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</pre> + +<dl> + <dt>month</dt> + <dd>Is one of the ordered month strings below.</dd> +</dl> + +<pre class="syntaxbox notranslate">"JAN"|"FEB"|"MAR"|"APR"|"MAY"|"JUN"|"JUL"|"AUG"|"SEP"|"OCT"|"NOV"|"DEC"</pre> + +<dl> + <dt>year</dt> + <dd>Is the ordered full year integer number. For example, 2016 (<strong>not</strong> 16).</dd> + <dt>gmt</dt> + <dd>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.</dd> +</dl> + +<p>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, <em>tetapi batasnya diurutkan</em> .</p> + +<div class="warning"> +<p><strong>Urutan hari, bulan, dan tahun penting</strong> ; Sebelum Firefox 49, akan selalu mengevaluasi ke . Sekarang hanya akan mengevaluasi benar jika bulan ini adalah Desember atau Januari.<code>dateRange("<em>JAN", "DEC"</em>)</code><code>true</code><code>dateRange("<em>DEC", "JAN"</em>)</code></p> +</div> + +<h4 id="Contoh_13">Contoh</h4> + +<pre class="brush: js notranslate">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</pre> + +<h3 id="rentang_waktu">rentang waktu()</h3> + +<h4 id="Sintaksis_12">Sintaksis</h4> + +<pre class="syntaxbox notranslate">// The full range of expansions is analogous to dateRange. +timeRange(<hour1>, <min1>, <sec1>, <hour2>, <min2>, <sec2>, [gmt])</pre> + +<div class="note"> +<p><strong>Catatan:</strong> (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.</p> +</div> + +<h4 id="Parameter_13">Parameter</h4> + +<dl> + <dt>jam</dt> + <dd>Adalah jam dari 0 hingga 23. (0 adalah tengah malam, 23 adalah 11 malam.)</dd> + <dt>min</dt> + <dd>Menit dari 0 hingga 59.</dd> + <dt>detik</dt> + <dd>Detik dari 0 hingga 59.</dd> + <dt>waktu Greenwich</dt> + <dd>Baik string "GMT" untuk zona waktu GMT, atau tidak ditentukan, untuk zona waktu lokal.</dd> +</dl> + +<p>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, <em>tetapi batasnya diurutkan</em> .</p> + +<div class="warning"> +<p><strong>Urutan jam, menit, materi kedua</strong> ; Sebelum Firefox 49, akan selalu bernilai true. Sekarang hanya akan mengevaluasi benar jika jam saat ini adalah 23:00 atau tengah malam.<code>timeRange(<em>0, 23</em>)</code><code>timeRange(<em>23, 0</em>)</code></p> +</div> + +<h4 id="Contoh_14">Contoh</h4> + +<pre class="brush: js notranslate">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</pre> + +<h2 id="Contoh_1">Contoh 1</h2> + +<h3 id="Gunakan_proxy_untuk_semuanya_kecuali_host_lokal">Gunakan proxy untuk semuanya kecuali host lokal</h3> + +<div class="note"> +<p><strong>Catatan:</strong> Karena semua contoh berikut sangat spesifik, mereka belum diuji.</p> +</div> + +<p>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 <code>w3proxy.mozilla.org:8080</code>. If the proxy goes down, connections become direct automatically:</p> + +<pre class="brush: js notranslate">function FindProxyForURL(url, host) { + if (isPlainHostName(host) || dnsDomainIs(host, ".mozilla.org")) { + return "DIRECT"; + } else { + return "PROXY w3proxy.mozilla.org:8080; DIRECT"; + } +}</pre> + +<div class="note"> +<p><strong>Note:</strong> This is the simplest and most efficient autoconfig file for cases where there's only one proxy.</p> +</div> + +<h2 id="Example_2">Example 2</h2> + +<h3 id="As_above_but_use_proxy_for_local_servers_which_are_outside_the_firewall">As above, but use proxy for local servers which are outside the firewall</h3> + +<p>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 <code>localHostOrDomainIs()</code> function:</p> + +<pre class="brush: js notranslate">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"; + } +}</pre> + +<p>The above example will use the proxy for everything except local hosts in the mozilla.org domain, with the further exception that hosts <code>www.mozilla.org</code> and <code>merchant.mozilla.org</code> will go through the proxy.</p> + +<div class="note"> +<p><strong>Note</strong> 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<em> or</em> expression before the <em>and</em> expression to achieve the above-mentioned efficient behaviour.</p> +</div> + +<h2 id="Example_3">Example 3</h2> + +<h3 id="Use_proxy_only_if_cannot_resolve_host">Use proxy only if cannot resolve host</h3> + +<p>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:</p> + +<pre class="brush: js notranslate">function FindProxyForURL(url, host) { + if (isResolvable(host)) + return "DIRECT"; + else + return "PROXY proxy.mydomain.com:8080"; +}</pre> + +<p>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:</p> + +<pre class="brush: js notranslate">function FindProxyForURL(url, host) { + if ( + isPlainHostName(host) || + dnsDomainIs(host, ".mydomain.com") || + isResolvable(host) + ) { + return "DIRECT"; + } else { + return "PROXY proxy.mydomain.com:8080"; + } +}</pre> + +<h2 id="Example_4">Example 4</h2> + +<h3 id="Subnet_based_decisions">Subnet based decisions</h3> + +<p>In this example all of the hosts in a given subnet are connected-to directly, others are connected through the proxy:</p> + +<pre class="brush: js notranslate">function FindProxyForURL(url, host) { + if (isInNet(host, "198.95.0.0", "255.255.0.0")) + return "DIRECT"; + else + return "PROXY proxy.mydomain.com:8080"; +}</pre> + +<p>Again, use of the DNS server in the above can be minimized by adding redundant rules in the beginning:</p> + +<pre class="brush: js notranslate">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"; + } +}</pre> + +<h2 id="Example_5">Example 5</h2> + +<h3 id="Load_balancingrouting_based_on_URL_patterns">Load balancing/routing based on URL patterns</h3> + +<p>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:</p> + +<table> + <tbody> + <tr> + <th>Proxy</th> + <th>Purpose</th> + </tr> + <tr> + <td>#1</td> + <td>.com domain</td> + </tr> + <tr> + <td>#2</td> + <td>.edu domain</td> + </tr> + <tr> + <td>#3</td> + <td>all other domains</td> + </tr> + <tr> + <td>#4</td> + <td>hot stand-by</td> + </tr> + </tbody> +</table> + +<p>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 <code><strong>+</strong></code> operator in JavaScript.</p> + +<pre class="brush: js notranslate">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"; +}</pre> + +<h2 id="Example_6">Example 6</h2> + +<h3 id="Setting_a_proxy_for_a_specific_protocol">Setting a proxy for a specific protocol</h3> + +<p>Most of the standard JavaScript functionality is available for use in the <code>FindProxyForURL()</code> function. As an example, to set different proxies based on the protocol the {{jsxref("String.prototype.startsWith()", "startsWith()")}} function can be used:</p> + +<pre class="brush: js notranslate">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"; + +}</pre> + +<div class="note"> +<p><strong>Note:</strong> The same can be accomplished using the <code><a href="#shExpMatch">shExpMatch()</a></code> function described earlier.</p> +</div> + +<p>For example:</p> + +<pre class="brush: js notranslate">// ... +if (shExpMatch(url, "http:*")) { + return "PROXY http-proxy.mydomain.com:8080"; +} +// ...</pre> + +<div class="note"> +<p>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 <code>REMOTE_ADDR</code> environment variable in CGI).</p> + +<p>Usage of <code>isInNet()</code>, <code>isResolvable()</code> and <code>dnsResolve()</code> 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.</p> +</div> + +<h2 id="History_and_implementation">History and implementation</h2> + +<p>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.</p> + +<p>Oleh karena itu, implementasi PAC yang paling "asli" dan pustaka JavaScript-nya <code>nsProxyAutoConfig.js</code>ditemukan di versi awal Firefox. Utilitas ini ditemukan di banyak sistem sumber terbuka lainnya termasuk <a href="https://cs.chromium.org/chromium/src/services/proxy_resolver/pac_js_library.h">Chromium</a> . Firefox kemudian mengintegrasikan file tersebut menjadi <code><a href="https://dxr.mozilla.org/mozilla-central/source/netwerk/base/ProxyAutoConfig.cpp">ProxyAutoConfig.cpp</a></code>literal string C ++. Untuk mengekstraknya ke dalam filenya sendiri, cukup dengan menyalin potongan ke JavaScript dengan <code>console.log</code>perintah untuk mencetaknya.</p> + +<p>Microsoft secara umum membuat implementasinya sendiri. Dulu ada <a href="https://en.wikipedia.org/wiki/Proxy_auto-config#Old_Microsoft_problems">beberapa masalah dengan pustaka mereka</a> , tetapi sebagian besar telah diselesaikan sekarang. Mereka telah mendefinisikan <a href="https://docs.microsoft.com/en-us/windows/win32/winhttp/ipv6-extensions-to-navigator-auto-config-file-format">beberapa fungsi sufiks "Ex" baru di</a> sekitar bagian penanganan alamat untuk mendukung IPv6. Fitur ini didukung oleh Chromium, tetapi belum didukung oleh Firefox ( <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=558253">bugzilla # 558253</a> ).</p> diff --git a/files/id/web/http/status/100/index.html b/files/id/web/http/status/100/index.html new file mode 100644 index 0000000000..3f2f0db1d2 --- /dev/null +++ b/files/id/web/http/status/100/index.html @@ -0,0 +1,46 @@ +--- +title: 100 Continue +slug: Web/HTTP/Status/100 +tags: + - HTTP + - Informasi + - Status code +translation_of: Web/HTTP/Status/100 +--- +<div>{{HTTPSidebar}}</div> + +<p>HTTP <strong><code>100 Continue</code></strong> menginformasikan status kode respon yang menandakan bahwa semuanya OK dan klien dapat melanjutkan dengan permintaan atau mengabaikan jika telah terselesaikan.</p> + +<p>Untuk bisa mendapatkan server check pada header permintaan, klien harus mengirim <code>Expect: 100-continue</code> sebagai header pada permintaan inisial dan mendapatan kode status respon <code>100 Continue</code> sebelum mengirim konten atau body.</p> + +<h2 id="Status">Status</h2> + +<pre class="syntaxbox">100 Continue</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Title</th> + </tr> + <tr> + <td>{{RFC("7231", "100 Continue" , "6.2.1")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Browser">Kompabilitas Browser</h2> + +<p class="hidden">Tabel kompabilitas di halaman ini didapatkan dari struktur data. Jika anda ingin berkontribusi, silahkan kunjungi <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> dan kirimkan kami sebuah pull request.</p> + +<p>{{Compat("http/status", "100")}}</p> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li>{{HTTPHeader("Expect")}}</li> + <li>{{HTTPStatus(417)}}</li> +</ul> diff --git a/files/id/web/http/status/200/index.html b/files/id/web/http/status/200/index.html new file mode 100644 index 0000000000..76c06a3e1e --- /dev/null +++ b/files/id/web/http/status/200/index.html @@ -0,0 +1,50 @@ +--- +title: 200 OK +slug: Web/HTTP/Status/200 +translation_of: Web/HTTP/Status/200 +--- +<div>{{HTTPSidebar}}</div> + +<p>HTTP <strong><code>200 OK</code></strong> respon status sukses merupakan kode respon yang menandakan bahwa request sukses. respon 200 dapat dichace secara default.</p> + +<p>Arti dari sukses tergantung pada fungsi request HTTP:</p> + +<ul> + <li>{{HTTPMethod("GET")}}: Resource telah di ambil dan ditransmisikan ke pesan body.</li> + <li>{{HTTPMethod("HEAD")}}: Entity headers ada di pesan body.</li> + <li>{{HTTPMethod("POST")}}: Resource mendeskripsikan hasil dari aksi yang ditransamisikan ke pesan body.</li> + <li>{{HTTPMethod("TRACE")}}: Pesan body berisi pesan request seperti yang diterima oleh server.</li> +</ul> + +<p>Kesuksesan hasil dari {{HTTPMethod("PUT")}} atau {{HTTPMethod("DELETE")}} biasanya bukan <code>200</code> <code>OK</code> tapi {{HTTPStatus("204")}} <code>No Content</code> (atau {{HTTPStatus("201")}} <code>Created</code> ketika resource diunggah pertama kali).</p> + +<h2 id="Status">Status</h2> + +<pre class="syntaxbox">200 OK</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Judul</th> + </tr> + <tr> + <td>{{RFC("7231", "200 OK" , "6.3.1")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Browser">Kompabilitas Browser</h2> + +<p class="hidden">Tabel kompabilitas di halaman ini adalah hasil dari structured data. Jika anda ingin berkontribusi, silakan cek <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> dan kirimkan kami pull request.</p> + +<p>{{Compat("http.status.200")}}</p> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTTP/Methods">HTTP request methods</a></li> +</ul> diff --git a/files/id/web/http/status/400/index.html b/files/id/web/http/status/400/index.html new file mode 100644 index 0000000000..3d98750338 --- /dev/null +++ b/files/id/web/http/status/400/index.html @@ -0,0 +1,39 @@ +--- +title: 400 Bad Request +slug: Web/HTTP/Status/400 +tags: + - Galat Klien + - HTTP + - Kode status + - Referensi + - Status kode HTTP +translation_of: Web/HTTP/Status/400 +--- +<div>{{HTTPSidebar}}</div> + +<p>Kode Respon HTTP <code><strong>400 Bad Request</strong></code> mengindikasikan bahwa server tidak bisa atau tidak akan memproses permintaan karena sesuatu yang dianggap sebagai kesalahan klien (seperti sintaks permintaan yang jelek, pesan request yang tidak valid, atau permintaan yang menipu.</p> + +<div class="warning"> +<p>Klien seharusnya tidak mengulangi permintaan yang sama tanpa perubahan.</p> +</div> + +<h2 id="Status">Status</h2> + +<pre class="syntaxbox">400 Bad Request </pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Title</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{RFC("7231", "400 Bad Request" , "6.5.1")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> + </tr> + </tbody> +</table> diff --git a/files/id/web/http/status/403/index.html b/files/id/web/http/status/403/index.html new file mode 100644 index 0000000000..71dc858a2f --- /dev/null +++ b/files/id/web/http/status/403/index.html @@ -0,0 +1,56 @@ +--- +title: 403 Forbidden +slug: Web/HTTP/Status/403 +tags: + - Galat Klien + - HTTP + - Kode status + - Referensi +translation_of: Web/HTTP/Status/403 +--- +<div>{{HTTPSidebar}}</div> + +<p>Kode respon HTTP <strong><code>403 Forbidden</code></strong> mengindikasikan bahwa server memahami permintaan tetapi menolak untuk mengesahkannya.</p> + +<p>Kode status ini mirip dengan {{HTTPStatus("401")}}, tetapi dalam kasus ini, autentikasi ulang tidak akan memberi perubahan. Aksesnya dilarang secara permanen dan diikat pada logika aplikasi, seperti kurangnya hak akses untuk mendapatkan sumber daya.</p> + +<h2 id="Status">Status</h2> + +<pre class="syntaxbox">403 Forbidden</pre> + +<h2 id="Contoh_respon">Contoh respon</h2> + +<pre>HTTP/1.1 403 Forbidden +Date: Wed, 21 Oct 2015 07:28:00 GMT +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Title</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{RFC("7231", "403 Forbidden" , "6.5.3")}}</td> + <td>HTTP/1.1: Semantics and Content</td> + </tr> + </tbody> +</table> + +<h2 id="Dukungan_peramban">Dukungan peramban</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("http.status.403")}}</p> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{HTTPStatus("401")}}</li> + <li><a href="https://kinsta.com/blog/403-forbidden-error/">403 forbidden error</a></li> + <li><a href="https://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html" rel="noopener">HTTP/1.1: Status Code Definitions</a></li> +</ul> diff --git a/files/id/web/http/status/404/index.html b/files/id/web/http/status/404/index.html new file mode 100644 index 0000000000..10c1e4e0a5 --- /dev/null +++ b/files/id/web/http/status/404/index.html @@ -0,0 +1,63 @@ +--- +title: 404 Not Found +slug: Web/HTTP/Status/404 +tags: + - Galat Klien + - HTTP + - Kode status + - Peramban +translation_of: Web/HTTP/Status/404 +--- +<div>{{HTTPSidebar}}</div> + +<p>Kode respon HTTP <code><strong>404 Not Found</strong></code> mengindikasikan bahwa server tidak dapat menemukan sumber daya yang diminta. Link yang menuju halaman 404 biasanya disebut dengan <em>broken</em> atau <em>dead links</em>, dan bisa menjadi subjek kepada <a href="https://en.wikipedia.org/wiki/Link_rot">link rot</a>.</p> + +<p>Status kode 404 tidak mengindikasikan bahwa sumber daya tidak ditemukan sementara atau secara permanen. Apabila sumber daya dihapus secara permanen, {{HTTPStatus("410")}} (Gone) harus digunakan dibandingkan status 404.</p> + +<h2 id="Status">Status</h2> + +<pre class="syntaxbox">404 Not Found</pre> + +<h2 id="Halaman_galat_khusus">Halaman galat khusus</h2> + +<p>Banyak web sites menyesuaikan tampilan dari halaman 404 supaya lebih membantu pengguna dan memberikan petunjuk apa yang harus dilakukan seterusnya. Server Apache dapat dikonfigurasi dengan file <code>.htaccess</code> dengan potongan kode berikut.</p> + +<pre class="brush: bash">ErrorDocument 404 /notfound.html</pre> + +<p>Untuk contoh dari halaman 404 khusus, lihat <a href="https://developer.mozilla.org/en-US/404">Halaman 404 MDN</a>.</p> + +<div class="note"> +<p>Desain khusus merupakan hal yang baik. Buat halaman 404 Anda menjadi lucu dan manusiawi, tetapi jangan membuat bingung pengguna.</p> +</div> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Title</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{RFC("7231", "404 Not Found" , "6.5.4")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> + </tr> + </tbody> +</table> + +<h2 id="Dukungan_Peramban">Dukungan Peramban</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("http.status.404")}}</p> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li>{{HTTPStatus("410")}}</li> + <li> + <p>{{interwiki("wikipedia", "HTTP_404", "Wikipedia: HTTP 404")}}</p> + </li> +</ul> diff --git a/files/id/web/http/status/405/index.html b/files/id/web/http/status/405/index.html new file mode 100644 index 0000000000..651db0f858 --- /dev/null +++ b/files/id/web/http/status/405/index.html @@ -0,0 +1,44 @@ +--- +title: 405 Metode tidak Diizinkan +slug: Web/HTTP/Status/405 +tags: + - Galat Klien + - HTTP + - Referensi + - Status kode + - Status kode HTTP +translation_of: Web/HTTP/Status/405 +--- +<div>{{HTTPSidebar}}</div> + +<p>Kode respon HTTP <code><strong>405 Method Not Allowed</strong></code> mengindikasikan bahwa metode permintaan dikenali oleh server tetapi tidak didukung oleh target sumber daya. <span style="">Server harus menyematkan </span><strong style=""><code>Allow</code></strong><span style=""> header field di dalam respon 405 berisi daftar dari metode permintaan yang didukung oleh target sumber daya.</span></p> + +<h2 id="Status">Status</h2> + +<pre class="syntaxbox">405 Method Not Allowed</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Title</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{RFC("7231", "405 Method Not Allowed" , "6.5.5")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> + </tr> + </tbody> +</table> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{HTTPHeader("Allow")}}</li> + <li><a href="https://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html" rel="noopener">HTTP/1.1: Status Code Definitions</a></li> + <li><a href="https://kinsta.com/blog/405-method-not-allowed-error/">How to Fix 405 Method Not Allowed</a></li> + <li><a href="https://docs.microsoft.com/en-us/aspnet/web-api/overview/testing-and-debugging/troubleshooting-http-405-errors-after-publishing-web-api-applications">Troubleshooting HTTP 405</a></li> +</ul> diff --git a/files/id/web/http/status/410/index.html b/files/id/web/http/status/410/index.html new file mode 100644 index 0000000000..42ac089598 --- /dev/null +++ b/files/id/web/http/status/410/index.html @@ -0,0 +1,54 @@ +--- +title: 410 Gone +slug: Web/HTTP/Status/410 +tags: + - Galat Klien + - HTTP + - Kode status + - Referensi +translation_of: Web/HTTP/Status/410 +--- +<div>{{HTTPSidebar}}</div> + +<p>Kode respon HTTP <code><strong>410 Gone</strong></code> mengindikasikan bahwa akses ke sumber daya tidak lagi tersedia di server asal dengan kondisi akan tidak tersedia secara permanen.</p> + +<p>Apabila Anda tidak tahu apakah kondisi ini hanya sementara atau permanen, kode error {{HTTPStatus(404)}} sebaiknya digunakan.</p> + +<div class="note"> +<p><strong>Catatan:</strong> Sebuah respon 410 dapat disimpan di dalam cache secara bawaan.</p> +</div> + +<h2 id="Status">Status</h2> + +<pre class="syntaxbox">410 Gone</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Title</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{RFC("7231", "410 Gone" , "6.5.9")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> + </tr> + </tbody> +</table> + +<h2 id="Dukungan_Peramban">Dukungan Peramban</h2> + +<p>The information shown below has been pulled from MDN's GitHub (<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>).</p> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("http.status.410")}}</p> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li>{{HTTPStatus(404)}}</li> +</ul> diff --git a/files/id/web/http/status/500/index.html b/files/id/web/http/status/500/index.html new file mode 100644 index 0000000000..ce5c5157fb --- /dev/null +++ b/files/id/web/http/status/500/index.html @@ -0,0 +1,38 @@ +--- +title: 500 Internal Server Error +slug: Web/HTTP/Status/500 +translation_of: Web/HTTP/Status/500 +--- +<div>{{HTTPSidebar}}</div> + +<p>HTTP <span id="result_box" lang="id"><span>kode respons kesalahan server menunjukkan bahwa server mengalami kondisi tak terduga yang menghalanginya memenuhi permintaan.</span></span></p> + +<p><span id="result_box" lang="id"><span>Respons kesalahan ini adalah turunan "mencakup-semua" respons.</span> <span>Seringkali respons server pengelola catatan seperti kode status 500 dengan lebih banyak detail tentang permintaan untuk mencegah kesalahan terjadi lagi di masa mendatang.</span></span></p> + +<h2 id="Status">Status</h2> + +<pre class="syntaxbox notranslate">500 <span style="">Kesalahan Server dari Dalam</span> +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Title</th> + </tr> + <tr> + <td>{{RFC("7231", "" , "6.6.1")}}</td> + <td>Protokol Transfer Hiperteks (HTTP / 1.1): Semantik dan Konten</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatibilias_browser">Kompatibilias browser</h2> + +<p class="hidden">Informasi yang ditampilkan di bawah ini telah ditarik dari GitHub MDN (https://github.com/mdn/browes-compat-data).</p> + +<p class="hidden">Table kompatibilitas di halaman dari data terstruktur Jla Anda ongin berkontribusi pada data, ;ohat https://github.com/mdnbrowser-compat-data dan kirimkan permintaan pull kepada kami.</p> + +<p>{{Compat("http.status.500")}}</p> diff --git a/files/id/web/http/status/index.html b/files/id/web/http/status/index.html new file mode 100644 index 0000000000..066d40771e --- /dev/null +++ b/files/id/web/http/status/index.html @@ -0,0 +1,141 @@ +--- +title: HTTP response status codes +slug: Web/HTTP/Status +translation_of: Web/HTTP/Status +--- +<div>{{HTTPSidebar}}</div> + +<p>kode status respon <a href="/en-US/docs/Web/HTTP">HTTP</a> menunjukkan apakah permintaan HTTP tertentu telah berhasil diselesaikan. Tanggapan dikelompokkan dalam lima kelas: tanggapan informasi, tanggapan yang sukses, pengalihan, kesalahan klien, dan server kesalahan.</p> + +<h2 id="Respon_informasi">Respon informasi</h2> + +<dl> + <dt>{{HTTPStatus(100, "100 Continue")}}</dt> + <dd>Tanggapan sementara ini menunjukkan bahwa segala sesuatu sejauh ini adalah OK dan bahwa klien harus melanjutkan dengan permintaan atau mengabaikannya jika sudah selesai.</dd> + <dt>{{HTTPStatus(101, "101 Switching Protocol")}}</dt> + <dd>Kode ini dikirim sebagai tanggapan ke header permintaan {{HTTPHeader ("Upgrade")}} oleh klien, dan menunjukkan protokol yang digunakan oleh server.</dd> + <dt>{{HTTPStatus(102, "102 Processing")}} ({{Glossary("WebDAV")}})</dt> + <dd>Kode ini menunjukkan bahwa server telah menerima dan memproses permintaan, tetapi belum ada respons.</dd> +</dl> + +<h2 id="Response_Sukses">Response Sukses</h2> + +<dl> + <dt>{{HTTPStatus(200, "200 OK")}}</dt> + <dd>Permintaan telah berhasil . Arti keberhasilan bervariasi tergantung pada metode HTTP :<br> + GET: The resource has been fetched and is transmitted in the message body.<br> + HEAD: The entity headers are in the message body.<br> + POST: The resource describing the result of the action is transmitted in the message body.<br> + TRACE: The message body contains the request message as received by the server</dd> + <dt>{{HTTPStatus(201, "201 Created")}}</dt> + <dd>The request has succeeded and a new resource has been created as a result of it. This is typically the response sent after a PUT request.</dd> + <dt>{{HTTPStatus(202, "202 Accepted")}}</dt> + <dd>The request has been received but not yet acted upon. It is non-committal, meaning that there is no way in HTTP to later send an asynchronous response indicating the outcome of processing the request. It is intended for cases where another process or server handles the request, or for batch processing.</dd> + <dt>{{HTTPStatus(203, "203 Non-Authoritative Information")}}</dt> + <dd>This response code means returned meta-information set is not exact set as available from the origin server, but collected from a local or a third party copy. Except this condition, 200 OK response should be preferred instead of this response.</dd> + <dt>{{HTTPStatus(204, "204 No Content")}}</dt> + <dd>There is no content to send for this request, but the headers may be useful. The user-agent may update its cached headers for this resource with the new ones.</dd> + <dt>{{HTTPStatus(205, "205 Reset Content")}}</dt> + <dd>This response code is sent after accomplishing request to tell user agent reset document view which sent this request.</dd> + <dt>{{HTTPStatus(206, "206 Partial Content")}}</dt> + <dd>This response code is used because of range header sent by the client to separate download into multiple streams.</dd> +</dl> + +<h2 id="Redirection_messages">Redirection messages</h2> + +<dl> + <dt>{{HTTPStatus(300, "300 Multiple Choice")}}</dt> + <dd>The request has more than one possible responses. User-agent or user should choose one of them. There is no standardized way to choose one of the responses.</dd> + <dt>{{HTTPStatus(301, "301 Moved Permanently")}}</dt> + <dd>This response code means that URI of requested resource has been changed. Probably, new URI would be given in the response.</dd> + <dt>{{HTTPStatus(302, "302 Found")}}</dt> + <dd>This response code means that URI of requested resource has been changed <em>temporarily</em>. New changes in the URI might be made in the future. Therefore, this same URI should be used by the client in future requests.</dd> + <dt>{{HTTPStatus(303, "303 See Other")}}</dt> + <dd>Server sent this response to directing client to get requested resource to another URI with an GET request.</dd> + <dt>{{HTTPStatus(304, "304 Not Modified")}}</dt> + <dd>This is used for caching purposes. It is telling to client that response has not been modified. So, client can continue to use same cached version of response.</dd> + <dt>{{HTTPStatus(305, "305 Use Proxy")}}</dt> + <dd>This means requested response must be accessed by a proxy. This response code is not largely supported because security reasons.</dd> + <dt>{{HTTPStatus(306, "306 unused")}}</dt> + <dd>This response code is no longer used, it is just reserved currently. It was used in a previous version of the HTTP 1.1 specification.</dd> + <dt>{{HTTPStatus(307, "307 Temporary Redirect")}}</dt> + <dd>Server sent this response to directing client to get requested resource to another URI with same method that used prior request. This has the same semantic than the <code>302 Found</code> HTTP response code, with the exception that the user agent <em>must not</em> change the HTTP method used: if a <code>POST</code> was used in the first request, a <code>POST</code> must be used in the second request.</dd> + <dt>{{HTTPStatus(308, "308 Permanent Redirect")}}</dt> + <dd>This means that the resource is now permanently located at another URI, specified by the <code>Location:</code> HTTP Response header. This has the same semantics as the <code>301 Moved Permanently</code> HTTP response code, with the exception that the user agent <em>must not</em> change the HTTP method used: if a <code>POST</code> was used in the first request, a <code>POST</code> must be used in the second request.</dd> +</dl> + +<h2 id="Client_error_responses">Client error responses</h2> + +<dl> + <dt>{{HTTPStatus(400, "400 Bad Request")}}</dt> + <dd>Respons ini berarti server tidak dapat memahami permintaan karena sintaks yang tidak valid.</dd> + <dt>{{HTTPStatus(401, "401 Unauthorized")}}</dt> + <dd>Authentication is needed to get requested response. This is similar to 403, but in this case, authentication is possible.</dd> + <dt>{{HTTPStatus(402, "402 Payment Required")}}</dt> + <dd>This response code is reserved for future use. Initial aim for creating this code was using it for digital payment systems however this is not used currently.</dd> + <dt>{{HTTPStatus(403, "403 Forbidden")}}</dt> + <dd>Client does not have access rights to the content so server is rejecting to give proper response.</dd> + <dt>{{HTTPStatus(404, "404 Not Found")}}</dt> + <dd>Server can not find requested resource. This response code probably is most famous one due to its frequency to occur in web.</dd> + <dt>{{HTTPStatus(405, "405 Method Not Allowed")}}</dt> + <dd>The request method is known by the server but has been disabled and cannot be used. The two mandatory methods, <code>GET</code> and <code>HEAD</code>, must never be disabled and should not return this error code.</dd> + <dt>{{HTTPStatus(406, "406 Not Acceptable")}}</dt> + <dd>This response is sent when the web server, after performing <a href="/en-US/docs/HTTP/Content_negotiation#Server-driven_negotiation">server-driven content negotiation</a>, doesn't find any content following the criteria given by the user agent.</dd> + <dt>{{HTTPStatus(407, "407 Proxy Authentication Required")}}</dt> + <dd>This is similar to 401 but authentication is needed to be done by a proxy.</dd> + <dt>{{HTTPStatus(408, "408 Request Timeout")}}</dt> + <dd>This response is sent on an idle connection by some servers, even without any previous request by the client. It means that the server would like to shut down this unused connection. This response is used much more since some browsers, like Chrome or IE9, use <a class="external" href="http://www.belshe.com/2011/02/10/the-era-of-browser-preconnect/" title="http://www.belshe.com/2011/02/10/the-era-of-browser-preconnect/">HTTP preconnection mechanisms</a> to speed up surfing (see {{ bug(634278) }}, which tracks the future implementation of such a mechanism in Firefox). Also note that some servers merely shut down the connection without sending this message.</dd> + <dt>{{HTTPStatus(409, "409 Conflict")}}</dt> + <dd>This response would be sent when a request conflict with current state of server.</dd> + <dt>{{HTTPStatus(410, "410 Gone")}}</dt> + <dd>This response would be sent when requested content has been deleted from server.</dd> + <dt>{{HTTPStatus(411, "411 Length Required")}}</dt> + <dd>Server rejected the request because the <code>Content-Length</code> header field is not defined and the server requires it.</dd> + <dt>{{HTTPStatus(412, "412 Precondition Failed")}}</dt> + <dd>The client has indicated preconditions in its headers which the server does not meet.</dd> + <dt>{{HTTPStatus(413, "413 Payload Too Large")}}</dt> + <dd>Request entity is larger than limits defined by server; the server might close the connection or return an <code>Retry-After</code> header field.</dd> + <dt>{{HTTPStatus(414, "414 URI Too Long")}}</dt> + <dd>The URI requested by the client is longer than the server is willing to interpret.</dd> + <dt>{{HTTPStatus(415, "415 Unsupported Media Type")}}</dt> + <dd>The media format of the requested data is not supported by the server, so the server is rejecting the request.</dd> + <dt>{{HTTPStatus(416, "416 Requested Range Not Satisfiable")}}</dt> + <dd>The range specified by the <code>Range</code> header field in the request can't be fulfilled; it's possible that the range is outside the size of the target URI's data.</dd> + <dt>{{HTTPStatus(417, "417 Expectation Failed")}}</dt> + <dd>This response code means the expectation indicated by the <code>Expect</code> request header field can't be met by the server.</dd> + <dt>{{HTTPStatus(421, "421 Misdirected Request")}}</dt> + <dd>The request was directed at a server that is not able to produce a response. This can be sent by a server that is not configured to produce responses for the combination of scheme and authority that are included in the request URI.</dd> + <dt>{{HTTPStatus(426, "426 Upgrade Required")}}</dt> + <dd>The server refuses to perform the request using the current protocol but might be willing to do so after the client upgrades to a different protocol. The server MUST send an Upgrade header field in a 426 response to indicate the required protocol(s) (<a href="https://tools.ietf.org/html/rfc7230#section-6.7">Section 6.7 of [RFC7230]</a>).</dd> + <dt>{{HTTPStatus(428, "428 Precondition Required")}}</dt> + <dd>The origin server requires the request to be conditional. Intended to prevent "the 'lost update' problem, where a client GETs a resource's state, modifies it, and PUTs it back to the server, when meanwhile a third party has modified the state on the server, leading to a conflict.</dd> + <dt>{{HTTPStatus(429, "429 Too Many Requests")}}</dt> + <dd>The user has sent too many requests in a given amount of time ("rate limiting").</dd> + <dt>{{HTTPStatus(431, "431 Request Header Fields Too Large")}}</dt> + <dd>The server is unwilling to process the request because its header fields are too large. The request MAY be resubmitted after reducing the size of the request header fields.</dd> + <dt>{{HTTPStatus(451, "451 Unavailable For Legal Reasons")}}</dt> + <dd>The user requests an illegal resource, such as a web page censored by a government.</dd> +</dl> + +<h2 id="Server_error_responses">Server error responses</h2> + +<dl> + <dt>{{HTTPStatus(500, "500 Internal Server Error")}}</dt> + <dd>The server has encountered a situation it doesn't know how to handle.</dd> + <dt>{{HTTPStatus(501, "501 Not Implemented")}}</dt> + <dd>The request method is not supported by the server and cannot be handled. The only methods that servers are required to support (and therefore that must not return this code) are <code>GET</code> and <code>HEAD</code>.</dd> + <dt>{{HTTPStatus(502, "502 Bad Gateway")}}</dt> + <dd>This error response means that the server, while working as a gateway to get a response needed to handle the request, got an invalid response.</dd> + <dt>{{HTTPStatus(503, "503 Service Unavailable")}}</dt> + <dd>The server is not ready to handle the request. Common causes are a server that is down for maintenance or that is overloaded. Note that together with this response, a user-friendly page explaining the problem should be sent. This responses should be used for temporary conditions and the <code>Retry-After:</code> HTTP header should, if possible, contain the estimated time before the recovery of the service. The webmaster must also take care about the caching-related headers that are sent along with this response, as these temporary condition responses should usually not be cached.</dd> + <dt>{{HTTPStatus(504, "504 Gateway Timeout")}}</dt> + <dd>This error response is given when the server is acting as a gateway and cannot get a response in time.</dd> + <dt>{{HTTPStatus(505, "505 HTTP Version Not Supported")}}</dt> + <dd>The HTTP version used in the request is not supported by the server.</dd> + <dt>{{HTTPStatus(506, "506 Variant Also Negotiates")}}</dt> + <dd>The server has an internal configuration error: transparent content negotiation for the request results in a circular reference.</dd> + <dt>{{HTTPStatus(507, "507 Variant Also Negotiates")}}</dt> + <dd>The server has an internal configuration error: the chosen variant resource is configured to engage in transparent content negotiation itself, and is therefore not a proper end point in the negotiation process.</dd> + <dt>{{HTTPStatus(511, "511 Network Authentication Required")}}</dt> + <dd>The 511 status code indicates that the client needs to authenticate to gain network access.</dd> +</dl> diff --git a/files/id/web/index.html b/files/id/web/index.html new file mode 100644 index 0000000000..9d74fa1a90 --- /dev/null +++ b/files/id/web/index.html @@ -0,0 +1,153 @@ +--- +title: Teknologi Web untuk Pengembang +slug: Web +tags: + - Landing + - Web +translation_of: Web +--- +<section id="Quick_Links"> +<ol> + <li><strong><a href="/ud/docs/Web">Teknologi Web untuk Pengembang</a></strong></li> + <li class="toggle"> + <details><summary>Dasar-dasar</summary> + <ol> + <li><a href="/id/docs/Web/HTML">HTML</a></li> + <li><a href="/id/docs/Web/CSS">CSS</a></li> + <li><a href="/id/docs/Web/HTTP">HTTP</a></li> + </ol> + </details> + </li> + <li class="toggle"> + <details open><summary>Web scripting</summary> + <ol> + <li><a href="/id/docs/Web/JavaScript">JavaScript</a></li> + <li><a href="/id/docs/Web/API">Web APIs</a></li> + <li><a href="/en-US/docs/Web/Events">Events</a></li> + <li><a href="/id/docs/Web/Web_components">Komponen-komponen Web</a></li> + </ol> + </details> + </li> + <li class="toggle"> + <details open><summary>Grafik</summary> + <ol> + <li><a href="/id/docs/Web/HTML/Canvas">Canvas</a></li> + <li><a href="/id/docs/Web/SVG">SVG</a></li> + <li><a href="/id/docs/Web/API/WebGL_API">WebGL</a></li> + </ol> + </details> + </li> + <li class="toggle"> + <details open><summary>Lainnya</summary> + <ol> + <li><a href="/id/docs/Web/Media">Teknologi media web</a></li> + <li><a href="/eid/docs/WebAssembly">WebAssembly</a></li> + <li><a href="/id/docs/Web/MathML">MathML</a></li> + <li><a href="/id/docs/Web/XSLT">XSLT</a></li> + <li><a href="/id/docs/Web/EXSLT">EXSLT</a></li> + <li><a href="/id/docs/Web/XPath">XPath</a></li> + </ol> + </details> + </li> +</ol> +</section> + +<p class="summary">Sifat terbuka World Wide Web memberikan kesempatan luar biasa bagi orang-orang yang ingin membuat situs-situs web atau aplikasi daring. Untuk memanfaatkan kemampuan-kemampuan web, Anda perlu belajar cara menggunakannya. Jelajahi link dibawah ini untuk mempelajari lebih lanjut berbagai teknologi web.</p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Teknologi-teknologi_Web">Teknologi-teknologi Web</h2> + +<h3 id="Dasar-dasar">Dasar-dasar</h3> + +<dl> + <dt><a href="/id/docs/Web/HTML">HTML</a></dt> + <dd><strong>HyperText Markup Language (HTML)</strong> adalah bahasa yang digunakan untuk mendeskripsikan dan menentukan <em>konten</em> dari halaman Web.</dd> + <dt><a href="/id/docs/Web/CSS">CSS</a></dt> + <dd><strong>Cascading Style Sheets (CSS)</strong> digunakan untuk menentukan tampilan/gambaran konten Web.</dd> + <dt><a href="/id/docs/Web/HTTP">HTTP</a></dt> + <dd><strong lang="en">HyperText Transfer Protocol (HTTP)</strong> digunakan untuk mengantar HTML dan dokumen <span lang="en">hypermedia</span> lainnya pada web.</dd> +</dl> + +<h3 id="Scripting">Scripting</h3> + +<dl> + <dt><a href="/id/docs/Web/JavaScript">JavaScript</a></dt> + <dd><strong>JavaScript</strong> merupakan bahasa pemrograman yang berjalan di browser Anda. Anda dapat menggunakan untuk menambahkan interaktivitas dan fitur dinamis pada situs web atau aplikasi Anda.</dd> + <dd>Dengan adanya {{glossary("Node.js")}}, Anda juga bisa menjalankan JavaScript pada server.</dd> + <dt><a href="/id/docs/Web/Reference/API">Web APIs</a></dt> + <dd><strong lang="en-US">Web Aplication Programming Interfaces (Web API)</strong> digunakan untuk melaksanakan tugas-tugas beragam, seperti memanipulasi <a href="/id/docs/DOM" lang="en">DOM</a>, memainkan audio maupun vidio atau membuat grafis <span lang="en">3D</span>. + <ul> + <li><a href="/id/docs/Web/API">Referensi Web API antarmuka</a> semua jenis daftar objek yang Anda dapat gunakan selagi mengembangkan untuk web.</li> + <li><a href="/id/docs/WebAPI">Halaman WebAPI</a> semua daftar komunikasi, akses perangkat keras, dan API lainnya yang dapat Anda gunakan di aplikasi web.</li> + <li><a href="/id/docs/Web/Events">Event reference</a> semua daftar <em lang="en">events</em> yang dapat Anda gunakan untuk melacak dan bereaksi pada hal-hal yang menarik yang telah terjadi di halaman web atau aplikasi Anda.</li> + </ul> + </dd> + <dt><a href="/id/docs/Web/Web_components">Komponen-komponen Web</a></dt> + <dd>Komponen-komponen web adalah serangkaian teknologi-teknologi berbeda yang memungkinkan Anda untuk membuat elemmen-elemen khusus yang dapat digunakan kembali dengan fungsionalitasnya dienkapsulasi (menjaga elemen didalamnya) jauh dari sisa kode Anda dan menggunakannya di aplikasi web Anda.</dd> +</dl> + +<h3 id="Grafis">Grafis</h3> + +<dl> + <dt><a href="/id/docs/Web/HTML/Canvas">Canvas</a></dt> + <dd>Elemen {{HTMLElement("canvas")}} menyediakan <em lang="en">API </em>untuk membuat grafik <span lang="en">2D</span> menggunakan JavaScript.</dd> + <dt><a href="/id/docs/Web/SVG">SVG</a></dt> + <dd>Scalable Vector Graphics (SVG) memungkinkan Anda mengunakan berbagai garis, kurva, dan bentuk-bentuk geometris lainnya untuk membuat grafik. Dengan vektor, Anda dapat membuat gambar yang diubah ukurannya tetap jernih pada ukuran apapun.</dd> + <dt><a href="/id/docs/Web/API/WebGL_API">WebGL</a></dt> + <dd>WebGL merupakan <em>API</em> JavaScript yang memungkinkan Anda menggambar grafis <span lang="en">3D</span> atau <span lang="en">2D</span> HTML elemen {{HTMLElement("canvas")}}. Teknologi ini memungkinan Anda melihat <em lang="en">OpenGL ES</em> standar di konten Web.</dd> +</dl> + +<h3 id="Audio_vidio_dan_multimedia">Audio, vidio, dan multimedia</h3> + +<dl> + <dt><a href="/id/docs/Web/Media">Teknologi-teknologi media Web</a></dt> + <dd>Sebuah daftar media API terhubung dengan link-link ke dokumentasi yang Anda perlukan masing-masing.</dd> + <dt><a href="/id/docs/Web/API/Media_Streams_API">Media capture and streams API</a></dt> + <dd>Referensi untuk API yang memungkinkan untuk streaming, merekam, dan memanipulasi di dua media secara lokal dan seluruh jaringan. Ini termasuk menggunakan kamera lokal dan mikrofon untuk merekam vidio, audio, dan gambar.</dd> + <dt><a href="/id/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Menggunakan audio dan vidio HTML</a></dt> + <dd>Menggabungkan vidio dan/atau audio di sebuah halaman web dan mengendalikan tayangannya.</dd> + <dt><a href="/id/docs/Web/API/WebRTC_API">WebRTC</a></dt> + <dd>RTC di WebRTC singkatan untuk Real-Time Communications, teknologi yang memungkinkan streaming audio/vidio dan berbagi data antara peramban (teman sebaya) klien.</dd> +</dl> + +<h3 id="Lainnya">Lainnya</h3> + +<dl> + <dt><a href="/id/docs/Web/MathML">MathML</a></dt> + <dd>Mathematical Markup Language (MathML) memungkinkan Anda menampilkan persamaan dan sintaks.</dd> + <dt><a href="/id/docs/Web/XSLT">XSLT</a></dt> + <dd>Extensible Stylesheet Language Transformations (XSLT) memungkinan Anda mengubah dokumen XML menjadi HTML yang lebih dapat dibaca manusia.</dd> + <dt><a href="/id/docs/Web/EXSLT">EXSLT</a></dt> + <dd>Fungsi tambahan yang memungkinkan penambahan fitur ke XSLT.</dd> + <dt><a href="/id/docs/Web/XPath">XPath</a></dt> + <dd>XPath memungkinan Anda memilih node <span lang="en" title="Documenr Object Model">DOM</span> di dokumen menggunakan sintaks kuat daripada penyedianya saat ini oleh <a href="/id/docs/Web/CSS/CSS_Selectors" lang="en">CSS selectors</a>.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Documentation" id="Ruang_Belajar">Ruang Belajar</h2> + +<dl> + <dt><a href="/id/docs/Learn">Belajar Pengembangan Web</a></dt> + <dd>Kumpulan artikel ini menyediakan pemula dengan segala yang mereka butuhkan untuk memulai <em lang="en">coding</em> situs web sederhana.</dd> + <dt><a href="/id/docs/Web/Apps/Progressive">Pemroses aplikasi web</a></dt> + <dd>Pemroses aplikasi web menggunakan modern <em lang="en">API</em> bersama dengan strategi peningkatan pemrosesan tradisi untuk membuat aplikasi web berbagai perangkat. Aplikasi ini bekerja dimana saja dan menyediakan beberapa fitur yang memberikan keuntungan pengalaman sesama pengguna sebagai aplikasi asli. Kumupulan set dokumen ini dan panduannya memberikan semua yang kalian perlukan untuk mengetahui tentang PAW.</dd> +</dl> + +<h2 id="Topik-topik_lainnya">Topik-topik lainnya</h2> + +<dl> + <dt><a href="/id/docs/Web/Accessibility">Aksesbilitas</a></dt> + <dd>Situs-situs web aksessibel memungkinkan sebanyak-banyaknya orang dapat menggubakan web, termasuk keterbatasan visual, pendengaran, atau kemampuan lainnya. Kumpulan artikel ini menyediakan informasi mengenai pengembangan web aksessibel.</dd> + <dt><a href="/id/docs/Web/Performance">Kinerja Web</a></dt> + <dd>Kinerja Web merupakan seni untuk memastika aplikasi web dimuat cepat dan responsif untuk interaksi pengguna, gak peduli bandwith pengguna, ukuran layar, jaringan, atau kemampuan perangkat.</dd> + <dt><a href="/id/docs/Web/Security">Keamanan</a></dt> + <dd>Jangan biarkan situs web atau aplikasi Anda kebocoran data ke penjahat. Gunakan kumpulan artikel ini untuk memastikan proyek Anda aman.</dd> + <dt><a href="/id/docs/WebAssembly">WebAssembly</a></dt> + <dd>WebAssembly adalah jenis kode baru yang dapat dijalankan di peramban web — ini merupakan seperti bahasa <em lang="en">assembly low-level</em> dengan format <em lang="en">compact binary</em> yang berjalan dengan mendekati kinerja asli dan menyediakan bahasa seperti C/C++ dan Rust dengan target kompasi jadi dapat dijalankan di web.</dd> +</dl> +</div> +</div> + +<p><span class="alllinks"><a href="/en-US/docs/tag/Web">Lihat Semua...</a></span></p> diff --git a/files/id/web/javascript/a_re-introduction_to_javascript/index.html b/files/id/web/javascript/a_re-introduction_to_javascript/index.html new file mode 100644 index 0000000000..5b7ef3b14e --- /dev/null +++ b/files/id/web/javascript/a_re-introduction_to_javascript/index.html @@ -0,0 +1,862 @@ +--- +title: Sebuah pengenalan ulang pada bahasa JavaScript (tutorial JS) +slug: Web/JavaScript/A_re-introduction_to_JavaScript +translation_of: Web/JavaScript/A_re-introduction_to_JavaScript +--- +<div>{{jsSidebar}}</div> + +<h2 id="Pengantar">Pengantar</h2> + +<p>Mengapa melakukan pengenalan ulang? Karena bahasa {{Glossary("JavaScript")}} terkenal dengan cap buruk sebagai <a href="http://javascript.crockford.com/javascript.html">bahasa pemprograman yang paling sering membuat kesalahpahaman di dunia</a>. Sering kali JavaScript diejek sebagai sebuah mainan (layaknya mobil-mobilan) karena terlihat sederhana, tetapi dibalik kesederhanaannya tersebut, terdapat beberapa fitur yang sangat andal. Saat ini JavaScript digunakan oleh aplikasi-aplikasi terkenal dalam jumlah<em> </em>yang luar biasa banyaknya, memiliki pengetahuan yang mendalam tentang teknologi ini adalah salah satu skill penting bagi para pengembang <em>web </em>atau <em>mobile</em>.</p> + +<p>Ada baiknya kita memulai pengenalan ini dengan mengetahui sekilas gambaran sejarah dari bahasa pemograman ini. JavaScript dibuat pada tahun 1995 oleh Brendan Eich ketika dia menjadi seorang insinyur perangkat lunak di Netscape. JavaScript dirilis bersamaan dengan Netscape 2 di permulaan tahun 1996. Awalnya JavaScript dinamakan LiveScript, tetapi diganti menjadi JavaScript karena memanfaatkan ketenaran bahasa pemograman Java dari Sun Microsystem, walaupun keduanya memiliki sedikit sekali kesamaan. Hal inilah yang menjadi sumber kebingungan sejak saat itu.</p> + +<p>Beberapa bulan kemudian, Microsoft merilis JScript yang tertanam di dalam Internet Explore 3. Sebagian besar JScript kompatible dan mirip dengan JavaScript. Beberapa bulan setelahnya Netscape mengajukan JavaScript ke <a href="http://www.ecma-international.org/">Ecma International, </a>Organisasi Eropa yang melakukan standarisasi sistem informasi dan komunikasi, yang kemudian menghasilkan edisi pertama dari standar {{Glossary("ECMAScript")}} pada tahun itu. Standar ini memperoleh pembaharuan yang signifikan pada <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript edisi ke-3 </a>pada tahun 1999, dan sejak saat itu standar tersebut tidak terlalu banyak mengalami perubahan. Edisi ke-4 ECMAScript diabaikan dengan alasan perbedaan pandangan terhadap kompleksitas bahasa. Beberapa bagian dari edisi ECMAScript ke-4 membentuk dasar ECMAScript edisi ke-5, yang dipublikasi pada tahun 2009 and edisi ECMAScript ke-6 dirilis pada bulan Juni tahun 2015.</p> + +<div class="note"> +<p>Karena lebih familiar, mulai dari sini kita akan mengacu ECMAScript sebagai "JavaScript".</p> +</div> + +<p>Tidak seperti kebanyakan bahasa pemograman, JavaScript tidak mempunyai konsep input atau output (I/O). Didesain untuk dapat dieksekusi sebagai bahasa <em>scripting </em>pada lingkungan pengguna dan mekanisme komunikasi dengan dunia luar diserahkan kepada lingkungan pengguna. Browser adalah lingkungan pengguna yang sangat umum, tetapi Interpreter JavaScript dapat juga ditemukan ditempat lain, termasuk Adobe Acrobat, Adobe Photshop, SVG images, Yahoo Widget engine, lingkungan server seperti <a href="http://nodejs.org/">Node.js</a>, database NoSQL seperti <a href="http://couchdb.apache.org/">Apache CouchDB</a>, komputer tertanam, lingkungan desktop seperti GNOME (salah satu antarmuka yang paling terkenal pada sustem operasi GNU/Linux), dan masih banyak lagi yang lainnya.<br> + </p> + +<h2 id="Ikhtisar"><span class="short_text" id="result_box" lang="id"><span>Ikhtisar</span></span></h2> + +<p>JavaScript adalah bahasa pemograman dinamis berorientasi objek dengan types dan operator, objek bawaan standar (objek literal), dan methods. Syntax JavaScript dipengaruhi oleh bahasa Java dan C - sangat banyak struktur dalam bahasa tersebut yang digunakan dalam JavaScript. Perbedaan yang paling mendasar adalah JavaScript tidak mempunyai kelas, melainkan fungsionalitas kelas yang dicapai dengan obyek prototipe (Lebih lanjut tentang ES6 {{jsxref("Classes")}}). Perbedaan utama lainnya adalah fungsi sebagai objek, yaitu fungsi mempunyai kapasitas untuk menahan kode yang dapat dieksekusi dan dilewatkan seperti objek yang lain.</p> + +<p>Mari mulai dengan melihat blok pembangun dari bahasa pemograman: types (tipe-tipe data). Program pada JavaScript memanipulasi nilai dan nilai tersebut termasuk ke dalam sebuah tipe. Beberapa tipe dalam JavaScript adalah:<br> + </p> + +<ul> + <li>{{jsxref("Number")}}</li> + <li>{{jsxref("String")}}</li> + <li>{{jsxref("Boolean")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("objek")}}</li> + <li>{{jsxref("Symbol")}} (Baru ditambahkan pada ES6)</li> +</ul> + +<p>...ooo, ada lagi {{jsxref("undefined")}} and {{jsxref("null")}} keduanya mempunyai karakteristik yang sedikit ganjil, {{jsxref("Array")}} merupakan objek spesial, {{jsxref("Date")}} dan {{jsxref("RegExp")}} merupakan objek yang dapat digunakan langsung dan untuk lebih tepatnya, fungsi termasuk dalam objek spesial. Jadi, diagramnya kira-kira seperti ini:</p> + +<ul> + <li>{{jsxref("Number")}}</li> + <li>{{jsxref("String")}}</li> + <li>{{jsxref("Boolean")}}</li> + <li>{{jsxref("Symbol")}} (new in Edition 6)</li> + <li>{{jsxref("objek")}} + <ul> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Date")}}</li> + <li>{{jsxref("RegExp")}}</li> + </ul> + </li> + <li>{{jsxref("null")}}</li> + <li>{{jsxref("undefined")}}</li> +</ul> + +<p>Ada beberapa tipe {{jsxref("Error")}} bawaan juga, akan lebih memudahkan jika kita mempelajari terlebih dahulu diagram pertama, bagaimanapun juga kita akan membahas tipe - tipe yang telah dituliskan diatas.</p> + +<h2 id="Numbers">Numbers</h2> + +<p>Menurut spesifikasi, tipe nomer pada JavaScript menggunakan "format IEEE 754 64-bit double-presisi". Hal ini menyebabkan beberapa konsekuensi, diantaranya tidak adanya tipe integer pada JavaScript. Jadi programmer harus agak teliti dengan operasi aritmatika jika sebelumnya berangkat dari C atau Java.<br> + <br> + Perlu juga memperhatikan kasus seperti berikut:</p> + +<pre class="brush: js notranslate">0.1 + 0.2 == 0.30000000000000004 +</pre> + +<p>Dalam praktiknya, nilai integer diperlakukan sebagai int 32-bit, dan beberapa implementasi bahkan menyimpannya demikian (dalam int 32-bit) kecuali diinstruksikan agar nilai tersebut valid sebagai tipe Number namun tidak dalam integer 32-bit. Hal ini mungkin saja penting untuk operasi yang mementingkan ukuran bit.</p> + +<p>Standar<a href="/en-US/docs/Web/JavaScript/Reference/Operators#Arithmetic_operators"> operasi aritmatika</a> tersedia, seperti penjumlahan, pengurangan, modulus, dan lain-lain. Ada juga Object bawaan yang kami lupa menyebutkannya di awal disebut {{jsxref("Math")}} yang menyediakan fungsi matematika dan konstan:</p> + +<pre class="brush: js notranslate">Math.sin(3.5); +var circumference = Math.PI * (r + r); +</pre> + +<p>Anda dapat mengonversi sebuah string ke integer dengan menggunakan fungsi bawaan {{jsxref("Global_objeks/parseInt", "parseInt()")}}. Basis konversi dapat ditambahkan sebagai argumen kedua (tidak wajib), namun sebaiknya ditambahkan:</p> + +<pre class="brush: js notranslate">parseInt("123", 10); // 123 +parseInt("010", 10); // 10 +</pre> + +<p>Pada peramban kuno, string yang diawali dengan "0" diasumsikan sebagai octal (radix 8), namun hal ini tidak lagi menjadi masalah sejak 2013 dan seterusnya. Kecuali Anda sudah yakin mengenai format string-nya, Anda akan mendapatkan hasil mengejutkan pada peramban kuno tersebut:</p> + +<pre class="brush: js notranslate">parseInt("010"); // 8 +parseInt("0x10"); // 16 +</pre> + +<p>Di sini, kita melihat fungsi {{jsxref("Global_objeks/parseInt", "parseInt()")}} memperlakukan string pertama sebagai oktal karena diawali dengan "0", dan string kedua sebagai hexadecimal karena diawali dengan "0x". <em>Notasi heksadesimal masih ada</em>; hanya oktal yang telah dihapus.</p> + +<p>If you want to convert a binary number to an integer, just change the base:</p> + +<pre class="brush: js notranslate">parseInt("11", 2); // 3 +</pre> + +<p>Similarly, you can parse floating point numbers using the built-in {{jsxref("Global_objeks/parseFloat", "parseFloat()")}} function. Unlike its {{jsxref("Global_objeks/parseInt", "parseInt()")}} cousin, <code>parseFloat()</code> always uses base 10.</p> + +<p>You can also use the unary <code>+</code> operator to convert values to numbers:</p> + +<pre class="brush: js notranslate">+ "42"; // 42 ++ "010"; // 10 ++ "0x10"; // 16 +</pre> + +<p>A special value called {{jsxref("NaN")}} (short for "Not a Number") is returned if the string is non-numeric:</p> + +<pre class="brush: js notranslate">parseInt("hello", 10); // NaN +</pre> + +<p><code>NaN</code> is toxic: if you provide it as an input to any mathematical operation the result will also be <code>NaN</code>:</p> + +<pre class="brush: js notranslate">NaN + 5; // NaN +</pre> + +<p>You can test for <code>NaN</code> using the built-in {{jsxref("Global_objeks/isNaN", "isNaN()")}} function:</p> + +<pre class="brush: js notranslate">isNaN(NaN); // true +</pre> + +<p>JavaScript also has the special values {{jsxref("Infinity")}} and <code>-Infinity</code>:</p> + +<pre class="brush: js notranslate"> 1 / 0; // Infinity +-1 / 0; // -Infinity +</pre> + +<p>You can test for <code>Infinity</code>, <code>-Infinity</code> and <code>NaN</code> values using the built-in {{jsxref("Global_objeks/isFinite", "isFinite()")}} function:</p> + +<pre class="brush: js notranslate">isFinite(1/0); // false +isFinite(-Infinity); // false +isFinite(NaN); // false +</pre> + +<div class="note">The {{jsxref("Global_objeks/parseInt", "parseInt()")}} and {{jsxref("Global_objeks/parseFloat", "parseFloat()")}} functions parse a string until they reach a character that isn't valid for the specified number format, then return the number parsed up to that point. However the "+" operator simply converts the string to <code>NaN</code> if there is an invalid character contained within it. Just try parsing the string "10.2abc" with each method by yourself in the console and you'll understand the differences better.</div> + +<h2 id="Strings">Strings</h2> + +<p>Strings in JavaScript are sequences of <a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Unicode">Unicode characters</a>. This should be welcome news to anyone who has had to deal with internationalization. More accurately, they are sequences of UTF-16 code units; each code unit is represented by a 16-bit number. Each Unicode character is represented by either 1 or 2 code units.</p> + +<p>If you want to represent a single character, you just use a string consisting of that single character.</p> + +<p>To find the length of a string (in code units), access its <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/length">length</a></code> property:</p> + +<pre class="brush: js notranslate">"hello".length; // 5 +</pre> + +<p>There's our first brush with JavaScript objeks! Did we mention that you can use strings like {{jsxref("objek", "objeks", "", 1)}} too? They have {{jsxref("String", "methods", "#Methods", 1)}} as well that allow you to manipulate the string and access information about the string:</p> + +<pre class="brush: js notranslate">"hello".charAt(0); // "h" +"hello, world".replace("hello", "goodbye"); // "goodbye, world" +"hello".toUpperCase(); // "HELLO" +</pre> + +<h2 id="Other_types">Other types</h2> + +<p>JavaScript distinguishes between {{jsxref("null")}}, which is a value that indicates a deliberate non-value (and is only accessible through the <code>null</code> keyword), and {{jsxref("undefined")}}, which is a value of type <code>undefined</code> that indicates an uninitialized value — that is, a value hasn't even been assigned yet. We'll talk about variables later, but in JavaScript it is possible to declare a variable without assigning a value to it. If you do this, the variable's type is <code>undefined</code>. <code>undefined</code> is actually a constant.</p> + +<p>JavaScript has a boolean type, with possible values <code>true</code> and <code>false</code> (both of which are keywords.) Any value can be converted to a boolean according to the following rules:</p> + +<ol> + <li><code>false</code>, <code>0</code>, empty strings (<code>""</code>), <code>NaN</code>, <code>null</code>, and <code>undefined</code> all become <code>false.</code></li> + <li>All other values become <code>true.</code></li> +</ol> + +<p>You can perform this conversion explicitly using the <code>Boolean()</code> function:</p> + +<pre class="brush: js notranslate">Boolean(""); // false +Boolean(234); // true +</pre> + +<p>However, this is rarely necessary, as JavaScript will silently perform this conversion when it expects a boolean, such as in an <code>if</code> statement (see below.) For this reason, we sometimes speak simply of "true values" and "false values," meaning values that become <code>true</code> and <code>false</code>, respectively, when converted to booleans. Alternatively, such values can be called "truthy" and "falsy", respectively.</p> + +<p>Boolean operations such as <code>&&</code> (logical <em>and</em>), <code>||</code> (logical <em>or</em>), and <code>!</code> (logical <em>not</em>) are supported; see below.</p> + +<h2 id="Variables">Variables</h2> + +<p>New variables in JavaScript are declared using the <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/var" title="/en/JavaScript/Reference/Statements/var">var</a></code> keyword:</p> + +<pre class="brush: js notranslate">var a; +var name = "simon"; +</pre> + +<p>If you declare a variable without assigning any value to it, its type is <code>undefined</code>.</p> + +<p>An important difference between JavaScript and other languages like Java is that in JavaScript, blocks do not have scope; only functions have scope. So if a variable is defined using <code>var</code> in a compound statement (for example inside an <code>if</code> control structure), it will be visible to the entire function. However, starting with ECMAScript Edition 6, <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a></code> and <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a></code> declarations allow you to create block-scoped variables.</p> + +<h2 id="Operators">Operators</h2> + +<p>JavaScript's numeric operators are <code>+</code>, <code>-</code>, <code>*</code>, <code>/</code> and <code>%</code> — which is the remainder operator (<a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder_%28%29">which is not the same as modulo</a>.) Values are assigned using <code>=</code>, and there are also compound assignment statements such as <code>+=</code> and <code>-=</code>. These extend out to <code>x = x <em>operator</em> y</code>.</p> + +<pre class="brush: js notranslate">x += 5 +x = x + 5 +</pre> + +<p>You can use <code>++</code> and <code>--</code> to increment and decrement respectively. These can be used as prefix or postfix operators.</p> + +<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Addition" title="/en/JavaScript/Reference/Operators/String_Operators"><code>+</code> operator</a> also does string concatenation:</p> + +<pre class="brush: js notranslate">"hello" + " world"; // "hello world" +</pre> + +<p>If you add a string to a number (or other value) everything is converted in to a string first. This might catch you up:</p> + +<pre class="brush: js notranslate">"3" + 4 + 5; // "345" + 3 + 4 + "5"; // "75" +</pre> + +<p>Adding an empty string to something is a useful way of converting it to a string itself.</p> + +<p><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators" title="/en/JavaScript/Reference/Operators/Comparison_Operators">Comparisons</a> in JavaScript can be made using <code><</code>, <code>></code>, <code><=</code> and <code>>=</code>. These work for both strings and numbers. Equality is a little less straightforward. The double-equals operator performs type coercion if you give it different types, with sometimes interesting results:</p> + +<pre class="brush: js notranslate">123 == "123"; // true +1 == true; // true +</pre> + +<p>To avoid type coercion and make sure your comparisons are always accurate, you should always use the triple-equals operator:</p> + +<pre class="brush: js notranslate">123 === "123"; // false +1 === true; // false +</pre> + +<p>There are also <code>!=</code> and <code>!==</code> operators.</p> + +<p>JavaScript also has <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="/en/JavaScript/Reference/Operators/Bitwise_Operators">bitwise operations</a>. If you want to use them, they're there.</p> + +<h2 id="Control_structures">Control structures</h2> + +<p>JavaScript has a similar set of control structures to other languages in the C family. Conditional statements are supported by <code>if</code> and <code>else</code>; you can chain them together if you like:</p> + +<pre class="brush: js notranslate">var name = "kittens"; +if (name == "puppies") { + name += "!"; +} else if (name == "kittens") { + name += "!!"; +} else { + name = "!" + name; +} +name == "kittens!!" +</pre> + +<p>JavaScript has <code>while</code> loops and <code>do-while</code> loops. The first is good for basic looping; the second for loops where you wish to ensure that the body of the loop is executed at least once:</p> + +<pre class="brush: js notranslate">while (true) { + // an infinite loop! +} + +var input; +do { + input = get_input(); +} while (inputIsNotValid(input)) +</pre> + +<p>JavaScript's <code>for</code> loop is the same as that in C and Java: it lets you provide the control information for your loop on a single line.</p> + +<pre class="brush: js notranslate">for (var i = 0; i < 5; i++) { + // Will execute 5 times +} +</pre> + +<p>The <code>&&</code> and <code>||</code> operators use short-circuit logic, which means whether they will execute their second operand is dependent on the first. This is useful for checking for null objeks before accessing their attributes:</p> + +<pre class="brush: js notranslate">var name = o && o.getName(); +</pre> + +<p>Or for setting default values:</p> + +<pre class="brush: js notranslate">var name = otherName || "default"; +</pre> + +<p>JavaScript has a ternary operator for conditional expressions:</p> + +<pre class="brush: js notranslate">var allowed = (age > 18) ? "yes" : "no"; +</pre> + +<p>The <code>switch</code> statement can be used for multiple branches based on a number or string:</p> + +<pre class="brush: js notranslate">switch(action) { + case 'draw': + drawIt(); + break; + case 'eat': + eatIt(); + break; + default: + doNothing(); +} +</pre> + +<p>If you don't add a <code>break</code> statement, execution will "fall through" to the next level. This is very rarely what you want — in fact it's worth specifically labeling deliberate fallthrough with a comment if you really meant it to aid debugging:</p> + +<pre class="brush: js notranslate">switch(a) { + case 1: // fallthrough + case 2: + eatIt(); + break; + default: + doNothing(); +} +</pre> + +<p>The default clause is optional. You can have expressions in both the switch part and the cases if you like; comparisons take place between the two using the <code>===</code> operator:</p> + +<pre class="brush: js notranslate">switch(1 + 3) { + case 2 + 2: + yay(); + break; + default: + neverhappens(); +} +</pre> + +<h2 id="objeks">objeks</h2> + +<p>JavaScript objeks can be thought of as simple collections of name-value pairs. As such, they are similar to:</p> + +<ul> + <li>Dictionaries in Python.</li> + <li>Hashes in Perl and Ruby.</li> + <li>Hash tables in C and C++.</li> + <li>HashMaps in Java.</li> + <li>Associative arrays in PHP.</li> +</ul> + +<p>The fact that this data structure is so widely used is a testament to its versatility. Since everything (bar core types) in JavaScript is an objek, any JavaScript program naturally involves a great deal of hash table lookups. It's a good thing they're so fast!</p> + +<p>The "name" part is a JavaScript string, while the value can be any JavaScript value — including more objeks. This allows you to build data structures of arbitrary complexity.</p> + +<p>There are two basic ways to create an empty objek:</p> + +<pre class="brush: js notranslate">var obj = new objek(); +</pre> + +<p>And:</p> + +<pre class="brush: js notranslate">var obj = {}; +</pre> + +<p>These are semantically equivalent; the second is called objek literal syntax, and is more convenient. This syntax is also the core of JSON format and should be preferred at all times.</p> + +<p>objek literal syntax can be used to initialize an objek in its entirety:</p> + +<pre class="brush: js notranslate">var obj = { + name: "Carrot", + "for": "Max", + details: { + color: "orange", + size: 12 + } +} +</pre> + +<p>Attribute access can be chained together:</p> + +<pre class="brush: js notranslate">obj.details.color; // orange +obj["details"]["size"]; // 12 +</pre> + +<p>The following example creates an objek prototype, Person, and instance of that prototype, You.</p> + +<pre class="brush: js notranslate">function Person(name, age) { + this.name = name; + this.age = age; +} + +// Define an objek +var You = new Person("You", 24); +// We are creating a new person named "You" +// (that was the first parameter, and the age..) +</pre> + +<p>Once created, an objek's properties can again be accessed in one of two ways:</p> + +<pre class="brush: js notranslate">obj.name = "Simon"; +var name = obj.name; +</pre> + +<p>And...</p> + +<pre class="brush: js notranslate">obj["name"] = "Simon"; +var name = obj["name"]; +</pre> + +<p>These are also semantically equivalent. The second method has the advantage that the name of the property is provided as a string, which means it can be calculated at run-time. However, using this method prevents some JavaScript engine and minifier optimizations being applied. It can also be used to set and get properties with names that are <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords" title="/en/JavaScript/Reference/Reserved_Words">reserved words</a>:</p> + +<pre class="brush: js notranslate">obj.for = "Simon"; // Syntax error, because 'for' is a reserved word +obj["for"] = "Simon"; // works fine +</pre> + +<div class="note"> +<p>Starting in ECMAScript 5, reserved words may be used as objek property names "in the buff". This means that they don't need to be "clothed" in quotes when defining objek literals. See the ES5 <a href="http://es5.github.io/#x7.6.1">Spec</a>.</p> +</div> + +<p>For more on objeks and prototypes see: <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype">objek.prototype</a>.</p> + +<h2 id="Arrays">Arrays</h2> + +<p>Arrays in JavaScript are actually a special type of objek. They work very much like regular objeks (numerical properties can naturally be accessed only using <code>[]</code> syntax) but they have one magic property called '<code>length</code>'. This is always one more than the highest index in the array.</p> + +<p>One way of creating arrays is as follows:</p> + +<pre class="brush: js notranslate">var a = new Array(); +a[0] = "dog"; +a[1] = "cat"; +a[2] = "hen"; +a.length; // 3 +</pre> + +<p>A more convenient notation is to use an array literal:</p> + +<pre class="brush: js notranslate">var a = ["dog", "cat", "hen"]; +a.length; // 3 +</pre> + +<p>Note that <code>array.length</code> isn't necessarily the number of items in the array. Consider the following:</p> + +<pre class="brush: js notranslate">var a = ["dog", "cat", "hen"]; +a[100] = "fox"; +a.length; // 101 +</pre> + +<p>Remember — the length of the array is one more than the highest index.</p> + +<p>If you query a non-existent array index, you'll get a value of <code>undefined</code> returned:</p> + +<pre class="brush: js notranslate">typeof a[90]; // undefined +</pre> + +<p>If you take the above into account, you can iterate over an array using the following:</p> + +<pre class="brush: js notranslate">for (var i = 0; i < a.length; i++) { + // Do something with a[i] +} +</pre> + +<p>You can iterate over an array using a <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in" title="/en/JavaScript/Reference/Statements/for...in">for...in</a></code> loop. Note that if someone added new properties to <code>Array.prototype</code>, they will also be iterated over by this loop. Therefore this method is "not" recommended.</p> + +<p>Another way of iterating over an array that was added with ECMAScript 5 is <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach">forEach()</a>:</p> + +<pre class="brush: js notranslate" style="font-size: 14px;">["dog", "cat", "hen"].forEach(function(currentValue, index, array) { + // Do something with currentValue or array[index] +}); +</pre> + +<p>If you want to append an item to an array simply do it like this:</p> + +<pre class="brush: js notranslate">a.push(item);</pre> + +<p>Arrays come with a number of methods. See also the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">full documentation for array methods</a>.</p> + +<table> + <thead> + <tr> + <th scope="col">Method name</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>a.toString()</code></td> + <td>Returns a string with the <code>toString()</code> of each element separated by commas.</td> + </tr> + <tr> + <td><code>a.toLocaleString()</code></td> + <td>Returns a string with the <code>toLocaleString()</code> of each element separated by commas.</td> + </tr> + <tr> + <td><code>a.concat(item1[, item2[, ...[, itemN]]])</code></td> + <td>Returns a new array with the items added on to it.</td> + </tr> + <tr> + <td><code>a.join(sep)</code></td> + <td>Converts the array to a string — with values delimited by the <code>sep</code> param</td> + </tr> + <tr> + <td><code>a.pop()</code></td> + <td>Removes and returns the last item.</td> + </tr> + <tr> + <td><code>a.push(item1, ..., itemN)</code></td> + <td>Adds one or more items to the end.</td> + </tr> + <tr> + <td><code>a.reverse()</code></td> + <td>Reverses the array.</td> + </tr> + <tr> + <td><code>a.shift()</code></td> + <td>Removes and returns the first item.</td> + </tr> + <tr> + <td><code>a.slice(start[, end])</code></td> + <td>Returns a sub-array.</td> + </tr> + <tr> + <td><code>a.sort([cmpfn])</code></td> + <td>Takes an optional comparison function.</td> + </tr> + <tr> + <td><code>a.splice(start, delcount[, item1[, ...[, itemN]]])</code></td> + <td>Lets you modify an array by deleting a section and replacing it with more items.</td> + </tr> + <tr> + <td><code>a.unshift(item1[, item2[, ...[, itemN]]])</code></td> + <td>Prepends items to the start of the array.</td> + </tr> + </tbody> +</table> + +<h2 id="Functions">Functions</h2> + +<p>Along with objeks, functions are the core component in understanding JavaScript. The most basic function couldn't be much simpler:</p> + +<pre class="brush: js notranslate">function add(x, y) { + var total = x + y; + return total; +} +</pre> + +<p>This demonstrates a basic function. A JavaScript function can take 0 or more named parameters. The function body can contain as many statements as you like, and can declare its own variables which are local to that function. The <code>return</code> statement can be used to return a value at any time, terminating the function. If no return statement is used (or an empty return with no value), JavaScript returns <code>undefined</code>.</p> + +<p>The named parameters turn out to be more like guidelines than anything else. You can call a function without passing the parameters it expects, in which case they will be set to <code>undefined</code>.</p> + +<pre class="brush: js notranslate">add(); // NaN +// You can't perform addition on undefined +</pre> + +<p>You can also pass in more arguments than the function is expecting:</p> + +<pre class="brush: js notranslate">add(2, 3, 4); // 5 +// added the first two; 4 was ignored +</pre> + +<p>That may seem a little silly, but functions have access to an additional variable inside their body called <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments" title="/en/JavaScript/Reference/Functions_and_function_scope/arguments"><code>arguments</code></a>, which is an array-like objek holding all of the values passed to the function. Let's re-write the add function to take as many values as we want:</p> + +<pre class="brush: js notranslate">function add() { + var sum = 0; + for (var i = 0, j = arguments.length; i < j; i++) { + sum += arguments[i]; + } + return sum; +} + +add(2, 3, 4, 5); // 14 +</pre> + +<p>That's really not any more useful than writing <code>2 + 3 + 4 + 5</code> though. Let's create an averaging function:</p> + +<pre class="brush: js notranslate">function avg() { + var sum = 0; + for (var i = 0, j = arguments.length; i < j; i++) { + sum += arguments[i]; + } + return sum / arguments.length; +} + +avg(2, 3, 4, 5); // 3.5 +</pre> + +<p>This is pretty useful, but introduces a new problem. The <code>avg()</code> function takes a comma separated list of arguments — but what if you want to find the average of an array? You could just rewrite the function as follows:</p> + +<pre class="brush: js notranslate">function avgArray(arr) { + var sum = 0; + for (var i = 0, j = arr.length; i < j; i++) { + sum += arr[i]; + } + return sum / arr.length; +} + +avgArray([2, 3, 4, 5]); // 3.5 +</pre> + +<p>But it would be nice to be able to reuse the function that we've already created. Luckily, JavaScript lets you call a function and call it with an arbitrary array of arguments, using the {{jsxref("Function.apply", "apply()")}} method of any function objek.</p> + +<pre class="brush: js notranslate">avg.apply(null, [2, 3, 4, 5]); // 3.5 +</pre> + +<p>The second argument to <code>apply()</code> is the array to use as arguments; the first will be discussed later on. This emphasizes the fact that functions are objeks too.</p> + +<p>JavaScript lets you create anonymous functions.</p> + +<pre class="brush: js notranslate">var avg = function() { + var sum = 0; + for (var i = 0, j = arguments.length; i < j; i++) { + sum += arguments[i]; + } + return sum / arguments.length; +}; +</pre> + +<p>This is semantically equivalent to the <code>function avg()</code> form. It's extremely powerful, as it lets you put a full function definition anywhere that you would normally put an expression. This enables all sorts of clever tricks. Here's a way of "hiding" some local variables — like block scope in C:</p> + +<pre class="brush: js notranslate">var a = 1; +var b = 2; + +(function() { + var b = 3; + a += b; +})(); + +a; // 4 +b; // 2 +</pre> + +<p>JavaScript allows you to call functions recursively. This is particularly useful for dealing with tree structures, such as those found in the browser DOM.</p> + +<pre class="brush: js notranslate">function countChars(elm) { + if (elm.nodeType == 3) { // TEXT_NODE + return elm.nodeValue.length; + } + var count = 0; + for (var i = 0, child; child = elm.childNodes[i]; i++) { + count += countChars(child); + } + return count; +} +</pre> + +<p>This highlights a potential problem with anonymous functions: how do you call them recursively if they don't have a name? JavaScript lets you name function expressions for this. You can use named IIFEs (Immediately Invoked Function Expressions) as shown below:</p> + +<pre class="brush: js notranslate">var charsInBody = (function counter(elm) { + if (elm.nodeType == 3) { // TEXT_NODE + return elm.nodeValue.length; + } + var count = 0; + for (var i = 0, child; child = elm.childNodes[i]; i++) { + count += counter(child); + } + return count; +})(document.body); +</pre> + +<p>The name provided to a function expression as above is only available to the function's own scope. This allows more optimizations to be done by the engine and results in more readable code. The name also shows up in the debugger and some stack traces, which can save you time when debugging.</p> + +<p>Note that JavaScript functions are themselves objeks — like everything else in JavaScript — and you can add or change properties on them just like we've seen earlier in the objeks section.</p> + +<h2 id="Custom_objeks">Custom objeks</h2> + +<div class="note">For a more detailed discussion of objek-oriented programming in JavaScript, see <a href="/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript" title="https://developer.mozilla.org/en/Introduction_to_Object-Oriented_JavaScript">Introduction to objek Oriented JavaScript</a>.</div> + +<p>In classic objek Oriented Programming, objeks are collections of data and methods that operate on that data. JavaScript is a prototype-based language that contains no class statement, as you'd find in C++ or Java (this is sometimes confusing for programmers accustomed to languages with a class statement.) Instead, JavaScript uses functions as classes. Let's consider a person objek with first and last name fields. There are two ways in which the name might be displayed: as "first last" or as "last, first". Using the functions and objeks that we've discussed previously, we could display the data like this:</p> + +<pre class="example-bad brush: js notranslate">function makePerson(first, last) { + return { + first: first, + last: last + }; +} +function personFullName(person) { + return person.first + ' ' + person.last; +} +function personFullNameReversed(person) { + return person.last + ', ' + person.first; +} + +s = makePerson("Simon", "Willison"); +personFullName(s); // "Simon Willison" +personFullNameReversed(s); // "Willison, Simon" +</pre> + +<p>This works, but it's pretty ugly. You end up with dozens of functions in your global namespace. What we really need is a way to attach a function to an objek. Since functions are objeks, this is easy:</p> + +<pre class="brush: js notranslate">function makePerson(first, last) { + return { + first: first, + last: last, + fullName: function() { + return this.first + ' ' + this.last; + }, + fullNameReversed: function() { + return this.last + ', ' + this.first; + } + }; +} + +s = makePerson("Simon", "Willison") +s.fullName(); // "Simon Willison" +s.fullNameReversed(); // "Willison, Simon" +</pre> + +<p>There's something here we haven't seen before: the <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this" title="/en/JavaScript/Reference/Operators/this">this</a></code> keyword. Used inside a function, <code>this</code> refers to the current objek. What that actually means is specified by the way in which you called that function. If you called it using <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Accessing_properties" title="/en/JavaScript/Reference/Operators/Member_Operators">dot notation or bracket notation</a> on an objek, that objek becomes <code>this</code>. If dot notation wasn't used for the call, <code>this</code> refers to the global objek.</p> + +<p>Note that <code>this</code> is a frequent cause of mistakes. For example:</p> + +<pre class="brush: js notranslate">s = makePerson("Simon", "Willison"); +var fullName = s.fullName; +fullName(); // undefined undefined +</pre> + +<p>When we call <code>fullName()</code> alone, without using <code>s.fullName()</code>, <code>this</code> is bound to the global objek. Since there are no global variables called <code>first</code> or <code>last</code> we get <code>undefined</code> for each one.</p> + +<p>We can take advantage of the <code>this</code> keyword to improve our <code>makePerson</code> function:</p> + +<pre class="brush: js notranslate">function Person(first, last) { + this.first = first; + this.last = last; + this.fullName = function() { + return this.first + ' ' + this.last; + }; + this.fullNameReversed = function() { + return this.last + ', ' + this.first; + }; +} +var s = new Person("Simon", "Willison"); +</pre> + +<p>We have introduced another keyword: <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new" title="/en/JavaScript/Reference/Operators/new">new</a></code>. <code>new</code> is strongly related to <code>this</code>. It creates a brand new empty objek, and then calls the function specified, with <code>this</code> set to that new objek. Notice though that the function specified with <code>this</code> does not return a value but merely modifies the <code>this</code> objek. It's new that returns the <code>this</code> objek to the calling site. Functions that are designed to be called by <code>new</code> are called constructor functions. Common practice is to capitalize these functions as a reminder to call them with <code>new</code>.</p> + +<p>The improved function still has the same pitfall with calling <code>fullName()</code> alone.</p> + +<p>Our person objeks are getting better, but there are still some ugly edges to them. Every time we create a person objek we are creating two brand new function objeks within it — wouldn't it be better if this code was shared?</p> + +<pre class="brush: js notranslate">function personFullName() { + return this.first + ' ' + this.last; +} +function personFullNameReversed() { + return this.last + ', ' + this.first; +} +function Person(first, last) { + this.first = first; + this.last = last; + this.fullName = personFullName; + this.fullNameReversed = personFullNameReversed; +} +</pre> + +<p>That's better: we are creating the method functions only once, and assigning references to them inside the constructor. Can we do any better than that? The answer is yes:</p> + +<pre class="brush: js notranslate">function Person(first, last) { + this.first = first; + this.last = last; +} +Person.prototype.fullName = function() { + return this.first + ' ' + this.last; +}; +Person.prototype.fullNameReversed = function() { + return this.last + ', ' + this.first; +}; +</pre> + +<p><code>Person.prototype</code> is an objek shared by all instances of <code>Person</code>. It forms part of a lookup chain (that has a special name, "prototype chain"): any time you attempt to access a property of <code>Person</code> that isn't set, JavaScript will check <code>Person.prototype</code> to see if that property exists there instead. As a result, anything assigned to <code>Person.prototype</code> becomes available to all instances of that constructor via the <code>this</code> objek.</p> + +<p>This is an incredibly powerful tool. JavaScript lets you modify something's prototype at any time in your program, which means you can add extra methods to existing objeks at runtime:</p> + +<pre class="brush: js notranslate">s = new Person("Simon", "Willison"); +s.firstNameCaps(); // TypeError on line 1: s.firstNameCaps is not a function + +Person.prototype.firstNameCaps = function firstNameCaps() { + return this.first.toUpperCase() +}; +s.firstNameCaps(); // "SIMON" +</pre> + +<p>Interestingly, you can also add things to the prototype of built-in JavaScript objeks. Let's add a method to <code>String</code> that returns that string in reverse:</p> + +<pre class="brush: js notranslate">var s = "Simon"; +s.reversed(); // TypeError on line 1: s.reversed is not a function + +String.prototype.reversed = function reversed() { + var r = ""; + for (var i = this.length - 1; i >= 0; i--) { + r += this[i]; + } + return r; +}; + +s.reversed(); // nomiS +</pre> + +<p>Our new method even works on string literals!</p> + +<pre class="brush: js notranslate">"This can now be reversed".reversed(); // desrever eb won nac sihT +</pre> + +<p>As mentioned before, the prototype forms part of a chain. The root of that chain is <code>objek.prototype</code>, whose methods include <code>toString()</code> — it is this method that is called when you try to represent an objek as a string. This is useful for debugging our <code>Person</code> objeks:</p> + +<pre class="brush: js notranslate">var s = new Person("Simon", "Willison"); +s; // [objek objek] + +Person.prototype.toString = function() { + return '<Person: ' + this.fullName() + '>'; +} + +s.toString(); // "<Person: Simon Willison>" +</pre> + +<p>Remember how <code>avg.apply()</code> had a null first argument? We can revisit that now. The first argument to <code>apply()</code> is the objek that should be treated as '<code>this</code>'. For example, here's a trivial implementation of <code>new</code>:</p> + +<pre class="brush: js notranslate">function trivialNew(constructor, ...args) { + var o = {}; // Create an objek + constructor.apply(o, args); + return o; +} +</pre> + +<p>This isn't an exact replica of <code>new</code> as it doesn't set up the prototype chain (it would be difficult to illustrate). This is not something you use very often, but it's useful to know about. In this snippet, <code>...args</code> (including the ellipsis) is called the "<a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest arguments</a>" — as the name implies, this contains the rest of the arguments.</p> + +<p>Calling</p> + +<pre class="brush: js notranslate">var bill = trivialNew(Person, "William", "Orange");</pre> + +<p>is therefore almost equivalent to</p> + +<pre class="brush: js notranslate">var bill = new Person("William", "Orange");</pre> + +<p><code>apply()</code> has a sister function named <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call" title="/en/JavaScript/Reference/Global_Objects/Function/call"><code>call</code></a>, which again lets you set <code>this</code> but takes an expanded argument list as opposed to an array.</p> + +<pre class="brush: js notranslate">function lastNameCaps() { + return this.last.toUpperCase(); +} +var s = new Person("Simon", "Willison"); +lastNameCaps.call(s); +// Is the same as: +s.lastNameCaps = lastNameCaps; +s.lastNameCaps(); +</pre> + +<h3 id="Inner_functions">Inner functions</h3> + +<p>JavaScript function declarations are allowed inside other functions. We've seen this once before, with an earlier <code>makePerson()</code> function. An important detail of nested functions in JavaScript is that they can access variables in their parent function's scope:</p> + +<pre class="brush: js notranslate">function betterExampleNeeded() { + var a = 1; + function oneMoreThanA() { + return a + 1; + } + return oneMoreThanA(); +} +</pre> + +<p>This provides a great deal of utility in writing more maintainable code. If a function relies on one or two other functions that are not useful to any other part of your code, you can nest those utility functions inside the function that will be called from elsewhere. This keeps the number of functions that are in the global scope down, which is always a good thing.</p> + +<p>This is also a great counter to the lure of global variables. When writing complex code it is often tempting to use global variables to share values between multiple functions — which leads to code that is hard to maintain. Nested functions can share variables in their parent, so you can use that mechanism to couple functions together when it makes sense without polluting your global namespace — "local globals" if you like. This technique should be used with caution, but it's a useful ability to have.</p> + +<h2 id="Closures">Closures</h2> + +<p>This leads us to one of the most powerful abstractions that JavaScript has to offer — but also the most potentially confusing. What does this do?</p> + +<pre class="brush: js notranslate">function makeAdder(a) { + return function(b) { + return a + b; + }; +} +var x = makeAdder(5); +var y = makeAdder(20); +x(6); // ? +y(7); // ? +</pre> + +<p>The name of the <code>makeAdder()</code> function should give it away: it creates a new 'adder' functions, which when called with one argument adds it to the argument that they were created with.</p> + +<p>What's happening here is pretty much the same as was happening with the inner functions earlier on: a function defined inside another function has access to the outer function's variables. The only difference here is that the outer function has returned, and hence common sense would seem to dictate that its local variables no longer exist. But they <em>do</em> still exist — otherwise the adder functions would be unable to work. What's more, there are two different "copies" of <code>makeAdder()</code>'s local variables — one in which <code>a</code> is 5 and one in which <code>a</code> is 20. So the result of those function calls is as follows:</p> + +<pre class="brush: js notranslate">x(6); // returns 11 +y(7); // returns 27 +</pre> + +<p>Here's what's actually happening. Whenever JavaScript executes a function, a 'scope' objek is created to hold the local variables created within that function. It is initialized with any variables passed in as function parameters. This is similar to the global objek that all global variables and functions live in, but with a couple of important differences: firstly, a brand new scope objek is created every time a function starts executing, and secondly, unlike the global objek (which is accessible as <code>this</code> and in browsers as <code>window</code>) these scope objeks cannot be directly accessed from your JavaScript code. There is no mechanism for iterating over the properties of the current scope objek, for example.</p> + +<p>So when <code>makeAdder()</code> is called, a scope objek is created with one property: <code>a</code>, which is the argument passed to the <code>makeAdder()</code> function. <code>makeAdder()</code> then returns a newly created function. Normally JavaScript's garbage collector would clean up the scope objek created for <code>makeAdder()</code> at this point, but the returned function maintains a reference back to that scope objek. As a result, the scope objek will not be garbage collected until there are no more references to the function objek that <code>makeAdder()</code> returned.</p> + +<p>Scope objeks form a chain called the scope chain, similar to the prototype chain used by JavaScript's objek system.</p> + +<p>A <strong>closure</strong> is the combination of a function and the scope objek in which it was created. Closures let you save state — as such, they can often be used in place of objeks. You can find <a href="http://stackoverflow.com/questions/111102/how-do-javascript-closures-work">several excellent introductions to closures</a>.</p> diff --git a/files/id/web/javascript/data_structures/index.html b/files/id/web/javascript/data_structures/index.html new file mode 100644 index 0000000000..3521bbc640 --- /dev/null +++ b/files/id/web/javascript/data_structures/index.html @@ -0,0 +1,267 @@ +--- +title: JavaScript data types and data structures +slug: Web/JavaScript/Data_structures +tags: + - JavaScript + - Tipe +translation_of: Web/JavaScript/Data_structures +--- +<p><span style="display: none;"> </span><span style="display: none;"> </span> {{jsSidebar("More")}}</p> + +<p>Semua bahasa pemrograman memiliki struktur data bawaan, namun hal tersebut sering dijumpai berbeda antara satu bahasa dengan bahasa lainya. Artikel ini mencoba untuk membuat daftar struktur data bawaan yang tersedia di JavaScript dan sifat-sifat apa saja yang dimiliki. Struktur data bawaan dapat digunakan untuk membangun struktur data lainnya. Bila memungkinkan, perbandingan dengan bahasa lainya akan diambil.</p> + +<h2 id="Dynamic_typing">Dynamic typing</h2> + +<p>JavaScript adalah salah satu bahasa pemrograman yang tidak mengutamakan tipe data. Tidak perlu mendeklarasikan jenis data dari suatu variabel setiap saat. Tipe data akan dideklarasikan secara otomatis diawal program dijalankan. Dengan kata lain memungkinkan untuk menggunakan nama peubah yang sama dengan jenis data yang berbeda:</p> + +<pre class="brush: js">var foo = 42; // foo saat ini adalah angka +foo = 'bar'; // foo saat ini adalah string +foo = true; // foo saat ini adalah boolean +</pre> + +<h2 id="Tipe_Data">Tipe Data</h2> + +<p>Standar ECMAScript terakhir menjelaskan tujuh tipe data:</p> + +<ul> + <li>Enam tipe adalah {{Glossary("Primitive", "primitives")}}: + <ul> + <li>{{Glossary("Boolean")}}</li> + <li>{{Glossary("Null")}}</li> + <li>{{Glossary("Undefined")}}</li> + <li>{{Glossary("Number")}}</li> + <li>{{Glossary("String")}}</li> + <li>{{Glossary("Symbol")}} (baru di ECMAScript 6)</li> + </ul> + </li> + <li>dan {{Glossary("Object")}}</li> +</ul> + +<h2 id="Nilai_Primitif">Nilai Primitif</h2> + +<p>Semua tipe kecuali objek menentukan nilai tetap (nilai, yang tidak dapat diubah). Misalnya dan tidak seperti C, Strings tidak dapat diubah. Di JavaScript, string termasuk sebagai nilai primitif.</p> + +<h3 id="Undefined">Undefined</h3> + +<p>Variabel yang nilainya tidak ditetapkan (tidak diisi) memiliki nilai <code>undefined</code>. Lihat {{jsxref("undefined")}} dan {{Glossary("Undefined")}} untuk lebih lanjut.</p> + +<h3 id="Null">Null</h3> + +<p>Null hanya memiliki sebuah nilai dan terdiri nilai itu sendiri: <code>null</code>. Lihat {{jsxref("null")}} dan {{Glossary("Null")}} untuk lebih lanjut.</p> + +<h3 id="Boolean">Boolean</h3> + +<p>Merepresentasikan entitas logika dan hanya memiliki dua nilai atau kemungkinan, yaitu: <code>true</code> dan <code>false</code>.</p> + +<h3 id="Number">Number</h3> + +<p>Berdasarkan standar ECMAScript, dikatakan bahwa hanya ada satu tipe nomor, yaitu <a href="https://en.wikipedia.org/wiki/Double-precision_floating-point_format">double-precision 64-bit binary format IEEE 754 value</a> (nomor diantara -(2<sup>53</sup> -1) dan (2<sup>53</sup> -1) ). Tidak ada penomoran bilangan bulat yang spesifik. Sebagai tambahan untuk menampilkan bilangan floating-point (bilangan pecahan float), tipe nomor memiliki tiga simbol, yaitu: <code>+Infinity</code>, <code>-Infinity</code>, dan <code>NaN</code> <em>(Not-a-Number)</em></p> + +<p>Untuk memeriksa nomor paling besar atau paling kecil diantara +/-Infinity diatas, dapat menggunakan konstanta {{jsxref("Number.MAX_VALUE")}} atau {{jsxref("Number.MIN_VALUE")}}. Semenjak standar ECMAScript 2015, untuk memeriksa nilai <em>double-precision floating-point</em> dapat menggunakan {{jsxref("Number.isSafeInteger()")}} yang setara dengan {{jsxref("Number.MAX_SAFE_INTEGER")}} dan {{jsxref("Number.MIN_SAFE_INTEGER")}}. Lebih dari batas tersebut, bilangan bulat di JavaScript tidak aman dan akan digantikan dengan perkiraan <em>double-precision floating-point</em>.</p> + +<p>Angka 0 merupakan bilangan bulat integer yang memiliki dua representasi, yaitu +0 dan -0 dan pada kenyataannya tidak berpengaruh dalam perhitungan karena jika keduanya dibandingkan akan bernilai benar: <code>+0 === -0 //-->(true)</code> dan akan diberitahu jika pembagi merupakan nol:</p> + +<pre class="brush: js">> 42 / +0 +Infinity +> 42 / -0 +-Infinity +</pre> + +<p>Meskipun angka sering hanya mewakili nilainya, JavaScript menyediakan beberapa <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">operator biner (bitwise)</a> yang dapat digunakan untuk <a class="external" href="http://en.wikipedia.org/wiki/Mask_%28computing%29">bit masking</a>, yaitu mewakili beberapa nilai Boolean dalam sebuah nomor. Namun, ini biasanya dianggap sebagai praktik yang buruk, karena JavaScript menawarkan cara lain untuk mewakili satu set Boolean (seperti array Boolean atau objek dengan nilai Boolean yang ditetapkan untuk properti bernama). Bit masking juga cenderung membuat kode lebih sulit dibaca, dipahami, dan dirawat. Mungkin diperlukan untuk digunakan di lingkungan yang sangat terbatas, seperti saat mencoba mengatasi kompresi atau dalam kasus ekstrim ketika setiap bit di atas jumlah jaringan. Teknik ini hanya harus dipertimbangkan ketika tidak ada cara terakhir yang dapat diambil untuk mengoptimalkan ukuran.</p> + +<h3 id="String">String</h3> + +<p>Tipe {{jsxref("Global_Objects/String", "String")}} digunakan untuk menampilkan data tulisan (teks). Terdiri dari beberapa bagian karakter yang dibentuk dari bilangan <em>16-bit unsigned integer</em>. Setiap karakter pada String menempati posisi pada String. Karakter pertama pada string berindeks <code>0</code>, kemudian <code>1</code>, lalu <code>2</code>, ..., hingga karakter terakhir dari String. Panjang String merupakan jumlah karakter pembentuknya.</p> + +<p>Berbeda dengan bahasa pemrogramman C, JavaScript string tidak dapat diubah. Dengan kata lain sekali String dibuat, maka tidak mungkin untuk mengubahnya. Namun memungkinkan untuk membuat String baru berdasarkan operasi string sebelumnya. Contoh:</p> + +<ul> + <li><em>Substring </em>dari string asal dengan mengambil karakter atau menggunakan {{jsxref("String.substr()")}}.</li> + <li>Penggabungan dua string menggunakan operator + atau menggunakan {{jsxref("String.concat()")}}.</li> +</ul> + +<h4 id="Hati-hati_pada_stringly-typing_kode!">Hati-hati pada "<em>stringly-typing</em>" kode!</h4> + +<p>String dapat digunakan untuk menampilkan data kompleks (rumit). Keuntungan untuk jangka pendek:</p> + +<ul> + <li>Mudah untuk membangun string rumit dengan <em>concatenation</em>.</li> + <li>String mudah untuk proses debug, karena apa yang dicetak sama dengan isi string tersebut.</li> + <li>String banyak diterapkan di API (bidang input, isi penyimpanan lokal, tanggapan {{ domxref("XMLHttpRequest") }} saat menggunakan <code>responseText</code>, dan sebagainya) dan juga pekerjaan berbasis string.</li> +</ul> + +<p>Dengan adanya konversi, string dapat menampung semua tipe data, dan hentu bukan hal yang baik. Sebagai contoh, dengan <em>separator</em> (pemisah), string dapat meniru list (pada JavaScript disebut sebagai array). Sayangnya saat pemisah digunakan di salahsatu bagian "list" maka strukturnya akan rusak. <em>Escape character</em> menjadi salahsatu cara untuk menangani hal tersebut. Hal tersebut membutuhkan konversi mahal dan hanya menambah beban pemeliharaan.</p> + +<p>Gunakan string untuk data teks. <em>Parse </em>string dan gunakan abstraksi yang tepat jika untuk menampilkan data yang rumit.</p> + +<h3 id="Symbol">Symbol</h3> + +<p>Baru diperkenalkan sejak JavaScript ECMAScript 2015. Simbol memiliki ciri khas (unik) dan nilai primitif tetap (immutable) serta dapat digunakan sebagai kunci dari properti sebuah Objek. Pada beberapa bahasa pemrogramman, Simbol disebut sebagai atom. Untuk lebih jelasnya, lihat pustaka {{Glossary("Symbol")}} dan pembungkus {{jsxref("Symbol")}} objek di JavaScript.</p> + +<h2 id="Objek">Objek</h2> + +<p>Pada ilmu komputer, objek adalah nilai pada memori yang dimungkinkan dialamatkan oleh {{Glossary("Identifier", "identifier")}}.</p> + +<h3 id="Properties">Properties</h3> + +<p>Pada JavaScript, objek dapat digambarkan sebagai kumpulan properti. Dengan adanya sintaks objek literal, set properti dibatasi; kemudian properti dapat ditambahkan atau dihapus. Nilai dari properti dapat berupa "nilai" atau tipe data lain, termasuk objek itu sendiri, yang memungkinkan untuk membangun struktur data yang rumit. Properti diidentifikasi menggunakan nilai kunci. Kunci dapat berupa String ataupun Simbol.</p> + +<p>Terdapat dua tipe objek properti yang memiliki attribut: <em>data property</em> dan <em>accessor property</em>.</p> + +<h4 id="Data_Property">Data Property</h4> + +<p>mengkaitkan kunci dengan nilai dan memiliki beberapa atribut:</p> + +<p> </p> + +<table> + <tbody> + <tr> + <th>Attribut</th> + <th>Tipe</th> + <th>Keterangan</th> + <th>Nilai bawaan</th> + </tr> + <tr> + <td>[[Value]]</td> + <td>Semua jenis JavaScript</td> + <td>Nilai yang diterima dengan mengambil akses properti.</td> + <td>undefined</td> + </tr> + <tr> + <td>[[Writable]]</td> + <td>Boolean</td> + <td>Jika <code>false</code>, maka propeti [[Value]] tidak dapat diubah.</td> + <td>false</td> + </tr> + <tr> + <td>[[Enumerable]]</td> + <td>Boolean</td> + <td>Jika <code>true</code>, properti dapat terbaca saat <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> loops. Lihat juga <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></td> + <td>false</td> + </tr> + <tr> + <td>[[Configurable]]</td> + <td>Boolean</td> + <td>Jika <code>false</code>, properti tidak dapat dihapus, tidak dapat diubah menjadi aksesor propeti, juga atribut selain [[Value]] dan [[Writable]] tidak dapat diubah.</td> + <td>false</td> + </tr> + </tbody> +</table> + +<p> </p> + +<table> + <caption>Atribut usang (as of ECMAScript 3, renamed in ECMAScript 5)</caption> + <tbody> + <tr> + <th>Atribut</th> + <th>Tipe</th> + <th>Keterangan</th> + </tr> + <tr> + <td>Read-only</td> + <td>Boolean</td> + <td>Diubah di ES5 menjadi atribut [[Writable]].</td> + </tr> + <tr> + <td>DontEnum</td> + <td>Boolean</td> + <td>Diubah di ES5 menjadi atribut [[Enumerable]].</td> + </tr> + <tr> + <td>DontDelete</td> + <td>Boolean</td> + <td>Diubah di ES5 menjadi atribut [[Configurable]].</td> + </tr> + </tbody> +</table> + +<p> </p> + +<div class="note"> +<p><strong>Note: </strong>Biasanya atribut digunakan oleh JavaScript engine, sehingga tidak dapat diakses secara langsung (lihat <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty()</a>). Itulah mengapa atribut ditulis dengan kurung siku ganda.</p> +</div> + +<p> </p> + +<h3 id="Normal_objects_and_functions">"Normal" objects, and functions</h3> + +<p>A JavaScript object is a mapping between keys and values. Keys are strings (or {{jsxref("Symbol")}}s) and values can be anything. This makes objects a natural fit for <a href="http://en.wikipedia.org/wiki/Hash_table">hashmaps</a>.</p> + +<p>Functions are regular objects with the additional capability of being callable.</p> + +<h3 id="Dates">Dates</h3> + +<p>When representing dates, the best choice is to use the built-in <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date"><code>Date</code> utility</a> in JavaScript.</p> + +<h3 id="Indexed_collections_Arrays_and_typed_Arrays">Indexed collections: Arrays and typed Arrays</h3> + +<p><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="Array">Arrays</a> are regular objects for which there is a particular relationship between integer-key-ed properties and the 'length' property. Additionally, arrays inherit from <code>Array.prototype</code> which provides to them a handful of convenient methods to manipulate arrays. For example, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf" title="en/JavaScript/Reference/Global_Objects/Array/indexOf">indexOf</a></code> (searching a value in the array) or <code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/push" title="en/JavaScript/Reference/Global_Objects/Array/push">push</a></code>(adding an element to the array), etc. This makes Arrays a perfect candidate to represent lists or sets.</p> + +<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays">Typed Arrays</a> are new to JavaScript with ECMAScript 2015 and present an array-like view of an underlying binary data buffer. The following table helps you to find the equivalent C data types:</p> + +<p>{{page("/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray", "TypedArray_objects", "", 0, 3)}}</p> + +<h3 id="Keyed_collections_Maps_Sets_WeakMaps_WeakSets">Keyed collections: Maps, Sets, WeakMaps, WeakSets</h3> + +<p>These data structures take object references as keys and are introduced in ECMAScript Edition 6. {{jsxref("Set")}} and {{jsxref("WeakSet")}} represent a set of objects, while {{jsxref("Map")}} and {{jsxref("WeakMap")}} associate a value to an object. The difference between Maps and WeakMaps is that in the former, object keys can be enumerated over. This allows garbage collection optimizations in the latter case.</p> + +<p>One could implement Maps and Sets in pure ECMAScript 5. However, since objects cannot be compared (in the sense of "less than" for instance), look-up performance would necessarily be linear. Native implementations of them (including WeakMaps) can have look-up performance that is approximately logarithmic to constant time.</p> + +<p>Usually, to bind data to a DOM node, one could set properties directly on the object or use <code>data-*</code> attributes. This has the downside that the data is available to any script running in the same context. Maps and WeakMaps make it easy to privately bind data to an object.</p> + +<h3 id="Structured_data_JSONBagian">Structured data: JSON<a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Data_structures$edit#Structured_data_JSON">Bagian</a></h3> + +<p>JSON (JavaScript Object Notation) is a lightweight data-interchange format, derived from JavaScript but used by many programming languages. JSON builds universal data structures. See {{Glossary("JSON")}} and {{jsxref("JSON")}} for more details.</p> + +<h3 id="More_objects_in_the_standard_libraryBagian">More objects in the standard library<a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Data_structures$edit#More_objects_in_the_standard_library">Bagian</a></h3> + +<p>JavaScript has a standard library of built-in objects. Please have a look at the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects">reference</a>to find out about more objects.</p> + +<h2 id="Determining_types_using_the_typeofoperator">Determining types using the <code>typeof</code>operator</h2> + +<p>The <code>typeof</code> operator can help you to find the type of your variable. Please read the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof">reference page</a> for more details and edge cases.</p> + +<h2 id="Specifications">Specifications</h2> + +<table> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-8', 'Types')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-ecmascript-data-types-and-values', 'ECMAScript Data Types and Values')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-ecmascript-data-types-and-values', 'ECMAScript Data Types and Values')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://github.com/nzakas/computer-science-in-javascript/">Nicholas Zakas collection of common data structure and common algorithms in JavaScript.</a></li> + <li><a href="https://github.com/monmohan/DataStructures_In_Javascript" title="https://github.com/monmohan/DataStructures_In_Javascript">Search Tre(i)es implemented in JavaScript</a></li> +</ul> + +<p> </p> + +<p> </p> diff --git a/files/id/web/javascript/index.html b/files/id/web/javascript/index.html new file mode 100644 index 0000000000..bfc6233ce4 --- /dev/null +++ b/files/id/web/javascript/index.html @@ -0,0 +1,116 @@ +--- +title: JavaScript +slug: Web/JavaScript +tags: + - JavaScript + - belajar +translation_of: Web/JavaScript +--- +<div>{{JsSidebar}}</div> + +<p class="summary"><strong>JavaScript</strong> (<strong>JS</strong>) sangat ringan, terinterpretasi, bahasa pemrogramman dengan <a href="https://en.wikipedia.org/wiki/First-class_functions">first-class functions</a>. Umum dikenal sebagai bahasa scripting untuk halaman web, <a class="external" href="https://en.wikipedia.org/wiki/JavaScript#Uses_outside_Web_pages">Banyak lingkungan non-browser</a> juga menggunakan javascript, seperti <a class="external" href="https://nodejs.org/">node.js</a> dan <a href="https://couchdb.apache.org/">Apache CouchDB</a>. JS merupakan <a class="mw-redirect" href="https://en.wikipedia.org/wiki/Prototype-based_programming" title="Prototype-based programming">prototype-based</a>, multi-paradigm, bahasa scripting dinamis, medukung object-oriented, diperlukan, dan declarative (mis. functional programming) styles. Baca lebih lanjut <a href="/en-US/docs/Web/JavaScript/About_JavaScript">about JavaScript</a>.</p> + +<p>Bagian situs ini didedikasikan untuk bahasa javascript dan bukan bagian yang spesifik dengan halaman web atau lingkungan host lain. Untuk informasi tentang {{Glossary("API","APIs")}} yang spesifik untuk halaman web, Lihat <a href="/id/docs/Web/API">Web APIs</a> dan <a href="/id/docs/Glossary/DOM">DOM</a>.</p> + +<p>Standar untuk JavaScript adalah <a href="/id/docs/Web/JavaScript/Language_Resources">ECMAScript</a>. Seperti pada 2012, semua <a href="http://kangax.github.io/compat-table/es5/">modern browsers</a> mendukung ECMAScript 5.1. Browser lama mendukung setidaknya ECMAScript 3. Juni 17, 2015, <a href="http://www.ecma-international.org">ECMA International</a> mempublikasikan versi major keenam dari ECMAScript, yang secara ofisial disebut ECMAScript 2015, dan umumnya dikaitkan sebagai ECMAScript 6 atau ES6. Sejak ketika standar ECMAScript pada siklus rilis tahunan. Dokumentasi ini mengacu pada draft versi terbaru, saat ini <a href="https://tc39.github.io/ecma262/">ECMAScript 2018</a>.</p> + +<p>Jangan keliru antara JavaScript dengan <a href="https://en.wikipedia.org/wiki/Java_(programming_language)">Bahasa pemrograman java</a>. Keduanya "Java" dan "JavaScript" adalah merek dagang dan merek ini terdaftar oleh Oracle di U.S. dan negara lainnya. Namun, kedua bahasa pemrograman tersebut memiliki sintaks, struktur, dan penggunaan yang berbeda.</p> + +<div class="column-container"> +<div class="column-half"> +<h2 id="Tutorial">Tutorial</h2> + +<p>Belajar cara menulis program di javascript dengan paduan dan tutorial.</p> + +<h3 id="Untuk_Pemula">Untuk Pemula</h3> + +<p>Pergilah ke topik <a href="/id/docs/Learn/JavaScript">Area Pembelajaran JavaScript</a> kami jika Anda ingin belajar JavaScript dan belum memiliki pengalaman dari pemrograman JavaScript. Tersedia modul lengkap sebagai berikut:</p> + +<p><strong><a href="/id/docs/Learn/JavaScript/First_steps">Langkah pertama JavaScript</a></strong><br> + Jawaban beberapa pertanyaan mendasar seperti "apa itu JavaScript?", "Seperti apa tampilannya?", Dan "apa yang bisa dilakukan?", Bersama mendiskusikan fitur utama JavaScript seperti variabel, string, angka dan array.</p> + +<p><strong><a href="/id/docs/Learn/JavaScript/Building_blocks">Bangunan Blok JavaScript</a></strong><br> + Lanjutan jangkauan dari fitur dasar kunci JavaScript, arahkan perhatian pada jenis blok kode yang biasa ditemukan seperti statement kondisional, loop, fungsi, dan events.</p> + +<p><strong><a href="/id/docs/Learn/JavaScript/Objects">Perkenalan Objek JavaScript</a></strong><br> + Sifat JavaScript yang berorientasi objek penting untuk dipahami jika Anda ingin melangkah lebih jauh dengan pengetahuan Anda tentang bahasanya dan menulis kode yang lebih efisien, oleh karena itu kami menyediakan modul ini untuk membantu Anda.</p> + +<h3 id="Pengantar">Pengantar</h3> + +<dl> + <dt><a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Panduan">Paduan JavaScript</a></dt> + <dd>Jika anda baru mengenal javascript, paduan ini akan menuntun anda belajar.</dd> + <dt><a href="https://developer.mozilla.org/id/docs/Web/JavaScript/sekilas_teknologi_JavaScript">Ikhtisar Teknologi JavaScript</a></dt> + <dd>Pengantar javascript pada lingkungan web browser.</dd> + <dt><a href="/id/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">Pengantar JavaScript Berbasis Objek</a></dt> + <dd>Pengantar pada konsep dari bahasa berorientasi object di JavaScript.</dd> +</dl> + +<h3 id="Menengah">Menengah</h3> + +<dl> + <dt><a href="https://developer.mozilla.org/id/docs/Web/JavaScript/A_re-introduction_to_JavaScript">Mengenal kembali JavaScript</a></dt> + <dd>Gambaran bagi mereka yang <em>berfikir</em> mengetahui tentang JavaScript.</dd> +</dl> + +<dl> + <dt><a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Data_structures">Struktur data JavaScript</a></dt> + <dd>Gambaran struktur data yang tersedia di JavaScript.</dd> + <dt><a href="/id/docs/Web/JavaScript/Equality_comparisons_and_sameness">Perbandingan kesetaraan dan kesamaan</a></dt> + <dd>JavaScript menyediakan tiga operasi perbandingan yang berbeda: perbandingan stric <code>===</code>, perbandingan loggar menggunakan <code>==</code>, dan method {{jsxref("Global_Objects/Object/is", "Object.is()")}}.</dd> +</dl> + +<h3 id="Lanjut">Lanjut</h3> + +<dl> + <dt><a href="/id/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Pewarisan dan rantai purwarupa</a></dt> + <dd>Menjelaskan tentang kesalah-pahaman dan meremehkan yang terjadi pada pewarisan berbasis purwarupa.</dd> + <dt><a href="/id/docs/Web/JavaScript/Reference/Strict_mode">Mode Strict</a></dt> + <dd>Mode strict mendefinisikan bahwa anda tidak dapat menggunakan variabel sebelum menginisialisasinya. Ini bentuk batasan dari varian ECMAScript 5, berguna untuk performa yang lebih cepat dan debuging yang lebih mudah.</dd> + <dt><a href="/id/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a></dt> + <dd>JavaScript typed arrays menyediakan mekanisme untuk mengakses data binari mentah(raw).</dd> + <dt><a href="/id/docs/Web/JavaScript/Memory_Management">Pengelolaan Memory</a></dt> + <dd>Siklus memori dan garbage collection di JavaScript.</dd> + <dt><a href="/id/docs/Web/JavaScript/EventLoop">Model konkurensi dan Event Loop</a></dt> + <dd>JavaScript memiliki model konkurensi berbasis pada "event loop".</dd> +</dl> +</div> + +<div class="column-half"> +<h2 id="Referensi">Referensi</h2> + +<p>Jelajahi dokumentasi <a href="/en-US/docs/Web/JavaScript/Reference">Referensi javaScript</a>.</p> + +<dl> + <dt><a href="/id/docs/Web/JavaScript/Reference/Global_Objects">Standard objects</a></dt> + <dd>Mencari tahu tentang standarbuilt-in objects {{jsxref("Array")}}, {{jsxref("Boolean")}}, {{jsxref("Date")}}, {{jsxref("Error")}}, {{jsxref("Function")}}, {{jsxref("JSON")}}, {{jsxref("Math")}}, {{jsxref("Number")}}, {{jsxref("Object")}},{{jsxref("RegExp")}} , {{jsxref("String")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("WeakMap")}} , {{jsxref("WeakSet")}}, dan lainnya.</dd> + <dt><a href="/id/docs/Web/JavaScript/Reference/Operators">Ekspresi dan operator</a></dt> + <dd>Belajar tentang cara kerja operator {{jsxref("Operators/instanceof", "instanceof")}}, {{jsxref("Operators/typeof", "typeof")}}, {{jsxref("Operators/new", "new")}}, {{jsxref("Operators/this", "this")}}, <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">operator precedence</a>, dan banyak lagi.</dd> + <dt><a href="/id/docs/Web/JavaScript/Reference/Statements">Statemen dan pendeklarasian</a></dt> + <dd>Belajar cara menggunakan {{jsxref("Statements/do...while", "do-while")}}, {{jsxref("Statements/for...in", "for-in")}}, {{jsxref("Statements/for...of", "for-of")}}, {{jsxref("Statements/try...catch", "try-catch")}}, {{jsxref("Statements/let", "let")}}, {{jsxref("Statements/var", "var")}}, {{jsxref("Statements/const", "const")}}, {{jsxref("Statements/if...else", "if-else")}}, {{jsxref("Statements/switch", "switch")}}, dan statement Javascript lain dan juga kerja keywords.</dd> + <dt> <a href="/id/docs/Web/JavaScript/Reference/Functions">Fungsi</a></dt> + <dd>Belajar bagaimana menggunakan fugsi untuk digunakan di aplikasi anda.</dd> +</dl> + +<h2 id="Alat_sumber">Alat & sumber</h2> + +<p>Alat yang dapat membantu anda menulis dan mendebug kode <strong>JavaScript</strong>.</p> + +<dl> + <dt><a href="/id/docs/Tools">Firefox Developer Tools</a></dt> + <dd><a href="/id/docs/Tools/Scratchpad">Scratchpad</a>, <a href="/id/docs/Tools/Web_Console">Web Console</a>, <a href="/id/docs/Tools/Profiler">JavaScript Profiler</a>, <a href="/id/docs/Tools/Debugger">Debugger</a>, dan lainnya.</dd> + <dt><a class="external" href="http://www.getfirebug.com/">Firebug</a></dt> + <dd>Edit, debug, dan melihat CSS, HTML, juga JavaScript langsung di setiap halaman web.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Shells">JavaScript Shells</a></dt> + <dd>JavaScript shell memungkinkan anda untuk mencoba kode snippet JavaScript.</dd> + <dt><a href="https://togetherjs.com/">TogetherJS</a></dt> + <dd>Mempermudah kolaborasi.</dd> + <dt><a href="http://stackoverflow.com/questions/tagged/javascript">Stack Overflow</a></dt> + <dd>Bertanya di Stack Overflow dengan tag "JavaScript".</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript">Versi JavaScript dan catatan release</a></dt> + <dd>Jelajahi sejarah fitur JavaScript dan status implementasi.</dd> + <dt><a href="https://jsfiddle.net/">JSFiddle</a></dt> + <dd>Edit JavaScript, CSS, HTML dan lihat secara langsung. Gunakan sumber dari luar dan berkolaborasi dengan tim anda secara online.</dd> +</dl> +</div> +</div> diff --git a/files/id/web/javascript/inheritance_dan_prototype_chain/index.html b/files/id/web/javascript/inheritance_dan_prototype_chain/index.html new file mode 100644 index 0000000000..49a0100ed8 --- /dev/null +++ b/files/id/web/javascript/inheritance_dan_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 +--- +<div>{{jsSidebar("Advanced")}}</div> + +<p>JavaScript sedikit membingungkan bagi pengembang yang berpengalaman di pemrograman berbasis class (seperti java dan C++), sebagai bahasa dinamis dan tidak mendukung implementasi <code>class</code> lihat( keyword <code>class</code> dikenalkan pada ES2015, namun terkesan berlebihan, JavaScript merupakan bahasa berbasis prototype).</p> + +<p>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 <strong>prototype </strong>tersebut. Prototype objek tersebut memiliki prototype sendiri, dan seterusnya hingga objek mencapai prototipe <code>null</code>. Dengan definisi, <code>null</code> tidak lagi memiliki prototype, dan berperan sebagai hubungan terakhir dari <strong>prototype chain</strong>.</p> + +<p>Hampir seluruh objek pada JavaScript merupakan instance dari {{jsxref("Object")}} dimana berada di atas prototype chain.</p> + +<p>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.</p> + +<h2 id="Inheritance_dengan_prototype_chain">Inheritance dengan prototype chain</h2> + +<h3 id="Meng-Inheriting_properti">Meng-Inheriting properti</h3> + +<p>JavaScript objects are dynamic "bags" of properties (referred to as <strong>own properties</strong>). 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.</p> + +<div class="note"> +<p>Following the ECMAScript standard, the notation <code>someObject.[[Prototype]]</code> is used to designate the prototype of <code>someObject. </code>Since ECMAScript 2015, the <code>[[Prototype]]</code> is accessed using the accessors {{jsxref("Object.getPrototypeOf()")}} and {{jsxref("Object.setPrototypeOf()")}}. This is equivalent to the JavaScript property <code>__proto__</code> which is non-standard but de-facto implemented by many browsers.</p> + +<p>It should not be confused with the <code><em>func</em>.prototype</code> property of functions, which instead specifies the <code>[[Prototype]]</code> to be assigned to all <em>instances</em> of objects created by the given function when used as a constructor. The <code><strong>Object.prototype</strong></code> property represents the {{jsxref("Object")}} prototype object.</p> +</div> + +<p>Here is what happens when trying to access a property:</p> + +<pre class="brush: js">// 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. +</pre> + +<p>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 <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">getter or a setter</a>.</p> + +<h3 id="Inheriting_methods">Inheriting "methods"</h3> + +<p>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 <em>method overriding</em>).</p> + +<p>When an inherited function is executed, the value of <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> points to the inheriting object, not to the prototype object where the function is an own property.</p> + +<pre class="brush: js">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 +</pre> + +<h2 id="Different_ways_to_create_objects_and_the_resulting_prototype_chain">Different ways to create objects and the resulting prototype chain</h2> + +<h3 id="Objects_created_with_syntax_constructs">Objects created with syntax constructs</h3> + +<pre class="brush: js">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 +</pre> + +<h3 id="With_a_constructor">With a constructor</h3> + +<p>A "constructor" in JavaScript is "just" a function that happens to be called with the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new operator</a>.</p> + +<pre class="brush: js">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. +</pre> + +<h3 id="With_Object.create">With <code>Object.create</code></h3> + +<p>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:</p> + +<pre class="brush: js">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 +</pre> + +<div> +<h3 id="With_the_class_keyword">With the <code>class</code> keyword</h3> + +<p>ECMAScript 2015 introduced a new set of keywords implementing <a href="/en-US/docs/Web/JavaScript/Reference/Classes">classes</a>. 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")}}.</p> + +<pre class="brush: js">'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); +</pre> + +<h3 id="Performance">Performance</h3> + +<p>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.</p> + +<p>Also, when iterating over the properties of an object, <strong>every</strong> enumerable property that is on the prototype chain will be enumerated.To check whether an object has a property defined on <em>itself</em> and not somewhere on its prototype chain, it is necessary to use the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty"><code>hasOwnProperty</code></a> method which all objects inherit from <code>Object.prototype</code>. To give you a concrete example, let's take the above graph example code to illustrate it:</p> + +<pre class="brush: js">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 +</pre> + +<p><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty"><code>hasOwnProperty</code></a> is the only thing in JavaScript which deals with properties and does <strong>not</strong> traverse the prototype chain.</p> + +<p>Note: It is <strong>not</strong> enough to check whether a property is <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a>. The property might very well exist, but its value just happens to be set to <code>undefined</code>.</p> +</div> + +<h3 id="Bad_practice_Extension_of_native_prototypes">Bad practice: Extension of native prototypes</h3> + +<p>One mis-feature that is often used is to extend <code>Object.prototype</code> or one of the other built-in prototypes.</p> + +<p>This technique is called monkey patching and breaks <em>encapsulation</em>. While used by popular frameworks such as Prototype.js, there is still no good reason for cluttering built-in types with additional <em>non-standard</em> functionality.</p> + +<p>The <strong>only</strong> good reason for extending a built-in prototype is to backport the features of newer JavaScript engines, like <code>Array.forEach</code>.</p> + +<h2 id="Example">Example</h2> + +<p><code>B</code> shall inherit from <code>A</code>:</p> + +<pre class="brush: js">function A(a) { + this.varA = a; +} + +// What is the purpose of including varA in the prototype when A.prototype.varA will <em>always</em> 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(); +</pre> + +<p>The important parts are:</p> + +<ul> + <li>Types are defined in <code>.prototype</code>.</li> + <li>You use <code>Object.create()</code> to inherit.</li> +</ul> + +<h2 id="prototype_and_Object.getPrototypeOf"><code>prototype</code> and <code>Object.getPrototypeOf</code></h2> + +<p>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.</p> + +<p>You probably already noticed that our <code>function A</code> has a special property called <code>prototype</code>. This special property works with the JavaScript <code>new </code>operator. The reference to the prototype object is copied to the internal <code>[[Prototype]]</code> property of the new instance. For example, when you do <code>var a1 = new A()</code>, JavaScript (after creating the object in memory and before running function <code>A()</code> with <code>this</code> defined to it) sets <code>a1.[[Prototype]] = A.prototype</code>. When you then access properties of the instance, JavaScript first checks whether they exist on that object directly, and if not, it looks in <code>[[Prototype]]</code>. This means that all the stuff you define in <code>prototype</code> is effectively shared by all instances, and you can even later change parts of <code>prototype</code> and have the changes appear in all existing instances, if you wanted to.</p> + +<p>If, in the example above, you do <code>var a1 = new A(); var a2 = new A();</code> then <code>a1.doSomething</code> would actually refer to <code>Object.getPrototypeOf(a1).doSomething</code>, which is the same as the <code>A.prototype.doSomething</code> you defined, i.e. <code>Object.getPrototypeOf(a1).doSomething == Object.getPrototypeOf(a2).doSomething == A.prototype.doSomething</code>.</p> + +<p>In short, <code>prototype</code> is for types, while <code>Object.getPrototypeOf()</code> is the same for instances.</p> + +<p><code>[[Prototype]]</code> is looked at <em>recursively</em>, i.e. <code>a1.doSomething</code>, <code>Object.getPrototypeOf(a1).doSomething</code>, <code>Object.getPrototypeOf(Object.getPrototypeOf(a1)).doSomething</code> etc., until it's found or <code>Object.getPrototypeOf </code>returns null.</p> + +<p>So, when you call</p> + +<pre class="brush: js">var o = new Foo();</pre> + +<p>JavaScript actually just does</p> + +<pre class="brush: js">var o = new Object(); +o.[[Prototype]] = Foo.prototype; +Foo.call(o);</pre> + +<p>(or something like that) and when you later do</p> + +<pre class="brush: js">o.someProp;</pre> + +<p>it checks whether <code>o</code> has a property <code>someProp</code>. If not, it checks <code>Object.getPrototypeOf(o).someProp</code>, and if that doesn't exist it checks <code>Object.getPrototypeOf(Object.getPrototypeOf(o)).someProp</code>, and so on.</p> + +<div> +<h2 id="In_conclusion">In conclusion</h2> + +<p>It is <strong>essential</strong> 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 <strong>never</strong> be extended unless it is for the sake of compatibility with newer JavaScript features.</p> +</div> diff --git a/files/id/web/javascript/language_resources/index.html b/files/id/web/javascript/language_resources/index.html new file mode 100644 index 0000000000..bda5fe1f42 --- /dev/null +++ b/files/id/web/javascript/language_resources/index.html @@ -0,0 +1,136 @@ +--- +title: JavaScript language resources +slug: Web/JavaScript/Language_Resources +tags: + - Advanced + - JavaScript +translation_of: Web/JavaScript/Language_Resources +--- +<div>{{JsSidebar}}</div> + +<p><strong>ECMAScript</strong> merupakan bahasa scripting yang membentuk basis dari <a href="/en-US/docs/JavaScript">JavaScript</a>. ECMAScript di standarisasi oleh organisasi standard <a href="http://www.ecma-international.org/" title="http://www.ecma-international.org/">ECMA International</a> pada <strong>Spesifikasi ECMA-262 dan ECMA-402</strong>. Berikut ECMAScript standard yang telah disetujui atau masih dalam pengerjaan:</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Nama</th> + <th>Link</th> + <th>Tanggal rilis</th> + <th>Deskripsi</th> + </tr> + <tr> + <th colspan="4">Edisi saat ini</th> + </tr> + <tr> + <td>ECMA-262 2017 (ES 8)</td> + <td><a href="http://tc39.github.io/ecma262/">Working draft</a>, <a href="https://github.com/tc39/ecma262">repository</a></td> + <td>2017</td> + <td>ECMAScript 2017 (8th Edition), currently work in progress.</td> + </tr> + <tr> + <td>ECMA-402 4.0</td> + <td><a href="http://tc39.github.io/ecma402/">Working draft</a>, <a href="https://github.com/tc39/ecma402">repository</a></td> + <td>2017</td> + <td>ECMAScript Internationalization API 4.0, currently work in progress.</td> + </tr> + <tr> + <th colspan="4">Obsolete/historical editions</th> + </tr> + <tr> + <td>ECMA-262 (ES 1)</td> + <td><a href="http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%201st%20edition,%20June%201997.pdf">PDF</a></td> + <td>June 1997</td> + <td>the original ECMAScript standard.</td> + </tr> + <tr> + <td>ECMA-262 (ES 2)</td> + <td><a href="http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%202nd%20edition,%20August%201998.pdf">PDF</a></td> + <td>August 1998</td> + <td>the second revision of the ECMAScript standard; also ISO standard 16262.</td> + </tr> + <tr> + <td>ECMA-262 (ES 3)</td> + <td><a href="http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%203rd%20edition,%20December%201999.pdf">PDF</a></td> + <td>December 1999</td> + <td>the third revision of the ECMAScript standard; corresponds to JavaScript 1.5.<br> + See also the <a href="http://www.mozilla.org/js/language/E262-3-errata.html">errata</a></td> + </tr> + <tr> + <td>ECMA-262 (ES 5)</td> + <td><a href="http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262%205th%20edition%20December%202009.pdf">PDF</a></td> + <td>December 2009</td> + <td>ECMAScript 5<br> + See also the <a href="http://wiki.ecmascript.org/doku.php?id=es3.1:es3.1_proposal_working_draft">ES5 errata</a> and <a href="/en-US/docs/JavaScript/ECMAScript_5_support_in_Mozilla" title="JavaScript/ECMAScript 5 support in Mozilla">ECMAScript 5 support in Mozilla</a></td> + </tr> + <tr> + <td>ECMA-357</td> + <td><a href="http://www.ecma-international.org/publications/files/ECMA-ST-WITHDRAWN/ECMA-357,%201st%20edition,%20June%202004.pdf">PDF</a></td> + <td>June 2004</td> + <td><a href="/en-US/docs/E4X" title="E4X">ECMAScript for XML (E4X)</a>.<br> + See also the <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=169406">E4X errata</a>.</td> + </tr> + <tr> + <td>ECMA-357 Edition 2</td> + <td><a href="http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-357.pdf">PDF</a></td> + <td>December 2005</td> + <td><a href="/en-US/docs/E4X" title="E4X">ECMAScript for XML (E4X)</a>.</td> + </tr> + <tr> + <td>ECMA-262 (ES 5.1)</td> + <td><a href="http://www.ecma-international.org/ecma-262/5.1/Ecma-262.pdf">PDF</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/">HTML</a></td> + <td>June 2011</td> + <td>This version is fully aligned with 3<sup>rd</sup> edition of the international standard <a href="http://www.iso.org/iso/iso_catalogue/catalogue_tc/catalogue_detail.htm?csnumber=55755">ISO/IEC 16262:2011</a>.<br> + It includes ES5 errata fixes, no new features.</td> + </tr> + <tr> + <td>ECMA-402 1.0</td> + <td><a href="http://ecma-international.org/ecma-402/1.0/ECMA-402.pdf">PDF</a>, <a href="http://ecma-international.org/ecma-402/1.0/index.html">HTML</a></td> + <td>December 2012</td> + <td>ECMAScript Internationalization API 1.0.</td> + </tr> + <tr> + <td>ECMA-262 2015 (ES 6)</td> + <td><a href="http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf">PDF</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/index.html">HTML</a></td> + <td>June 2015</td> + <td>ECMAScript 2015 (6th Edition).</td> + </tr> + <tr> + <td>ECMA-402 2.0</td> + <td><a href="http://www.ecma-international.org/ecma-402/2.0/ECMA-402.pdf">PDF</a></td> + <td>June 2015</td> + <td>ECMAScript Internationalization API 2.0.</td> + </tr> + <tr> + <td>ECMA-262 2016 (ES 7)</td> + <td><a href="http://tc39.github.io/ecma262/2016/">HTML</a></td> + <td>June 2016</td> + <td>ECMAScript 2016 (7th Edition). Now feature frozen. To be ratified later this year (June).</td> + </tr> + <tr> + <td>ECMA-402 3.0</td> + <td><a href="http://tc39.github.io/ecma402/2016/">HTML</a></td> + <td>June 2016</td> + <td>ECMAScript Internationalization API 3.0. To be ratified later this year (June).</td> + </tr> + </tbody> +</table> + +<p>Lihat <a href="https://en.wikipedia.org/wiki/ECMAScript" title="https://en.wikipedia.org/wiki/ECMAScript">entri Wikipedia ECMAScript</a> untuk info lebih lanjut tentang sejarah ECMAScript.</p> + +<p>Anda dapat berpartisipasi atau mengikuti pekerjaan di revisi berikutnya dari spasifikasi bahasa ECMAScript, nama kode "Harmony", dan Spesifikasi ECMAScript Internationalization API melalui public wiki dan <a class="link-https" href="https://mail.mozilla.org/listinfo/es-discuss" title="https://mail.mozilla.org/listinfo/es-discuss">es-discuss mailing list</a> tercantum dari <a href="http://www.ecmascript.org/community.php" title="http://www.ecmascript.org/community.php">ecmascript.org</a>.</p> + +<h2 id="Implementasi">Implementasi</h2> + +<ul> + <li><a href="/en-US/docs/SpiderMonkey" title="SpiderMonkey">SpiderMonkey</a> - JavaScript engine digunakan di hampir semuaproduk Mozilla, termasuk Firefox;</li> + <li><a href="/en-US/docs/Rhino" title="Rhino">Rhino</a> - JavaScript engine ditulis menggunakan Java;</li> + <li><a href="/en-US/docs/Tamarin" title="Tamarin">Tamarin</a> - ActionScript virtual machine (digunakan di Adobe® Flash® Player);</li> + <li><a href="https://en.wikipedia.org/wiki/List_of_ECMAScript_engines" title="https://en.wikipedia.org/wiki/List_of_ECMAScript_engines">Other implementations</a> (Wikipedia).</li> +</ul> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li><a href="https://brendaneich.com/" title="https://brendaneich.com/">Brendan Eich's blog</a>. Brendan adalah pencipta JavaScript dan SpiderMonkey JS engine. Tetap bekerja dengan ECMA working group untuk mengembangkan bahasa.</li> + <li><a href="http://dmitrysoshnikov.com/" title="http://dmitrysoshnikov.com/">Dmitry Soshnikov's analysis of ECMA-262 Edition 3 and 5</a></li> +</ul> diff --git a/files/id/web/javascript/memory_management/index.html b/files/id/web/javascript/memory_management/index.html new file mode 100644 index 0000000000..90242f72da --- /dev/null +++ b/files/id/web/javascript/memory_management/index.html @@ -0,0 +1,187 @@ +--- +title: Memory Management +slug: Web/JavaScript/Memory_Management +translation_of: Web/JavaScript/Memory_Management +--- +<div>{{JsSidebar("Advanced")}}</div> + +<h2 id="Introduction">Introduction</h2> + +<p>Bahasa-bahasa Level Bawah, seperti C, memiliki manajemen memory level rendah yang primitiv seperti <code>malloc()</code> dan <code>free()</code>. Pada bagian lain, nilai Javascript dialokasikan ketika sesuatu (objek, string,dll.) dibuat dan secara otomatis dibebaskan ketika tidak digunakan lagi. Proses terakhir disebut <em>garbage collection. "</em>Secara Otomatis" ini adalah sumber kekeliruan dan memberikan kesan developer Javascript (dan Bahasa tingkat tinggi lainnya) bahwa mereka bisa memilih untuk tidak mempedulikan tentang manajemen memory, maka itu adalah suatu kesalahan</p> + +<p>Low-level languages, like C, have low-level memory management primitives like <code>malloc()</code> and <code>free()</code>. On the other hand, JavaScript values are allocated when things (objects, strings, etc.) are created and "automatically" freed when they are not used anymore. The latter process is called <em>garbage collection</em>. This "automatically" is a source of confusion and gives JavaScript (and high-level languages) developers the impression they can decide not to care about memory management. This is a mistake.</p> + +<h2 id="Siklus_hidup_sebuah_memori">Siklus hidup sebuah memori</h2> + +<p>Tanpa memperhatikan bahasa pemograman, siklus hidup memori pada akhirnya selalu sama :</p> + +<ol> + <li>Mengalokasi memori yang kamu gunakan.</li> + <li>Menggunakan alokasi memori untuk (baca, tulis).</li> + <li>Membebaskan alokasi memori saat tidak digunakan lagi.</li> +</ol> + +<p>Bagian pertama dan kedua bersifat ekplisit untuk semua bahasa. Sedangkan untuk bagian terakhir adalah eksplisit untuk bahasa tingkat rendah, tetapi hampir semua bahasa tingkat atas seperti JavaScript juga bersifat implisit.</p> + +<h3 id="Allocation_in_JavaScript">Allocation in JavaScript</h3> + +<h4 id="Value_initialization">Value initialization</h4> + +<p>In order not to bother the programmer with allocations, JavaScript does it alongside with declaring values.</p> + +<pre class="brush: js">var n = 123; // allocates memory for a number +var s = "azerty"; // allocates memory for a string + +var o = { + a: 1, + b: null +}; // allocates memory for an object and contained values + +// (like object) allocates memory for the array and +// contained values +var a = [1, null, "abra"]; + +function f(a){ + return a + 2; +} // allocates a function (which is a callable object) + +// function expressions also allocate an object +someElement.addEventListener('click', function(){ + someElement.style.backgroundColor = 'blue'; +}, false); +</pre> + +<h4 id="Allocation_via_function_calls">Allocation via function calls</h4> + +<p>Some function calls result in object allocation.</p> + +<pre class="brush: js">var d = new Date(); // allocates a Date object + +var e = document.createElement('div'); // allocates a DOM element</pre> + +<p>Some methods allocate new values or objects:</p> + +<pre class="brush: js">var s = "azerty"; +var s2 = s.substr(0, 3); // s2 is a new string +// Since strings are immutable value, +// JavaScript may decide to not allocate memory, +// but just store the [0, 3] range. + +var a = ["ouais ouais", "nan nan"]; +var a2 = ["generation", "nan nan"]; +var a3 = a.concat(a2); +// new array with 4 elements being +// the concatenation of a and a2 elements +</pre> + +<h3 id="Using_values">Using values</h3> + +<p>Using value basically means reading and writing in allocated memory. This can be done by reading or writing the value of a variable or an object property or even passing an argument to a function.</p> + +<h3 id="Release_when_the_memory_is_not_needed_anymore">Release when the memory is not needed anymore</h3> + +<p>Most of memory management issues come at this phase. The hardest task here is to find when "the allocated memory is not needed any longer". It often requires for the developer to determine where in the program such piece of memory is not needed anymore and free it.</p> + +<p>High-level languages embed a piece of software called "garbage collector" whose job is to track memory allocation and use in order to find when a piece of allocated memory is not needed any longer in which case, it will automatically free it. This process is an approximation since the general problem of knowing whether some piece of memory is needed is <a class="external" href="http://en.wikipedia.org/wiki/Decidability_%28logic%29">undecidable</a> (can't be solved by an algorithm).</p> + +<h2 id="Garbage_collection">Garbage collection</h2> + +<p>As stated above the general problem of automatically finding whether some memory "is not needed anymore" is undecidable. As a consequence, garbage collections implement a restriction of a solution to the general problem. This section will explain the necessary notions to understand the main garbage collection algorithms and their limitations.</p> + +<h3 id="References">References</h3> + +<p>The main notion garbage collection algorithms rely on is the notion of <em>reference</em>. Within the context of memory management, an object is said to reference another object if the former has an access to the latter (either implicitly or explicitly). For instance, a JavaScript object has a reference to its <a href="/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">prototype</a> (implicit reference) and to its properties values (explicit reference).</p> + +<p>In this context, the notion of "object" is extended to something broader than regular JavaScript objects and also contains function scopes (or the global lexical scope).</p> + +<h3 id="Reference-counting_garbage_collection">Reference-counting garbage collection</h3> + +<p>This is the most naive garbage collection algorithm. This algorithm reduces the definition of "an object is not needed anymore" to "an object has no other object referencing to it". An object is considered garbage collectable if there is zero reference pointing at this object.</p> + +<h4 id="Example">Example</h4> + +<pre class="brush: js">var o = { + a: { + b:2 + } +}; +// 2 objects are created. One is referenced by the other as one of its properties. +// The other is referenced by virtue of being assigned to the 'o' variable. +// Obviously, none can be garbage-collected + + +var o2 = o; // the 'o2' variable is the second thing that + // has a reference to the object +o = 1; // now, the object that was originally in 'o' has a unique reference + // embodied by the 'o2' variable + +var oa = o2.a; // reference to 'a' property of the object. + // This object has now 2 references: one as a property, + // the other as the 'oa' variable + +o2 = "yo"; // The object that was originally in 'o' has now zero + // references to it. It can be garbage-collected. + // However what was its 'a' property is still referenced by + // the 'oa' variable, so it cannot be freed + +oa = null; // what was the 'a' property of the object originally in o + // has zero references to it. It can be garbage collected. +</pre> + +<h4 id="Limitation_cycles">Limitation: cycles</h4> + +<p>There is a limitation when it comes to cycles. In the following example two objects are created and reference one another – thus creating a cycle. They will not get out of the function scope after the function call, so they are effectively useless and could be freed. However, the reference-counting algorithm considers that since each of both object is referenced at least once and none can be garbage-collected.</p> + +<pre class="brush: js">function f(){ + var o = {}; + var o2 = {}; + o.a = o2; // o references o2 + o2.a = o; // o2 references o + + return "azerty"; +} + +f(); +</pre> + +<h4 id="Real-life_example">Real-life example</h4> + +<p>Internet Explorer 6 and 7 are known to have reference-counting garbage collectors for DOM objects. Cycles are a common mistake that can generate memory leaks:</p> + +<pre class="brush: js">var div; +window.onload = function(){ + div = document.getElementById("myDivElement"); + div.circularReference = div; + div.lotsOfData = new Array(10000).join("*"); +}; +</pre> + +<p>In the above example, the DOM element "myDivElement" has a circular reference to itself in the "circularReference" property. If the property is not explicitly removed or nulled, a reference-counting garbage collector will always have at least one reference intact and will keep the DOM element in memory even if it was removed from the DOM tree. If the DOM element holds lots of data (illustrated in the above example with the "lotsOfData" property), the memory consumed by this data will never be released.</p> + +<h3 id="Mark-and-sweep_algorithm">Mark-and-sweep algorithm</h3> + +<p>This algorithm reduces the definition of "an object is not needed anymore" to "an object is unreachable".</p> + +<p>This algorithm assumes the knowledge of a set of objects called <em>roots</em> (In JavaScript, the root is the global object). Periodically, the garbage-collector will start from these roots, find all objects that are referenced from these roots, then all objects referenced from these, etc. Starting from the roots, the garbage collector will thus find all <em>reachable</em> objects and collect all non-reachable objects.</p> + +<p>This algorithm is better than the previous one since "an object has zero reference" leads to this object being unreachable. The opposite is not true as we have seen with cycles.</p> + +<p>As of 2012, all modern browsers ship a mark-and-sweep garbage-collector. All improvements made in the field of JavaScript garbage collection (generational/incremental/concurrent/parallel garbage collection) over the last few years are implementation improvements of this algorithm, but not improvements over the garbage collection algorithm itself nor its reduction of the definition of when "an object is not needed anymore".</p> + +<h4 id="Cycles_are_not_a_problem_anymore">Cycles are not a problem anymore</h4> + +<p>In the first above example, after the function call returns, the 2 objects are not referenced anymore by something reachable from the global object. Consequently, they will be found unreachable by the garbage collector.</p> + +<p>The same thing goes with the second example. Once the div and its handler are made unreachable from the roots, they can both be garbage-collected despite referencing each other.</p> + +<h4 id="Limitation_objects_need_to_be_made_explicitly_unreachable">Limitation: objects need to be made explicitly unreachable</h4> + +<p>Although this is marked as a limitation, it is one that is rarely reached in practice which is why no one usually cares that much about garbage collection.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a class="external" href="http://www.ibm.com/developerworks/web/library/wa-memleak/">IBM article on "Memory leak patterns in JavaScript" (2007)</a></li> + <li><a class="external" href="http://msdn.microsoft.com/en-us/magazine/ff728624.aspx">Kangax article on how to register event handler and avoid memory leaks (2010)</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Performance" title="https://developer.mozilla.org/en-US/docs/Mozilla/Performance">Performance</a></li> +</ul> diff --git a/files/id/web/javascript/new_in_javascript/index.html b/files/id/web/javascript/new_in_javascript/index.html new file mode 100644 index 0000000000..79ee10c2b3 --- /dev/null +++ b/files/id/web/javascript/new_in_javascript/index.html @@ -0,0 +1,74 @@ +--- +title: New in JavaScript +slug: Web/JavaScript/New_in_JavaScript +tags: + - ECMAScript + - JavaScript + - NeedsTranslation + - TopicStub + - Versions +translation_of: Archive/Web/JavaScript/New_in_JavaScript +--- +<div>{{jsSidebar("New_in_JS")}}</div> + +<p>This chapter contains information about JavaScript's version history and implementation status for Mozilla/SpiderMonkey-based JavaScript applications, such as Firefox.</p> + +<h2 id="ECMAScript_versions">ECMAScript versions</h2> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Language_Resources">Language resources</a></dt> + <dd>Learn more about the ECMAScript standards on which the JavaScript language is based on.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla">ECMAScript 5 support</a></dt> + <dd>Implementation status for the current standard ECMA-262 Edition 5.1 in Mozilla-based engines and products.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_2015_support_in_Mozilla">ECMAScript 2015 support</a></dt> + <dd>Implementation status for the draft ECMA-262 Edition 6 (ES2015) in Mozilla-based engines and products.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_Next_support_in_Mozilla">ECMAScript Next support</a></dt> + <dd>Implementation status for upcoming ECMA-262 features as per the yearly (ES2016/ES2017/ES2018/...) release schedule in Mozilla-based engines and products.</dd> +</dl> + +<h2 id="JavaScript_release_notes">JavaScript release notes</h2> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/Firefox_JavaScript_changelog">Firefox JavaScript changelog</a></dt> + <dd>See this changelog for JavaScript features implemented in Firefox 5 and later.</dd> +</dl> + +<h2 id="JavaScript_versions">JavaScript versions</h2> + +<p><strong>Deprecated</strong> ({{deprecated_inline}}). The explicit versioning and opt-in of language features was Mozilla-specific and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=867609">are in process of being removed</a>. Firefox 4 was the last version which referred to a JavaScript version (1.8.5). With new ECMA standards, JavaScript language features are now often mentioned with their initial definition in ECMA-262 Editions such as ECMAScript 2015.</p> + +<p>JavaScript was released as version 1.0 in March 1996 in Netscape Navigator 2.0 and Internet Explorer 2.0.</p> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.1">JavaScript 1.1</a></dt> + <dd>Version shipped in Netscape Navigator 3.0. Released on August 19, 1996.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.2">JavaScript 1.2</a></dt> + <dd>Version shipped in Netscape Navigator 4.0-4.05. Released on June 11, 1997.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.3">JavaScript 1.3</a></dt> + <dd>Version shipped in Netscape Navigator 4.06-4.7x. Released on October 19, 1998.<br> + Standardization work to be compliant with ECMA-262 1st and 2nd Edition.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.4">JavaScript 1.4</a></dt> + <dd>Version shipped with Netscape's server-side JavaScript. Released in 1999.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.5">JavaScript 1.5</a></dt> + <dd>Version shipped in Netscape Navigator 6.0 and Firefox 1.0. Release on November 14, 2000.<br> + Standardization work to be compliant with ECMA-262 3rd Edition.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.6">JavaScript 1.6</a></dt> + <dd>Version shipped in Firefox 1.5. Released in November 2005.<br> + Includes ECMAScript for XML (E4X), new <code>Array</code> methods plus <code>String</code> and <code>Array</code> generics.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.7">JavaScript 1.7</a></dt> + <dd>Version shipped in Firefox 2. Released in October 2006.<br> + Includes generators, iterators, array comprehensions, <code>let</code> expressions, and destructuring assignment.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.8">JavaScript 1.8</a></dt> + <dd>Version shipped in Firefox 3. Released in June 2008.<br> + Includes expression closures, generator expressions and <code>Array.reduce()</code></dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.8.1">JavaScript 1.8.1</a></dt> + <dd>Version shipped in Firefox 3.5. Released on June 30, 2009.<br> + Includes the TraceMonkey JIT and supports native JSON.</dd> + <dt>JavaScript 1.8.2</dt> + <dd>Version shipped in Firefox 3.6. Released June 22, 2009.<br> + Includes only minor changes.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.8.5">JavaScript 1.8.5</a></dt> + <dd>Version shipped in Firefox 4. Released July 27, 2010.<br> + Includes many new features for ECMA-262 Edition 5 compliance.<br> + This is the last JavaScript version.</dd> +</dl> diff --git a/files/id/web/javascript/panduan/closures/index.html b/files/id/web/javascript/panduan/closures/index.html new file mode 100644 index 0000000000..73cdbb7e15 --- /dev/null +++ b/files/id/web/javascript/panduan/closures/index.html @@ -0,0 +1,345 @@ +--- +title: Closures +slug: Web/JavaScript/Panduan/Closures +translation_of: Web/JavaScript/Closures +--- +<p>Closure adalah fungsi yang merujuk kepada variabel yang mandiri (bebas). </p> + +<p>Dengan kata lain, fungsi yang di definisikan di dalam closure 'mengingat' lingkungan dimana closure ini didefinisikan. </p> + +<p>Lihat contoh berikut:</p> + +<div> +<pre class="brush: js">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(); +</pre> +</div> + +<p><code style="font-size: 14px;">init()</code><span style="line-height: 1.572;"> membuat sebuah lokal variabel </span><code style="font-size: 14px;">name</code><span style="line-height: 1.572;"> dan kemudian memanggil fungsi </span><code style="font-size: 14px;">displayName()</code><span style="line-height: 1.572;">. </span><code style="font-size: 14px;">displayName()</code><span style="line-height: 1.572;"> adalah fungsi internal yang didefinisikan didalam</span><span style="line-height: 1.572;"> </span><code style="font-size: 14px;">init()</code><span style="line-height: 1.572;"> dan hanya dapat diakses di dalam fungsi tersebut. </span><code style="font-size: 14px;">displayName()</code><span style="line-height: 1.572;"> tidak memiliki lokal variabelnya sendiri, namun fungsi ini memiliki akses ke variabel diluar fungsinya dan dapat menggunakan variabel </span><code style="font-size: 14px;">name</code><span style="line-height: 1.572;"> tersebut yang telah di deklarasikan di fungsi induknya.</span></p> + +<p><a href="http://jsfiddle.net/xAFs9/3/" title="http://jsfiddle.net/xAFs9/">Jalankan</a> kode dan perhatikan bahwa <code>alert()</code> dapat menampilkan isi dari variabel <code>name</code>, dimana variabel tersebut dideklarasikan pada fungsi induknya. Ini adalah sebuah contoh dari ruang lingkup leksikal (<em>lexical</em> <em>scoping)</em>, 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.</p> + +<p>Lihat contoh berikut:</p> + +<pre class="brush: js">function makeFunc() { + var name = "Mozilla"; + function displayName() { + alert(name); + } + return displayName; +} + +var myFunc = makeFunc(); +myFunc(); +</pre> + +<p>Jika kamu menjalankan kode ini, kode ini akan memiliki efek yang sama seperti contoh sebelumnya <code>init()</code>: teks "Mozilla" akan muncul di JavaScript alert box. Yang membedakan dan menarik adalah fungsi internal <code>displayName()</code> di kembalikan terlebih dahulu ke fungsi di luar sebelum di eksekusi.</p> + +<p>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 <code>makeFunc()</code> selesai dieksekusi, sewajarnya variabel <code>name</code> ini tidak dapat diakses lagi. Namun, karena kode ini masih berjalan normal, ini adalah hal yang berbeda di Javascript.</p> + +<p>Alasannya adalah fungsi tersebut telah menjadi <em>closure </em>di javascript. <em>Closure </em>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 <em>closure </em>dibuat. Pada kasus ini, <code>myFunc</code> bereferensi kepada fungsi <code>displayName</code> yang telah dibuat ketika <code>makeFunc</code> dijalankan. Fungsi <code>displayName</code> akan tepat menjaga akses ke lingkungan leksikalnya, dimana variabel <code>name</code> ini aktif. Untuk alasan inilah, ketika <code>myFunc</code> di panggil, variabel <code>name</code> tetap dapat digunakan dan "Mozilla" dikirim ke alert box.</p> + +<p>Berikut adalah contoh menarik yang lainnya — fungsi <code>makeAdder</code> :</p> + +<pre class="brush: js">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 +</pre> + +<p>Di contoh ini, kita telah mendefinisikan fungsi <code>makeAdder(x)</code> dengan satu argument <code>x</code> dan mengembalikan sebuah fungsi baru. Fungsi yang dikembalikan membutuhkan satu argumen <code>y</code>, dan mengembalikan jumlah <code>x</code> dan <code>y</code>.</p> + +<p>Esensinya, <code>makeAdder</code> 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.</p> + +<p><code>add5</code> dan <code>add10</code> keduanya adalah closure. Fungsi ini menggunakan definisi fungsi yang sama, namun menggunakan memori yang berbeda. Di <code>add5</code> variabel <code>x</code> memiliki nilai 5. sedangkan di <code>add10</code> variabel <code>x</code> memiliki nilai 10.</p> + +<h2 id="Penggunaan_Closure">Penggunaan Closure</h2> + +<p>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 <em>object oriented programming</em>, dimana objek obj0ek tersebut membantu kita dalam menghubukan beberapa data (properti objek) dengan satu atau lebih method.</p> + +<p>Karena itu, kamu dapat menggunakan closure dimanapun kamu dapat menggunakan objek dengan satu method.</p> + +<p>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.</p> + +<p>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 <em>pixel</em>, kemudian menentukan ukuran elemen lain di halaman (seperti header) menggunakan satuan unit <em>em</em>:</p> + +<pre class="brush: css">body { + font-family: Helvetica, Arial, sans-serif; + font-size: 12px; +} + +h1 { + font-size: 1.5em; +} + +h2 { + font-size: 1.2em; +} +</pre> + +<p>Tombol interaktif kita dapat merubah ukuran huruf dari elemen body dan elemen yang lainnya akan menyesuaikan.</p> + +<p>Berikut kode Javascript:</p> + +<pre class="brush: js">function makeSizer(size) { + return function() { + document.body.style.fontSize = size + 'px'; + }; +} + +var size12 = makeSizer(12); +var size14 = makeSizer(14); +var size16 = makeSizer(16); +</pre> + +<p><code>size12</code>, <code>size14</code>, dan <code>size16</code> 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:</p> + +<pre class="brush: js">document.getElementById('size-12').onclick = size12; +document.getElementById('size-14').onclick = size14; +document.getElementById('size-16').onclick = size16; +</pre> + +<pre class="brush: html"><a href="#" id="size-12">12</a> +<a href="#" id="size-14">14</a> +<a href="#" id="size-16">16</a> +</pre> + +<p><a href="https://jsfiddle.net/vnkuZ">Lihat pada JSFiddle</a></p> + +<h2 id="Emulating_private_methods_with_closures">Emulating private methods with closures</h2> + +<p>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.</p> + +<p>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.</p> + +<p>Here's how to define some public functions that can access private functions and variables, using closures which is also known as the <a class="external" href="http://www.google.com/search?q=javascript+module+pattern" title="http://www.google.com/search?q=javascript+module+pattern">module pattern</a>:</p> + +<pre class="brush: js">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 */ +</pre> + +<p>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: <code>counter.increment</code>, <code>counter.decrement</code>, and <code>counter.value</code>.</p> + +<p>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 <code>privateCounter</code> and a function called <code>changeBy</code>. 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.</p> + +<p>Those three public functions are closures that share the same environment. Thanks to JavaScript's lexical scoping, they each have access to the <code>privateCounter</code> variable and <code>changeBy</code> function.</p> + +<p>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 <code>counter</code> variable. We could store this function in a separate variable <code>makeCounter </code>and use it to create several counters.</p> + +<pre class="brush: js">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 */ +</pre> + +<p>Notice how each of the two counters maintains its independence from the other. Its environment during the call of the <code>makeCounter()</code> function is different each time. The closure variable <code>privateCounter </code>contains a different instance each time.</p> + +<p>Using closures in this way provides a number of benefits that are normally associated with object oriented programming, in particular data hiding and encapsulation.</p> + +<h2 id="Creating_closures_in_loops_A_common_mistake">Creating closures in loops: A common mistake</h2> + +<p>Prior to the introduction of the <a href="/en-US/docs/JavaScript/Reference/Statements/let" title="let"><code>let</code> keyword</a> in JavaScript 1.7, a common problem with closures occurred when they were created inside a loop. Consider the following example:</p> + +<pre class="brush: html"><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> +</pre> + +<pre class="brush: js">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(); +</pre> + +<p><a href="https://jsfiddle.net/v7gjv">Lihat pada JSFiddle</a></p> + +<p>The <code>helpText</code> 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.</p> + +<p>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.</p> + +<p>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 <code>setupHelp</code> 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 <code>helpText</code> list.</p> + +<p>One solution in this case is to use more closures: in particular, to use a function factory as described earlier on:</p> + +<pre class="brush: js">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(); +</pre> + +<p><a href="https://jsfiddle.net/v7gjv/1">Lihat pada JSFiddle</a></p> + +<p>This works as expected. Rather than the callbacks all sharing a single environment, the <code>makeHelpCallback</code> function creates a new environment for each one in which <code>help</code> refers to the corresponding string from the <code>helpText</code> array.</p> + +<h2 id="Performance_considerations">Performance considerations</h2> + +<p>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.</p> + +<p>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).</p> + +<p>Consider the following impractical but demonstrative case:</p> + +<pre class="brush: js">function MyObject(name, message) { + this.name = name.toString(); + this.message = message.toString(); + this.getName = function() { + return this.name; + }; + + this.getMessage = function() { + return this.message; + }; +} +</pre> + +<p>The previous code does not take advantage of the benefits of closures and thus could instead be formulated:</p> + +<pre class="brush: js">function MyObject(name, message) { + this.name = name.toString(); + this.message = message.toString(); +} +MyObject.prototype = { + getName: function() { + return this.name; + }, + getMessage: function() { + return this.message; + } +}; +</pre> + +<p>However, redefining the prototype is not recommended, so the following example is even better because it appends to the existing prototype:</p> + +<pre class="brush: js">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; +}; +</pre> + +<p>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 <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Details of the Object Model</a> for more details.</p> + +<h2 id="Expression_closures">Expression closures</h2> + +<p>This addition is nothing more than a shorthand for writing simple functions, giving the language something similar to a typical <a class="external" href="http://en.wikipedia.org/wiki/Lambda_calculus#Lambda_calculus_and_programming_languages">Lambda notation</a>.</p> + +<p>JavaScript 1.7 and older:</p> + +<pre class="brush: js">function(x) { return x * x; }</pre> + +<p>JavaScript 1.8:</p> + +<pre class="brush: js">function(x) x * x</pre> + +<p>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.</p> + +<p><strong>Examples:</strong></p> + +<p>A shorthand for binding event listeners:</p> + +<pre class="brush: js"> document.addEventListener("click", function() false, true); +</pre> + +<p>Using this notation with some of the array functions from JavaScript 1.6:</p> + +<pre class="brush: js">elems.some(function(elem) elem.type == "text");</pre> diff --git a/files/id/web/javascript/panduan/index.html b/files/id/web/javascript/panduan/index.html new file mode 100644 index 0000000000..491d4a4a84 --- /dev/null +++ b/files/id/web/javascript/panduan/index.html @@ -0,0 +1,119 @@ +--- +title: Panduan JavaScript +slug: Web/JavaScript/Panduan +translation_of: Web/JavaScript/Guide +--- +<div>{{jsSidebar("JavaScript Guide")}}</div> + +<p class="summary">Pedoman javasript memberi tahu bagaimana menggunakan <a href="/id/docs/Web/JavaScript">JavaScript</a> dan memberikan penjelasan tentang bahasa javascript. Jika anda ingin memulai javascript atau programming secara umum, konsultasikan artikel di <a href="/id/Learn">Area pembelajaran</a>. Jika anda membutuhkan informasi lengkap tentang fitur silakan lihat <a href="/id/docs/Web/JavaScript/Reference">Referensi javaScript</a>.</p> + +<h2 id="Bagian">Bagian</h2> + +<p>Pedoman ini dibagi menjadi beberapa bagian:</p> + +<ul class="card-grid"> + <li><span><a href="/id/docs/Web/JavaScript/Guide/Introduction">Introduction</a></span> + + <p><a href="/id/docs/Web/JavaScript/Guide/Introduction#Where_to_find_JavaScript_information">About this guide</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Introduction#What_is_JavaScript">About JavaScript</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_Java">JavaScript and Java</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_the_ECMAScript_Specification">ECMAScript</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Introduction#Getting_started_with_JavaScript">Tools</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Introduction#Hello_world">Hello World</a></p> + </li> + <li><span><a href="/id/docs/Web/JavaScript/Guide/Grammar_and_types">Grammar and types</a></span> + <p><a href="/id/docs/Web/JavaScript/Guide/Grammar_and_types#Basics">Basic syntax & comments</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Grammar_and_types#Declarations">Declarations</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_scope">Variable scope</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_hoisting">Variable hoisting</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Grammar_and_types#Data_structures_and_types">Data structures and types</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Grammar_and_types#Literals">Literals</a></p> + </li> + <li><span><a href="/id/docs/Web/JavaScript/Guide/Control_flow_and_error_handling">Control flow and error handling</a></span> + <p><code><a href="/id/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#if...else_statement">if...else</a></code><br> + <code><a href="/id/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#switch_statement">switch</a></code><br> + <a href="/id/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Exception_handling_statements"><code>try</code>/<code>catch</code>/<code>throw</code></a><br> + <a href="/id/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Utilizing_Error_objects">Error objects</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Promises">Promises</a></p> + </li> + <li><span><a href="/id/docs/Web/JavaScript/Guide/Loops_and_iteration">Loops and iteration</a></span> + <p><code><a href="/id/docs/Web/JavaScript/Guide/Loops_and_iteration#for_statement">for</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Loops_and_iteration#while_statement">while</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Loops_and_iteration#do...while_statement">do...while</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Loops_and_iteration#break_statement">break</a>/<a href="/id/docs/Web/JavaScript/Guide/Loops_and_iteration#continue_statement">continue</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Loops_and_iteration#for...in_statement">for..in</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement">for..of</a></code></p> + </li> +</ul> + +<ul class="card-grid"> + <li><span><a href="/id/docs/Web/JavaScript/Guide/Functions">Functions</a></span> + + <p><a href="/id/docs/Web/JavaScript/Guide/Functions#Defining_functions">Defining functions</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Functions#Calling_functions">Calling functions</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Functions#Function_scope">Function scope</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Functions#Closures">Closures</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Functions#Using_the_arguments_object">Arguments</a> & <a href="/id/docs/Web/JavaScript/Guide/Functions#Function_parameters">parameters</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Functions#Arrow_functions">Arrow functions</a></p> + </li> + <li><span><a href="/id/docs/Web/JavaScript/Guide/Expressions_and_Operators">Expressions and operators</a></span> + <p><a href="/id/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment_operators">Assignment</a> & <a href="/id/docs/Web/JavaScript/Guide/Expressions_and_Operators#Comparison_operators">Comparisons</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Expressions_and_Operators#Arithmetic_operators">Arithmetic operators</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Expressions_and_Operators#Bitwise_operators">Bitwise</a> & <a href="/id/docs/Web/JavaScript/Guide/Expressions_and_Operators#Logical_operators">logical operators</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Expressions_and_Operators#Conditional_(ternary)_operator">Conditional (ternary) operator</a></p> + </li> + <li><span><a href="/id/docs/Web/JavaScript/Guide/Numbers_and_dates">Numbers and dates</a></span><a href="/id/docs/Web/JavaScript/Guide/Numbers_and_dates#Numbers"> Number literals</a> + <p><a href="/id/docs/Web/JavaScript/Guide/Numbers_and_dates#Number_object"><code>Number</code> object</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Numbers_and_dates#Math_object"><code>Math</code> object</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Numbers_and_dates#Date_object"><code>Date</code> object</a></p> + </li> + <li><span><a href="/id/docs/Web/JavaScript/Guide/Text_formatting">Text formatting</a></span> + <p><a href="/id/docs/Web/JavaScript/Guide/Text_formatting#String_literals">String literals</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Text_formatting#String_objects"><code>String</code> object</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Text_formatting#Multi-line_template_literals">Template literals</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Text_formatting#Internationalization">Internationalization</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Regular_Expressions">Regular Expressions</a></p> + </li> +</ul> + +<ul class="card-grid"> + <li><span><a href="/id/docs/Web/JavaScript/Guide/Indexed_collections">Indexed collections</a></span> + + <p><a href="/id/docs/Web/JavaScript/Guide/Indexed_collections#Array_object">Arrays</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Indexed_collections#Typed_Arrays">Typed arrays</a></p> + </li> + <li><span><a href="/id/docs/Web/JavaScript/Guide/Keyed_collections">Keyed collections</a></span> + <p><code><a href="/id/docs/Web/JavaScript/Guide/Keyed_collections#Map_object">Map</a></code><br> + <code><a href="/id/docs/Web/JavaScript/Guide/Keyed_collections#WeakMap_object">WeakMap</a></code><br> + <code><a href="/id/docs/Web/JavaScript/Guide/Keyed_collections#Set_object">Set</a></code><br> + <code><a href="/id/docs/Web/JavaScript/Guide/Keyed_collections#WeakSet_object">WeakSet</a></code></p> + </li> + <li><span><a href="/id/docs/Web/JavaScript/Guide/Working_with_Objects">Working with objects</a></span> + <p><a href="/id/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties">Objects and properties</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Working_with_Objects#Creating_new_objects">Creating objects</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_methods">Defining methods</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">Getter and setter</a></p> + </li> + <li><span><a href="/id/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Details of the object model</a></span> + <p><a href="/id/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Class-based_vs._prototype-based_languages">Prototype-based OOP</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Creating_the_hierarchy">Creating object hierarchies</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Property_inheritance_revisited">Inheritance</a></p> + </li> +</ul> + +<ul class="card-grid"> + <li><span><a href="/id/docs/Web/JavaScript/Guide/Iterators_and_Generators">Iterators and generators</a></span> + + <p><a href="/id/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterators">Iterators</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterables">Iterables</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generators">Generators</a></p> + </li> + <li><span><a href="/id/docs/Web/JavaScript/Guide/Meta_programming">Meta programming</a></span> + <p><code><a href="/id/docs/Web/JavaScript/Guide/Meta_programming#Proxies">Proxy</a></code><br> + <a href="/id/docs/Web/JavaScript/Guide/Meta_programming#Handlers_and_traps">Handlers and traps</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Meta_programming#Revocable_Proxy">Revocable Proxy</a><br> + <code><a href="/id/docs/Web/JavaScript/Guide/Meta_programming#Reflection">Reflect</a></code></p> + </li> +</ul> + +<p>{{Next("Web/JavaScript/Guide/Introduction")}}</p> diff --git a/files/id/web/javascript/panduan/loops_and_iteration/index.html b/files/id/web/javascript/panduan/loops_and_iteration/index.html new file mode 100644 index 0000000000..7fbb416c43 --- /dev/null +++ b/files/id/web/javascript/panduan/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 +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</div> + +<p class="summary"><span id="result_box" lang="id"><span>Loop menawarkan cara cepat dan mudah untuk melakukan sesuatu secara berulang-ulang.</span> <span>Bab tentang <a href="/id/docs/Web/JavaScript/Guide">Panduan JavaScript</a> ini memperkenalkan berbagai pernyataan iterasi</span></span><span lang="id"><span> berbeda yang tersedia untuk JavaScript.</span></span></p> + +<p><span id="result_box" lang="id"><span>Anda dapat menganggap <em>loop</em> sebagai versi permainan terkomputerisasi di mana Anda menyuruh seseorang untuk mengambil langkah X menuju satu arah lalu langkah Y ke arah yang lain;</span> <span>Sebagai contoh, gagasan "Pergilah lima langkah ke timur" dapat di ekspresikan dengan cara berikut sebagai sebuah loop (pengulangan):</span></span></p> + +<pre class="brush: js">var langkah; +for (langkah= 0; langkah< 5; langkah++) { + // berlari 5 kali, dengan nilai langkah 0 sampai 4. + console.log('<span class="short_text" id="result_box" lang="id"><span>Berjalan ke timur satu langkah</span></span>'); +} +</pre> + +<p><span id="result_box" lang="id"><span>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).</span> <span>Berbagai mekanisme loop menawarkan berbagai cara untuk menentukan titik awal dan akhir perulangan.</span> <span>Ada berbagai situasi yang lebih mudah dikerjakan oleh sebuah tipe loop dibandingkan tipe (loop) yang lain.</span></span></p> + +<p><span id="result_box" lang="id"><span>Pernyataan untuk loop yang disediakan dalam JavaScript adalah:</span></span></p> + +<ul> + <li>{{anch("for statement")}}</li> + <li>{{anch("do...while statement")}}</li> + <li>{{anch("while statement")}}</li> + <li>{{anch("labeled statement")}}</li> + <li>{{anch("break statement")}}</li> + <li>{{anch("continue statement")}}</li> + <li>{{anch("for...in statement")}}</li> + <li>{{anch("for...of statement")}}</li> +</ul> + +<h2 id="for_statement"><code>for</code> statement</h2> + +<p>Sebuah {{jsxref("statements/for","for loop")}} <span id="result_box" lang="id"><span>mengulang hingga kondisi yang ditentukan evaluasinya menjadi salah/false.</span> <span><code> for</code> loop pada Javascript serupa dengan <code> for </code>loop pada Java dan C</span></span><span lang="id"><span>.</span> <span>Sebuah statement (pernyataan) <code>for </code> terlihat sebagai berikut:</span></span></p> + +<pre class="syntaxbox">for ([initialExpression]; [condition]; +[incrementExpression]) statement +</pre> + +<p>Ketika sebuah <code>for</code> loop dieksekusi, <span class="short_text" id="result_box" lang="id"><span>Berikut ini akan terjadi:</span></span></p> + +<ol> + <li><span class="short_text" id="result_box" lang="id"><span>Ekspresi yang menginisialisasi yaitu</span></span> <code>initialExpression</code>, <span id="result_box" lang="id"><span>Jika ada, maka akan di eksekusi</span>. <span>Ekspresi ini biasanya menginisialisasi satu atau lebih penghitung loop, tetapi sintaksnya memperbolehkan ekspresi dengan tingkat kerumitan apapun.</span> <span>Ekspresi ini juga bisa mendeklarasikan variabel.</span></span></li> + <li>Ekpresi <code>condition</code> di evaluasi. JIka <em>value</em> dari kondisi adalah true (benar), maka statement loop akan dieksekusi. Jika value dari <code>condition</code> false (salah), <code>for</code> loop akan dihentikan. <span id="result_box" lang="id"><span>Jika ekspresi <code>condition </code>dihilangkan sama sekali, kondisinya diasumsikan benar.</span></span></li> + <li>Mengeksekusi <code>Statement</code> . <span id="result_box" lang="id"><span>Untuk mengeksekusi berbagai pernyataan, gunakanlah sebuah blok pernyataan</span></span> (<code>{ ... }</code>) <span class="short_text" id="result_box" lang="id"><span>untuk mengelompokkan pernyataan-pernyataan tersebut</span></span>.</li> + <li>Jika ada, ekspresi baru<code> incrementExpression</code> di eksekusi<span id="result_box" lang="id"><span>.</span></span></li> + <li>Kontrol kembali ke langkah ke-2.</li> +</ol> + +<h3 id="Contoh"><strong>Contoh</strong></h3> + +<p><em>function</em> (fungsi) berikut memuat sebuah statement <code>for</code> yang menghitung angka dari opsi yang terpilih dalam sebuah daftar <em>scrolling</em> (sebuah elemen {{HTMLElement("select")}} yang memperbolehkan berbagai pilihan). Statement<code> for</code> mendeklarasikan variable <code>i</code> dan menginisialisasinya ke nol. Ia memeriksa bahwa<code> i</code> lebih kecil dari nomor dari opsi dalam elemen<code> <select></code> , menampilkan statement <code>if</code> yang berhasil, dan menaikan <code>i</code> satu setelah masing-masing lolos melewati loop.</p> + +<pre class="brush: html"><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> + +</pre> + +<h2 id="do...while_statement"><code>do...while</code> statement</h2> + +<p>Pernyataan/statement {{jsxref("statements/do...while", "do...while")}} terus di ulangi sampai evaluasi kondisi bernilai false/salah. Sebuah <code>do...while</code> statement terlihat sebagai berikut:</p> + +<pre class="syntaxbox">do + statement +while (condition); +</pre> + +<p><code>statement</code> di jalankan lebih dulu sebelum kondisi diperiksa. Untuk menjalankan banyak statements, gunakan statement blok (<code>{ ... }</code>) untuk membuat grup dari statement tersebut. Jika <code>condition</code> 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 <code>do...while</code>.</p> + +<h3 id="Contoh_2"><strong>Contoh</strong></h3> + +<p>Dalam contoh berikut, perulangan <code>do</code> di iterasi sekali dan di iterasi kembali sampai i tidak lagi kurang dari 5. </p> + +<pre class="brush: js">var i = 0; +do { + i += 1; + console.log(i); +} while (i < 5);</pre> + +<h2 id="while_statement"><code>while</code> statement</h2> + +<p>Sebuah statement {{jsxref("statements/while","while")}} di eksekusi pernyataan pernyataannya asalkan memenuhi syarat kondisinya yang bernilai true/benar. Sebuah statement <code>while</code> terlihat sebagai berikut:</p> + +<pre class="syntaxbox">while (condition) + statement +</pre> + +<p>Jika kondisi bernilai false/salah, <code>statement</code> dengan perulangan berhenti di eksekusi dan kontrol akan melewati statement yang mengikuti perulangan tersebut.</p> + +<p>Kondisi terjadi sebelum <code>statement</code> dalam perulangan di eksekusi. Jika kondisi bernilai true/benar, <code>statement</code> di eksekusi dan kondisi di uji kembali. Jika kondisi bernilai false/salah, eksekusi akan berhenti dan konrol lewat untuk statement yang mengikuti <code>while</code>.</p> + +<p>Untuk mengeksekusi banyak statement, gunakan blok statement ({ ... }) untuk mengelompokan banyak statement tersebut.</p> + +<h3 id="Contoh_1"><strong>Contoh 1</strong></h3> + +<p>Beikut perulangan <code>while</code> mengiterasi <code>n</code> selama n kurang dari tiga:</p> + +<pre class="brush: js">var n = 0; +var x = 0; +while (n < 3) { + n++; + x += n; +} +</pre> + +<p>Dengan setiap iterasi, perulangan akan menambahkan increments <code>n</code> dan menambahkan nilainya pada <code>x</code>. Karena itu, <code>x</code> dan <code>n</code> mengambil nilai nilai berikut:</p> + +<ul> + <li>Setelah lewat awal: <code>n</code> = 1 dan <code>x</code> = 1</li> + <li>Setelah lewat kedua: <code>n</code> = 2 dan <code>x</code> = 3</li> + <li>Setelah lewat ketiga: <code>n</code> = 3 dan <code>x</code> = 6</li> +</ul> + +<p>Setelah melewati perulangan yang ketiga , kondisinya <code>n < 3</code> tidak lagi bernilai true/benar, jadi perulangan di hentikan.</p> + +<h3 id="Contoh_2_2"><strong>Contoh 2</strong></h3> + +<p>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 <code>while</code> berikut di eksekusi berulang kali selamanya karena kondisi tidak pernah mendapatkan nilai false/salah:</p> + +<pre class="brush: js">while (true) { + console.log('Hello, world!'); +}</pre> + +<h2 id="labeled_statement"><code>labeled</code> statement</h2> + +<p>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 <code>break</code> atau <code>continue</code> untuk menunjukkan apakah suatu program harus memutuskan loop atau melanjutkan eksekusinya.</p> + +<p>Sintak dari statement berlabel terlihat seperti berikut:</p> + +<pre class="syntaxbox">label : + statement +</pre> + +<p>Nilai dai sebuah <code><em>label</em></code> dapat berupa identifikasi JavaScript apa pun yang tidak dari kata kunci yang ada pada javascript. <code><em>statement</em></code><br> + yang Kamu identifikasi dengan label tersebut dapat berupa statement apa pun.</p> + +<h3 id="Contoh_3"><strong>Contoh</strong></h3> + +<p>Pada contoh ini, label <code>markLoop</code> mengidentifikasi sebuah perulangan <code>while</code>.</p> + +<pre class="brush: js">markLoop: +while (theMark == true) { + doSomething(); +}</pre> + +<h2 id="break_statement"><code>break</code> statement</h2> + +<p>Gunakan {{jsxref("statements/break","break")}} statement untuk menghentikan perulangan, <code>switch</code>, atau konjungsi dengan statement yang memakai label.</p> + +<ul> + <li>Ketika kamu menggunakan <code>break</code> tanpa sebuah label, Itu akan langsung mengakhiri lampiran yang ada didalam <code>while</code>, <code>do-while</code>, <code>for</code>, atau <code>switch</code> dengan segera dan kontrol pindah dari statement tersebut.</li> + <li>Ketika kamu menggunakan <code>break</code> pada sebuah label, Itu akan mengakhiri statement dari spesifik label.</li> +</ul> + +<p>Sintak dari statement <code>break</code> terlihat seperti ini:</p> + +<pre class="syntaxbox">break [<em>label</em>]; +</pre> + +<p>Bentuk pertama sintak mengakhiri perulangan atau <code>switch</code>; Bentuk kedua sintak mengakhiri statement dari spesifik label.</p> + +<h3 id="Contoh_1_2"><strong>Contoh</strong> <strong>1</strong></h3> + +<p>Contoh berikut mengiterasi melewati elemen-elemen dalam array sampai menemukan indeks elemen yang bernilai dari <code>theValue</code>:</p> + +<pre class="brush: js">for (var i = 0; i < a.length; i++) { + if (a[i] == theValue) { + break; + } +}</pre> + +<h3 id="Contoh_2_Breaking_pada_sebuah_label"><strong>Contoh 2: </strong>Breaking pada sebuah label</h3> + +<pre class="brush: js">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; + } + } +} +</pre> + +<h2 id="continue_statement"><code>continue</code> statement</h2> + +<p>Statement {{jsxref("statements/continue","continue")}} bisa digunakan untuk memulai lagi statement <code>while</code>, <code>do-while</code>, <code>for</code>, atau <code>label</code>.</p> + +<ul> + <li>Ketika kamu menggunakan <code>continue</code> tanpa sebuah label, itu akan menghentikan iterasi saat ini dari statement <code>while</code>, <code>do-while</code>, atau <code>for</code> dan melanjutkan eksekusi dari perulangan iterasi selanjutnya. Berbeda dengan statement <code>break</code>, <code>continue</code> tidak mengakhiri eksekusi dari perulangan sepenuhnya. Pada sebuah perulangan <code>while</code>, dia lompat kembali pada kondisinya. Pada sebuah perulangan <code>for</code>, Dia melompat ke ekpresi penambahan ke <code>increment-expression</code>.</li> + <li>Ketika kamu menggunakan <code>continue</code> dengan sebuah label, itu berlaku untuk pernyataan perulangan yang diidentifikasi dengan label tersebut.</li> +</ul> + +<p>Sintak statement <code>continue</code> terlihat sebagai berikut:</p> + +<pre class="syntaxbox">continue [<em>label</em>]; +</pre> + +<h3 id="Contoh_1_3"><strong>Contoh 1</strong></h3> + +<p>Contoh berikut menunjukkan sebuah perulangan <code>while</code> dengan sebuah statement <code>continue</code> yang di eksekusi ketika niai dari <code>i</code> adalah tiga Jadi, <code>n</code> mengambil nilai satu, tiga, tujuh dan dua belas.</p> + +<pre class="brush: js">var i = 0; +var n = 0; +while (i < 5) { + i++; + if (i == 3) { + continue; + } + n += i; +} +</pre> + +<h3 id="Contoh_2_3"><strong>Contoh 2</strong></h3> + +<p>Sebuah statement yang berlabel <code>checkiandj</code> berisikan sebuah statement berlabel <code>checkj</code>. Jika ada <code>continue</code> , Programnya akan menghentikan iterasi saat ini dari <code>checkj</code> dan memulai iterasi selanjutnya. Setiap kali <code>continue</code> ditemui, <code>checkj</code> di iterasi kembali sampai kondisinya bernilai <code>false</code>/salah. Ketika bernilai <code>false</code>/salah, Sisa dari statement <code>checkiandj</code> sudah selesai, dan <code>checkiandj</code> di iterasi kembali sampai kondisi bernilai salah <code>false</code>. Ketika bernilai salah <code>false</code> , program melanjutkan pada statement yang mengikuti <code>checkiandj</code>.</p> + +<p>JIka <code>continue</code> dipunyai label dari <code>checkiandj</code>, program akan terus berlanjut ke bagian atas dari statement <code>checkiandj</code> .</p> + +<pre class="brush: js">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); + }</pre> + +<h2 id="for...in_statement"><code>for...in</code> statement</h2> + +<p>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 <code>for...in</code> terlihat sebagai berikut:</p> + +<pre class="syntaxbox">for (variable in object) { + statements +} +</pre> + +<h3 id="Contoh_4"><strong>Contoh</strong></h3> + +<p>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.</p> + +<pre class="brush: js">function dump_props(obj, obj_name) { + var result = ''; + for (var i in obj) { + result += obj_name + '.' + i + ' = ' + obj[i] + '<br>'; + } + result += '<hr>'; + return result; +} +</pre> + +<p>Untuk sebuah objek <code>car</code> dengan property <code>make</code> dan <code>model</code>, <code>result/hasil</code> akan menjadi:</p> + +<pre class="brush: js">car.make = Ford +car.model = Mustang +</pre> + +<h3 id="Arrays"><strong>Arrays</strong></h3> + +<p>Meskipun mungkin menggunakan ini sebagai cara untuk melakukan iterasi di atas elemen {{jsxref("Array")}},statement <strong>for...in</strong> 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 <strong>for...in</strong> mengiterasi diatas nama properti yang di tetapkan pengguna pada penambahan elemen array, Jika kamu merubah array, seperti menambahkan properti atau metode. </p> + +<h2 id="for...of_statement"><code>for...of</code> statement</h2> + +<p>Statement {{jsxref("statements/for...of","for...of")}} membuat sebuah iterasi perulangan diatas <a href="/en-US/docs/Web/JavaScript/Guide/iterable">iterable objects</a> (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.</p> + +<pre class="syntaxbox">for (<em>variable</em> of <em>object</em>) { + <em>statement +</em>}</pre> + +<p>Contoh berikut menampilkan perbedaan diantara sebuah perulangan <code>for...of</code> dan sebuah perulangan {{jsxref("statements/for...in","for...in")}}. Ketika <code>for...in</code> mengiterasi diatas nama-nama properti, <code>for...of</code> mengiterasi diatas nilai-nilai properti:</p> + +<pre class="brush:js">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 +} +</pre> + +<p>{{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</p> diff --git a/files/id/web/javascript/panduan/numbers_and_dates/index.html b/files/id/web/javascript/panduan/numbers_and_dates/index.html new file mode 100644 index 0000000000..e9681b2adf --- /dev/null +++ b/files/id/web/javascript/panduan/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 +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Expressions_and_Operators", "Web/JavaScript/Guide/Text_formatting")}}</div> + +<p class="summary">Pada Bab ini memperkenalkan cara menggunakan angka dan tanggal pada JavaScript.</p> + +<h2 id="Angka">Angka</h2> + +<p>Pada JavaScript, semua angka diimplementasikan kedalam <a class="external external-icon" href="https://en.wikipedia.org/wiki/Double-precision_floating-point_format">double-precision 64-bit binary format IEEE 754</a> (mis. angka antara -(2<sup>53</sup> -1) dan 2<sup>53</sup> -1). <strong>Tidak ada jenis spesifik untuk integer</strong>. Selain bisa mewakili angka float, tipe data angka memiliki 3 nilai secara simbolik: <code>+</code>{{jsxref("Infinity")}}, <code>-</code>{{jsxref("Infinity")}}, dan {{jsxref("NaN")}} (bukan sebuah angka). Lihat juga <a href="/en-US/docs/Web/JavaScript/Data_structures">JavaScript tipe data dan struktur</a> untuk konteks dengan tipe data primitif JavaScript yang lain.</p> + +<p>Anda dapat menggunakan empat tipe angka literal: desimal, biner, oktal, dan heksadesimal.</p> + +<h3 id="Angka_Desimal">Angka Desimal</h3> + +<pre class="brush: js">1234567890 +42 + +// Perhatikan ketika menggunakan angka berawalan nol: + +0888 // 888 diubah menjadi desimal +0777 // diubah menjadi oktal pada non-strict mode (511 in decimal) +</pre> + +<p>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.</p> + +<h3 id="Angka_Biner">Angka Biner</h3> + +<p>Sintaks angka biner menggunakan angka nol diikuti dengan huruf kecil atau dengan huruf besar, huruf Latin "B" (<code>0b</code> atau <code>0B</code>). Jika digit setelah <code>0b</code> atau bukan 0 atau 1, menurut <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></code> yang dilemparkan: "Missing binary digits after 0b".</p> + +<pre class="brush: js">var FLT_SIGNBIT = 0b10000000000000000000000000000000; // 2147483648 +var FLT_EXPONENT = 0b01111111100000000000000000000000; // 2139095040 +var FLT_MANTISSA = 0B00000000011111111111111111111111; // 8388607</pre> + +<h3 id="Angka_oktal">Angka oktal</h3> + +<p>Angka oktal menggunakan awalan angka nol. Jika digit setelah <code>0</code> berada diluar jangkauan 0 hinga 7, angka akan diintrepretasikan sebagai angka desimal.</p> + +<pre class="brush: js">var n = 0755; // 493 +var m = 0644; // 420 +</pre> + +<p>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: <code>0644 === 420</code> dan <code>"\045" === "%"</code>. Pada ECMAScript 2015, angka oktal didukung jika diawali dengan <code>0o</code>, e.g.: </p> + +<pre class="brush: js">var a = 0o10; // ES2015: 8 +</pre> + +<h3 id="Angka_Heksadesimal">Angka Heksadesimal</h3> + +<p>Sintaks heksadesimal menggunakan awalan nol diikuti dengan huruf kecil atau huruf kapital Latin "X" (<code>0x</code> atau <code>0X)</code>. Jika digit setelah 0x berada diluar jangkauan (0123456789ABCDEF), menurut <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></code> yang dilemparkan: "Identifier starts immediately after numeric literal".</p> + +<pre class="brush: js">0xFFFFFFFFFFFFFFFFF // 295147905179352830000 +0x123456789ABCDEF // 81985529216486900 +0XA // 10 +</pre> + +<h3 id="Eksponensial">Eksponensial</h3> + +<pre class="brush: js">1E3 // 1000 +2e6 // 2000000 +0.1e2 // 10</pre> + +<h2 id="Angka_object"><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">Angka</span></font> object</h2> + +<p>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:</p> + +<pre class="brush: js">var biggestNum = Number.MAX_VALUE; +var smallestNum = Number.MIN_VALUE; +var infiniteNum = Number.POSITIVE_INFINITY; +var negInfiniteNum = Number.NEGATIVE_INFINITY; +var notANum = Number.NaN; +</pre> + +<p>Anda selalu mengacu pada properti dari objek angka yang telah ditentukan seperti yang ditunjukkan diatas, dan bukan sebagai properti objek angka yang anda tentukan.</p> + +<p>Tabel berikut meringkas sifat-sifat nomor object.</p> + +<table class="standard-table"> + <caption>Properties of <code>Number</code></caption> + <thead> + <tr> + <th scope="col">Properti</th> + <th scope="col">Deskripsi</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{jsxref("Number.MAX_VALUE")}}</td> + <td>Merepresantikan angka maksimal / terbesar</td> + </tr> + <tr> + <td>{{jsxref("Number.MIN_VALUE")}}</td> + <td>Merepresantikan angka minimal / terkecil</td> + </tr> + <tr> + <td>{{jsxref("Number.NaN")}}</td> + <td>Nilai spesial "bukan sebuah angka"</td> + </tr> + <tr> + <td>{{jsxref("Number.NEGATIVE_INFINITY")}}</td> + <td>Nilai spesial negatif tak terhingga; dikembalikan pada overflow</td> + </tr> + <tr> + <td>{{jsxref("Number.POSITIVE_INFINITY")}}</td> + <td>Nilai spesial positif tak terhingga; dikembalikan pada overflow</td> + </tr> + <tr> + <td>{{jsxref("Number.EPSILON")}}</td> + <td>Perbedaan antara satu dan nilai terkecil lebih besar dari satu yang dapat direpresentasikan sebagai {{jsxref("Number")}}.</td> + </tr> + <tr> + <td>{{jsxref("Number.MIN_SAFE_INTEGER")}}</td> + <td>Bilangan bulat aman minimum dalam JavaScript.</td> + </tr> + <tr> + <td>{{jsxref("Number.MAX_SAFE_INTEGER")}}</td> + <td>Bilangan bulat aman maksimum dalam JavaScript.</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption>Methods of <code>Number</code></caption> + <thead> + <tr> + <th>Method</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{jsxref("Number.parseFloat()")}}</td> + <td>Parses a string argument and returns a floating point number.<br> + Same as the global {{jsxref("parseFloat", "parseFloat()")}} function.</td> + </tr> + <tr> + <td>{{jsxref("Number.parseInt()")}}</td> + <td>Parses a string argument and returns an integer of the specified radix or base.<br> + Same as the global {{jsxref("parseInt", "parseInt()")}} function.</td> + </tr> + <tr> + <td>{{jsxref("Number.isFinite()")}}</td> + <td>Determines whether the passed value is a finite number.</td> + </tr> + <tr> + <td>{{jsxref("Number.isInteger()")}}</td> + <td>Determines whether the passed value is an integer.</td> + </tr> + <tr> + <td>{{jsxref("Number.isNaN()")}}</td> + <td>Determines whether the passed value is {{jsxref("Global_Objects/NaN", "NaN")}}. More robust version of the original global {{jsxref("Global_Objects/isNaN", "isNaN()")}}.</td> + </tr> + <tr> + <td>{{jsxref("Number.isSafeInteger()")}}</td> + <td>Determines whether the provided value is a number that is a <dfn>safe integer</dfn>.</td> + </tr> + </tbody> +</table> + +<p>Prototipe Angka menyediakan metode-metode untuk menampilkan informasi dari objek angka dalam format bervariasi. Tabel berikut meringkas metode-metode prototipe angka.</p> + +<table class="standard-table"> + <caption>Methods of <code>Number.prototype</code></caption> + <thead> + <tr> + <th scope="col">Method</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{jsxref("Number.toExponential", "toExponential()")}}</td> + <td>Mengembalikan string yang merepresentasikan nomor dalam notasi eksponensial.</td> + </tr> + <tr> + <td>{{jsxref("Number.toFixed", "toFixed()")}}</td> + <td>Mengembalikan string yang merepresentasikan nomor dalam notasi fixed-point.</td> + </tr> + <tr> + <td>{{jsxref("Number.toPrecision", "toPrecision()")}}</td> + <td>Mengembalikan string yang merepresentasikan nomor dalam notasi fixed-point yang lebih spesifik.</td> + </tr> + </tbody> +</table> + +<h2 id="Math_object"><code>Math</code> object</h2> + +<p>The built-in {{jsxref("Math")}} objek memiliki properti dan metode-metode untuk konstanta matematika dan fungsi-fungsi. Sebagai contoh, objek matematik <code>PI</code> properti memiliki nilai (3.141...), yang akan anda gunakan dalam aplikasi sebagai</p> + +<pre class="brush: js">Math.PI +</pre> + +<p>Demikian pula, fungsi standard matematika merupakan metode-metode <code>Math</code>. termasuk trigonometri, logaritma, eksponensial, dan fungsi lainnya. Sebagai contoh, jika anda ingin menggunakan fungsi trigonometri sin, anda akan menulis</p> + +<pre class="brush: js">Math.sin(1.56) +</pre> + +<p>Perhatikan bahwa semua metode trigonometri matematika menggunakan argumen dalam radian.</p> + +<p>Tabel berikut meringkas metode-metode objek matematik.</p> + +<table class="standard-table"> + <caption>Methods of <code>Math</code></caption> + <thead> + <tr> + <th scope="col">Method</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{jsxref("Math.abs", "abs()")}}</td> + <td>Nilai absolut</td> + </tr> + <tr> + <td>{{jsxref("Math.sin", "sin()")}}, {{jsxref("Math.cos", "cos()")}}, {{jsxref("Math.tan", "tan()")}}</td> + <td>Fungsi trigonometri standar; dengan argumen dalam radian.</td> + </tr> + <tr> + <td>{{jsxref("Math.asin", "asin()")}}, {{jsxref("Math.acos", "acos()")}}, {{jsxref("Math.atan", "atan()")}}, {{jsxref("Math.atan2", "atan2()")}}</td> + <td>Fungsi trigonometri terbalik; mengembalikan nilai dalam radian.</td> + </tr> + <tr> + <td>{{jsxref("Math.sinh", "sinh()")}}, {{jsxref("Math.cosh", "cosh()")}}, {{jsxref("Math.tanh", "tanh()")}}</td> + <td>Fungsi hiperbolik. argumen dalam sudut hiperbolik.</td> + </tr> + <tr> + <td>{{jsxref("Math.asinh", "asinh()")}}, {{jsxref("Math.acosh", "acosh()")}}, {{jsxref("Math.atanh", "atanh()")}}</td> + <td>Fungsi hiperbolik terbalik. mengembalikan nilai dalam sudut hiperbolik.</td> + </tr> + <tr> + <td> + <p>{{jsxref("Math.pow", "pow()")}}, {{jsxref("Math.exp", "exp()")}}, {{jsxref("Math.expm1", "expm1()")}}, {{jsxref("Math.log10", "log10()")}}, {{jsxref("Math.log1p", "log1p()")}}, {{jsxref("Math.log2", "log2()")}}</p> + </td> + <td>Fungsi eksponen dan logaritma.</td> + </tr> + <tr> + <td>{{jsxref("Math.floor", "floor()")}}, {{jsxref("Math.ceil", "ceil()")}}</td> + <td>Mengembalikan angka bulat terkecil/terbesar kurang/lebih dari atau sama dengan pada sebuah argumen.</td> + </tr> + <tr> + <td>{{jsxref("Math.min", "min()")}}, {{jsxref("Math.max", "max()")}}</td> + <td>Mengembalikan nilai minimum/maksimum sebuah koma terpisah dari angka sebagai argumen.</td> + </tr> + <tr> + <td>{{jsxref("Math.random", "random()")}}</td> + <td>Megembalikan angka acak antara 0 dan 1.</td> + </tr> + <tr> + <td>{{jsxref("Math.round", "round()")}}, {{jsxref("Math.fround", "fround()")}}, {{jsxref("Math.trunc", "trunc()")}},</td> + <td>Fungsi pembulatan dan pemotongan.</td> + </tr> + <tr> + <td>{{jsxref("Math.sqrt", "sqrt()")}}, {{jsxref("Math.cbrt", "cbrt()")}}, {{jsxref("Math.hypot", "hypot()")}}</td> + <td>Akar kuadrat, akar pangkat tiga, akar kuadrat dari jumlah argumen persegi.</td> + </tr> + <tr> + <td>{{jsxref("Math.sign", "sign()")}}</td> + <td>tanda sebuah angka, mengindikasikan angka apapun merupakan angka positif, negatif, atau nol.</td> + </tr> + <tr> + <td>{{jsxref("Math.clz32", "clz32()")}},<br> + {{jsxref("Math.imul", "imul()")}}</td> + <td>Angka yang dimulai dari nol bit dalam 32-bit.<br> + Hasil dari C-like 32-bit perkalian dari dua argumen.</td> + </tr> + </tbody> +</table> + +<p>Tidak seperti beberapa objek lainnya, anda tidak perlu membuat objek matematika sendiri. anda selalu menggunakan built-in Math object.</p> + +<h2 id="Date_object"><code>Date</code> object</h2> + +<p>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 <code>Date</code> object has a large number of methods for setting, getting, and manipulating dates. It does not have any properties.</p> + +<p>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.</p> + +<p>The <code>Date</code> object range is -100,000,000 days to 100,000,000 days relative to 01 January, 1970 UTC.</p> + +<p>To create a <code>Date</code> object:</p> + +<pre class="brush: js">var dateObjectName = new Date([parameters]); +</pre> + +<p>where <code>dateObjectName</code> is the name of the <code>Date</code> object being created; it can be a new object or a property of an existing object.</p> + +<p>Calling <code>Date</code> without the <code>new</code> keyword returns a string representing the current date and time.</p> + +<p>The <code>parameters</code> in the preceding syntax can be any of the following:</p> + +<ul> + <li>Nothing: creates today's date and time. For example, <code>today = new Date();</code>.</li> + <li>A string representing a date in the following form: "Month day, year hours:minutes:seconds." For example, <code>var Xmas95 = new Date("December 25, 1995 13:30:00")</code>. If you omit hours, minutes, or seconds, the value will be set to zero.</li> + <li>A set of integer values for year, month, and day. For example, <code>var Xmas95 = new Date(1995, 11, 25)</code>.</li> + <li>A set of integer values for year, month, day, hour, minute, and seconds. For example, <code>var Xmas95 = new Date(1995, 11, 25, 9, 30, 0);</code>.</li> +</ul> + +<h3 id="Methods_of_the_Date_object">Methods of the <code>Date</code> object</h3> + +<p>The <code>Date</code> object methods for handling dates and times fall into these broad categories:</p> + +<ul> + <li>"set" methods, for setting date and time values in <code>Date</code> objects.</li> + <li>"get" methods, for getting date and time values from <code>Date</code> objects.</li> + <li>"to" methods, for returning string values from <code>Date</code> objects.</li> + <li>parse and UTC methods, for parsing <code>Date</code> strings.</li> +</ul> + +<p>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 <code>getDay</code> method that returns the day of the week, but no corresponding <code>setDay</code> method, because the day of the week is set automatically. These methods use integers to represent these values as follows:</p> + +<ul> + <li>Seconds and minutes: 0 to 59</li> + <li>Hours: 0 to 23</li> + <li>Day: 0 (Sunday) to 6 (Saturday)</li> + <li>Date: 1 to 31 (day of the month)</li> + <li>Months: 0 (January) to 11 (December)</li> + <li>Year: years since 1900</li> +</ul> + +<p>For example, suppose you define the following date:</p> + +<pre class="brush: js">var Xmas95 = new Date('December 25, 1995'); +</pre> + +<p>Then <code>Xmas95.getMonth()</code> returns 11, and <code>Xmas95.getFullYear()</code> returns 1995.</p> + +<p>The <code>getTime</code> and <code>setTime</code> methods are useful for comparing dates. The <code>getTime</code> method returns the number of milliseconds since January 1, 1970, 00:00:00 for a <code>Date</code> object.</p> + +<p>For example, the following code displays the number of days left in the current year:</p> + +<pre class="brush: js">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 +</pre> + +<p>This example creates a <code>Date</code> object named <code>today</code> that contains today's date. It then creates a <code>Date</code> object named <code>endYear</code> and sets the year to the current year. Then, using the number of milliseconds per day, it computes the number of days between <code>today</code> and <code>endYear</code>, using <code>getTime</code> and rounding to a whole number of days.</p> + +<p>The <code>parse</code> method is useful for assigning values from date strings to existing <code>Date</code> objects. For example, the following code uses <code>parse</code> and <code>setTime</code> to assign a date value to the <code>IPOdate</code> object:</p> + +<pre class="brush: js">var IPOdate = new Date(); +IPOdate.setTime(Date.parse('Aug 9, 1995')); +</pre> + +<h3 id="Example">Example</h3> + +<p>In the following example, the function <code>JSClock()</code> returns the time in the format of a digital clock.</p> + +<pre class="brush: js">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; +} +</pre> + +<p>The <code>JSClock</code> function first creates a new <code>Date</code> object called <code>time</code>; since no arguments are given, time is created with the current date and time. Then calls to the <code>getHours</code>, <code>getMinutes</code>, and <code>getSeconds</code> methods assign the value of the current hour, minute, and second to <code>hour</code>, <code>minute</code>, and <code>second</code>.</p> + +<p>The next four statements build a string value based on the time. The first statement creates a variable <code>temp</code>, assigning it a value using a conditional expression; if <code>hour</code> is greater than 12, (<code>hour - 12</code>), otherwise simply hour, unless hour is 0, in which case it becomes 12.</p> + +<p>The next statement appends a <code>minute</code> value to <code>temp</code>. If the value of <code>minute</code> 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 <code>temp</code> in the same way.</p> + +<p>Finally, a conditional expression appends "P.M." to <code>temp</code> if <code>hour</code> is 12 or greater; otherwise, it appends "A.M." to <code>temp</code>.</p> + +<p>{{PreviousNext("Web/JavaScript/Guide/Expressions_and_Operators", "Web/JavaScript/Guide/Text_formatting")}}</p> diff --git a/files/id/web/javascript/panduan/pengenalan/index.html b/files/id/web/javascript/panduan/pengenalan/index.html new file mode 100644 index 0000000000..19523a0821 --- /dev/null +++ b/files/id/web/javascript/panduan/pengenalan/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 +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}</div> + +<p class="summary">Bab ini mengenalkan dan membahas konsep yang mendasar di javascript.</p> + +<h2 id="Apa_yang_perlu_anda_ketahui">Apa yang perlu anda ketahui</h2> + +<p>Pada pedoman ini kami anggap Anda memiliki pengetahuan dasar dari:</p> + +<ul> + <li>Pemahaman umum dari internet dan World Wide Web ({{Glossary("WWW")}}).</li> + <li>Mengetahui dan memahami bahasa markup atau HyperText Markup Language ({{Glossary("HTML")}}).</li> + <li>Memiliki pengalaman programming. Jika Anda baru belajar programming, silakan coba salah satu tutorial yang terdapat di halaman utama tentang <a href="/id/docs/Web/JavaScript">JavaScript</a>.</li> +</ul> + +<h2 id="Tempat_untuk_mencari_informasi_JavaScript">Tempat untuk mencari informasi JavaScript </h2> + +<p>Dokumentasi JavaScript di MDN menyediakan materi sebagai berikut:</p> + +<ul> + <li><a href="/id/Learn">Belajar Pengembangan Web</a> menyajikan informasi untuk pemula serta mengenalkan konsep dasar programming dan internet.</li> + <li><a href="/id/docs/Web/JavaScript/Guide">Panduan JavaScript</a> (pedoman ini) menyajikan gambaran tentang bahasa JavaScript dan objeknya.</li> + <li><a href="/id/docs/Web/JavaScript/Reference">Referensi JavaScript</a> menyajikan material referensi yang detail untuk JavaScript.</li> +</ul> + +<p>Jika Anda baru mengenal JavaScript, mulailah dari <a href="/id/Learn">area belajar</a> dan <a href="/id/docs/Web/JavaScript/Guide">Paduan JavaScript</a>. Ketika Anda sudah mendapatkan pemahaman dasarnya, Anda bisa menggunakan <a href="/id/docs/Web/JavaScript/Reference">Referensi JavaScript </a>untuk melihat lebih detil objek dan statement.</p> + +<h2 id="Apa_itu_JavaScript">Apa itu JavaScript?</h2> + +<p>JavaScript adalah bahasa scripting <em>cross-platform</em> 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 <em>server-side</em> 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 <em>host environment </em>(contoh, sebuah <em>web browser</em>), JavaScript dapat dihubungkan ke objek-objek dari <em>environment</em> tersebut untuk menyediakan kendali programmatis terhadapnya. </p> + +<p>JavaScript memuat satu library standar yang memuat objek-objek, seperti <code>Array</code>, <code>Date</code>, dan <code>Math</code>, 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:</p> + +<ul> + <li>JavaScript<em> client-side</em> memperluas inti bahasa ini dengan cara menyediakan objek-objek untuk mengontrol browser beserta DOM-nya (Document Object Model). Misal, ekstensi pada sisi klien memungkinkan sebuah aplikasi untuk menambahkan elemen-elemen pada sebuah form HTML dan merespon event dari user seperti klik mouse, input form, dan navigasi laman.</li> + <li>JavaScript<em> server-side</em> memperluas inti bahasa ini dengan cara menyediakan objek-objek yang relevan untuk menjalankan JavaScript pada sebuah server. Misal, extensi <em>server-side</em> memungkinkan aplikasi untuk berkomunikasi dengan database, menyediakan informasi yang berkelanjutan dari satu permintaan ke permintaan yang lain dari suatu aplikasi, atau melakukan manipulasi file di server.</li> +</ul> + +<h2 id="JavaScript_and_Java" name="JavaScript_and_Java">JavaScript dan Java</h2> + +<p>JavaScript dan Java memang memiliki kemiripan pada beberapa hal, namun pada dasarnya saling berbeda. JavaScript menyerupai Java namum tidak memiliki <em>static typing</em> dan <em>strong type checking</em>. JavaScript mengikuti sebagian besar expresi <em>syntax </em>Java, konvensi penamaan serta konstruksi <em>control-flow</em> dasar, yang mana menjadi alasan untuk mengganti namanya dari LiveScript ke JavaScript.</p> + +<p>Berbeda dengan sistem <em>compile-time</em> <em>class</em> Java yang dibangun melalui deklarasi, Javascript mendukung sistem <em>runtime </em>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 <em>inheritance </em>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.</p> + +<p>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 <em>interface</em>. Variabel, parameter, dan tipe kembalian fungsi juga tidak ditulis secara eksplisit.</p> + +<p>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 <em>bytecode</em>. 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.</p> + +<p>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 <em>syntax</em>-nya yang lebih mudah, berfokus pada fungsi <em>built-in</em>, dan persyaratan yang minimalis untuk membuat objek.</p> + +<table class="standard-table"> + <caption>JavaScript dibandingkan Java</caption> + <thead> + <tr> + <th scope="col">JavaScript</th> + <th scope="col">Java</th> + </tr> + </thead> + <tbody> + <tr> + <td>Berorientasi objek. Tak ada perbedaan antar tipe objek. <em>Inheritance/ </em>pewarisan melalui mekanisme prototipe, serta properti dan metode bisa ditambahkan kepada objek apapun secara dinamis.</td> + <td>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.</td> + </tr> + <tr> + <td>Tipe data variabel tidak dideklarasi (<em>dynamic typing</em>, <em>loosely typed</em>).</td> + <td>Tipe data variabel harus dideklarasi (<em>static-typing</em>, <em>strongly typed</em>).</td> + </tr> + <tr> + <td>Tidak bisa menulis ke hard disk secara otomatis.</td> + <td>Bisa menulis ke hard disk secara otomatis.</td> + </tr> + </tbody> +</table> + +<p>Untuk informasi lebih lanjut perbedaan antara JavaScript dan Java, lihat bagian <a href="/id/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Detil dari model objek</a>.</p> + +<h2 id="JavaScript_and_the_ECMAScript_Specification" name="JavaScript_and_the_ECMAScript_Specification">JavaScript dan spesifikasi ECMAScript</h2> + +<p>Javascript distandarisasi melalui <a class="external" href="http://www.ecma-international.org/">Ecma International</a> — asosiasi Eropa yang men-standarisasi sistem informasi dan komunikasi (ECMA merupakan singkatan yang dari <em>European Computer Manufacturers Association</em>) 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 <a href="/id/docs/Web/JavaScript/New_in_JavaScript">Terbaru di JavaScript</a> untuk mempelajari lebih lanjut tentang berbagai versi dari JavaScript dan spesifikasi edisi ECMAScript.</p> + +<p>Standar ECMA-262 juga disetujui oleh <a class="external" href="http://www.iso.ch/">ISO</a> (International Organization for Standardization) sebagai ISO-16262. Anda juga dapat menemukan spesifikasinya di <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">website Ecma International</a>. Spesifikasi ECMAScript tidak memaparkan Document Object Model yang distandarisasi oleh <a class="external" href="http://www.w3.org/">World Wide Web Consortium (W3C)</a> bersama <a href="https://whatwg.org">WHATWG (Web Hypertext Application Technology Working Group)</a>. 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 <a href="/id/docs/Web/JavaScript/JavaScript_technologies_overview">ikhtisar teknologi JavaScript</a>.</p> + +<h3 id="JavaScript_Documentation_versus_the_ECMAScript_Specification" name="JavaScript_Documentation_versus_the_ECMAScript_Specification">Perbandingan dokumentasi JavaScript dengan spesifikasi ECMAScript</h3> + +<p>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).</p> + +<p>Dokumen ECMAScript tidak dimaksudkan untuk membantu <em>script programmer</em>; gunakanlah dokumentasi JavaScript untuk informasi dalam penulisan script.</p> + +<p>Spesifikasi ECMAScript menggunakan terminologi dan <em>syntax </em>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.</p> + +<p>Dokumentasi JavaScript menggambarkan aspek bahasa yang sesuai bagi seorang programmer JavaScript.</p> + +<h2 id="Memulai_Javascript">Memulai Javascript</h2> + +<p>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.</p> + +<p>Terdapat dua alat yang dipasang ke dalam Firefox yang berguna dalam bereksperimen dengan JavaScript: Web Console dan Scratchpad.</p> + +<h3 id="Web_Console">Web Console</h3> + +<p><a href="/id/docs/Tools/Web_Console">Web Consol / Konsol Web</a> memperlihatkan kepada Anda tentang informasi laman Web yang sedang di-load saat ini, dan juga mencakup <a href="/id/docs/Tools/Web_Console#The_command_line_interpreter">commandline / baris perintah</a> yang dapat Anda gunakan untuk mengeksekusi ekspresi JavaScript pada laman saat ini.</p> + +<p>Untuk membuka Konsol Web, tekan (Ctrl + Shift + K) pada Windows dan Linux atau tekan (Cmd + Option + K) pada Mac, pilih "<em>Web Console</em>" dari menu "<em>Developer</em>", yang berada di bawah menu "<em>Tools</em>" 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.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16569/2019-04-04_00-15-29.png" style="display: block; height: 1824px; margin-left: auto; margin-right: auto; width: 2784px;"> 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.</p> + +<pre class="brush: js">function greetMe(yourName) { + alert('Hello ' + yourName); +} +<code>console.log(eval('3 + 5'));</code></pre> + +<p> </p> + +<h3 id="Scratchpad">Scratchpad</h3> + +<p>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, <a href="/id/docs/Tools/Scratchpad">Scratchpad</a> adalah solusinya.</p> + +<p>Untuk membuka Scratchpad tekan (Shift + F4), pilih "<em>Scratchpad</em>" dari menu "<em>Developer</em>", 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.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13468/scratchpad.png" style="display: block; height: 375px; margin-left: auto; margin-right: auto; width: 631px;"></p> + +<h3 id="Hello_world">Hello world</h3> + +<p>Untuk mulai menulis JavaScript, buka Scratchpad dan tulislah kode JavaScript "Hello world" pertama Anda:</p> + +<pre class="brush: js">(function(){ + "use strict"; + /* Start of your code */ + function greetMe(yourName) { + alert('Hello ' + yourName); + } + + greetMe('World'); + /* End of your code */ +})(); +</pre> + +<p>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 <code>(function(){"use strict";</code> sebelum kode Anda, dan tambahkan <code>})();</code> di akhir kode Anda. Anda akan mempelajari apa artinya itu, tetapi untuk sekarang mereka bisa dianggap melakukan:</p> + +<ol> + <li>Meningkatkan performa secara masif</li> + <li>Mencegah semantik ceroboh dalam JavaScript yang menjatuhkan pemula</li> + <li>Mencegah <em>code snippets</em> yang dieksekusi dalam konsol untuk berinteraksi satu sama lain (misalnya sesuatu yang dibuat dalam suatu eksekusi konsol digunakan untuk eksekusi konsol yang lain).</li> +</ol> + +<p>{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}</p> diff --git a/files/id/web/javascript/panduan/tentang/index.html b/files/id/web/javascript/panduan/tentang/index.html new file mode 100644 index 0000000000..98b5e2c2b0 --- /dev/null +++ b/files/id/web/javascript/panduan/tentang/index.html @@ -0,0 +1,144 @@ +--- +title: Tentang Panduan Ini +slug: Web/JavaScript/Panduan/Tentang +tags: + - JavaScript + - Panduan + - dasar +translation_of: Web/JavaScript/Guide/Introduction +--- +<p>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.</p> + +<h2 id="Fitur_baru_pada_versi_JavaScript">Fitur baru pada versi JavaScript</h2> + +<p> </p> + +<ul> + <li><a class="new" href="/id/docs/Web/JavaScript/New_in_JavaScript/1.2" rel="nofollow">/id/docs/Web/JavaScript/New_in_JavaScript/1.2</a></li> + <li><a class="new" href="/id/docs/Web/JavaScript/New_in_JavaScript/1.3" rel="nofollow">/id/docs/Web/JavaScript/New_in_JavaScript/1.3</a></li> + <li><a class="new" href="/id/docs/Web/JavaScript/New_in_JavaScript/1.4" rel="nofollow">/id/docs/Web/JavaScript/New_in_JavaScript/1.4</a></li> + <li><a class="new" href="/id/docs/Web/JavaScript/New_in_JavaScript/1.5" rel="nofollow">/id/docs/Web/JavaScript/New_in_JavaScript/1.5</a></li> + <li><a class="new" href="/id/docs/Web/JavaScript/New_in_JavaScript/1.6" rel="nofollow">/id/docs/Web/JavaScript/New_in_JavaScript/1.6</a></li> + <li><a class="new" href="/id/docs/Web/JavaScript/New_in_JavaScript/1.7" rel="nofollow">/id/docs/Web/JavaScript/New_in_JavaScript/1.7</a></li> + <li><a class="new" href="/id/docs/Web/JavaScript/New_in_JavaScript/1.8" rel="nofollow">/id/docs/Web/JavaScript/New_in_JavaScript/1.8</a></li> + <li><a class="new" href="/id/docs/Web/JavaScript/New_in_JavaScript/1.8.1" rel="nofollow">/id/docs/Web/JavaScript/New_in_JavaScript/1.8.1</a></li> + <li><a class="new" href="/id/docs/Web/JavaScript/New_in_JavaScript/1.8.5" rel="nofollow">/id/docs/Web/JavaScript/New_in_JavaScript/1.8.5</a></li> +</ul> + +<p> </p> + +<h2 id="Apa_yang_perlu_anda_pelajari_terlebih_dahulu">Apa yang perlu anda pelajari terlebih dahulu ?</h2> + +<p>Sebelum mempelajari panduan ini anda harus mempunyai pengetahuan dasar tentang:</p> + +<ul> + <li>Pengetahuan umum tentang internet dan World Wide Web (<a href="http://id.wikipedia.org/wiki/World_Wide_Web">www</a>) yang bisa anda dapatkan di <a href="http://id.wikipedia.org/wiki/Internet">Wikipedia Indonesia</a>.</li> + <li>Pengetahuan yang mantap tentang Hyper Text Markup Language (<a href="/en/HTML" title="en/HTML">HTML</a>) dan cara penggunaannya, bisa anda pelajari di <a href="http://www.w3schools.com/html/default.asp">w3schools</a>.</li> + <li>Pengalaman programming khususnya JavaScript, jika anda benar - benar sedang memulai dari awal cobalah membaca tutorial pada link berikut ini<a href="/en-US/docs/JavaScript" title="/en-US/docs/"> JavaScript</a></li> +</ul> + +<h2 id="JavaScript_versions">JavaScript versions</h2> + +<table class="standard-table"> + <caption>Table 1 JavaScript and Navigator versions</caption> + <thead> + <tr> + <th scope="col">JavaScript version</th> + <th scope="col">Navigator version</th> + </tr> + </thead> + <tbody> + <tr> + <td>JavaScript 1.0</td> + <td>Navigator 2.0</td> + </tr> + <tr> + <td>JavaScript 1.1</td> + <td>Navigator 3.0</td> + </tr> + <tr> + <td>JavaScript 1.2</td> + <td>Navigator 4.0-4.05</td> + </tr> + <tr> + <td>JavaScript 1.3</td> + <td>Navigator 4.06-4.7x</td> + </tr> + <tr> + <td>JavaScript 1.4</td> + <td> </td> + </tr> + <tr> + <td>JavaScript 1.5</td> + <td>Navigator 6.0<br> + Mozilla (open source browser)</td> + </tr> + <tr> + <td>JavaScript 1.6</td> + <td><a href="/en/Firefox_1.5_for_developers" title="en/Firefox_1.5_for_developers">Firefox 1.5</a>, other Mozilla 1.8-based products</td> + </tr> + <tr> + <td>JavaScript 1.7</td> + <td><a href="/en/Firefox_2_for_developers" title="en/Firefox_2_for_developers">Firefox 2</a>, other Mozilla 1.8.1-based products</td> + </tr> + <tr> + <td>JavaScript 1.8</td> + <td><a href="/en/Firefox_3_for_developers" title="en/Firefox_3_for_developers">Firefox 3</a>, other Gecko 1.9-based products</td> + </tr> + </tbody> +</table> + +<h2 id="Dimana_saya_mendapatkan_informasi_tentang_JavaScript">Dimana saya mendapatkan informasi tentang JavaScript ?</h2> + +<p>Dokumentasi JavaScript terdapat pada buku dibawah ini:</p> + +<ul> + <li><a href="/en/JavaScript/Guide" title="en/Core_JavaScript_1.5_Guide">JavaScript Guide</a> (this guide) provides information about JavaScript language and its objects.</li> + <li><a href="/en/JavaScript/Reference" title="en/JavaScript/Reference">JavaScript Reference</a> provides reference material for JavaScript language.</li> +</ul> + +<p>Untuk yang baru belajar bacalah <a href="/en/JavaScript/Guide" title="en/Core_JavaScript_1.5_Guide">JavaScript Guide</a>. Atau anda ingin mendapat pemahaman yang kuat bacalah <a href="/en/JavaScript/Reference" title="en/JavaScript/Reference">JavaScript Reference</a> untuk mendapatkan detail dari masing - masing object dan statements.</p> + +<h2 id="Tips_untuk_belajar_JavaScript">Tips untuk belajar JavaScript</h2> + +<p>Untuk memulai belajar JavaScript sangatlah mudah, anda hanya butuh web browser versi terbaru seperti <a href="https://www.mozilla.org/id/firefox/new/">Mozilla Firefox</a>. 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.</p> + +<p>Ada dua tool yang tersedia di dalam Firefox dan sangat berguna untuk berEksperimen dengan JavaScript yaitu Web Console dan Scratchpad.</p> + +<h3 id="Web_Console">Web Console</h3> + +<p><a href="/en-US/docs/Tools/Web_Console">Web Console</a> memberikan anda informasi tentang halaman web yang sedang anda buka, dan juga terdapat <a href="/en-US/docs/Tools/Web_Console#The_command_line_interpreter">command line</a> yang membuat anda bisa menjalankan JavaScript expression di web page yang sedang anda buka.</p> + +<p>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.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7363/web-console-commandline.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h3 id="Scratchpad">Scratchpad</h3> + +<p>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.</p> + +<p>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.</p> + +<p>Ketika anda mengklik tombol "Inspect" maka script anda akan tereksekusi dan hasilnya akan dikembalikan pada Script dalam bentuk komentar.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7365/scratchpad.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h2 id="Document_conventions">Document conventions</h2> + +<p>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 (/)</p> + +<p>Panduan ini menggunakan uniform resource locators (URLs) of the following form:</p> + +<p><code>http://<em>server</em>.<em>domain</em>/<em>path</em>/<em>file</em>.html</code></p> + +<p>In these URLs, <em>server</em> represents the name of the server on which you run your application, such as <code>research1</code> or <code>www</code>; <em>domain</em> represents your Internet domain name, such as <code>netscape.com</code> or <code>uiuc.edu</code>; <em>path</em> represents the directory structure on the server; and <em>file</em><code>.html</code> 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 <code>https</code> instead of <code>http</code> in the URL.</p> + +<p>This guide uses the following font conventions:</p> + +<ul> + <li><code>The monospace font</code> is used for sample code and code listings, API and language elements (such as method names and property names), file names, path names, directory names, HTML tags, and any text that must be typed on the screen. (<code><em>Monospace italic font</em></code> is used for placeholders embedded in code.)</li> + <li><em>Italic type</em> is used for book titles, emphasis, variables and placeholders, and words used in the literal sense.</li> + <li><strong>Boldface</strong> type is used for glossary terms.</li> +</ul> + +<div> </div> 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 new file mode 100644 index 0000000000..41900a1603 --- /dev/null +++ b/files/id/web/javascript/panduan/values,_variables,_and_literals/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 +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}</div> + +<p class="summary">Pada bagian ini membahas tata bahasa dasar Javascript, deklarasi variabel, tipe data dan literal.</p> + +<h2 id="Dasar"><strong style="font-size: 2.14285714285714rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">Dasar</strong></h2> + +<p>Sebagian besar sintak JavaScript terinspirasi dari Java, namun juga dipengaruhi oleh Awk, Perl dan Python.</p> + +<p><font><font>JavaScript bersifat </font></font><strong><font><font>case-sensitive</font></font></strong><font><font> dan menggunakan </font><font>set karakter </font></font><strong><font><font>Unicode</font></font></strong><font><font>.</font></font></p> + +<p>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 <a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">(ASI)</a> 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 <a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference/Lexical_grammar">tata bahasa eksikal</a> JavaScript.</p> + +<h2 id="Komentar"><br> + <strong style="color: #4d4e53; font-size: 2.14286rem; letter-spacing: -1px;">Komentar</strong></h2> + +<p>Sintak komentar pada JavaScript sama dengan C++ dan dalam banyak bahasa pemrograman lainnya:</p> + +<pre><code>// komentar satu baris + +/* Ini lebih panjang + komentar beberapa baris + */ + +/* Anda tidak bisa menggunakannya, /* komentar bersarang */ Sintak bermasalah */</code></pre> + +<h2 id="Deklarasi">Deklarasi</h2> + +<p>Ada tiga macam deklarasi pada JavaScript.</p> + +<dl> + <dt><a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference/Statements/var" title="The variable statement declares a variable, optionally initializing it to a value."><code>var</code></a></dt> + <dd>Mendeklarasikan sebuah variabel, opsional menginisialisasi sebuah nilai.</dd> + <dt><a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference/Statements/let" title="The let statement declares a block scope local variable, optionally initializing it to a value."><code>let</code></a></dt> + <dd>Mendeklarasikan lingkup-blok, variabel lokal, opsional menginisialisasi sebuah nilai.</dd> + <dt><a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference/Statements/const" title="This declaration creates a constant whose scope can be either global or local to the function in which it is declared. An initializer for a constant is required; that is, you must specify its value in the same statement in which it's declared (which makes sense, given that it can't be changed later)."><code>const</code></a></dt> + <dd>Mendeklarasikan sebuah lingkup-blok, baca-saja dinamakan konstanta.</dd> +</dl> + +<h2 id="Variabel"><strong>Variabel</strong></h2> + +<p>Anda menggunakan variabel sebagai nama simbolik dalam aplikasi Anda. Nama variabel, disebut {{Glossary("Identifier", "Pengidentifikasi")}}, sesuai dengan peraturan tertentu.</p> + +<p>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) .</p> + +<p>Anda dapat menggunakan sebagian besar huruf ISO 8859-1 atau Unicode seperti å dan ü dalam pengidentifikasi (untuk lebih jelasnya lihat <a href="https://mathiasbynens.be/notes/javascript-identifiers-es6">postingan blog ini</a>). Anda juga dapat menggunakan urutan <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#String_literals">rangkaian pelolosan/escape Unicode</a> sebagai karakter dalam pengidentifikasi.</p> + +<p><font><font>Beberapa contoh nama legal adalah </font></font><code>Number_hits</code><font><font>, </font></font><code>temp99</code><font><font>, $credit, dan </font></font><code>_name</code><font><font>.</font></font></p> + +<h3 id="Mendeklarasikan_variabel"><font><font>Mendeklarasikan variabel</font></font></h3> + +<p><font><font>Anda bisa mendeklarasikan sebuah variabel dalam tiga cara:</font></font></p> + +<ul> + <li><font><font>Dengan kata kunci </font></font><a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference/Statements/var">var</a>.<font><font> </font><font>Misalnya </font></font><code>var x = 42</code><font><font>,. </font><font>Sintaks ini dapat digunakan untuk mendeklarasikan variabel lokal dan global.</font></font></li> + <li><font><font>Cukup menugaskan sebuah nilai. </font><font>Misalnya </font></font><code>x = 42</code><font><font>. </font><font>Ini selalu mendeklarasikan variabel global, jika dinyatakan di luar fungsi apa pun. </font><font>Ini menghasilkan peringatan JavaScript yang ketat/strict. </font><font>Anda sebaiknya tidak menggunakan varian ini.</font></font></li> + <li><font><font>Dengan kata kunci </font></font><a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference/Statements/let">let</a><font><font>. </font><font>Misalnya </font></font><code>let y = 13</code><font><font>. </font><font>Sintaks ini dapat digunakan untuk mendeklarasikan variabel lokal lingkup-blok. </font><font>Lihat </font></font><font><font><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_scope">Lingkup variabel</a></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_scope"><font><font> </font></font></a><font><font>di bawah ini.</font></font></li> +</ul> + +<h3 id="Mengevaluasi_variabel"><font><font>Mengevaluasi variabel</font></font></h3> + +<p><font><font>Variabel yang dideklarasikan dengan menggunakan pernyataan </font></font><code>var </code>atau<code> let</code> <font><font>tanpa penetapan nilai yang ditentukan memiliki nilai </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a>.</p> + +<p><font><font>Upaya untuk mengakses variabel yang tidak dideklarasikan akan menuju kepada pelemparan eksepsi </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError">ReferenceError</a><font><font>:</font></font></p> + +<pre><code>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;</code></pre> + +<p><font><font>Anda dapat menggunakan </font></font><code>undefined </code><font><font>untuk menentukan apakah sebuah variabel memiliki nilai. </font><font>Dalam kode berikut, variabel </font></font><code>input </code><font><font>tidak diberi nilai, dan pernyataan </font></font><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if</a> </code><font><font>dievaluasi </font></font><code>true</code><font><font>.</font></font></p> + +<pre><code>var input; +if (input === undefined) { + lakukanIni(); +} else { + lakukanItu(); +}</code></pre> + +<p><font><font>Nilai </font></font><code>undefined </code><font><font>berperilaku sebagai </font></font><code>false </code><font><font>bila digunakan dalam konteks boolean. </font><font>Misalnya, kode berikut menjalankan fungsi <code>fungsiSaya</code></font></font><code> </code><font><font>karena elemen </font></font><code>myArray </code><font><font>undefined:</font></font></p> + +<pre><code>var myArray = []; +if (!myArray[0]) fungsiSaya();</code></pre> + +<p><font><font>Nilai </font></font><code>undefined </code><font><font>mengkonversi ke </font></font><code>NaN </code><font><font>bila digunakan dalam konteks numerik.</font></font></p> + +<pre><code>var a; +a + 2; // Dievaluasi ke NaN</code></pre> + +<p><font><font>Ketika Anda mengevaluasi sebuah variabel </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null">null</a><font><font>, nilai null berperilaku seperti 0 dalam konteks numerik dan sebagai false dalam konteks boolean. </font><font>Sebagai contoh:</font></font></p> + +<pre><code>var n = null; +console.log(n * 32); // Akan log 0 ke konsol</code></pre> + +<h3 id="Lingkup_variabel"><font><font>Lingkup variabel</font></font></h3> + +<p><font><font>Bila Anda mendeklarasikan variabel di luar fungsi apa pun, ini disebut </font><font>variabel </font></font><em><font><font>global</font></font></em><font><font> , karena tersedia pada kode lain dalam dokumen tersebut. </font><font>Ketika Anda mendeklarasikan sebuah variabel dalam suatu fungsi, itu disebut </font><font>variabel </font></font><em><font><font>lokal</font></font></em><font><font> , karena hanya tersedia di dalam fungsi itu.</font></font></p> + +<p><font><font>JavaScript sebelum ECMAScript 2015 tidak memiliki </font><font>lingkup </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Block_statement"><font><font>pernyataan blok</font></font></a><font><font> ; </font><font>Sebaliknya, variabel yang dinyatakan dalam blok bersifat lokal terhadap </font></font><em><font><font>fungsi (atau lingkup global)</font></font></em><font><font> yang berada di blok. </font><font>Misalnya kode berikut akan log </font></font><code>5</code><font><font>, karena ruang lingkupnya </font></font><code>x </code><font><font>adalah fungsi (atau konteks global) yang </font></font><code>x </code><font><font>dideklarasikan, bukan bloknya, yang dalam hal ini adalah sebuah pernyataan </font></font><code>if</code><font><font>.</font></font></p> + +<pre><code>if (true) { + var x = 5; +} +console.log(x); // x is 5</code></pre> + +<p><font><font>Perilaku ini berubah, saat menggunakan deklarasi </font></font><code>let </code><font><font>yang diperkenalkan di ECMAScript 2015.</font></font></p> + +<pre><code>if (true) { + let y = 5; +} +console.log(y); // ReferenceError: y tidak di definisikan</code></pre> + +<h3 id="Hoisting_variabel"><font><font>Hoisting variabel</font></font></h3> + +<p><font><font>Hal lain yang tidak biasa tentang variabel dalam JavaScript adalah Anda bisa merujuk ke variabel yang dideklarasikan nanti, tanpa mendapatkan eksepsi. </font><font>Konsep ini dikenal sebagai </font></font><strong><font><font>hoisting</font></font></strong><font><font>; </font><font>Variabel dalam JavaScript dalam arti "dikibarkan" atau diangkat ke atas fungsi atau pernyataan. </font><font>Bagaimanapun, variabel yang dikibarkan akan memberikan nilai </font></font><code>undefined</code><font><font>. </font><font>Jadi, bahkan jika Anda mendeklarasikan dan menginisialisasi setelah Anda menggunakan atau merujuk ke variabel ini, itu akan tetap memberikan undefined.</font></font></p> + +<pre><code>/** + * 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'; +})();</code></pre> + +<p><font><font>Contoh di atas akan dinterprestasikan sama dengan:</font></font></p> + +<pre><code>/** + * 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'; +})();</code></pre> + +<p><font><font>Karena hoisting, semua pernyataan </font></font><code>var </code><font><font>dalam suatu fungsi harus ditempatkan sedekat mungkin ke atas fungsi. </font><font>Praktik terbaik ini meningkatkan kejelasan kode.</font></font></p> + +<p><font><font>Dalam ECMAScript 2015, variabel </font></font><code>let (const)</code> <strong><font><font>tidak akan hoist </font></font></strong><font><font>ke bagian atas blok. </font><font>Bagaimanapun, referensi variabel di blok sebelum deklarasi variabel menghasilkan sebuah </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError" title="Objek ReferenceError mewakili kesalahan saat variabel yang tidak ada direferensikan."><code>ReferenceError</code></a><font><font>. </font><font>Variabel ini berada dalam "zona mati temporal" dari awal blok sampai deklarasi diproses.</font></font></p> + +<pre><code>console.log(x); // ReferenceError +let x = 3;</code></pre> + +<h3 id="Hoisting_fungsi"><font><font>Hoisting fungsi</font></font></h3> + +<p><font><font>Untuk fungsi, hanya deklarasi fungsi yang diangkat ke atas dan bukan ekspresi fungsi.</font></font></p> + +<pre><code>/* Deklarasi fungsi */ + +foo(); // "bar" + +function foo() { + console.log('bar'); +} + + +/* Ekspresi fungsi */ + +baz(); // TypeError: baz adalah bukan fungsi + +var baz = function() { + console.log('bar2'); +};</code></pre> + +<h3 id="Variabel_global"><font><font>Variabel global</font></font></h3> + +<p><font><font>Variabel global sebenarnya adalah properti dari </font></font><em><font><font>objek global</font></font></em><font><font> . </font><font>Di halaman web objek global itu </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window">window</a><font><font>, sehingga Anda bisa mengatur dan mengakses variabel global dengan menggunakan </font><font>sintaks </font></font><code>window.<em>variable</em></code></p> + +<p><font><font>Akibatnya, Anda dapat mengakses variabel global yang dideklarasikan dalam satu window atau frame dari window atau frame lain dengan menentukan nama window atau frame. </font><font>Misalnya, jika variabel yang disebut </font></font><code>phoneNumber </code><font><font>dinyatakan dalam dokumen, Anda dapat merujuk variabel ini dari iframe as </font></font><code>parent.phoneNumber</code><font><font>.</font></font></p> + +<h3 id="Konstanta"><font><font>Konstanta</font></font></h3> + +<p><font><font>Anda bisa membuat variabel baca-saja, dinamai dengan kata kunci </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const" title="Deklarasi ini menciptakan sebuah konstanta yang ruang lingkupnya bisa bersifat global atau lokal terhadap fungsi di mana ia dideklarasikan. Penginisialisasi untuk konstanta diperlukan; Artinya, Anda harus menentukan nilainya dalam pernyataan yang sama dengan pernyataannya (yang masuk akal, mengingat hal itu tidak dapat diubah nanti)."><code>const</code></a><font><font>. </font><font>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.</font></font></p> + +<pre><code>const PI = 3.14;</code></pre> + +<p><font><font>Konstanta tidak dapat mengubah nilai melalui penugasan atau dinyatakan ulang saat naskah dijalankan. </font><font>Ini harus diinisialisasi ke sebuah nilai.</font></font></p> + +<p><font><font>Aturan lingkup untuk konstanta sama dengan variabel lingkup-blok </font></font><code>let</code> <font><font>. Jika kata kunci </font></font><code>const </code><font><font>dihilangkan, pengenal dianggap mewakili variabel.</font></font></p> + +<p><font><font>Anda tidak dapat mendeklarasikan konstanta dengan nama yang sama dengan fungsi atau variabel dalam lingkup yang sama. </font><font>Sebagai contoh:</font></font></p> + +<pre><code>// INI AKAN MENYEBABKAN ERROR +function f() {}; +const f = 5; + +// INI AKAN MENYEBABKAN ERROR JUGA +function f() { + const g = 5; + var g; + + //pernyataan +}</code></pre> + +<p><font><font>Namun, properti objek yang ditugaskan pada konstanta tidak terlindungi, jadi pernyataan berikut dijalankan tanpa masalah.</font></font></p> + +<pre><code>const MY_OBJECT = {'key': 'value'}; +MY_OBJECT.key = 'otherValue';</code></pre> + +<h2 id="Struktur_dan_tipe_data"><font><font>Struktur dan tipe data</font></font></h2> + +<h3 id="Tipe_data"><font><font>Tipe data</font></font></h3> + +<p><font><font>Standar ECMAScript terbaru mendefinisikan tujuh tipe data:</font></font></p> + +<ul> + <li><font><font>Enam tipe data yang </font></font>{{Glossary("Primitive", "primitif")}}<font><font> :</font></font> + + <ul> + <li>{{Glossary("Boolean")}}.<font><font> </font></font><code>true </code><font><font>Dan </font></font><code>false</code><font><font>.</font></font></li> + <li>{{Glossary("null")}}.<font><font> </font><font>Kata kunci khusus yang menunjukkan nilai null. </font><font>Karena JavaScript adalah huruf-sensitif/case-sensitive, </font></font><code>null</code><font><font> ini tidak sama dengan </font></font><code>Null</code><font><font>, </font></font><code>NULL</code><font><font>, atau varian lainnya.</font></font></li> + <li>{{Glossary("undefined")}}<font><font>. </font><font>Properti tingkat atas yang nilainya tidak terdefinisi.</font></font></li> + <li>{{Glossary("Number")}}<font><font>. </font></font><code>42 </code><font><font>Atau </font></font><code>3.14159</code><font><font>.</font></font></li> + <li>{{Glossary("String")}}<font><font>. </font><font>"howdy"</font></font></li> + <li>{{Glossary("Symbol")}} <font><font>(baru dalam ECMAScript 2015). </font><font>Tipe data yang halnya unik dan tidak dapat diubah.</font></font></li> + </ul> + </li> + <li><font><font>Dan </font></font>{{Glossary("Object")}}</li> +</ul> + +<p><font><font>Meskipun tipe data ini jumlahnya relatif kecil, namun memungkinkan Anda untuk melakukan fungsi-fungsi yang berguna dengan aplikasi Anda. </font></font> {{jsxref("Object", "Objects")}} dan {{jsxref("Function", "functions")}} <font><font>merupakan unsur fundamental lainnya dalam bahasa ini. </font><font>Anda bisa memikirkan objek sebagai wadah bernama untuk nilai, dan fungsi sebagai prosedur yang dapat dilakukan aplikasi Anda.</font></font></p> + +<h3 id="Konversi_tipe_data"><font><font>Konversi tipe data</font></font></h3> + +<p><font><font>JavaScript adalah bahasa yang diketik secara dinamis. </font><font>Itu berarti Anda tidak perlu menentukan tipe data variabel saat Anda menyatakannya, dan tipe data akan dikonversi secara otomatis sesuai kebutuhan selama eksekusi skrip. </font><font>Jadi, misalnya, Anda bisa mendefinisikan variabel sebagai berikut:</font></font></p> + +<pre><code>var jawaban = 42;</code></pre> + +<p><font><font>Dan nanti, Anda bisa menetapkan variabel yang sama dengan nilai string, misalnya:</font></font></p> + +<pre><code>jawaban = 'Thanks for all the fish...';</code></pre> + +<p><font><font>Karena JavaScript diketik secara dinamis, penugasan ini tidak menyebabkan pesan kesalahan.</font></font></p> + +<p><font><font>Dalam ekspresi yang melibatkan nilai numerik dan string dengan operator +, JavaScript mengubah nilai numerik menjadi string. </font><font>Misalnya, perhatikan pernyataan berikut:</font></font></p> + +<pre><code>x = 'Jawabannya adalah ' + 42 // "Jawabannya adalah 42" +y = 42 + ' Adalah jawabannya' // "42 Adalah jawabannya"</code></pre> + +<p><font><font>Dalam pernyataan yang melibatkan operator lain, JavaScript tidak mengubah nilai numerik menjadi string. </font><font>Sebagai contoh:</font></font></p> + +<pre><code>'37' - 7 // 30 +'37' + 7 // "377"</code></pre> + +<h3 id="Mengubah_string_menjadi_angka"><font><font>Mengubah string menjadi angka</font></font></h3> + +<p><font><font>Dalam kasus yang sebuah nilai mewakili bilangan ada dalam memori sebagai string, ada metode untuk konversi.</font></font></p> + +<ul> + <li id="parseInt()_and_parseFloat()">{{jsxref("parseInt", "parseInt()")}}</li> + <li>{{jsxref("parseFloat", "parseFloat()")}}</li> +</ul> + +<p><code>parseInt </code><font><font>Hanya akan memberikan bilangan bulat, jadi penggunaannya berkurang untuk desimal. </font><font>Selain itu, praktik terbaik untuk </font></font><code>parseInt </code><font><font>selalu menyertakan parameter radix. </font><font>Parameter radix digunakan untuk menentukan sistem numerik yang akan digunakan.</font></font></p> + +<p><font><font>Metode alternatif untuk mengambil nomor dari string adalah dengan operator </font></font><code>+</code><font><font> (unary plus):</font></font></p> + +<pre><code>'1.1' + '1.1' = '1.11.1' +(+'1.1') + (+'1.1') = 2.2 +// Catatan: kurung siku buka tutup ditambahkan untuk kejelasan, tidak diminta.</code></pre> + +<h2 id="Literal"><font><font>Literal</font></font></h2> + +<p><font><font>Anda menggunakan literal untuk mewakili nilai dalam JavaScript. </font><font>Ini adalah nilai tetap, bukan variabel, yang Anda </font><font>berikan </font></font><em><font><font>secara literal </font></font></em><font><font>dalam skrip Anda. </font><font>Bagian ini menjelaskan jenis literal berikut:</font></font></p> + +<ul> + <li>{{anch("Literal array")}}</li> + <li>{{anch("Literal boolean")}}</li> + <li>{{anch("Literal floating-point")}}</li> + <li>{{anch("Literal integer")}}</li> + <li>{{anch("Literal_object")}}</li> + <li>{{anch("Literal RegExp")}}</li> + <li>{{anch("Literal string")}}</li> +</ul> + +<h3 id="Literal_array"><font><font>Literal array</font></font></h3> + +<p><font><font>Sebuah literal array adalah daftar dari nol atau lebih ekspresi, yang masing-masing mewakili elemen array, dilampirkan dalam tanda kurung siku (</font></font><code>[]</code><font><font>). Bila Anda membuat array menggunakan literal array, ini diinisialisasi dengan nilai yang ditentukan sebagai elemennya, dan panjangnya diatur ke jumlah argumen yang ditentukan.</font></font></p> + +<p><font><font>Contoh berikut membuat array </font></font><code>coffees </code><font><font>dengan tiga elemen dan panjang tiga:</font></font></p> + +<pre><code>var coffees = ['French Roast', 'Colombian', 'Kona'];</code></pre> + +<p><strong><font><font>Catatan:</font></font></strong><font><font> Sebuah literal array adalah tipe dari object initializer. Lihat </font></font><a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Guide/Working_with_Objects#Using_object_initializers"><font><font>Menggunakan Penginisialisasi Objek</font></font></a><font><font>.</font></font></p> + +<p><font><font>Jika sebuah array dibuat menggunakan literal dalam skrip tingkat-atas, JavaScript menginterpretasikan array setiap kali mengevaluasi ekspresi yang berisi literal array. </font><font>Selain itu, literal yang digunakan dalam suatu fungsi dibuat setiap kali fungsi dipanggil.</font></font></p> + +<p><font><font>Array literal juga objek Array</font></font><font><font>. </font><font>Lihat </font></font><code><a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference/Global_Objects/Array" title="Objek JavaScript Array adalah objek global yang digunakan dalam konstruksi array; Yang tingkat tinggi, daftar-seperti objek.">Array</a> </code><font><font>dan </font></font><a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Guide/Indexed_collections"><font><font>Koleksi diIndek</font></font></a><font><font> untuk rincian tentang objek </font></font><code>Array</code><font><font>.</font></font></p> + +<h4 id="Ekstra_koma_dalam_literal_array"><font><font>Ekstra koma dalam literal array</font></font></h4> + +<p><font><font>Anda tidak perlu menentukan semua elemen dalam literal array. Jika Anda memasukkan dua koma berturut-turut, array dibuat </font></font><code>undefined </code><font><font>untuk elemen yang tidak ditentukan. Contoh berikut membuat array </font></font><code>fish</code><font><font>:</font></font></p> + +<pre><code>var fish = ['Lion', , 'Angel'];</code></pre> + +<p><font><font>Array ini memiliki dua elemen dengan nilai dan satu elemen kosong (</font></font><code>fish[0]</code><font><font> adalah "Lion", </font></font><code>fish[1]</code><font><font> adalah </font></font><code>undefined</code><font><font>, dan </font></font><code>fish[2]</code><font><font> merupakan "Angel").</font></font></p> + +<p><font><font>Jika Anda menyertakan koma di akhir daftar elemen, koma diabaikan. </font><font>Pada contoh berikut, panjang array adalah tiga. </font><font>Tidak ada </font></font><code>myList[3]</code><font><font>. </font><font>Semua koma lainnya dalam daftar menunjukkan elemen baru.</font></font></p> + +<p><strong><font><font>Catatan:</font></font></strong><font><font> Koma diakhir dapat membuat kesalahan pada versi browser lama dan merupakan praktik terbaik untuk menghapusnya.</font></font></p> + +<pre><code>var myList = ['home', , 'school', ];</code></pre> + +<p><font><font>Dalam contoh berikut, panjang array adalah empat, dan </font></font><code>myList[0]</code><font><font>dan </font></font><code>myList[2]</code><font><font> hilang.</font></font></p> + +<pre><code>var myList = [ ,'home', , 'school'];</code></pre> + +<p><font><font>Dalam contoh berikut, panjang array adalah empat, dan </font></font><code>myList[1]</code><font><font>dan </font></font><code>myList[3] </code><font><font>hilang. </font><font>Hanya koma terakhir yang diabaikan.</font></font></p> + +<pre><code>var myList = ['home', , 'school', , ];</code></pre> + +<p><font><font>Memahami perilaku ekstra koma penting untuk memahami JavaScript sebagai bahasa, namun saat menulis kode Anda sendiri: secara eksplisit menyatakan elemen yang hilang sebagai </font></font><code>undefined </code><font><font>akan meningkatkan kejelasan dan perawatan kode anda.</font></font></p> + +<h3 id="Literal_boolean">L<font><font>iteral boolean</font></font></h3> + +<p><font><font>Tipe Boolean memiliki dua nilai literal: </font></font><code>true </code><font><font>dan </font></font><code>false</code><font><font>.</font></font></p> + +<p><font><font>Jangan membingungkan nilai Boolean primitif </font></font><code>true </code><font><font>dan </font></font><code>false </code><font><font>dengan nilai true dan false objek Boolean. </font><font>Objek Boolean adalah pembungkus di sekitar tipe data Boolean primitif. </font><font>Lihat </font></font>{{jsxref("Boolean")}} untuk <font><font>informasi lebih lanjut.</font></font></p> + +<h3 id="Integer"><font><font>Integer</font></font></h3> + +<p><font><font>Integer dapat dinyatakan dalam desimal (basis 10), heksadesimal (basis 16), oktal (basis 8) dan biner (basis 2).</font></font></p> + +<ul> + <li><font><font>Literal integer desimal terdiri dari urutan digit tanpa 0 (nol) didepan.</font></font></li> + <li><font><font>Memulakan 0 (nol) pada literal integer, atau Memulakan 0o (atau 0O) mengindikasikan itu adalah oktal. Integer Oktal hanya bisa memasukkan angka 0-7.</font></font></li> + <li><font><font>Memulakan 0x (atau 0X) menunjukkan heksadesimal. </font><font>Integer heksadesimal dapat mencakup angka (0-9) dan huruf a-f dan A-F.</font></font></li> + <li> + <p><font><font>Memulakan 0b (atau 0B) menunjukkan biner. Integer </font><font>biner dapat mencakup angka hanya 0 dan 1.</font></font></p> + </li> +</ul> + +<p><font><font>Beberapa contoh literal bilangan bulat adalah:</font></font></p> + +<pre><code>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)</code></pre> + +<p><font><font>Untuk informasi lebih lanjut, lihat </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Numeric_literals"><font><font>literatur numerik dalam referensi tata bahasa leksikal</font></font></a><font><font> .</font></font></p> + +<h3 id="Literal_floating-point"><font><font>Literal floating-point</font></font></h3> + +<p><font><font>Sebuah literal floating-point dapat memiliki bagian berikut:</font></font></p> + +<ul> + <li><font><font>Sebuah integer desimal yang dapat ditandatangani (didahului dengan "+" atau "-"),</font></font></li> + <li><font><font>Titik desimal ("."),</font></font></li> + <li><font><font>Fraksi (bilangan desimal lain),</font></font></li> + <li><font><font>Eksponen</font></font></li> +</ul> + +<p><font><font>Bagian eksponennya adalah "e" atau "E" diikuti oleh bilangan bulat, yang dapat ditandatangani (didahului dengan "+" atau "-"). </font><font>Literal floating-point harus memiliki setidaknya satu digit dan titik desimal atau "e" (atau "E").</font></font></p> + +<p><font><font>Lebih ringkas lagi, sintaksnya adalah:</font></font></p> + +<pre><code>[(+|-)][angka][.angka][(E|e)[(+|-)]angka]</code></pre> + +<p><font><font>Sebagai contoh:</font></font></p> + +<pre><code>3.1415926 +-.123456789 +-3.1E+12 +.1e-23</code></pre> + +<h3 id="Literal_objek"><font><font>Literal objek</font></font></h3> + +<p><font><font>Literal objek adalah daftar dari nol atau lebih pasangan nama properti dan nilai objek yang terkait, yang dilampirkan dalam kurung kurawal (</font></font><code>{}</code><font><font>). </font><font>Anda seharusnya tidak menggunakan literal objek di awal sebuah pernyataan. </font><font>Ini akan menyebabkan kesalahan atau tidak berperilaku seperti yang Anda harapkan, karena { akan ditafsirkan sebagai awal dari sebuah blok.</font></font></p> + +<p><font><font>Berikut ini adalah contoh dari literal objek. Elemen pertama dari objek </font></font><code>car </code><font><font>mendefinisikan sebuah properti </font></font><code>myCar</code><font><font>, dan menetapkan sebuah string baru, " </font></font><code>Saturn</code><font><font>"; Elemen kedua, properti </font></font><code>getCar</code><font><font>, segera diberi hasil pemanggilan function </font></font><code>(carTypes("Honda")); </code><font><font>elemen ketiga, properti </font></font><code>special</code><font><font> menggunakan variabel yang ada ( </font></font><code>sales</code><font><font>).</font></font></p> + +<pre><code>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</code></pre> + +<p><font><font>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.</font></font></p> + +<pre><code>var car = { manyCars: {a: 'Saab', 'b': 'Jeep'}, 7: 'Mazda' }; + +console.log(car.manyCars.b); // Jeep +console.log(car[7]); // Mazda</code></pre> + +<p><font><font>Nama properti objek bisa berupa string apapun, termasuk string kosong. </font><font>Jika nama properti akan menjadi </font></font>{{Glossary("Identifier","pengidentifikasi")}}<font><font> JavaScript yang tidak valid atau angka</font><font>, maka harus dilampirkan dalam tanda petik. </font><font>Nama properti yang pengidentifikasi tidak valid juga tidak dapat diakses sebagai properti dot (</font></font><code>.</code><font><font>), namun dapat diakses dan ditetapkan dengan notasi seperti array ("</font></font><code>[]</code><font><font>").</font></font></p> + +<pre><code>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!</code></pre> + +<h4 id="Peningkatan_Literal_Objek">Peningkatan Literal Objek</h4> + +<p><font><font>Di ES2015, literal objek diperluas untuk mendukung pengaturan prototipe pada konstruksi, singkatan untuk </font></font><code>foo: penugasan</code><font><font> </font></font><code>foo</code><font><font> , 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.</font></font></p> + +<pre><code>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 +};</code></pre> + +<p><font><font>Tolong dicatat:</font></font></p> + +<pre><code>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</code></pre> + +<h3 id="Literal_RegExp"><font><font>Literal RegExp</font></font></h3> + +<p><font><font>Sebuah literal regex adalah pola yang dilampirkan diantara garis miring. Berikut ini adalah contoh literal regex.</font></font></p> + +<pre><code>var re = /ab+c/;</code></pre> + +<h3 id="Literal_string"><font><font>Literal string</font></font></h3> + +<p><font><font>Literal string adalah nol atau lebih karakter yang dilampirkan dengan tanda kutip ganda (</font></font><code>"</code><font><font>) atau tunggal (</font></font><code>'</code><font><font>). </font><font>String harus dibatasi dengan tanda kutip dari jenis yang sama; </font><font>Yaitu kedua tanda kutip tunggal atau kedua tanda petik ganda. </font><font>Berikut ini adalah contoh literal string:</font></font></p> + +<pre><code>'foo' +"bar" +'1234' +'baris satu \n baris lainnya' +"Kucing jhon"</code></pre> + +<p><font><font>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. </font><font>Anda juga bisa menggunakan </font></font><font><font>properti </font></font><code>String.length</code><font><font> dengan literal string:</font></font></p> + +<pre><code>console.log("Kucing jhon".length) +// </code><span id="result_box" lang="id"><span>Akan mencetak jumlah simbol dalam string termasuk spasi.</span></span><code> +// Dalam hal ini, 11.</code></pre> + +<p><font><font>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 o</font><font>psional, tag dapat ditambahkan untuk memungkinkan konstruksi string disesuaikan, menghindari serangan injeksi atau membangun struktur data tingkat tinggi dari konten string.</font></font></p> + +<pre><code>// Literal dasar kreasi string +`Dalam JavaScript '\n' adalah sebuah line-feed.` + +// String beberapa baris +`</code><span id="result_box" lang="id"><span>Dalam template </span></span><span lang="id"><span>string JavaScript dapat berjalan di + beberapa baris, namun string yang dikutip ganda dan tunggal + tidak dapat dilakukan.</span></span><code>` + +// Interpoasi string +var name = 'Bob', time = 'today'; +`Hello ${name}, how are you ${time}?` + +// </code><span id="result_box" lang="id"><span>Membangun prefix permintaan HTTP digunakan untuk menafsirkan penggantian dan konstruksi</span></span><code> +POST`http://foo.org/bar?a=${a}&b=${b} + Content-Type: application/json + X-Credentials: ${credentials} + { "foo": ${foo}, + "bar": ${bar}}`(myOnReadyStateChangeHandler);</code></pre> + +<p><font><font>Anda harus menggunakan literal string kecuali Anda secara khusus perlu menggunakan objek String. Lihat </font></font>{{jsxref("String")}} <code> </code><font><font>untuk rincian tentang objek </font></font><code>String.</code></p> + +<h4 id="Menggunakan_karakter_khusus_dalam_string"><font><font>Menggunakan karakter khusus dalam string</font></font></h4> + +<p><font><font>Selain karakter biasa, Anda juga bisa menyertakan karakter khusus dalam string, seperti yang ditunjukkan pada contoh berikut.</font></font></p> + +<pre><code>'one line \n another line'</code></pre> + +<p><font><font>Tabel berikut mencantumkan karakter khusus yang dapat Anda gunakan dalam string JavaScript.</font></font></p> + +<table> + <caption><font><font>Tabel: karakter khusus JavaScript</font></font></caption> + <thead> + <tr> + <th scope="col"><font><font>Karakter</font></font></th> + <th scope="col"><font><font>Berarti</font></font></th> + </tr> + </thead> + <tbody> + <tr> + <td><code>\0</code></td> + <td><font><font>Null Byte</font></font></td> + </tr> + <tr> + <td><code>\b</code></td> + <td><font><font>backspase</font></font></td> + </tr> + <tr> + <td><code>\f</code></td> + <td>form feed</td> + </tr> + <tr> + <td><code>\n</code></td> + <td><font><font>Baris baru</font></font></td> + </tr> + <tr> + <td><code>\r</code></td> + <td><font><font>Cariage return</font></font></td> + </tr> + <tr> + <td><code>\t</code></td> + <td><font><font>Tab</font></font></td> + </tr> + <tr> + <td><code>\v</code></td> + <td><font><font>Tab vertikal</font></font></td> + </tr> + <tr> + <td><code>\'</code></td> + <td><font><font>Apostrof atau kutipan tunggal</font></font></td> + </tr> + <tr> + <td><code>\"</code></td> + <td><font><font>Kutipan ganda</font></font></td> + </tr> + <tr> + <td><code>\\</code></td> + <td><font><font>Karakter backslash</font></font></td> + </tr> + <tr> + <td><code>\<em>XXX</em></code></td> + <td><font><font>Karakter dengan pengkodean Latin-1 ditentukan oleh hingga tiga digit oktal </font></font><em><font><font>XXX</font></font></em><font><font> antara 0 dan 377. Misalnya, \251 adalah urutan oktal untuk simbol hak cipta.</font></font></td> + </tr> + <tr> + </tr> + <tr> + <td><code>\x<em>XX</em></code></td> + <td><font><font>Karakter dengan pengkodean Latin-1 yang ditentukan oleh dua digit heksadesimal </font></font><em><font><font>XX</font></font></em><font><font> antara 00 dan FF. </font><font>Misalnya, \xA9 adalah urutan heksadesimal untuk simbol hak cipta.</font></font></td> + </tr> + <tr> + </tr> + <tr> + <td><code>\u<em>XXXX</em></code></td> + <td><font><font>Karakter Unicode ditentukan oleh empat digit heksadesimal </font></font><em><font><font>XXXX</font></font></em><font><font> . </font><font>Misalnya, \u00A9 adalah urutan Unicode untuk simbol hak cipta. </font><font>Lihat </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#String_literals"><font><font>rangkaian pelolosan Unicode</font></font></a><font><font>.</font></font></td> + </tr> + <tr> + <td><code>\u<em>{XXXXX}</em></code></td> + <td><font><font>Kode Unicode lolos. </font><font>Misalnya, \u {2F804} sama dengan Unicode sederhana yang lolos \uD87E \uDC04.</font></font></td> + </tr> + </tbody> +</table> + +<h4 id="Karakter_pelolosan"><font><font>Karakter pelolosan</font></font></h4> + +<p><font><font>Untuk karakter yang tidak tercantum dalam tabel, tanda garis miring terbalik sebelumnya diabaikan, namun penggunaan ini tidak berlaku lagi dan harus dihindari.</font></font></p> + +<p><font><font>Anda dapat memasukkan tanda petik di dalam string sebelum mendahului dengan garis miring terbalik. </font><font>Ini dikenal sebagai </font></font><em><font><font>pelolosan</font></font></em><font><font> dari tanda petik. </font><font>Sebagai contoh:</font></font></p> + +<pre><code>var quote = "He read \"The Cremation of Sam McGee\" by R.W. Service."; +console.log(quote);</code></pre> + +<p><font><font>Hasil dari ini adalah:</font></font></p> + +<pre><code>He read "The Cremation of Sam McGee" by R.W. Service.</code></pre> + +<p><font><font>Untuk menyertakan garis miring terbalik di dalam string, Anda harus melepaskan diri dari karakter garis miring terbalik. </font><font>Misalnya, untuk menetapkan path file </font></font><code>c:\temp</code><font><font> ke string, gunakan yang berikut ini:</font></font></p> + +<pre><code>var home = 'c:\\temp';</code></pre> + +<p><font><font>Anda juga bisa meloloskan dari baris istirahat sebelumnya mendahului mereka dengan garis miring terbalik. </font><font>Garis miring terbalik dan baris istirahat keduanya terlepas dari nilai string.</font></font></p> + +<pre><code>var str = 'this string \ +is broken \ +across multiple \ +lines.' +console.log(str); // this string is broken across multiplelines.</code></pre> + +<p><font><font>Meskipun JavaScript tidak memiliki sintaks "heredoc", Anda bisa mendekat dengan menambahkan pelolosan baris istirahat dan baris istirahat pada akhir setiap baris:</font></font></p> + +<pre><code>var poem = +'Roses are red,\n\ +Violets are blue.\n\ +Sugar is sweet,\n\ +and so is foo.'</code></pre> + +<p><font><font>ECMAScript 2015 memperkenalkan tipe literal baru, yaitu </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/template_strings" rel="noreferrer"><strong><font><font>template literal</font></font></strong></a><font><font> . </font><font>Hal ini memungkinkan banyak fitur baru termasuk string beberapa baris!</font></font></p> + +<p> </p> + +<pre dir="rtl"><code>var poem = +`Roses are red, +Violets are blue. +Sugar is sweet, +and so is foo.`</code></pre> + +<p> </p> + +<h2 id="Informasi_lebih_lanjut"><font><font>Informasi lebih lanjut</font></font></h2> + +<p><font><font>Bab ini berfokus pada sintaks dasar untuk deklarasi dan tipe. </font><font>Untuk mempelajari lebih lanjut tentang konstruksi bahasa JavaScript, lihat juga bab-bab berikut dalam panduan ini:</font></font></p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling"><font><font>Kontrol aliran dan error handling</font></font></a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration"><font><font>Loop dan iterasi</font></font></a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions"><font><font>Fungsi</font></font></a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators"><font><font>Ekspresi dan operator</font></font></a></li> +</ul> + +<p><font><font>Pada bab berikutnya, kita akan melihat konstruksi aliran kontrol dan penanganan kesalahan.</font></font></p> diff --git a/files/id/web/javascript/panduan/working_with_objects/index.html b/files/id/web/javascript/panduan/working_with_objects/index.html new file mode 100644 index 0000000000..4449732e61 --- /dev/null +++ b/files/id/web/javascript/panduan/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 +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}</div> + +<p class="summary">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.</p> + +<h2 id="Ikhtisar_objek">Ikhtisar objek</h2> + +<p>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.</p> + +<p>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.</p> + +<h2 id="Objek_dan_properti">Objek dan properti</h2> + +<p>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:</p> + +<pre class="brush: js">objectName.propertyName +</pre> + +<p>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 <code>myCar</code> dan dan berikan dia properti bernama <code>make</code>, <code>model</code>, dan <code>year</code> sebagai berikut:</p> + +<pre class="brush: js">var <code>myCar </code>= new Object(); +<code>myCar</code>.make = 'Ford'; +<code>myCar</code>.model = 'Mustang'; +<code>myCar</code>.year = 1969; +</pre> + +<p>Nilai properti objek yang tidak diassign adalah {{jsxref("undefined")}} (dan bukan {{jsxref("null")}}).</p> + +<pre class="brush: js">myCar.color; // undefined</pre> + +<p>Properti dari objek JavaScript juga bisa diakses atau diset menggunakan notasi kurung siku (untuk lebih detil lihat <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors">aksesor properti</a>). Terkadang objek disebut <em>associative array</em>, karena tiap properti dikaitkan dengan nilai string yang bisa digunakan untuk mengaksesnya. Jadi, contohnya, kamu bisa mengakses properti dari objek <code>myCar</code> seperti berikut:</p> + +<pre class="brush: js">myCar['make'] = 'Ford'; +myCar['model'] = 'Mustang'; +myCar['year'] = 1969; +</pre> + +<p>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:</p> + +<pre class="brush: js">// 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); +</pre> + +<p>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 <code>obj</code> ditambahkan dalam <code>myObj</code>, JavaScript akan memanggil method <code>obj.toString()</code> , dan menggunakan hasil string ini sebagai kunci baru.</p> + +<p>Kamu juga bisa mengakses properti menggunakan nilai string yang disimpan dalam variabel:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> propertyName <span class="operator token">=</span> <span class="string token">'make'</span><span class="punctuation token">;</span> +myCar<span class="punctuation token">[</span>propertyName<span class="punctuation token">]</span> <span class="operator token">=</span> <span class="string token">'Ford'</span><span class="punctuation token">;</span> + +propertyName <span class="operator token">=</span> <span class="string token">'model'</span><span class="punctuation token">;</span> +myCar<span class="punctuation token">[</span>propertyName<span class="punctuation token">]</span> <span class="operator token">=</span> <span class="string token">'Mustang'</span><span class="punctuation token">;</span></code></pre> + +<p>Kamu bisa menggunakan notasi kurung siku dengan <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code> 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:</p> + +<pre class="brush: js">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; +} +</pre> + +<p>Jadi memanggil fungsi <code>showProps(mobilKu, "mobilKu")</code> akan mengembalikan:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">myCar<span class="punctuation token">.</span>make <span class="operator token">=</span> Ford +myCar<span class="punctuation token">.</span>model <span class="operator token">=</span> Mustang +myCar<span class="punctuation token">.</span>year <span class="operator token">=</span> <span class="number token">1969</span></code></pre> + +<h2 id="Mengenumerasi_properti_dari_objek">Mengenumerasi properti dari objek</h2> + +<p>Mulai <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla" title="en-US/docs/JavaScript/ECMAScript 5 support in Mozilla">ECMAScript 5</a>, ada tiga cara asli untuk mendaftarkan/melintasi properti objek:</p> + +<ul> + <li>Perulangan <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in" title="en-US/docs/JavaScript/Reference/Statements/for...in">for...in</a></code><br> + Metode ini melintasi semua kumpulan properti yang terdaftar dari objek dan rantai prototipenya.</li> + <li>{{jsxref("Object.keys", "Object.keys(o)")}}<br> + Metode ini mengembalikan array dengan semua milik (tidak di rantai prototip) nama-nama ("kunci") properti terhitung dari objek <code>o</code>.</li> + <li>{{jsxref("Object.getOwnPropertyNames", "Object.getOwnPropertyNames(o)")}}<br> + Metode ini mengembalikan sebuah array berisikan semua nama-nama properti (kumpulan terhitung atau tidak) dari sebuah objek <code>o</code>.</li> +</ul> + +<p>Sebelum ECMAScript 5, tidak ada cara asli untuk mendaftarkan semua properti-properti dari suatu objek. Namun, ini dapat dicapai dengan fungsi berikut:</p> + +<pre class="brush: js">function listAllProperties(o) { + var objectToInspect; + var result = []; + + for(objectToInspect = o; objectToInspect !== null; objectToInspect = Object.getPrototypeOf(objectToInspect)) { + result = result.concat(Object.getOwnPropertyNames(objectToInspect)); + } + + return result; +} +</pre> + +<p>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.</p> + +<h2 id="Membuat_objek_baru">Membuat objek baru</h2> + +<p>JavaScript mempunyai sejumlah objek yang telah ditetapkan. Selain itu, kamu dapat membuat objek sendiri. Kamu bisa membuat sebuah objek menngunakan sebuah <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">object initializer</a>. Sebagai alternatif, kamu bisa membuat sebuah fungsi konstruktor lalu menginstanisasi sebuah pemanggilan objek bersama dengan operator <code>new</code>.</p> + +<h3 id="Menggunakan_object_initializer">Menggunakan object initializer</h3> + +<p>Selain membuat objek menggunakan fungsi konstruktor, kamu bisa membuat objek memakai <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">object initializer</a>. Kadang pemakaian object initializer disamakan dengan pembuatan objek dengan notasi literal. "Object initializer" sama dengan terminologi dalam C++.</p> + +<p>Syntax untuk objek yang menggunakan object initializer ialah:</p> + +<pre class="brush: js">var obj = { property_1: value_1, // property_# bisa berupa identifier... + 2: value_2, // atau angka... + // ..., + 'property n': value_n }; // atau string +</pre> + +<p>Di mana <code>obj</code> adalah nama objek baru, setiap <code>property_<em>i</em></code> adalah identifier (baik nama, angka, atau string literal), dan setiap <code>value_<em>i</em></code> adalah expresi yang nilainya diassign ke <code>property_<em>i</em></code>. <code>obj</code> 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.)</p> + +<p>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 <code>new Object()</code>; yaitu, objek yang dibuat dari expresi literal objek adalah instance dari <code>Object</code>.</p> + +<p>Statement berikut membuat objek dan mengassign dia ke variabel <code>x</code> jika dan hanya jika expresi <code>cond</code> benar:</p> + +<pre class="brush: js">if (cond) var x = {greeting: 'hi there'}; +</pre> + +<p>Contoh berikut membuat <code>myHonda</code> dengan tiga properti. Ingat bahwa properti <code>engine</code> juga adalah objek yang punya properti sendiri.</p> + +<pre class="brush: js">var myHonda = {color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}}; +</pre> + +<p>Kamu juga bisa menggunakan object initializer untuk membuat array. Lihat <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Array_literals">literal array</a>.</p> + +<h3 id="Menggunakan_fungsi_konstruktor">Menggunakan fungsi konstruktor</h3> + +<p>Kamu bisa membuat objek dengan dua langkah alternatif ini:</p> + +<ol> + <li>Definisikan tipe objek dengan menulis fungsi konstruktor. Ada konvensi dengan alasan bagus untuk menggunakan huruf kapital inisial.</li> + <li>Membuat instance objek dengan <code>new</code>.</li> +</ol> + +<p>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 <code>Car</code>, dan kamu ingin punya properti pembuat, model, dan tahun. Untuk melakukan ini, kamu akan menulis fungsi berikut:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">Car</span><span class="punctuation token">(</span><span class="parameter token">make<span class="punctuation token">,</span> model<span class="punctuation token">,</span> year</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>make <span class="operator token">=</span> make<span class="punctuation token">;</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>model <span class="operator token">=</span> model<span class="punctuation token">;</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>year <span class="operator token">=</span> year<span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<p>Perhatikan penggunaan <code>this</code> untuk mengassign nilai ke properti objek berdasarkan nilai yang diteruskan kepada fungsi.</p> + +<p>Sekarang kamu bisa membuat objek <code>myCar</code> sebagai berikut:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> mycar <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Car</span><span class="punctuation token">(</span><span class="string token">'Eagle'</span><span class="punctuation token">,</span> <span class="string token">'Talon TSi'</span><span class="punctuation token">,</span> <span class="number token">1993</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>Statement ini membuat <code>myCar</code> dan mengassign ia nilai spesifik untuk propertinya. Lalu nilai dari <code>myCar.make</code> ialah string "Eagle", <code>myCar.year</code> ialah integer 1993, dan seterusnya.</p> + +<p>Kamu bisa membuat sejumlah objek <code>Car</code> dengan memanggil <code>new</code>. Sebagai contoh.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> kenscar <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Car</span><span class="punctuation token">(</span><span class="string token">'Nissan'</span><span class="punctuation token">,</span> <span class="string token">'300ZX'</span><span class="punctuation token">,</span> <span class="number token">1992</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> vpgscar <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Car</span><span class="punctuation token">(</span><span class="string token">'Mazda'</span><span class="punctuation token">,</span> <span class="string token">'Miata'</span><span class="punctuation token">,</span> <span class="number token">1990</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>Objek bisa punya properti yang merupakan objek lain. Misalnya, kamu mendefinisi objek <code>person</code> sebagai berikut:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">Person</span><span class="punctuation token">(</span><span class="parameter token">name<span class="punctuation token">,</span> age<span class="punctuation token">,</span> sex</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>name <span class="operator token">=</span> name<span class="punctuation token">;</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>age <span class="operator token">=</span> age<span class="punctuation token">;</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>sex <span class="operator token">=</span> sex<span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<p>dan kemudian menginstantiasi dua objek <code>person</code> baru sebagai berikut:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> rand <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Person</span><span class="punctuation token">(</span><span class="string token">'Rand McKinnon'</span><span class="punctuation token">,</span> <span class="number token">33</span><span class="punctuation token">,</span> <span class="string token">'M'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> ken <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Person</span><span class="punctuation token">(</span><span class="string token">'Ken Jones'</span><span class="punctuation token">,</span> <span class="number token">39</span><span class="punctuation token">,</span> <span class="string token">'M'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>Kemudian, kamu bisa menulis ulang definisi <code>Car</code> untuk memasukkan properti <code>owner</code> yang mengambil objek <code>person</code> sebagai berikut:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">Car</span><span class="punctuation token">(</span><span class="parameter token">make<span class="punctuation token">,</span> model<span class="punctuation token">,</span> year<span class="punctuation token">,</span> owner</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>make <span class="operator token">=</span> make<span class="punctuation token">;</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>model <span class="operator token">=</span> model<span class="punctuation token">;</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>year <span class="operator token">=</span> year<span class="punctuation token">;</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>owner <span class="operator token">=</span> owner<span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<p>Untuk menginstantiasi objek baru, gunakan ini:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> car1 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Car</span><span class="punctuation token">(</span><span class="string token">'Eagle'</span><span class="punctuation token">,</span> <span class="string token">'Talon TSi'</span><span class="punctuation token">,</span> <span class="number token">1993</span><span class="punctuation token">,</span> rand<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> car2 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Car</span><span class="punctuation token">(</span><span class="string token">'Nissan'</span><span class="punctuation token">,</span> <span class="string token">'300ZX'</span><span class="punctuation token">,</span> <span class="number token">1992</span><span class="punctuation token">,</span> ken<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>Perhatikan bahwa ketimbang meneruskan nilai string atau integer literal ketika membuat objek baru, statement diatas meneruskan objek <code>rand</code> dan <code>ken</code> sebagai argumen untuk pemilik. Lalu jika kamu mau mencari nama pemilik car2, kamu bisa mengakses properti berikut:</p> + +<pre class="brush: js">car2.owner.name +</pre> + +<p>Ingat bahwa kamu selalu bisa menambah properti ke objek yang sudah dibuat sebelumnya. Contohnya statement</p> + +<pre class="brush: js">car1.color = 'black'; +</pre> + +<p>menambah properti <code>color</code> 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 <code>Car</code>.</p> + +<h3 id="Menggunakan_metode_Object.create">Menggunakan metode <code>Object.create</code></h3> + +<p>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.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="comment token">// Enkapsulasi metode dan properti Animal</span> +<span class="keyword token">var</span> Animal <span class="operator token">=</span> <span class="punctuation token">{</span> + type<span class="punctuation token">:</span> <span class="string token">'Invertebrates'</span><span class="punctuation token">,</span> <span class="comment token">// Nilai properti default</span> + <span class="function function-variable token">displayType</span><span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="comment token">// Method which will display type of Animal</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>type<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span> + +<span class="comment token">// Create new animal type called animal1 </span> +<span class="keyword token">var</span> animal1 <span class="operator token">=</span> Object<span class="punctuation token">.</span><span class="function token">create</span><span class="punctuation token">(</span>Animal<span class="punctuation token">)</span><span class="punctuation token">;</span> +animal1<span class="punctuation token">.</span><span class="function token">displayType</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Output:Invertebrates</span> + +<span class="comment token">// Create new animal type called Fishes</span> +<span class="keyword token">var</span> fish <span class="operator token">=</span> Object<span class="punctuation token">.</span><span class="function token">create</span><span class="punctuation token">(</span>Animal<span class="punctuation token">)</span><span class="punctuation token">;</span> +fish<span class="punctuation token">.</span>type <span class="operator token">=</span> <span class="string token">'Fishes'</span><span class="punctuation token">;</span> +fish<span class="punctuation token">.</span><span class="function token">displayType</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Output:Fishes</span></code></pre> + +<h2 id="Warisan">Warisan</h2> + +<p>Semua objek di javascript diwariskan setidaknya dari satu objek lain. Objek yang diwariskan disebut prototipe, dan properti warisan bisa ditemukan dalam objek <code>prototype</code> dari konstruktor. Lihat <a href="/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Rantai warisan dan prototype</a> untuk informasi lebih lanjut.</p> + +<h2 id="Mengindex_properti_objek">Mengindex properti objek</h2> + +<p>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.</p> + +<p>Pembatasan ini berlaku ketika kamu membuat objek dan propertinya dengan fungsi konstruktor (seperti yang kita lakukan sebelumnya dengan jenis objek <code>Car</code>) dan ketika kamu mendefinisi properti individual secara explisit (misalnya, <code>myCar.color = "ref"</code>). Jika kamu awalnya mendefinisi properti objek dengan index, seperti <code>myCar[5] = "25 mpg"</code>, maka kamu merujuk ke properti tersebut dengan <code>myCar[5]</code>.</p> + +<p>Pengecualian dalam aturan ini adalah objek mirip-array pantulan dari HTML, seperti objek mirip-array <code>forms</code>. 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 <code><FORM></code> kedua dalam dokumen punya atribut <code>NAME</code> "myForm", kamu dapat merujuk ke form tersebut sebagai <code>document.forms[1]</code> atau <code>document.forms["myForm"]</code> atau <code>document.forms.myForm</code>.</p> + +<h2 id="Mendefinisi_properti_untuk_tipe_objek">Mendefinisi properti untuk tipe objek</h2> + +<p>Kamu dapat menambah properti ke tipe objek yang didefinisi sebelumnya menggunakan properti <code>prototype</code>. Ini mendefinisi properti yang dibagikan semua objek dari tipe yang dispesifikasi, bukan cuma satu instance objek. Kode berikut menambahkan sebuah properti <code>color</code> ke semua objek dari tipe objek <code>Car</code>, dan kemudian mengassign nilai ke properti <code>color</code> dari objek <code>car1</code>.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="class-name token">Car</span><span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>color <span class="operator token">=</span> <span class="keyword token">null</span><span class="punctuation token">;</span> +car1<span class="punctuation token">.</span>color <span class="operator token">=</span> <span class="string token">'black'</span><span class="punctuation token">;</span></code></pre> + +<p>Lihat <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype" title="en-US/docs/JavaScript/Reference/Global Objects/Function/prototype">properti <code>prototipe</code></a> dari objek <code>Function</code> dalam <a href="/en-US/docs/Web/JavaScript/Reference">referensi JavaScript</a> untuk informasi lebih lanjut.</p> + +<h2 id="Mendefiniskan_metode">Mendefiniskan metode</h2> + +<p><em>Metode</em> 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 <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">definisi metode</a> untuk lebih detil. Contohnya:</p> + +<pre class="brush: js">objectName.methodname = functionName; + +var myObj = { + myMethod: function(params) { + // ...do something + } + + // OR THIS WORKS TOO + + myOtherMethod(params) { + // ...do something else + } +}; +</pre> + +<p>Di mana <code>objectName</code> adalah metode yang sudah ada, <code>methodname</code> ialah nama yang kamu assign ke metode, dan <code>functionName</code> adalah nama fungsi.</p> + +<p>Lalu kamu bisa memanggil metode dalam kontex objek sebagai berikut:</p> + +<pre class="brush: js">object.methodname(params); +</pre> + +<p>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 <code>Car</code> sebelumnya; contohnya,</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">displayCar</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> result <span class="operator token">=</span> <span class="template-string token"><span class="string token">`A Beautiful </span><span class="interpolation token"><span class="interpolation-punctuation punctuation token">${</span><span class="keyword token">this</span><span class="punctuation token">.</span>year<span class="interpolation-punctuation punctuation token">}</span></span><span class="string token"> </span><span class="interpolation token"><span class="interpolation-punctuation punctuation token">${</span><span class="keyword token">this</span><span class="punctuation token">.</span>make<span class="interpolation-punctuation punctuation token">}</span></span><span class="string token"> </span><span class="interpolation token"><span class="interpolation-punctuation punctuation token">${</span><span class="keyword token">this</span><span class="punctuation token">.</span>model<span class="interpolation-punctuation punctuation token">}</span></span><span class="string token">`</span></span><span class="punctuation token">;</span> + <span class="function token">pretty_print</span><span class="punctuation token">(</span>result<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<p>Di mana <code>pretty_print</code> adalah fungsi untuk menampilkan garis horizontal dan string. Perhatikan penggunaan <code>this</code> untuk merujuk ke objek yang punya metode tersebut.</p> + +<p>Kamu bisa menjadikan fungsi ini metode <code>Car</code> dengan menambah statement</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">this</span><span class="punctuation token">.</span>displayCar <span class="operator token">=</span> displayCar<span class="punctuation token">;</span></code></pre> + +<p>ke definisi objek. Jadi definisi penuh dari <code>Car</code> sekarang akan terlihat seperti</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">Car</span><span class="punctuation token">(</span><span class="parameter token">make<span class="punctuation token">,</span> model<span class="punctuation token">,</span> year<span class="punctuation token">,</span> owner</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>make <span class="operator token">=</span> make<span class="punctuation token">;</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>model <span class="operator token">=</span> model<span class="punctuation token">;</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>year <span class="operator token">=</span> year<span class="punctuation token">;</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>owner <span class="operator token">=</span> owner<span class="punctuation token">;</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>displayCar <span class="operator token">=</span> displayCar<span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<p>Maka kamu bisa memanggil metode <code>displayCar</code> untuk masing-masig objek sebagai berikut:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">car1<span class="punctuation token">.</span><span class="function token">displayCar</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +car2<span class="punctuation token">.</span><span class="function token">displayCar</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<h2 id="Menggunakan_this_untuk_referensi_Objek">Menggunakan <code>this</code> untuk referensi Objek</h2> + +<p>JavaScript punya katakunci spesial <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code>, kamu bisa memakainya dalam metode untuk merujuk ke objek saat ini. Misalnya, kamu punya fungsi yang disebut <code>validate</code> yang memvalidasi properti <code>value</code>, yang diberikan objek dan nilai atas dan bawah:</p> + +<pre class="brush: js">function validate(obj, lowval, hival) { + if ((obj.value < lowval) || (obj.value > hival)) { + alert('Invalid Value!'); + } +} +</pre> + +<p>Kemudian kamu bisa panggil <code>validate</code> di penangan event <code>onchange</code> setiap elemen form, gunakan <code>this</code> untuk meneruskan elemen. Seperti contoh berikut:</p> + +<pre class="brush: html"><input type="text" name="age" size="3" + onChange="validate(this, 18, 99)"> +</pre> + +<p>Secara umum, <code>this</code> merujuk ke pemanggilan objek dalam metode.</p> + +<p>Ketika dikombinasikan dengan properti <code>form</code>, <code>this</code> bisa mengacu ke induk objek form saat ini. Dalam contoh berikut, form <code>myForm</code> berisi objek <code>Text</code> dan sebuah tombol. Ketika pengguna mengklik tombol, nilai objek <code>Text</code> diset ke nama form tersebut. Penangan event <code>onclick</code> tombol menggunakan <code>this.form</code> untuk merujuk ke induk form, <code>myForm</code>.</p> + +<pre class="brush: html"><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></pre> + +<h2 id="Mendefinisikan_getter_dan_setter">Mendefinisikan getter dan setter</h2> + +<p><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">Getter</a> ialah metode yang mendapat nilai dari properti spesifik. <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">Setter</a> 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.</p> + +<p>Berikut ilustrasi cara getter dan setter bisa bekerja untuk objek <code>o</code> yang sudah didefinisi user.</p> + +<pre class="brush: js">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 +</pre> + +<p>Properti objek <code>o</code> adalah:</p> + +<ul> + <li><code>o.a</code> — angka</li> + <li><code>o.b</code> — getter yang mengembalikan <code>o.a</code> tambah 1</li> + <li><code>o.c</code> — setter yang mengeset nilai <code>o.a</code> setengah dari nilai <code>o.c</code> yang diset.</li> +</ul> + +<p>Harap diingat bahwa nama fungsi dari getter dan setter yang didefisini dalam literal objek menggunakan "[gs]et <em>property</em>()" (dibandingkan dengan <code>__define[GS]etter__</code> ) bukanlah nama getter mereka sendiri, meski syntax <code>[gs]et <em>propertyName</em>(){ }</code> membuatmu berpikir lain. Untuk menamai fungsi dalam getter atau setter menggunakan syntax "[gs]et <em>property</em>()", definiskan fungsi, dengan nama explisit, secara terprogram menggunakan <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty" title="en-US/docs/Core JavaScript 1.5 Reference/Global +Objects/Object/defineProperty">Object.defineProperty</a></code> (atau pengganti legacy <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineGetter" title="en-US/docs/Core JavaScript 1.5 Reference/Global +Objects/Object/defineGetter">Object.prototype.__defineGetter__</a></code>).</p> + +<p>Kode berikut mengilustrasikan cara getter dan setter bisa memperluas prototipe {{jsxref("Date")}} untuk menambah properti <code>year</code> ke semua instance dari kelas <code>Date</code> yang sudah didefinisi. Ia menggunakan metode kelas <code>Date</code> yang sudah ada, <code>getFullYear</code> dan <code>setFullYear</code> untuk mendukung properti getter dan setter <code>year</code>.</p> + +<p>Statement ini mendefinisi getter dan setter untuk properti tahun:</p> + +<pre class="brush: js">var d = Date.prototype; +Object.defineProperty(d, 'year', { + get: function() { return this.getFullYear(); }, + set: function(y) { this.setFullYear(y); } +}); +</pre> + +<p>Statement ini menggunakan getter dan setter dalam objek <code>Date</code>:</p> + +<pre class="brush: js">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 +</pre> + +<p>Secara pinsip, getter dan setter bisa</p> + +<ul> + <li>didefinisi menggunakan <a href="#Object_initializers">object initializers</a>, atau</li> + <li>ditambahkan kemudian ke objek apapun kapanpun menggunakan metode penambahan getter atau setter.</li> +</ul> + +<p>Ketika mendefiniisi getter dan setter menggunakan <a href="#Object_initializers">object initializer</a> yang harus kamu lakukan adalah memprefix metode getter dengan <code>get</code> dan metode setter dengan <code>set</code>. Tentunya, metode getter tidak boleh mengharapkan parameter, lalu metode setter mengharapkan hanya satu parameter (nilai baru untuk diset). Contohnya:</p> + +<pre class="brush: js">var o = { + a: 7, + get b() { return this.a + 1; }, + set c(x) { this.a = x / 2; } +}; +</pre> + +<p>Getter dan setter juga bisa ditambah ke objek kapanpun setelah membuat objek menggunakan metode <code>Object.defineProperties</code>. 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:</p> + +<pre class="brush: js">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 +</pre> + +<p>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.</p> + +<h2 id="Menghapus_properti">Menghapus properti</h2> + +<p>Kamu bisa menghapus properti yang bukan warisan menggunakan operator <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code>. Kode berikut menampilkan cara menghapus properti.</p> + +<pre class="brush: js">// 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" +</pre> + +<p>Kamu juga bisa memakai <code>delete</code> untuk menghapus variabel global jika katakunci <code>var</code> tidak dipakai untuk mendeklarasi variabel itu:</p> + +<pre class="brush: js">g = 17; +delete g; +</pre> + +<h2 id="Membandingkan_objek">Membandingkan objek</h2> + +<p>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.</p> + +<pre class="brush: js">// 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</pre> + +<pre class="brush: js">// 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 +</pre> + +<pre class="brush: js">fruit.name = 'grape'; +console.log(fruitbear); // menghasilkan { name: "grape" } ketimbang { name: "apple" } +</pre> + +<p>Untuk informasi lebih tentang operator pembandingan, lihat <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">Operator pembandingan</a>.</p> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>Untuk mempelajari lebih dalam, baca <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">detil model objek javaScript</a>.</li> + <li>Untuk belejar tentang kelas ECMAScript 2015 (cara baru membuat objek), baca bab <a href="/en-US/docs/Web/JavaScript/Reference/Classes">kelas JavaScript</a>.</li> +</ul> + +<p>{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}</p> diff --git a/files/id/web/javascript/reference/about/index.html b/files/id/web/javascript/reference/about/index.html new file mode 100644 index 0000000000..02c6ef967c --- /dev/null +++ b/files/id/web/javascript/reference/about/index.html @@ -0,0 +1,86 @@ +--- +title: Mengenai Pustaka Ini +slug: Web/JavaScript/Reference/About +tags: + - JavaScript +translation_of: Web/JavaScript/Reference/About +--- +<h2 id="Apa_yang_perlu_diketahui_sebelumnya">Apa yang perlu diketahui sebelumnya</h2> + +<p>Pengalaman menggunakan bahasa pemrograman lainnya dapat menjadi manfaat, meskipun tidak menjadi prasyarat.</p> + +<p>JavaScript ditujukan untuk digunakan pada lingkup yang lebih besar, seperti peramban, script server-side, atau sejenisnya. Secara umum, pustaka ini tergantung pada platform tertentu, dan tidak ditujukan hanya untuk peramban.</p> + +<p>Untuk tujuan demo, pustakan ini menggunakan fungsi, println. Fungsi tersebut bukanlah bagian dari JavaScript. Namun ia dapat dipetakan terhadap implementasi spesifik pada platform tertentu.</p> + +<p>Misal, bila berjalan di peramban, maka fungsi di atas dapat implementasikan sebagai:</p> + +<div style="overflow: hidden;"> +<pre class="brush: js">function println(string) { + window.alert(string); +} +</pre> + +<p> </p> +</div> + +<h2 id="Sejarah_JavaScript">Sejarah JavaScript</h2> + +<p>Versi terbaru dari peramban berbasis Mozilla mendukung versi terbaru dari JavaScript. Tabel berikut menampilkan daftar dari versi JavaScript yang didukung oleh versi yang berbeda dari peramban berbasis Mozilla.</p> + +<p>Peramban yang tidak mendukung versi JavaScript setidaknya versi 1.5 adalah hal yang sangat langka untuk saat ini. JavaScript versi 1.5 sudah dipublikasikan sejak tahun 1999. Bila Anda tertarik untuk mempelajari sejarahnya, silahkan mengunjungi referensi yang terdapat di Wikipedia, <a class="external" href="http://en.wikipedia.org/wiki/ECMAScript">ECMAScript</a>.</p> + +<h3 id="JavaScriptBrowser_support_history">JavaScript/Browser support history</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">JavaScript (<a href="/en-US/docs/SpiderMonkey" title="en-US/docs/SpiderMonkey">SpiderMonkey</a>) version</th> + <th scope="col">Mozilla release</th> + <th scope="col"><a href="/en-US/docs/Gecko" title="en-US/docs/Gecko">Gecko</a> version</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/en-US/docs/JavaScript/New_in_JavaScript/1.5" title="en-US/docs/JavaScript/New in JavaScript/1.5">JavaScript 1.5</a></td> + <td>Navigator 6.0, Mozilla Application Suite, Firefox 1.0</td> + <td>Gecko 0.6x-1.7</td> + </tr> + <tr> + <td><a href="/en-US/docs/JavaScript/New_in_JavaScript/1.6" title="en-US/docs/JavaScript/New in JavaScript/1.6">JavaScript 1.6</a></td> + <td>Firefox 1.5</td> + <td>Gecko 1.8</td> + </tr> + <tr> + <td><a href="/en-US/docs/JavaScript/New_in_JavaScript/1.7" title="en-US/docs/JavaScript/New in JavaScript/1.7">JavaScript 1.7</a></td> + <td>Firefox 2</td> + <td>Gecko 1.8.1</td> + </tr> + <tr> + <td><a href="/en-US/docs/JavaScript/New_in_JavaScript/1.8" title="en-US/docs/JavaScript/New in JavaScript/1.8">JavaScript 1.8</a></td> + <td>Firefox 3</td> + <td>Gecko 1.9</td> + </tr> + <tr> + <td><a href="/en-US/docs/JavaScript/New_in_JavaScript/1.8.5" title="en-US/docs/JavaScript/New in JavaScript/1.8.5">JavaScript 1.8.5</a></td> + <td>Firefox 4</td> + <td>Gecko 2.0</td> + </tr> + <tr> + <td><a href="/en-US/docs/Firefox_17_for_developers#JavaScript">JavaScript 1.8.6</a></td> + <td>Firefox 17</td> + <td>Gecko 17</td> + </tr> + </tbody> +</table> + +<h2 id="Sumber_informasi_JavaScript">Sumber informasi JavaScript</h2> + +<p>Dokumentasi JavaScript dari fitur bahasa inti (murni <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Language_Resources">ECMAScript</a>, untuk sebagian besar) mencakup:</p> + +<ul> + <li><a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Guide">Pedoman JavaScript</a></li> + <li><a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference">Referensi JavaScript</a></li> +</ul> + +<p>Bila Anda masih baru terhadap JavaScript, mulailah dari <a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Guide">pedoman</a>. Bila kemudian Anda sudah merasa memiliki pemahaman yang lebih mendalam, Anda dapat memanfaatkan <a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference">referensi</a>.</p> diff --git a/files/id/web/javascript/reference/classes/constructor/index.html b/files/id/web/javascript/reference/classes/constructor/index.html new file mode 100644 index 0000000000..8da1df9428 --- /dev/null +++ b/files/id/web/javascript/reference/classes/constructor/index.html @@ -0,0 +1,162 @@ +--- +title: constructor +slug: Web/JavaScript/Reference/Classes/constructor +translation_of: Web/JavaScript/Reference/Classes/constructor +--- +<div>{{jsSidebar("Classes")}}</div> + +<p>Metode dengan nama "constructor" adalah metode spesial untuk pembuatan dan penginisialisasian objek yang dibuat dengan kelas.</p> + +<h2 id="sintaks">sintaks</h2> + +<pre class="syntaxbox">constructor([arguments]) { ... }</pre> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Hanya boleh ada satu metode spesial dengan nama "constructor" dalam sebuah kelas. {{jsxref("SyntaxError")}} akan dilemparkan jika suatu kelas memiliki lebih dari satu metode konstruktor.</p> + +<p>Konstruktor dapat menggunakan kata kunci {{jsxref("Operators/super", "super")}} untuk memanggil konstruktor orang-tua.</p> + +<p>Jika metode konstruktor tidak didefinisikan dalam sebuah kelas, maka kontruktor asali yang akan digunakan.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Menggunakan_metode_constructor">Menggunakan metode <code>constructor</code></h3> + +<p>Potongan kode ini diambil dari <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">contoh kelas</a> (<a href="https://googlechrome.github.io/samples/classes-es6/index.html">demostrasi langsung</a>).</p> + +<pre class="brush: js">class Square extends Polygon { + constructor(length) { + // Di sini, akan memanggil konstruktor orang-tua dengan panjang + // diberikan untuk panjang dan tinggi Polygon + super(length, length); + // Catatan: di kelas turunan, super() harus dipanggil sebelum + // bisa menggunakan kata kunci 'this'. Meninggalkan pemanggilan ini di awal + // akan menyebabkan kesalahan referensi. + this.name = 'Square'; + } + + get area() { + return this.height * this.width; + } + + set area(value) { + this.area = value; + } +}</pre> + +<h3 id="Konstruktor_asali">Konstruktor asali</h3> + +<p>Jika metode konstruktor tidak didefinisikan dalam sebuah kelas, maka kontruktor asali yang akan digunakan. Untuk konstruktor asali untuk kelas dasar adalah:</p> + +<pre class="brush: js">constructor() {} +</pre> + +<p>Konstruktor asali untuk kelas turunan adalah:</p> + +<pre class="brush: js">constructor(...args) { + super(...args); +}</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-static-semantics-constructormethod', 'Constructor Method')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definisi awal</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-static-semantics-constructormethod', 'Constructor Method')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatibilitas_Peramban">Kompatibilitas Peramban</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(42.0)}}</td> + <td>{{CompatGeckoDesktop(45)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Default constructors</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(45)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(42.0)}}</td> + <td>{{CompatGeckoMobile(45)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(42.0)}}</td> + </tr> + <tr> + <td>Default constructors</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(45)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_Pula">Lihat Pula</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super()</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> declaration</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li> +</ul> diff --git a/files/id/web/javascript/reference/classes/extends/index.html b/files/id/web/javascript/reference/classes/extends/index.html new file mode 100644 index 0000000000..c6def454fe --- /dev/null +++ b/files/id/web/javascript/reference/classes/extends/index.html @@ -0,0 +1,112 @@ +--- +title: extends +slug: Web/JavaScript/Reference/Classes/extends +tags: + - ECMAScript 2015 + - JavaScript + - Kelas +translation_of: Web/JavaScript/Reference/Classes/extends +--- +<div>{{jsSidebar("Classes")}}</div> + +<p>Kata kunci <strong><code>extends</code></strong> digunakan pada <a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">class declarations</a> atau <a href="/en-US/docs/Web/JavaScript/Reference/Operators/class">class expressions</a> untuk membuat sebuah class yang merupakan turunan dari class lain.</p> + +<div>{{EmbedInteractiveExample("pages/js/classes-extends.html", "taller")}}</div> + +<p class="hidden">Sumber kode dari contoh interaktif ini disimpan di repositori GitHub. Jika Anda tertarik untuk berkontribusi dengan proyek contoh interaktif, silahkan menduplikasi repositori <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> dan kirimkan ke kami dengan pull request.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox">class ChildClass extends ParentClass { ... }</pre> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Kata kunci <code>extends</code> dapat digunakan untuk subclass custom classes dan built-in objects.</p> + +<p><code>.prototype</code> dari suatu ekstensi harus berupa sebuah {{jsxref("Object")}} atau {{jsxref("null")}}.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Menggunakan_extends">Menggunakan <code>extends</code></h3> + +<p>Contoh pertama membuat sebuah class bernama <code>Square</code> dari kelas bernama <code>Polygon</code>. Contoh ini diambil dari <a href="https://googlechrome.github.io/samples/classes-es6/index.html">live demo</a> <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">(source)</a>.</p> + +<pre class="brush: js">class Square extends Polygon { + constructor(length) { + // Disini, obyek dari Square memanggil konstruktor dari parent class dengan argumen lengths yang tersedia + // untuk width dan height pada Polygon + super(length, length); + // Catatan: Pada kelas turunan, super() harus dipanggil sebelum Anda + // dapat menggunakan 'this'. Pengabaian terhadap hal tersebut akan menyebabkan reference error. + this.name = 'Square'; + } + + get area() { + return this.height * this.width; + } +}</pre> + +<h3 id="Menggunakan_extends_dengan_built-in_objects">Menggunakan <code>extends</code> dengan built-in objects</h3> + +<p>Contoh berikut mewarisi built-in {{jsxref("Date")}} object. Contoh ini diambil dari <a href="https://googlechrome.github.io/samples/classes-es6/index.html">live demo</a> <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">(source)</a>.</p> + +<pre class="brush: js">class myDate extends Date { + constructor() { + super(); + } + + getFormattedDate() { + var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; + return this.getDate() + '-' + months[this.getMonth()] + '-' + this.getFullYear(); + } +}</pre> + +<h3 id="Extending_(Pewarisan)_null">Extending (Pewarisan) <code>null</code></h3> + +<p>Extending/pewarisan dari {{jsxref("null")}} bekerja layaknya seperti normal class, dengan pengecualian prototype object tidak mewarisi dari {{jsxref("Object.prototype")}}.</p> + +<pre class="brush: js">class nullExtends extends null { + constructor() {} +} + +Object.getPrototypeOf(nullExtends); // Function.prototype +Object.getPrototypeOf(nullExtends.prototype) // null + +new nullExtends(); //ReferenceError: this is not defined +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Komentar</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-class-definitions', 'extends')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-class-definitions', 'extends')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatibilitas_peramban">Kompatibilitas peramban</h2> + +<div class="hidden">Tabel kompatibilitas pada halaman ini hasil pengolahan dari data terstruktur. Jika Anda tertarik untuk berkontribusi pada data, Silahkan cek <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> dan kirimkan kami pull request.</div> + +<p>{{Compat("javascript.classes.extends")}}</p> + +<h2 id="Cek_juga">Cek juga</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super</a></li> + <li><a href="https://medium.com/beginners-guide-to-mobile-web-development/super-and-extends-in-javascript-es6-understanding-the-tough-parts-6120372d3420">Anurag Majumdar - Super & Extends in JavaScript</a></li> +</ul> diff --git a/files/id/web/javascript/reference/classes/index.html b/files/id/web/javascript/reference/classes/index.html new file mode 100644 index 0000000000..3a8a71f562 --- /dev/null +++ b/files/id/web/javascript/reference/classes/index.html @@ -0,0 +1,383 @@ +--- +title: Classes +slug: Web/JavaScript/Reference/Classes +tags: + - Classes + - Constructors + - ECMAScript6 + - Inheritance + - Intermediate + - JavaScript + - NeedsTranslation + - TopicStub +translation_of: Web/JavaScript/Reference/Classes +--- +<div>{{JsSidebar("Classes")}}</div> + +<p>Kelas di JavaScript diperkenalkan pada ECMAScript 6 seperti pemanis dari prototype-based JavaScript yang sudah ada. Syntax dari kelas tidak menggunakan model object-oriented inheritance yang baru. JavaScript kelas menyediakan syntax yang lebih sederhana dan rapi untuk membuat object-object dan mengatasi / dealing dengan turunan / inheritance.</p> + +<h2 id="Definisi_kelas">Definisi kelas</h2> + +<p>Kelas seperti "fungsi istimewa", dan seperti kamu bisa mendeklarasikan <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">ekspresi fungsi </a>(function expressions) dan <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">deklarasi fungsi </a> (function declarations), syntax kelas sendiri mempunyai dua komponen: <a href="/en-US/docs/Web/JavaScript/Reference/Operators/class">ekspresi kelas</a> (class expressions) dan <a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">deklarasi kelas</a> (class declarations).</p> + +<h3 id="Deklarasi_Kelas">Deklarasi Kelas</h3> + +<p>Salah satu cara untuk mendefinisikan kelas adalah dengan menggunakan <strong>class declaration / deklarasi kelas</strong>. Untuk mendeklarasikan kelas, kamu bisa menggunakan kata kunci <code>class</code> sebagai contoh class "Polygon" di bawah ini.</p> + +<pre class="brush: js notranslate">class Polygon { + constructor(height, width) { + this.height = height; + this.width = width; + } +}</pre> + +<h4 id="Hoisting">Hoisting</h4> + +<p>Perbedaan penting antara <strong>deklarasi</strong><strong> f</strong><strong>ungsi</strong><strong> </strong>(function declarations)<strong> </strong>dan<strong> </strong><strong>deklarasi</strong><strong> kelas</strong> (class declarations) adalah deklarasi fungsi {{Glossary("Hoisting", "hoisted")}} dan deklarasi class tidak. Pertama-tama k<span style="background-color: #f6d5d9;">amu </span>harus mendeklarasikan kelas dan mengaksesnya, jika tidak maka kode seperti berikut akan menampilkan {{jsxref("ReferenceError")}}:</p> + +<pre class="brush: js example-bad notranslate">var p = new Polygon(); // ReferenceError + +class Polygon {} +</pre> + +<h3 id="Ekspresi_Kelas">Ekspresi Kelas</h3> + +<p><strong>Ekspresi kelas </strong>(class expression) adalah cara lain untuk mendefinisikan sebuah class. Class expression bisa bernama ataupun tidak. Nama yang diberikan berbentuk lokal berada di body class.</p> + +<pre class="brush: js notranslate">// unnamed +var Polygon = class { + constructor(height, width) { + this.height = height; + this.width = width; + } +}; + +// named +var Polygon = class Polygon { + constructor(height, width) { + this.height = height; + this.width = width; + } +}; +</pre> + +<p><strong>Catatan:</strong> <strong>Ekspresi </strong>kelas (Class expressions) juga mempunyai masalah yang sama terkait hoisting seperti pada <strong>Deklarasi kelas</strong> (Class declarations).</p> + +<h2 id="Tubuh_Kelas_class_body_and_definisi_metode">Tubuh Kelas (class body) and definisi metode</h2> + +<p>Tubuh atau body sebuah kelas berada didalam kurung {}. Disitu kamu dapat mendefinisikan isi kelas seperti method atau konstruktor.</p> + +<h3 id="Strict_mode">Strict mode</h3> + +<p>Body atau bagian badan dari <em>kelas deklarasi</em> dan <em>kelas ekspresi</em> di eksekusi pada <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>.</p> + +<h3 id="Konstruktor">Konstruktor</h3> + +<p><code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/constructor">konstruktor</a></code> adalah metode (method) khusus untuk membuat dan inisialisasi sebuah objek yang dibuat dengan <code>class</code>. Hanya ada satu metode khusus dengan nama "konstruktor" di kelas. Sebuah {{jsxref("SyntaxError")}} akan tampil jika kelas berisi lebih dari satu method <code>constructor</code>.</p> + +<p>Sebuah konstruktor dapat digunakan keyword <code>super</code> untuk memanggil kostruktor dari kelas <em>parent</em> nya.</p> + +<h3 id="Prototipe_method">Prototipe method</h3> + +<p>Lihat juga <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">definisi method</a></p> + +<pre class="brush: js notranslate">class Polygon { + constructor(height, width) { + this.height = height; + this.width = width; + } + + get area() { + return this.calcArea(); + } + + calcArea() { + return this.height * this.width; + } +} + +const square = new Polygon(10, 10); + +console.log(square.area);</pre> + +<h3 id="Metode_Statis">Metode Statis</h3> + +<p>Kata kunci <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/static">statis</a></code> mendefinisikan metode statis untuk suatu kelas. Metode statis dipanggil tanpa membuat <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript#The_object_(class_instance)" title='An example of class instance is "var john = new Person();"'>instance </a>kelasnya dan <strong>tidak</strong> bisa dipanggil ketika kelas tersebut dipakai. Metode statis sering digunakan untuk membuat fungsi utilitas untuk suatu aplikasi.</p> + +<pre class="brush: js notranslate">class Point { + constructor(x, y) { + this.x = x; + this.y = y; + } + + static distance(a, b) { + const dx = a.x - b.x; + const dy = a.y - b.y; + + return Math.sqrt(dx*dx + dy*dy); + } +} + +const p1 = new Point(5, 5); +const p2 = new Point(10, 10); + +console.log(Point.distance(p1, p2));</pre> + +<h3 id="Mem-binding_this_dengan_prototipe_dan_metode_statis">Mem-binding <code>this</code> dengan prototipe dan metode statis</h3> + +<p>Ketika metode statis atau prototipe dipanggil tanpa objek yang bernilai "this" (atau "this" sebagai boolean, string, angka, <strong><code>tidak terdefinisi</code></strong> atau null), maka nilai "this" akan ditentukan dalam fungsi yang digunakan. Autoboxing tidak akan berjalan. Hal tersebut juga berlaku ketika kita menulis kode dalam mode non-strict.laku akan sama bahkan jika kita menulis kode dalam mode tidak ketat.</p> + +<pre class="brush: js notranslate">class Animal { + speak() { + return this; + } + static eat() { + return this; + } +} + +let obj = new Animal(); +let speak = obj.speak; +speak(); // undefined + +let eat = Animal.eat; +eat(); // undefined</pre> + +<p>Jika kita menulis kode diatas menggunakan fungsi tradisional berdasarkan kelas, maka autoboxing akan berjalan sesuai dengan nilai "this" pada fungsi yang dipanggil.</p> + +<pre class="brush: js notranslate">function Animal() { } + +Animal.prototype.speak = function(){ + return this; +} + +Animal.eat = function() { + return this; +} + +let obj = new Animal(); +let speak = obj.speak; +speak(); // global object + +let eat = Animal.eat; +eat(); // global object +</pre> + +<h2 id="Sub_kelas_dengan_extends">Sub kelas dengan <code>extends</code></h2> + +<p><code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/extends">extends</a></code> digunakan pada <em>deklarasi kelas</em> atau <em>kelas expresi</em> untuk membuat suatu kelas sebagai turunan dari kelas lain.</p> + +<pre class="brush: js notranslate">class Animal { + constructor(name) { + this.name = name; + } + + speak() { + console.log(this.name + ' makes a noise.'); + } +} + +class Dog extends Animal { + speak() { + console.log(this.name + ' barks.'); + } +} + +var d = new Dog('Mitzie'); +d.speak(); +</pre> + +<p>Jika terdapat constructor pada sub kelas saat ini, maka pertama dibutuhkan untuk memanggil super() sebelum menggunakan "this".</p> + +<div>Seseorang juga dapat mengextend "kelas" berbasis fungsi tradisional:</div> + +<pre class="brush: js notranslate">function Animal (name) { + this.name = name; +} + +Animal.prototype.speak = function () { + console.log(this.name + ' makes a noise.'); +} + +class Dog extends Animal { + speak() { + console.log(this.name + ' barks.'); + } +} + +var d = new Dog('Mitzie'); +d.speak(); +</pre> + +<p>Perhatikan bahwa kelas tidak dapat di extend pada objek reguler atau biasa (non-constructible) . Jika ingin mewarisi regurel object, maka dapat menggunakan {{jsxref("Object.setPrototypeOf()")}}:</p> + +<pre class="brush: js notranslate">var Animal = { + speak() { + console.log(this.name + ' makes a noise.'); + } +}; + +class Dog { + constructor(name) { + this.name = name; + } + speak() { + console.log(this.name + ' barks.'); + } +} + +Object.setPrototypeOf(Dog.prototype, Animal); + +var d = new Dog('Mitzie'); +d.speak(); +</pre> + +<h2 id="Species">Species</h2> + +<p>Kamu dapat mengembalikan objek {{jsxref("Array")}} di kelas array yang diturunkan <code>MyArray</code>. Pola spesies memungkinkan Kamu <em>overide</em> konstruktor default.</p> + +<p>Contohnya, ketika menggunakan method seperti {{jsxref("Array.map", "map()")}} yang mana mengembalikan konstruktor default, kamu butuh method yang dapat mengembalikan objek parent <code>Array</code>, bukan dari objek <code>MyArray</code>. Simbol {{jsxref("Symbol.species")}} memungkinkan untuk melakukan:</p> + +<pre class="brush: js notranslate">class MyArray extends Array { + // Overwrite species to the parent Array constructor + static get [Symbol.species]() { return Array; } +} + +var a = new MyArray(1,2,3); +var mapped = a.map(x => x * x); + +console.log(mapped instanceof MyArray); // false +console.log(mapped instanceof Array); // true +</pre> + +<h2 id="Memanggil_Kelas_Super_dengan_keyword_super">Memanggil Kelas Super dengan keyword <code>super</code></h2> + +<p>Keyword <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super</a></code> digunakan untuk memanggil fungsi pada objek parent nya.</p> + +<pre class="brush: js notranslate">class Cat { + constructor(name) { + this.name = name; + } + + speak() { + console.log(this.name + ' makes a noise.'); + } +} + +class Lion extends Cat { + speak() { + super.speak(); + console.log(this.name + ' roars.'); + } +} +</pre> + +<h2 id="Mix-ins">Mix-ins</h2> + +<p>Subkelas Abstrak or <em>mix-ins </em>adalah template untuk kelas. Kelas berbasis ECMAScript hanya dapat memiliki satu superclass (Kelas super), jadi inheritence berganda dari kelas tool sebagai contohnya, itu tidak memungkinkan. Fungsionalitas harus disediakan oleh superclass.</p> + +<p>Sebuah fungsi dengan superclass sebagai inputanya dan sukelas as input and a subclass extend superclass sebagai output dapat mengimplemtasikan pada ECMAScript sebagai berikut:</p> + +<pre class="brush: js notranslate">var calculatorMixin = Base => class extends Base { + calc() { } +}; + +var randomizerMixin = Base => class extends Base { + randomize() { } +}; +</pre> + +<p>A class that uses these mix-ins can then be written like this:</p> + +<pre class="brush: js notranslate">class Foo { } +class Bar extends calculatorMixin(randomizerMixin(Foo)) { }</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Kompatibilitas_Browser">Kompatibilitas Browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Edge</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(42.0)}}<sup>[1]</sup><br> + {{CompatChrome(49.0)}}</td> + <td>{{CompatGeckoDesktop(45)}}</td> + <td>13</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatSafari(9.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(45)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>9</td> + <td>{{CompatChrome(42.0)}}<sup>[1]</sup><br> + {{CompatChrome(49.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Requires strict mode. Non-strict mode support is behind the flag "Enable Experimental JavaScript", disabled by default.</p> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Functions</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> declaration</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li> + <li>{{jsxref("Operators/super", "super")}}</li> + <li><a href="https://hacks.mozilla.org/2015/07/es6-in-depth-classes/">Blog post: "ES6 In Depth: Classes"</a></li> +</ul> diff --git a/files/id/web/javascript/reference/errors/called_on_incompatible_type/index.html b/files/id/web/javascript/reference/errors/called_on_incompatible_type/index.html new file mode 100644 index 0000000000..4fab8e8ca2 --- /dev/null +++ b/files/id/web/javascript/reference/errors/called_on_incompatible_type/index.html @@ -0,0 +1,69 @@ +--- +title: X.prototype.y called on incompatible type +slug: Web/JavaScript/Reference/Errors/Called_on_incompatible_type +tags: + - Error + - JavaScript + - TypeError +translation_of: Web/JavaScript/Reference/Errors/Called_on_incompatible_type +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Message">Message</h2> + +<pre class="syntaxbox">TypeError: 'this' is not a Set object (EdgE) +TypeError: Function.prototype.toString called on incompatible object (Firefox) +TypeError: Function.prototype.bind called on incompatible target (Firefox) +TypeError: Method Set.prototype.add called on incompatible receiver undefined (Chrome) +TypeError: Bind must be called on a function (Chrome) +</pre> + +<h2 id="Tipe_error">Tipe error</h2> + +<p>{{jsxref("TypeError")}}</p> + +<h2 id="Apa_yang_salah">Apa yang salah?</h2> + +<p>Ketika error ini dilempar, suatu fungsi (dari objek yang diberikan), dipanggil dengan <code>this</code> tidak berkorespondensi ke tipe yang diharapkan fungsi tersebut.</p> + +<p>Isu ini bisa terbit ketika menggunakan metode {{jsxref("Function.prototype.call()")}} atau {{jsxref("Function.prototype.apply()")}}, dan menyediakan argumen <code>this</code> yang tak punya tipe yang diharapkan.</p> + +<p>Isu ini juga bisa terjadi ketika menyediakan fungsi yang disimpan sebagai properti suatu objek sebagai argumen fungsi lain. Dalam hal ini, objek yang menyimpan fungsi tersebut takkan menjadi target <code>this</code> target dari fungsi itu ketika dipanggil oleh fungsi lain. Untuk mengatasi isu ini, kamu harus menyediakan lambda yang membuat panggilan, ataupun menggunakan fungsi {{jsxref("Function.prototype.bind()")}} untuk memaksa argumen <code>this</code> ke objek yang diharapkan.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Kasus_tak_valid">Kasus tak valid</h3> + +<pre class="brush: js example-bad">var mySet = new Set; +['bar', 'baz'].forEach(mySet.add); +// mySet.add adalah fungsi, tapi "mySet" tidak dikaptur sebagai this. + +var myFun = function () { + console.log(this); +}; +['bar', 'baz'].forEach(myFun.bind); +// myFun.bind adalah fungsi, tapi "myFun" tidak dikaptur sebagai this. + +</pre> + +<h3 id="Kasus_valid">Kasus valid</h3> + +<pre class="brush: js example-good">var mySet = new Set; +['bar', 'baz'].forEach(mySet.add.bind(mySet)); +// Ini berjalan karena mengikat "mySet" sebagai this. + +var myFun = function () { + console.log(this); +}; +['bar', 'baz'].forEach(x => myFun.bind(x)); +// Ini berjalan menggunakan fungsi "bind". Ia membuat lambda yang meneruskan argumen. + +</pre> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("Function.prototype.call()")}}</li> + <li>{{jsxref("Function.prototype.apply()")}}</li> + <li>{{jsxref("Function.prototype.bind()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/errors/index.html b/files/id/web/javascript/reference/errors/index.html new file mode 100644 index 0000000000..68e7cce3df --- /dev/null +++ b/files/id/web/javascript/reference/errors/index.html @@ -0,0 +1,12 @@ +--- +title: Referensi error JavaScript +slug: Web/JavaScript/Reference/Errors +tags: + - JavaScript +translation_of: Web/JavaScript/Reference/Errors +--- +<p>{{jsSidebar("Errors")}}</p> + +<p>Error, error dimana - mana.</p> + +<p>{{ListSubPages("/en-US/docs/Web/JavaScript/Reference/Errors")}}</p> diff --git a/files/id/web/javascript/reference/errors/invalid_array_length/index.html b/files/id/web/javascript/reference/errors/invalid_array_length/index.html new file mode 100644 index 0000000000..3b7fd4e78e --- /dev/null +++ b/files/id/web/javascript/reference/errors/invalid_array_length/index.html @@ -0,0 +1,78 @@ +--- +title: 'RangeError: invalid array length' +slug: Web/JavaScript/Reference/Errors/Invalid_array_length +tags: + - Errors + - JavaScript + - RangeError +translation_of: Web/JavaScript/Reference/Errors/Invalid_array_length +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Message">Message</h2> + +<pre class="syntaxbox">RangeError: Array length must be a finite positive integer (Edge) +RangeError: invalid array length (Firefox) +RangeError: Invalid array length (Chrome) +RangeError: Invalid array buffer length (Chrome) +</pre> + +<h2 id="Tipe_error">Tipe error</h2> + +<p>{{jsxref("RangeError")}}</p> + +<h2 id="Apa_yang_salah">Apa yang salah?</h2> + +<p>Panjang array tak valid bisa muncul di situasi berikut:</p> + +<ul> + <li>Ketika membuat satu {{jsxref("Array")}} atau {{jsxref("ArrayBuffer")}} yang punya panjang negatif atau lebih besar atau sama dengan 2<sup>32</sup>, atau</li> + <li>ketika mengeset properti {{jsxref("Array.length")}} ke nilai negatif atau lebih besar atau sama dengan 2<sup>32</sup>.</li> +</ul> + +<p>Kenapa panjang <code>Array</code> dan <code>ArrayBuffer</code> dibatasi? Properti <code>length</code> dari <code>Array</code> atau <code>ArrayBuffer</code> diwakili dengan satu unsigned 32-bit integer, yang hanya menyimpan nilai dalam kisaran dari 0 hingga 2<sup>32</sup>-1.</p> + +<p>Jika kamu membuat satu <code>Array</code>, menggunakan constructor, kamu mungkin mau memakai notasi literal saja, karena argumen pertama diinterpretasi sebagai panjang <code>Array</code>.</p> + +<p>Sebaliknya, kamu mungkin mau mengelam panjangnya sebelum mengeset properti panjangnya, atau memakainya sebagai argumen konstructor.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Kasus_tak_valid">Kasus tak valid</h3> + +<pre class="brush: js example-bad">new Array(Math.pow(2, 40)) +new Array(-1) +new ArrayBuffer(Math.pow(2, 32)) +new ArrayBuffer(-1) + +let a = []; +a.length = a.length - 1; // set -1 to the length property + +let b = new Array(Math.pow(2, 32) - 1); +b.length = b.length + 1; // set 2^32 to the length property +</pre> + +<h3 id="Kasus_valid">Kasus valid</h3> + +<pre class="brush: js example-good">[ Math.pow(2, 40) ] // [ 1099511627776 ] +[ -1 ] // [ -1 ] +new ArrayBuffer(Math.pow(2, 32) - 1) +new ArrayBuffer(0) + +let a = []; +a.length = Math.max(0, a.length - 1); + +let b = new Array(Math.pow(2, 32) - 1); +b.length = Math.min(0xffffffff, b.length + 1); + +// 0xffffffff is the hexadecimal notation for 2^32 - 1 +// which can also be written as (-1 >>> 0) +</pre> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Array.length")}}</li> + <li>{{jsxref("ArrayBuffer")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/errors/missing_semicolon_before_statement/index.html b/files/id/web/javascript/reference/errors/missing_semicolon_before_statement/index.html new file mode 100644 index 0000000000..32be54e5ce --- /dev/null +++ b/files/id/web/javascript/reference/errors/missing_semicolon_before_statement/index.html @@ -0,0 +1,78 @@ +--- +title: 'SyntaxError: missing ; before statement' +slug: Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement +translation_of: Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Pesan">Pesan</h2> + +<pre class="syntaxbox">SyntaxError: Expected ';' (Edge) +SyntaxError: missing ; before statement (Firefox) +</pre> + +<h2 id="Tipe_error">Tipe error</h2> + +<p>{{jsxref("SyntaxError")}}.</p> + +<h2 id="Apa_yang_Salah">Apa yang Salah?</h2> + +<p>Ada titik koma (<code>;</code>) yang hilang di suatu tempat. <a href="/en-US/docs/Web/JavaScript/Reference/Statements">JavaScript statements</a> harus diakhiri dengan semicolon. Beberapa dari mereka dipengaruhi oleh <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">automatic semicolon insertion (ASI)</a>, tetapi dalam hal ini anda perlu memberikan titik koma, sehingga JavaScript dapat mem-parse kode sumber dengan benar.</p> + +<p>Namun, seringkali, kesalahan ini hanya merupakan konsekuensi dari kesalahan lain, seperti tidak menempatkan string dengan benar, atau menggunakan var secara salah. Ada mungkin juga memiliki terlalu banyak tanda kurung di suatu tempat. Hati-hati memeriksa sintaks ketika kesalahan ini dilemparkan.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Unescaped_strings">Unescaped strings</h3> + +<p>Kesalahan ini dapat terjadi dengan mudah ketika tidak melepaskan string dengan benar dan engine JavaScript is expecting the end of your string already. Sebagai contoh:</p> + +<pre class="brush: js example-bad">var foo = 'Tom's bar'; +// SyntaxError: missing ; before statement</pre> + +<p>Anda dapat menggunakan double quotes, atau menggunakan tanda kutip dengan menambahkan backslash</p> + +<pre class="brush: js example-good">var foo = "Tom's bar"; +var foo = 'Tom\'s bar'; +</pre> + +<h3 id="Declaring_properties_with_var">Declaring properties with var</h3> + +<p>Anda tidak dapat mendeklarasikan property dari sebuah objek atau larik(array) <code>dengan deklarasi var</code>.</p> + +<pre class="brush: js example-bad">var obj = {}; +var obj.foo = 'hi'; // SyntaxError missing ; before statement + +var array = []; +var array[0] = 'there'; // SyntaxError missing ; before statement +</pre> + +<p>Sebagai gantinya, hapus kata kunci var:</p> + +<pre class="brush: js example-good">var obj = {}; +obj.foo = 'hi'; + +var array = []; +array[0] = 'there'; +</pre> + +<h3 id="Kata_kunci_yang_buruk">Kata kunci yang buruk</h3> + +<p>Jika ada berasal dari bahasa pemrograman yang lain, itu juga umum untuk menggunakan kata kunci yang tidak berarti sama atau tidak memiliki arti sama sekali di JavaScript:</p> + +<pre class="brush: js example-bad">def print(info){ + console.log(info); +}; // SyntaxError missing ; before statement</pre> + +<p>Sebagai gantinya, gunakan <code>function</code> daripada menggunakan kata kunci <code>def</code>:</p> + +<pre class="brush: js example-good">function print(info){ + console.log(info); +};</pre> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">Automatic semicolon insertion (ASI)</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements">JavaScript statements</a></li> +</ul> diff --git a/files/id/web/javascript/reference/errors/negative_repetition_count/index.html b/files/id/web/javascript/reference/errors/negative_repetition_count/index.html new file mode 100644 index 0000000000..0ea4bec83a --- /dev/null +++ b/files/id/web/javascript/reference/errors/negative_repetition_count/index.html @@ -0,0 +1,45 @@ +--- +title: 'RangeError: repeat count must be non-negative' +slug: Web/JavaScript/Reference/Errors/Negative_repetition_count +tags: + - Errors + - JavaScript + - RangeError +translation_of: Web/JavaScript/Reference/Errors/Negative_repetition_count +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Pesan">Pesan</h2> + +<pre class="syntaxbox">RangeError: argument out of range +RangeError: repeat count must be non-negative (Firefox) +RangeError: Invalid count value (Chrome) +</pre> + +<h2 id="Tipe_error">Tipe error</h2> + +<p>{{jsxref("RangeError")}}</p> + +<h2 id="Apa_yang_salah">Apa yang salah?</h2> + +<p>Metode {{jsxref("String.prototype.repeat()")}} telah digunakan. Ia punya parameter <code>count</code> mengindikasikan jumlah pengulangan string. Ia harus bernilai antara 0 dan kurang dari positif {{jsxref("Infinity")}} dan tidak boleh angka negatif. Kisarannya nilai yang diperbolehkan bisa dijelaskan seperti ini: [0, +∞).</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Kasus_tak_valid">Kasus tak valid</h3> + +<pre class="brush: js example-bad">'abc'.repeat(-1); // RangeError </pre> + +<h3 id="Kasus_valid">Kasus valid</h3> + +<pre class="brush: js example-good">'abc'.repeat(0); // '' +'abc'.repeat(1); // 'abc' +'abc'.repeat(2); // 'abcabc' +'abc'.repeat(3.5); // 'abcabcabc' (count will be converted to integer) +</pre> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("String.prototype.repeat()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/errors/not_a_codepoint/index.html b/files/id/web/javascript/reference/errors/not_a_codepoint/index.html new file mode 100644 index 0000000000..d3d8b2f934 --- /dev/null +++ b/files/id/web/javascript/reference/errors/not_a_codepoint/index.html @@ -0,0 +1,56 @@ +--- +title: 'RangeError: argument is not a valid code point' +slug: Web/JavaScript/Reference/Errors/Not_a_codepoint +tags: + - Errors + - JavaScript + - RangeError +translation_of: Web/JavaScript/Reference/Errors/Not_a_codepoint +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Pesan">Pesan</h2> + +<pre class="syntaxbox">RangeError: Invalid code point {0} (Edge) +RangeError: {0} is not a valid code point (Firefox) +RangeError: Invalid code point {0} (Chrome) +</pre> + +<p> </p> + +<h2 id="Tipe_error">Tipe error</h2> + +<p>{{jsxref("RangeError")}}</p> + +<h2 id="Apa_yang_salah">Apa yang salah?</h2> + +<p><span class="seoSummary">{{jsxref("String.fromCodePoint()")}} throws this error when passed {{jsxref("NaN")}} values, negative Integers (-1), non-Integers (5.4), or values larger than 0x10FFFF (1114111).</span></p> + +<p>Satu <a href="https://en.wikipedia.org/wiki/Code_point">poin kode</a> ialah satu nilai dalam codespace Unicode; yaitu, kisaran integer dari <code>0</code> hingga <code>0x10FFFF</code>.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Kasus_tak_nvalid">Kasus tak nvalid</h3> + +<pre class="brush: js example-bad">String.fromCodePoint('_'); // RangeError +String.fromCodePoint(Infinity); // RangeError +String.fromCodePoint(-1); // RangeError +String.fromCodePoint(3.14); // RangeError +String.fromCodePoint(3e-2); // RangeError +String.fromCodePoint(NaN); // RangeError</pre> + +<h3 id="Kasus_valid">Kasus valid</h3> + +<pre class="brush: js example-good">String.fromCodePoint(42); // "*" +String.fromCodePoint(65, 90); // "AZ" +String.fromCodePoint(0x404); // "\u0404" +String.fromCodePoint(0x2F804); // "\uD87E\uDC04" +String.fromCodePoint(194564); // "\uD87E\uDC04" +String.fromCodePoint(0x1D306, 0x61, 0x1D307) // "\uD834\uDF06a\uD834\uDF07" +</pre> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("String.fromCodePoint()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/errors/not_defined/index.html b/files/id/web/javascript/reference/errors/not_defined/index.html new file mode 100644 index 0000000000..d0dc93a0c6 --- /dev/null +++ b/files/id/web/javascript/reference/errors/not_defined/index.html @@ -0,0 +1,66 @@ +--- +title: 'ReferenceError: "x" is not defined' +slug: Web/JavaScript/Reference/Errors/Not_defined +translation_of: Web/JavaScript/Reference/Errors/Not_defined +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Pesan">Pesan</h2> + +<pre class="syntaxbox">ReferenceError: "x" is not defined +</pre> + +<h2 id="Type_Error">Type Error</h2> + +<p>{{jsxref("ReferenceError")}}.</p> + +<h2 id="Mengapa_salah">Mengapa salah?</h2> + +<p>Tidak ditemukannya referensi variabel dimanapun. Variabel ini perlu dideklarasikan, atau anda pastikan lagi bahwa ada di dalam script atau {{Glossary("scope")}} anda.</p> + +<div class="note"> +<p><strong>Note:</strong> Ketika memanggil sebuah library (seperti jQuery), pastikan memanggilnya terlebih dahulu tanda "$" sebelum mengakses variabel library. Gunakan tag {{HTMLElement("script")}} untuk memanggil library sebelum menggunakannya pada kode anda.</p> +</div> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Variable_tidak_dideklarasikan">Variable tidak dideklarasikan</h3> + +<pre class="brush: js example-bad">foo.substring(1); // ReferenceError: foo is not defined +</pre> + +<p>Variabel "foo" tidak ditemukan dimanapun. Variabel tersebut diperlukan oleh beberapa string, agar metode {{jsxref("String.prototype.substring()")}} dapat bekerja.</p> + +<pre class="brush: js example-good">var foo = 'bar'; +foo.substring(1); // "ar"</pre> + +<h3 id="Ruang_lingkup_salah">Ruang lingkup salah</h3> + +<p><span id="result_box" lang="id"><span>Sebuah variabel harus tersedia dalam kontek eksekusi saat ini</span></span> . Variabel yang berada di dalam sebuah <a href="/en-US/docs/Web/JavaScript/Reference/Functions">fungsi</a> tidak dapat diakses dari luar fungsi, sebab sebuah variabel mepunyai batasan pada cakupan wilayah sebuah fungsi</p> + +<pre class="brush: js example-bad">function numbers() { + var num1 = 2, + num2 = 3; + return num1 + num2; +} + +console.log(num1); // ReferenceError num1 is not defined.</pre> + +<p>Dengan demikian sebuah fungsi dapat mengakses semua variabel dan fungsi lainnya yang didefinisikan di dalam cakupan dimana ia didefinisikan. Dengan kata lain, sebiah fungsi yang didefinisikan di cakupan global dapat mengakses semua variabel yang didefinisian secara global pula.</p> + +<pre class="brush: js example-good">var num1 = 2, + num2 = 3; + +function numbers() { + return num1 + num2; +} + +console.log(numbers()); // 5</pre> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{Glossary("Scope")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Declaring_variables">Panduan pendeklarasian variabel dalam JavaScript</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Functions#Function_scope/en-US/docs/">Panduan cakupan fungsi pada JavaScript</a></li> +</ul> diff --git a/files/id/web/javascript/reference/errors/property_access_denied/index.html b/files/id/web/javascript/reference/errors/property_access_denied/index.html new file mode 100644 index 0000000000..6cbece3868 --- /dev/null +++ b/files/id/web/javascript/reference/errors/property_access_denied/index.html @@ -0,0 +1,47 @@ +--- +title: 'Error: Permission denied to access property "x"' +slug: Web/JavaScript/Reference/Errors/Property_access_denied +tags: + - Error + - Errors + - JavaScript + - Keamanan +translation_of: Web/JavaScript/Reference/Errors/Property_access_denied +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Pesan">Pesan</h2> + +<pre class="syntaxbox">Error: Permission denied to access property "x" +</pre> + +<h2 id="Tipe_error">Tipe error</h2> + +<p>{{jsxref("Error")}}.</p> + +<h2 id="Apa_kesalahannya">Apa kesalahannya?</h2> + +<p><span class="seoSummary">Ada usaha pengaksesan objeck yang kamu belum punya ijinnya. Sepertinya elemen {{HTMLElement("iframe")}} diload dari domain berbeda yang kebijakan <a href="/en-US/docs/Web/Security/Same-origin_policy">same-origin policy</a>nya kamu langgar.</span></p> + +<h2 id="Contoh">Contoh</h2> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <iframe id="myframe" src="http://www1.w3c-test.org/common/blank.html"></iframe> + <script> + onload = function() { + console.log(frames[0].document); + // Error: Permission denied to access property "document" + } + </script> + </head> + <body></body> +</html></pre> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{HTMLElement("iframe")}}</li> + <li><a href="/en-US/docs/Web/Security/Same-origin_policy">Same-origin policy</a></li> +</ul> diff --git a/files/id/web/javascript/reference/errors/too_much_recursion/index.html b/files/id/web/javascript/reference/errors/too_much_recursion/index.html new file mode 100644 index 0000000000..4c35bcfc83 --- /dev/null +++ b/files/id/web/javascript/reference/errors/too_much_recursion/index.html @@ -0,0 +1,70 @@ +--- +title: 'InternalError: too much recursion' +slug: Web/JavaScript/Reference/Errors/Too_much_recursion +tags: + - Errors + - InternalError + - JavaScript +translation_of: Web/JavaScript/Reference/Errors/Too_much_recursion +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Pesan">Pesan</h2> + +<pre class="syntaxbox">Error: Out of stack space (Edge) +InternalError: too much recursion (Firefox) +RangeError: Maximum call stack size exceeded (Chrome) +</pre> + +<h2 id="Tipe_error">Tipe error</h2> + +<p>{{jsxref("InternalError")}}.</p> + +<h2 id="Apa_yang_salah">Apa yang salah?</h2> + +<p>Fungsi yang memanggil dirinya sendiri disebut <em>fungsi rekursif</em>. Sekali satu kondisi telah ketemu, fungsi itu berhenti memanggil dirinya. Ini disebut <em>base case</em>.</p> + +<p>Dalam beberapa cara, rekursi analog dengan loop. Keduanya mengeksekusi kode yang sama berulang kali, dan keduanya membutuhkan satu kondisi (untuk mencegah loop tak-terbatas, atau lebih tepatnya, rekursi tak-terbatas dalam hal ini). <span class="seoSummary">Ketika panggilan fungsi terlalu banyak, atau tak ada base case dalam fungsi, JavaScript akan melempar error ini.</span></p> + +<h2 id="Contoh">Contoh</h2> + +<p>Fungsi rekursif ini berjalan 10 kali, per kondisi exit.</p> + +<pre class="brush: js">function loop(x) { + if (x >= 10) // "x >= 10" is the exit condition + return; + // do stuff + loop(x + 1); // the recursive call +} +loop(0);</pre> + +<p>Mengeset kondisi ini ke nilai extrem sangat tinggi, tak akan jalan:</p> + +<pre class="brush: js example-bad">function loop(x) { + if (x >= 1000000000000) + return; + // do stuff + loop(x + 1); +} +loop(0); + +// InternalError: too much recursion</pre> + +<p>Fungsi rekursif ini tak punya base case. Jika tak kondisi exit, function akan memanggil dirinya sendiri terus-terusan.</p> + +<pre class="brush: js example-bad">function loop(x) { + // The base case is missing + +loop(x + 1); // Recursive call +} + +loop(0); + +// InternalError: too much recursion</pre> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{Glossary("Rekursi")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Functions#Recursion">Fungsi rekursif</a></li> +</ul> diff --git a/files/id/web/javascript/reference/functions/index.html b/files/id/web/javascript/reference/functions/index.html new file mode 100644 index 0000000000..adb0d13f05 --- /dev/null +++ b/files/id/web/javascript/reference/functions/index.html @@ -0,0 +1,596 @@ +--- +title: Functions +slug: Web/JavaScript/Reference/Functions +tags: + - Constructor + - Function + - Functions + - JavaScript + - NeedsTranslation + - Parameter + - TopicStub + - parameters +translation_of: Web/JavaScript/Reference/Functions +--- +<div>{{jsSidebar("Functions")}}</div> + +<p>Generally speaking, a function is a "subprogram" that can be <em>called</em> by code external (or internal in the case of recursion) to the function. Like the program itself, a function is composed of a sequence of statements called the <em>function body</em>. Values can be <em>passed</em> to a function, and the function will <em>return</em> a value.</p> + +<p>In JavaScript, functions are first-class objects, because they can have properties and methods just like any other object. What distinguishes them from other objects is that functions can be called. In brief, they are <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function">Function</a></code> objects.</p> + +<p>For more examples and explanations, see also the <a href="/en-US/docs/Web/JavaScript/Guide/Functions">JavaScript guide about functions</a>.</p> + +<h2 id="Description">Description</h2> + +<p>Every function in JavaScript is a <code>Function</code> object. See {{jsxref("Function")}} for information on properties and methods of <code>Function</code> objects.</p> + +<p>To return a value other than the default, a function must have a <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/return">return</a></code> statement that specifies the value to return. A function without a return statement will return a default value. In the case of a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">constructor</a> called with the <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a></code> keyword, the default value is the value of its <code>this</code> parameter. For all other functions, the default return value is {{jsxref("undefined")}}.</p> + +<p>The parameters of a function call are the function's <em>arguments</em>. Arguments are passed to functions <em>by value</em>. If the function changes the value of an argument, this change is not reflected globally or in the calling function. However, object references are values, too, and they are special: if the function changes the referred object's properties, that change is visible outside the function, as shown in the following example:</p> + +<pre class="brush: js">/* Declare the function 'myFunc' */ +function myFunc(theObject) { + theObject.brand = "Toyota"; +} + +/* + * Declare variable 'mycar'; + * create and initialize a new Object; + * assign reference to it to 'mycar' + */ +var mycar = { + brand: "Honda", + model: "Accord", + year: 1998 +}; + +/* Logs 'Honda' */ +console.log(mycar.brand); + +/* Pass object reference to the function */ +myFunc(mycar); + +/* + * Logs 'Toyota' as the value of the 'brand' property + * of the object, as changed to by the function. + */ +console.log(mycar.brand); +</pre> + +<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code> keyword</a> does not refer to the currently executing function, so you must refer to <code>Function</code> objects by name, even within the function body.</p> + +<h2 id="Defining_functions">Defining functions</h2> + +<p>There are several ways to define functions:</p> + +<h3 id="The_function_declaration_(function_statement)">The function declaration (<code>function</code> statement)</h3> + +<p>There is a special syntax for declaring functions (see <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function statement</a> for details):</p> + +<pre class="syntaxbox">function <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>The function name.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument to be passed to the function.</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>The statements comprising the body of the function.</dd> +</dl> + +<h3 id="The_function_expression_(function_expression)">The function expression (<code>function</code> expression)</h3> + +<p>A function expression is similar to and has the same syntax as a function declaration (see <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">function expression</a> for details). A function expression may be a part of a larger expression. One can define "named" function expressions (where the name of the expression might be used in the call stack for example) or "anonymous" function expressions. Function expressions are not <em>hoisted</em> onto the beginning of the scope, therefore they cannot be used before they appear in the code.</p> + +<pre class="syntaxbox">function [<em>name</em>]([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>The function name. Can be omitted, in which case the function becomes known as an anonymous function.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument to be passed to the function.</dd> + <dt><code>statements</code></dt> + <dd>The statements comprising the body of the function.</dd> +</dl> + +<p>Here is an example of an <strong>anonymous</strong> function expression (the <code>name</code> is not used):</p> + +<pre class="brush: js">var myFunction = function() { + statements +}</pre> + +<p>It is also possible to provide a name inside the definition in order to create a <strong>named</strong> function expression:</p> + +<pre class="brush: js">var myFunction = function namedFunction(){ + statements +} +</pre> + +<p>One of the benefits of creating a named function expression is that in case we encountered an error, the stack trace will contain the name of the function, making it easier to find the origin of the error.</p> + +<p>As we can see, both examples do not start with the <code>function</code> keyword. Statements involving functions which do not start with <code>function</code> are function expressions.</p> + +<p>When functions are used only once, a common pattern is an <a href="/en-US/docs/Glossary/IIFE">IIFE (Immediately Invokable Function Expression)</a>.</p> + +<pre class="brush: js">(function() { + statements +})();</pre> + +<p>IIFE are function expressions that are invoked as soon as the function is declared.</p> + +<h3 id="The_generator_function_declaration_(function*_statement)">The generator function declaration (<code>function*</code> statement)</h3> + +<p>There is a special syntax for generator function declarations (see {{jsxref('Statements/function*', 'function* statement')}} for details):</p> + +<pre class="syntaxbox">function* <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>The function name.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument to be passed to the function.</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>The statements comprising the body of the function.</dd> +</dl> + +<h3 id="The_generator_function_expression_(function*_expression)">The generator function expression (<code>function*</code> expression)</h3> + +<p>A generator function expression is similar to and has the same syntax as a generator function declaration (see {{jsxref('Operators/function*', 'function* expression')}} for details):</p> + +<pre class="syntaxbox">function* [<em>name</em>]([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>The function name. Can be omitted, in which case the function becomes known as an anonymous function.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument to be passed to the function.</dd> + <dt><code>statements</code></dt> + <dd>The statements comprising the body of the function.</dd> +</dl> + +<h3 id="The_arrow_function_expression_(>)">The arrow function expression (=>)</h3> + +<p>An arrow function expression has a shorter syntax and lexically binds its <code>this</code> value (see <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a> for details):</p> + +<pre class="syntaxbox">([param[, param]]) => { + statements +} + +param => expression +</pre> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument. Zero arguments need to be indicated with <code>()</code>. For only one argument, the parentheses are not required. (like <code>foo => 1</code>)</dd> + <dt><code>statements or expression</code></dt> + <dd>Multiple statements need to be enclosed in brackets. A single expression requires no brackets. The expression is also the implicit return value of the function.</dd> +</dl> + +<h3 id="The_Function_constructor">The <code>Function</code> constructor</h3> + +<div class="note"> +<p><strong>Note:</strong> Using the <code>Function</code> constructor to create functions is not recommended since it needs the function body as a string which may prevent some JS engine optimizations and can also cause other problems.</p> +</div> + +<p>As all other objects, {{jsxref("Function")}} objects can be created using the <code>new</code> operator:</p> + +<pre class="syntaxbox">new Function (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>functionBody</em>) +</pre> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>Zero or more names to be used by the function as formal parameters. Each must be a proper JavaScript identifier.</dd> +</dl> + +<dl> + <dt><code>functionBody</code></dt> + <dd>A string containing the JavaScript statements comprising the function body.</dd> +</dl> + +<p>Invoking the <code>Function</code> constructor as a function (without using the <code>new</code> operator) has the same effect as invoking it as a constructor.</p> + +<h3 id="The_GeneratorFunction_constructor">The <code>GeneratorFunction</code> constructor</h3> + +<div class="note"> +<p><strong>Note:</strong> <code>GeneratorFunction</code> is not a global object, but could be obtained from generator function instance (see {{jsxref("GeneratorFunction")}} for more detail).</p> +</div> + +<div class="note"> +<p><strong>Note:</strong> Using the <code>GeneratorFunction</code> constructor to create functions is not recommended since it needs the function body as a string which may prevent some JS engine optimizations and can also cause other problems.</p> +</div> + +<p>As all other objects, {{jsxref("GeneratorFunction")}} objects can be created using the <code>new</code> operator:</p> + +<pre class="syntaxbox">new GeneratorFunction (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>functionBody</em>) +</pre> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>Zero or more names to be used by the function as formal argument names. Each must be a string that conforms to the rules for a valid JavaScript identifier or a list of such strings separated with a comma; for example "<code>x</code>", "<code>theValue</code>", or "<code>a,b</code>".</dd> +</dl> + +<dl> + <dt><code>functionBody</code></dt> + <dd>A string containing the JavaScript statements comprising the function definition.</dd> +</dl> + +<p>Invoking the <code>Function</code> constructor as a function (without using the <code>new</code> operator) has the same effect as invoking it as a constructor.</p> + +<h2 id="Function_parameters">Function parameters</h2> + +<h3 id="Default_parameters">Default parameters</h3> + +<p>Default function parameters allow formal parameters to be initialized with default values if no value or <code>undefined</code> is passed. For more details, see<a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters"> default parameters</a>.</p> + +<h3 id="Rest_parameters">Rest parameters</h3> + +<p>The rest parameter syntax allows representing an indefinite number of arguments as an array. For more details, see <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest parameters</a>.</p> + +<h2 id="The_arguments_object">The <code>arguments</code> object</h2> + +<p>You can refer to a function's arguments within the function by using the <code>arguments</code> object. See <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a>.</p> + +<ul> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments">arguments</a></code>: An array-like object containing the arguments passed to the currently executing function.</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/callee">arguments.callee</a></code> {{Deprecated_inline}}: The currently executing function.</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/caller">arguments.caller</a></code> {{Obsolete_inline}} : The function that invoked the currently executing function.</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/length">arguments.length</a></code>: The number of arguments passed to the function.</li> +</ul> + +<h2 id="Defining_method_functions">Defining method functions</h2> + +<h3 id="Getter_and_setter_functions">Getter and setter functions</h3> + +<p>You can define getters (accessor methods) and setters (mutator methods) on any standard built-in object or user-defined object that supports the addition of new properties. The syntax for defining getters and setters uses the object literal syntax.</p> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">get</a></dt> + <dd> + <p>Binds an object property to a function that will be called when that property is looked up.</p> + </dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">set</a></dt> + <dd>Binds an object property to a function to be called when there is an attempt to set that property.</dd> +</dl> + +<h3 id="Method_definition_syntax">Method definition syntax</h3> + +<p>Starting with ECMAScript 2015, you are able to define own methods in a shorter syntax, similar to the getters and setters. See <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definitions</a> for more information.</p> + +<pre class="brush: js">var obj = { + foo() {}, + bar() {} +};</pre> + +<h2 id="Constructor_vs._declaration_vs._expression">Constructor vs. declaration vs. expression</h2> + +<p>Compare the following:</p> + +<p>A function defined with the <code>Function</code> <em>constructor</em> assigned to the variable <code>multiply:</code></p> + +<pre class="brush: js">var multiply = new Function('x', 'y', 'return x * y');</pre> + +<p>A <em>function declaration</em> of a function named <code>multiply</code>:</p> + +<pre class="brush: js">function multiply(x, y) { + return x * y; +} // there is no semicolon here +</pre> + +<p>A <em>function expression</em> of an anonymous function assigned to the variable <code>multiply:</code></p> + +<pre class="brush: js">var multiply = function(x, y) { + return x * y; +}; +</pre> + +<p>A <em>function expression</em> of a function named <code>func_name</code> assigned to the variable <code>multiply:</code></p> + +<pre class="brush: js">var multiply = function func_name(x, y) { + return x * y; +}; +</pre> + +<h3 id="Differences">Differences</h3> + +<p>All do approximately the same thing, with a few subtle differences:</p> + +<p>There is a distinction between the function name and the variable the function is assigned to. The function name cannot be changed, while the variable the function is assigned to can be reassigned. The function name can be used only within the function's body. Attempting to use it outside the function's body results in an error (or <code>undefined</code> if the function name was previously declared via a <code>var</code> statement). For example:</p> + +<pre class="brush: js">var y = function x() {}; +alert(x); // throws an error +</pre> + +<p>The function name also appears when the function is serialized via <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/toString"><code>Function</code>'s toString method</a>.</p> + +<p>On the other hand, the variable the function is assigned to is limited only by its scope, which is guaranteed to include the scope in which the function is declared.</p> + +<p>As the 4th example shows, the function name can be different from the variable the function is assigned to. They have no relation to each other. A function declaration also creates a variable with the same name as the function name. Thus, unlike those defined by function expressions, functions defined by function declarations can be accessed by their name in the scope they were defined in:</p> + +<p>A function defined by '<code>new Function'</code> does not have a function name. However, in the <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> JavaScript engine, the serialized form of the function shows as if it has the name "anonymous". For example, <code>alert(new Function())</code> outputs:</p> + +<pre class="brush: js">function anonymous() { +} +</pre> + +<p>Since the function actually does not have a name, <code>anonymous</code> is not a variable that can be accessed within the function. For example, the following would result in an error:</p> + +<pre class="brush: js">var foo = new Function("alert(anonymous);"); +foo(); +</pre> + +<p>Unlike functions defined by function expressions or by the <code>Function</code> constructor, a function defined by a function declaration can be used before the function declaration itself. For example:</p> + +<pre class="brush: js">foo(); // alerts FOO! +function foo() { + alert('FOO!'); +} +</pre> + +<p>A function defined by a function expression or by a function declaration inherits the current scope. That is, the function forms a closure. On the other hand, a function defined by a <code>Function</code> constructor does not inherit any scope other than the global scope (which all functions inherit).</p> + +<pre class="brush: js">/* + * Declare and initialize a variable 'p' (global) + * and a function 'myFunc' (to change the scope) inside which + * declare a varible with same name 'p' (current) and + * define three functions using three different ways:- + * 1. function declaration + * 2. function expression + * 3. function constructor + * each of which will log 'p' + */ +var p = 5; +function myFunc() { + var p = 9; + + function decl() { + console.log(p); + } + var expr = function() { + console.log(p); + }; + var cons = new Function('\tconsole.log(p);'); + + decl(); + expr(); + cons(); +} +myFunc(); + +/* + * Logs:- + * 9 - for 'decl' by function declaration (current scope) + * 9 - for 'expr' by function expression (current scope) + * 5 - for 'cons' by Function constructor (global scope) + */ +</pre> + +<p>Functions defined by function expressions and function declarations are parsed only once, while those defined by the <code>Function</code> constructor are not. That is, the function body string passed to the <code>Function</code> constructor must be parsed each and every time the constructor is called. Although a function expression creates a closure every time, the function body is not reparsed, so function expressions are still faster than "<code>new Function(...)</code>". Therefore the <code>Function</code> constructor should generally be avoided whenever possible.</p> + +<p>It should be noted, however, that function expressions and function declarations nested within the function generated by parsing a <code>Function constructor</code> 's string aren't parsed repeatedly. For example:</p> + +<pre class="brush: js">var foo = (new Function("var bar = \'FOO!\';\nreturn(function() {\n\talert(bar);\n});"))(); +foo(); // The segment "function() {\n\talert(bar);\n}" of the function body string is not re-parsed.</pre> + +<p>A function declaration is very easily (and often unintentionally) turned into a function expression. A function declaration ceases to be one when it either:</p> + +<ul> + <li>becomes part of an expression</li> + <li>is no longer a "source element" of a function or the script itself. A "source element" is a non-nested statement in the script or a function body:</li> +</ul> + +<pre class="brush: js">var x = 0; // source element +if (x === 0) { // source element + x = 10; // not a source element + function boo() {} // not a source element +} +function foo() { // source element + var y = 20; // source element + function bar() {} // source element + while (y === 10) { // source element + function blah() {} // not a source element + y++; // not a source element + } +} +</pre> + +<h3 id="Examples">Examples</h3> + +<pre class="brush: js">// function declaration +function foo() {} + +// function expression +(function bar() {}) + +// function expression +x = function hello() {} + + +if (x) { + // function expression + function world() {} +} + + +// function declaration +function a() { + // function declaration + function b() {} + if (0) { + // function expression + function c() {} + } +} +</pre> + +<h2 id="Block-level_functions">Block-level functions</h2> + +<p>In <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>, starting with ES2015, functions inside blocks are now scoped to that block. Prior to ES2015, block-level functions were forbidden in strict mode.</p> + +<pre class="brush: js">'use strict'; + +function f() { + return 1; +} + +{ + function f() { + return 2; + } +} + +f() === 1; // true + +// f() === 2 in non-strict mode +</pre> + +<h3 id="Block-level_functions_in_non-strict_code">Block-level functions in non-strict code</h3> + +<p>In a word: Don't.</p> + +<p>In non-strict code, function declarations inside blocks behave strangely. For example:</p> + +<pre class="brush: js">if (shouldDefineZero) { + function zero() { // DANGER: compatibility risk + console.log("This is zero."); + } +} +</pre> + +<p>ES2015 says that if <code>shouldDefineZero</code> is false, then <code>zero</code> should never be defined, since the block never executes. However, it's a new part of the standard. Historically, this was left unspecified, and some browsers would define <code>zero</code> whether the block executed or not.</p> + +<p>In <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>, all browsers that support ES2015 handle this the same way: <code>zero</code> is defined only if <code>shouldDefineZero</code> is true, and only in the scope of the <code>if</code>-block.</p> + +<p>A safer way to define functions conditionally is to assign a function expression to a variable:</p> + +<pre class="brush: js">var zero; +if (shouldDefineZero) { + zero = function() { + console.log("This is zero."); + }; +} +</pre> + +<h2 id="Examples_2">Examples</h2> + +<h3 id="Returning_a_formatted_number">Returning a formatted number</h3> + +<p>The following function returns a string containing the formatted representation of a number padded with leading zeros.</p> + +<pre class="brush: js">// This function returns a string padded with leading zeros +function padZeros(num, totalLen) { + var numStr = num.toString(); // Initialize return value as string + var numZeros = totalLen - numStr.length; // Calculate no. of zeros + for (var i = 1; i <= numZeros; i++) { + numStr = "0" + numStr; + } + return numStr; +} +</pre> + +<p>The following statements call the padZeros function.</p> + +<pre class="brush: js">var result; +result = padZeros(42,4); // returns "0042" +result = padZeros(42,2); // returns "42" +result = padZeros(5,4); // returns "0005" +</pre> + +<h3 id="Determining_whether_a_function_exists">Determining whether a function exists</h3> + +<p>You can determine whether a function exists by using the <code>typeof</code> operator. In the following example, a test is performed to determine if the <code>window</code> object has a property called <code>noFunc</code> that is a function. If so, it is used; otherwise, some other action is taken.</p> + +<pre class="brush: js"> if ('function' === typeof window.noFunc) { + // use noFunc() + } else { + // do something else + } +</pre> + +<p>Note that in the <code>if</code> test, a reference to <code>noFunc</code> is used—there are no brackets "()" after the function name so the actual function is not called.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-13', 'Function Definition')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New: Arrow functions, Generator functions, default parameters, rest parameters.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.functions")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Statements/function", "function statement")}}</li> + <li>{{jsxref("Operators/function", "function expression")}}</li> + <li>{{jsxref("Statements/function*", "function* statement")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> + <li>{{jsxref("Functions/Arrow_functions", "Arrow functions")}}</li> + <li>{{jsxref("Functions/Default_parameters", "Default parameters")}}</li> + <li>{{jsxref("Functions/rest_parameters", "Rest parameters")}}</li> + <li>{{jsxref("Functions/arguments", "Arguments object")}}</li> + <li>{{jsxref("Functions/get", "getter")}}</li> + <li>{{jsxref("Functions/set", "setter")}}</li> + <li>{{jsxref("Functions/Method_definitions", "Method definitions")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope">Functions and function scope</a></li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/array/concat/index.html b/files/id/web/javascript/reference/global_objects/array/concat/index.html new file mode 100644 index 0000000000..c6a25609db --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/array/concat/index.html @@ -0,0 +1,169 @@ +--- +title: Array.prototype.concat() +slug: Web/JavaScript/Reference/Global_Objects/Array/concat +tags: + - Array +translation_of: Web/JavaScript/Reference/Global_Objects/Array/concat +--- +<div>{{JSRef}}</div> + +<p>Method <code><strong>concat()</strong></code> mengembalikan sebuah array baru yang terdiri dari array yang dipanggil kemudian digabung dengan array dan/atau nilai yang ditambahkan pada argumen.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>var <var>array_baru</var> = <var>array_lama</var>.concat(<var>value1</var>[, <var>value2</var>[, ...[, <var>valueN</var>]]])</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>value<em>N</em></code></dt> + <dd>Array dan/atau nilai untuk digabung menjadi array baru. Untuk detailnya lihat deskripsi dibawah.</dd> +</dl> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p><code>concat</code> menciptakan array baru yang terdiri dari unsur - unsur dalam object yang disebut, berdasarkan urutannya, setiap argumen, elemen dari argumen tersebut(Jika argumen adalah array) atau argumennya sendiri (jika argumennya bukan array).</p> + +<p><code>concat</code> tidak mengubah <code>this</code> atau beberapa array yang tersedia sebagai argumen melainkan mengembalikan shallow copy yang berisi salinan dari elemen yang sama digabung dengan array yang asli. Elemen dari array asli disalin ke array baru sebagai berikut:</p> + +<ul> + <li>Referensi Object (bukan object sebenarnya) : <code>concat</code> menyalin referensi object ke dalam array baru. Kedua array asli dan baru merujuk pada object yang sama. Artinya, jika referensi object diubah, perubahan akan terlihat pada kedua array baru dan asli.</li> + <li>Strings and numbers (bukan {{jsxref("Global_Objects/String", "String")}} dan {{jsxref("Global_Objects/Number", "Number")}} objects): <code>concat</code> menyalin nilai string dan numbers ke dalam array baru.</li> +</ul> + +<div class="note"> +<p><strong>Catatan:</strong> Concatenating array/nilai akan membiarkan aslinya tidak tersentuh. Selanjutnya, setiap operasi pada array baru tidak akan mempengaruhi array yang asli, begitupun sebaliknya.</p> +</div> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Menggabungkan_dua_Array">Menggabungkan dua Array</h3> + +<p>Berikut kode untuk menggabunggkan dua array:</p> + +<pre class="brush: js">var huruf = ['a', 'b', 'c'], + angka = [1, 2, 3]; + +var hurufAngka = huruf.concat(angka); + +console.log(hurufAngka); // Hasil: ['a', 'b', 'c', 1, 2, 3] +</pre> + +<h3 id="Menggabungkan_tiga_array">Menggabungkan tiga array</h3> + +<p>Berikut kode untuk mengabungkan tiga array:</p> + +<pre class="brush: js">var angka1 = [1, 2, 3], + angka2 = [4, 5, 6], + angka3 = [7, 8, 9]; + +var angkaBaru = angka1.concat(angka2, angka3); + +console.log(angkaBaru); // Hasil: [1, 2, 3, 4, 5, 6, 7, 8, 9] +</pre> + +<h3 id="Menggabungkan_nilai_ke_sebuah_array">Menggabungkan nilai ke sebuah array</h3> + +<p>Berikut kode untuk menggabungkan tiga nilai ke sebuah array :</p> + +<pre class="brush: js">var huruf = ['a', 'b', 'c']; + +var hurufAngka = huruf.concat(1, [2, 3]); + +console.log(hurufAngka); +// Hasil: ['a', 'b', 'c', 1, 2, 3] +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.4', 'Array.prototype.concat')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.concat', 'Array.prototype.concat')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.concat', 'Array.prototype.concat')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Browser">Kompabilitas Browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatChrome("1.0")}}</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>{{CompatIE("5.5")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li>{{jsxref("Array.push", "push")}} / {{jsxref("Array.pop", "pop")}} — menambahkan/menghapus element dari akhir array </li> + <li>{{jsxref("Array.unshift", "unshift")}} / {{jsxref("Array.shift", "shift")}} — menambahkan/menghapus element dari awal array</li> + <li>{{jsxref("Array.splice", "splice")}} — menambahkan/menghapus element dari lokasi spesifik array</li> + <li>{{jsxref("String.prototype.concat()")}}</li> + <li>{{jsxref("Symbol.isConcatSpreadable")}} – Kontrol Perataan.</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/array/filter/index.html b/files/id/web/javascript/reference/global_objects/array/filter/index.html new file mode 100644 index 0000000000..5c23313268 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/array/filter/index.html @@ -0,0 +1,244 @@ +--- +title: Array.prototype.filter() +slug: Web/JavaScript/Reference/Global_Objects/Array/filter +tags: + - Array + - ECMAScript 5 + - JavaScript + - Metode + - Referensi + - polyfill + - purwarupa +translation_of: Web/JavaScript/Reference/Global_Objects/Array/filter +--- +<div>{{JSRef}}</div> + +<p>Fungsi <code><strong>filter()</strong></code> membuat array baru berisi elemen yang lolos pengecekan di dalam fungsi anonim yang dikirim sebagai parameter.</p> + +<pre class="brush: js">var words = ["spray", "limit", "elite", "exuberant", "destruction", "present"]; + +var longWords = words.filter(function(word){ + return word.length > 6; +}); + +// Filtered array longWords is ["exuberant", "destruction", "present"] +</pre> + +<h3 id="Versi_ES6">Versi ES6</h3> + +<pre class="brush: js">const words = ["spray", "limit", "elite", "exuberant", "destruction", "present"]; + +let longWords = words.filter(word => word.length > 6); + +// Filtered array longWords is ["exuberant", "destruction", "present"] +</pre> + +<h2 id="Sintaksis">Sintaksis</h2> + +<pre class="syntaxbox"><var>var newArray = arr</var>.filter(<var>callback</var>[, <var>thisArg</var>])</pre> + +<h3 id="Parameter-parameter">Parameter-parameter</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Fungsi berupa tes untuk mengecek elemen yang ada di dalam array. Kembalikan nilai <code>true</code> untuk meloloskan element, <code>false</code> untuk tidak lolos, dan dapat memiliki tiga argumen:</dd> + <dd> + <dl> + <dt><code>element</code></dt> + <dd>Elemen saat ini yang sedang diproses.</dd> + <dt><code>index</code></dt> + <dd>Nilai indeks (posisi) dari elemen yang sedang diproses.</dd> + <dt><code>array</code></dt> + <dd>Array yang memanggil fungsi <code>filter</code>.</dd> + </dl> + </dd> + <dt><code>thisArg {{Optional_inline}}</code></dt> + <dd>Opsional. Objek yang akan digunakan sebagai <code>this</code> saat mengeksekusi <code>callback</code>.</dd> +</dl> + +<h3 id="Nilai_balikan">Nilai balikan</h3> + +<p>Array baru yang berisi elemen lolos pengecekan.</p> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p><code>filter()</code> akan memanggil fungsi <code>callback</code> sekali untuk tiap elemen di dalam array, dan membuat array baru dari semua <a href="/en-US/docs/Glossary/Truthy">nilai yang dianggap true</a> dari hasil yang dikembalikan <code>callback</code>. <code>callback</code> hanya dipanggil untuk indeks dari array yang berisi sebuah nilai; fungsi tidak akan dipanggil untuk indeks yang telah dihapus atau belum diisi nilai tertentu. Elemen array yang tidak lolos tes <code>callback</code> akan dilewati dan tidak dimasukkan ke dalam array baru.</p> + +<p><code>callback</code> dapat dipanggil dengan tiga argumen:</p> + +<ol> + <li>nilai dari elemen</li> + <li>indeks dari elemen</li> + <li>objek array yang diproses</li> +</ol> + +<p>Jika parameter <code>thisArg</code> tersedia juga saat memanggil <code>filter</code>, itu akan digunakan sebagai nilai <code>this</code> di dalam <code>callback</code>. Jika tidak disediakan, maka <code>undefined</code> yang digunakan sebagai nilai <code>this</code>. Nilai <code>this</code> yang dapat digunakan dalam <code>callback</code> ditentukan dari <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">aturan umum penentuan <code>this</code> dalam fungsi</a>.</p> + +<p><code>filter()</code> tidak mengubah array yang memanggil fungsi ini.</p> + +<p>Kumpulan elemen yang akan diproses oleh <code>filter()</code> ditentukan sebelum pemanggilan pertama <code>callback</code>. Elemen yang ditambahkan ke array setelah pemanggilan<code>filter()</code> dimulai tidak akan diproses oleh <code>callback</code>. Jika elemen yang sudah ada dalam array berubah, atau dihapus, nilai yang digunakan dalam <code>callback</code> adalah nilai pada saat <code>filter()</code> menggunakannya; elemen yang dihapus tidak akan diproses.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Menyaring_semua_nilai_kecil">Menyaring semua nilai kecil</h3> + +<p>Contoh berikut ini menggunakan <code>filter()</code> untuk membuat array yang menyaring semua nilai di bawah 10.</p> + +<pre class="brush: js">function isBigEnough(value) { + return value >= 10; +} + +var filtered = [12, 5, 8, 130, 44].filter(isBigEnough); +// filtered is [12, 130, 44] +</pre> + +<h3 id="Menyaring_entri_invalid_dari_JSON">Menyaring entri invalid dari JSON</h3> + +<p>Contoh berikut ini menggunakan <code>filter()</code> untuk membuat json tersaring berisi semua elemen <code>id</code> berupa angka bukan nol.</p> + +<pre class="brush: js">var arr = [ + { id: 15 }, + { id: -1 }, + { id: 0 }, + { id: 3 }, + { id: 12.2 }, + { }, + { id: null }, + { id: NaN }, + { id: 'undefined' } +]; + +var invalidEntries = 0; + +function isNumber(obj) { + return obj!== undefined && typeof(obj) === 'number' && !isNaN(obj); +} + +function filterByID(item) { + if (isNumber(item.id)) { + return true; + } + invalidEntries++; + return false; +} + +var arrByID = arr.filter(filterByID); + +console.log('Filtered Array\n', arrByID); +// Filtered Array +// [{ id: 15 }, { id: -1 }, { id: 0 }, { id: 3 }, { id: 12.2 }] + +console.log('Number of Invalid Entries = ', invalidEntries); +// Number of Invalid Entries = 4 +</pre> + +<h3 id="Pencarian_dalam_array">Pencarian dalam array</h3> + +<p>Contoh berikut menggunakan <code>filter()</code> untuk menyaring isi array berdasarkan kriteria pencarian</p> + +<pre class="brush: js">var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange']; + +/** + * Array filters items based on search criteria (query) + */ +function filterItems(query) { + return fruits.filter(function(el) { + return el.toLowerCase().indexOf(query.toLowerCase()) > -1; + }) +} + +console.log(filterItems('ap')); // ['apple', 'grapes'] +console.log(filterItems('an')); // ['banana', 'mango', 'orange']</pre> + +<h3 id="Implementasi_ES2015">Implementasi ES2015</h3> + +<pre class="brush: js">const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange']; + +/** + * Array filters items based on search criteria (query) + */ +const filterItems = (query) => { + return fruits.filter((el) => + el.toLowerCase().indexOf(query.toLowerCase()) > -1 + ); +} + +console.log(filterItems('ap')); // ['apple', 'grapes'] +console.log(filterItems('an')); // ['banana', 'mango', 'orange'] + +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p><code>filter()</code> ditambahkan ke standar ECMA-262 baru pada edisi ke-5; sehingga fungsi ini mungkin tidak terdapat pada semua implementasi standar. Anda dapat mengatasi hal ini dengan menambahkan kode berikut pada awalan skrip Anda, memungkinkan penggunaan <code>filter()</code> di implementasi ECMA-262 yang belum mendukung. Algoritma ini persis sepadan dengan yang dispesifikasikan dalam ECMA-262, edisi ke-5, dengan asumsi <code>fn.call</code> dievaluasi ke nilai asli dari {{jsxref("Function.prototype.bind()")}}, dan {{jsxref("Array.prototype.push()")}} memiliki nilai aslinya.</p> + +<pre class="brush: js">if (!Array.prototype.filter) + Array.prototype.filter = function(func, thisArg) { + 'use strict'; + if ( ! ((typeof func === 'Function' || typeof func === 'function') && this) ) + throw new TypeError(); + + var len = this.length >>> 0, + res = new Array(len), // preallocate array + t = this, c = 0, i = -1; + if (thisArg === undefined) + while (++i !== len) + // checks to see if the key was set + if (i in this) + if (func(t[i], i, t)) + res[c++] = t[i]; + else + while (++i !== len) + // checks to see if the key was set + if (i in this) + if (func.call(thisArg, t[i], i, t)) + res[c++] = t[i]; + + res.length = c; // shrink down array to proper size + return res; + }; +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Komentar</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.20', 'Array.prototype.filter')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.prototype.filter', 'Array.prototype.filter')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.filter', 'Array.prototype.filter')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatibilitas_browser">Kompatibilitas browser</h2> + +<div> +<div class="hidden">Tabel kompatibilitas di laman ini dihasilkan dari struktur data. Jika Anda tertarik berkontribusi di dalamnya, silakan <em>check out</em> <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> dan kirim kami <em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.Array.filter")}}</p> +</div> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li>{{jsxref("Array.prototype.reduce()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/array/from/index.html b/files/id/web/javascript/reference/global_objects/array/from/index.html new file mode 100644 index 0000000000..7845da9755 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/array/from/index.html @@ -0,0 +1,248 @@ +--- +title: Array.from() +slug: Web/JavaScript/Reference/Global_Objects/Array/from +translation_of: Web/JavaScript/Reference/Global_Objects/Array/from +--- +<div>{{JSRef}}</div> + +<p>Method <code><strong>Array.from()</strong></code> membuat sebuah instansi <code>Array</code> dari sebuah array-like atau objek iterable.</p> + +<p>Di ES6, sintaks class memungkinkan untuk subclassing diantaranya built-in dan user defined classes; hasilnya , method statik class-side seperti <code><strong>Array.from</strong></code> "diwariskan" oleh subclasses dari <code><strong>Array</strong></code> dan membuat instansi baru dari subclass, bukan <code><strong>Array</strong></code>.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><code>Array.from(arrayLike[, mapFn[, thisArg]]) +</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>arrayLike</code></dt> + <dd> Array-like atau objek iterable untuk diubah menjadi array.</dd> + <dt><code>mapFn</code></dt> + <dd>Opsional. Fungsi Map untuk memanggil setiap elemen array.</dd> + <dt><code>thisArg</code></dt> + <dd>Opsional. Nilai untuk digunakan <code>this</code> ketika mengeksekusi <code>mapFn</code>.</dd> +</dl> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p><code>Array.from()</code> memungkinkan anda membuat <code>Arrays</code> dari:</p> + +<ul> + <li>Objek array-like (objek dengan peoperti <code>length</code> dan elemen yang diindex) atau</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/iterable">Objek iterable</a> (objek dimana anda bisa mengambil elemen, seperti {{jsxref("Map")}} dan {{jsxref("Set")}}).</li> +</ul> + +<p><code>Array.from()</code> memiliki parameter opsional <code>mapFn</code>, yang memungkinkan anda untuk mengeksekusi fungsi {{jsxref("Array.prototype.map", "map")}} pada setiap elemen array (atau objek subclass) yang akan dibuat. Jelasnya,<code> Array.from(obj, mapFn, thisArg)</code> sama dengan <code>Array.from(obj).map(mapFn, thisArg)</code>, kecuali dengan tidak membuat array menengah. Ini sangat penting untuk setiap subclass array, seperti <a href="/en-US/docs/Web/JavaScript/Typed_arrays">typed arrays</a>, selama array menengah akan memiliki nilai yang terpisah agar bisa masuk ke tipe yang sesuai.</p> + +<p>Properti <code>length</code> dari method <code>from()</code> adalah 1.</p> + +<h2 id="Contoh">Contoh</h2> + +<pre class="brush: js">// Array-like object (arguments) to Array +function f() { + return Array.from(arguments); +} + +f(1, 2, 3); +// [1, 2, 3] + + +// Any iterable object... +// Set +var s = new Set(["foo", window]); +Array.from(s); +// ["foo", window] + + +// Map +var m = new Map([[1, 2], [2, 4], [4, 8]]); +Array.from(m); +// [[1, 2], [2, 4], [4, 8]] + + +// String +Array.from("foo"); +// ["f", "o", "o"] + + +// Using an arrow function as the map function to +// manipulate the elements +Array.from([1, 2, 3], x => x + x); +// [2, 4, 6] + + +// Generate a sequence of numbers +Array.from({length: 5}, (v, k) => k); +// [0, 1, 2, 3, 4] + +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p><code>Array.from</code> telah di masukkan di standar ECMA-262 pada edisi ke-6; karena itu mungkin tidak bisa digunakan pada implementasi standar lain. Anda bisa menyiasatinya dengan menambahkan kode berikut ke awal script, memungkinkan penggunaan <code>Array.from</code> pada implementasi yang aslinya tidak mendukung. Algoritma ini sama dengan yang di spesifikasikan di ECMA-262, edisi ke-6, dengan saumsi <code>Object</code> dan <code>TypeError</code> memiliki nilai tersendiri dan <code>callback.call</code> mengevaluasi nilai valur dari {{jsxref("Function.prototype.call")}}. Selain itu, sejak iterable tidak dapat di polyfill, implementasi ini tidak mendukung generik iterable seperti yang didefinisikan di edisi ke-6 di ECMA-262.</p> + +<pre class="brush: js">// Production steps of ECMA-262, Edition 6, 22.1.2.1 +// Reference: https://people.mozilla.org/~jorendorff/es6-draft.html#sec-array.from +if (!Array.from) { + Array.from = (function () { + var toStr = Object.prototype.toString; + var isCallable = function (fn) { + return typeof fn === 'function' || toStr.call(fn) === '[object Function]'; + }; + var toInteger = function (value) { + var number = Number(value); + if (isNaN(number)) { return 0; } + if (number === 0 || !isFinite(number)) { return number; } + return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number)); + }; + var maxSafeInteger = Math.pow(2, 53) - 1; + var toLength = function (value) { + var len = toInteger(value); + return Math.min(Math.max(len, 0), maxSafeInteger); + }; + + // The length property of the from method is 1. + return function from(arrayLike/*, mapFn, thisArg */) { + // 1. Let C be the this value. + var C = this; + + // 2. Let items be ToObject(arrayLike). + var items = Object(arrayLike); + + // 3. ReturnIfAbrupt(items). + if (arrayLike == null) { + throw new TypeError("Array.from requires an array-like object - not null or undefined"); + } + + // 4. If mapfn is undefined, then let mapping be false. + var mapFn = arguments.length > 1 ? arguments[1] : void undefined; + var T; + if (typeof mapFn !== 'undefined') { + // 5. else + // 5. a If IsCallable(mapfn) is false, throw a TypeError exception. + if (!isCallable(mapFn)) { + throw new TypeError('Array.from: when provided, the second argument must be a function'); + } + + // 5. b. If thisArg was supplied, let T be thisArg; else let T be undefined. + if (arguments.length > 2) { + T = arguments[2]; + } + } + + // 10. Let lenValue be Get(items, "length"). + // 11. Let len be ToLength(lenValue). + var len = toLength(items.length); + + // 13. If IsConstructor(C) is true, then + // 13. a. Let A be the result of calling the [[Construct]] internal method of C with an argument list containing the single item len. + // 14. a. Else, Let A be ArrayCreate(len). + var A = isCallable(C) ? Object(new C(len)) : new Array(len); + + // 16. Let k be 0. + var k = 0; + // 17. Repeat, while k < len… (also steps a - h) + var kValue; + while (k < len) { + kValue = items[k]; + if (mapFn) { + A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k); + } else { + A[k] = kValue; + } + k += 1; + } + // 18. Let putStatus be Put(A, "length", len, true). + A.length = len; + // 20. Return A. + return A; + }; + }()); +} +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.from', 'Array.from')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.from', 'Array.from')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Browser">Kompabilitas Browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Edge</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatChrome("45")}}</td> + <td>{{CompatGeckoDesktop("32")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>9.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("32")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Array.prototype.map()")}}</li> + <li>{{jsxref("TypedArray.from()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/array/index.html b/files/id/web/javascript/reference/global_objects/array/index.html new file mode 100644 index 0000000000..2b052487c4 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/array/index.html @@ -0,0 +1,484 @@ +--- +title: Array +slug: Web/JavaScript/Reference/Global_Objects/Array +tags: + - Array + - Global Objects + - JavaScript + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/Array +--- +<div>{{JSRef}}</div> + +<p>Objek JavaScript <strong><code>Array</code></strong> merupakan objek global yang berguna membangun himpunan; dimana merupakan objek level tinggi dan (seperti) daftar.</p> + +<p><strong>Membuat sebuah Array</strong></p> + +<pre class="brush: js">var fruits = ["Apple", "Banana"]; + +console.log(fruits.length); +// 2 +</pre> + +<p><strong>Akses (index) kedalam sebuah item Array</strong></p> + +<pre class="brush: js">var first = fruits[0]; +// Apple + +var last = fruits[fruits.length - 1]; +// Banana +</pre> + +<p><strong>Perulangan pada Array</strong></p> + +<pre class="brush: js">fruits.forEach(function (item, index, array) { + console.log(item, index); +}); +// Apple 0 +// Banana 1 +</pre> + +<p><strong>Menambahkan elemen pada bagian akhir sebuah Array</strong></p> + +<pre class="brush: js">var newLength = fruits.push("Orange"); +// ["Apple", "Banana", "Orange"] +</pre> + +<p><strong>Menghapus elemen di akhir sebuah Array</strong></p> + +<pre class="brush: js">var last = fruits.pop(); // remove Orange (from the end) +// ["Apple", "Banana"]; +</pre> + +<p><strong>Menghapus elemen di awal sebuah Array</strong></p> + +<pre class="brush: js">var first = fruits.shift(); // remove Apple from the front +// ["Banana"]; +</pre> + +<p><strong>Menambahkan elemen di bagian awal sebuah Array</strong></p> + +<pre class="brush: js">var newLength = fruits.unshift("Strawberry") // add to the front +// ["Strawberry", "Banana"]; +</pre> + +<p><strong>Mencari (nomor) index elemen pada sebuah Array</strong></p> + +<pre class="brush: js">fruits.push("Mango"); +// ["Strawberry", "Banana", "Mango"] + +var pos = fruits.indexOf("Banana"); +// 1 +</pre> + +<p><strong>Menghapus elemen berdasar posisi index</strong></p> + +<pre class="brush: js">var removedItem = fruits.splice(pos, 1); // this is how to remove an item +// ["Strawberry", "Mango"] +</pre> + +<p><strong>Menduplikat sebuah Array</strong></p> + +<pre class="brush: js">var shallowCopy = fruits.slice(); // this is how to make a copy +// ["Strawberry", "Mango"] +</pre> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>[<var>element0</var>, <var>element1</var>, ..., <var>elementN</var>] +new Array(<var>element0</var>, <var>element1</var>[, ...[, <var>elementN</var>]]) +new Array(<var>arrayLength</var>)</code></pre> + +<dl> + <dt><code>element<em>N</em></code></dt> + <dd>A JavaScript array is initialized with the given elements, except in the case where a single argument is passed to the <code>Array</code> constructor and that argument is a number (see the arrayLength parameter below).Note that this special case only applies to JavaScript arrays created with the <code>Array</code> constructor, not array literals created with the bracket syntax.</dd> + <dt><code>arrayLength</code></dt> + <dd>If the only argument passed to the <code>Array</code> constructor is an integer between 0 and 2<sup>32</sup>-1 (inclusive), this returns a new JavaScript array with length set to that number. If the argument is any other number, a {{jsxref("RangeError")}} exception is thrown.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>Arrays are list-like objects whose prototype has methods to perform traversal and mutation operations. Neither the length of a JavaScript array nor the types of its elements are fixed. Since an array's length can change at any time, and data can be stored at non-contiguous locations in the array, JavaScript arrays are not guaranteed to be dense; this depends on how the programmer chooses to use them. In general, these are convenient characteristics; but if these features are not desirable for your particular use, you might consider using typed arrays.</p> + +<p>Some people think that <a class="external" href="http://www.andrewdupont.net/2006/05/18/javascript-associative-arrays-considered-harmful/">you shouldn't use an array as an associative array</a>. In any case, you can use plain {{jsxref("Global_Objects/Object", "objects")}} instead, although doing so comes with its own caveats. See the post <a class="external" href="http://www.less-broken.com/blog/2010/12/lightweight-javascript-dictionaries.html">Lightweight JavaScript dictionaries with arbitrary keys</a> as an example.</p> + +<h3 id="Accessing_array_elements">Accessing array elements</h3> + +<p>JavaScript arrays are zero-indexed: the first element of an array is at index <code>0</code>, and the last element is at the index equal to the value of the array's {{jsxref("Array.length", "length")}} property minus 1.</p> + +<pre class="brush: js">var arr = ['this is the first element', 'this is the second element']; +console.log(arr[0]); // logs 'this is the first element' +console.log(arr[1]); // logs 'this is the second element' +console.log(arr[arr.length - 1]); // logs 'this is the second element' +</pre> + +<p>Array elements are object properties in the same way that <code>toString</code> is a property, but trying to access an element of an array as follows throws a syntax error, because the property name is not valid:</p> + +<pre class="brush: js">console.log(arr.0); // a syntax error +</pre> + +<p>There is nothing special about JavaScript arrays and the properties that cause this. JavaScript properties that begin with a digit cannot be referenced with dot notation; and must be accessed using bracket notation. For example, if you had an object with a property named <code>'3d'</code>, it can only be referenced using bracket notation. E.g.:</p> + +<pre class="brush: js">var years = [1950, 1960, 1970, 1980, 1990, 2000, 2010]; +console.log(years.0); // a syntax error +console.log(years[0]); // works properly +</pre> + +<pre class="brush: js">renderer.3d.setTexture(model, 'character.png'); // a syntax error +renderer['3d'].setTexture(model, 'character.png'); // works properly +</pre> + +<p>Note that in the <code>3d</code> example, <code>'3d'</code> had to be quoted. It's possible to quote the JavaScript array indexes as well (e.g., <code>years['2']</code> instead of <code>years[2]</code>), although it's not necessary. The 2 in <code>years[2]</code> is coerced into a string by the JavaScript engine through an implicit <code>toString</code> conversion. It is for this reason that <code>'2'</code> and <code>'02'</code> would refer to two different slots on the <code>years</code> object and the following example could be <code>true</code>:</p> + +<pre class="brush: js">console.log(years['2'] != years['02']); +</pre> + +<p>Similarly, object properties which happen to be reserved words(!) can only be accessed as string literals in bracket notation(but it can be accessed by dot notation in firefox 40.0a2 at least):</p> + +<pre class="brush: js">var promise = { + 'var' : 'text', + 'array': [1, 2, 3, 4] +}; + +console.log(promise['array']); +</pre> + +<h3 id="Relationship_between_length_and_numerical_properties">Relationship between <code>length</code> and numerical properties</h3> + +<p>A JavaScript array's {{jsxref("Array.length", "length")}} property and numerical properties are connected. Several of the built-in array methods (e.g., {{jsxref("Array.join", "join")}}, {{jsxref("Array.slice", "slice")}}, {{jsxref("Array.indexOf", "indexOf")}}, etc.) take into account the value of an array's {{jsxref("Array.length", "length")}} property when they're called. Other methods (e.g., {{jsxref("Array.push", "push")}}, {{jsxref("Array.splice", "splice")}}, etc.) also result in updates to an array's {{jsxref("Array.length", "length")}} property.</p> + +<pre class="brush: js">var fruits = []; +fruits.push('banana', 'apple', 'peach'); + +console.log(fruits.length); // 3 +</pre> + +<p>When setting a property on a JavaScript array when the property is a valid array index and that index is outside the current bounds of the array, the engine will update the array's {{jsxref("Array.length", "length")}} property accordingly:</p> + +<pre class="brush: js">fruits[5] = 'mango'; +console.log(fruits[5]); // 'mango' +console.log(Object.keys(fruits)); // ['0', '1', '2', '5'] +console.log(fruits.length); // 6 +</pre> + +<p>Increasing the {{jsxref("Array.length", "length")}}.</p> + +<pre class="brush: js">fruits.length = 10; +console.log(Object.keys(fruits)); // ['0', '1', '2', '5'] +console.log(fruits.length); // 10 +</pre> + +<p>Decreasing the {{jsxref("Array.length", "length")}} property does, however, delete elements.</p> + +<pre class="brush: js">fruits.length = 2; +console.log(Object.keys(fruits)); // ['0', '1'] +console.log(fruits.length); // 2 +</pre> + +<p>This is explained further on the {{jsxref("Array.length")}} page.</p> + +<h3 id="Creating_an_array_using_the_result_of_a_match">Creating an array using the result of a match</h3> + +<p>The result of a match between a regular expression and a string can create a JavaScript array. This array has properties and elements which provide information about the match. Such an array is returned by {{jsxref("RegExp.exec")}}, {{jsxref("String.match")}}, and {{jsxref("String.replace")}}. To help explain these properties and elements, look at the following example and then refer to the table below:</p> + +<pre class="brush: js">// Match one d followed by one or more b's followed by one d +// Remember matched b's and the following d +// Ignore case + +var myRe = /d(b+)(d)/i; +var myArray = myRe.exec('cdbBdbsbz'); +</pre> + +<p>The properties and elements returned from this match are as follows:</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td class="header">Property/Element</td> + <td class="header">Description</td> + <td class="header">Example</td> + </tr> + <tr> + <td><code>input</code></td> + <td>A read-only property that reflects the original string against which the regular expression was matched.</td> + <td>cdbBdbsbz</td> + </tr> + <tr> + <td><code>index</code></td> + <td>A read-only property that is the zero-based index of the match in the string.</td> + <td>1</td> + </tr> + <tr> + <td><code>[0]</code></td> + <td>A read-only element that specifies the last matched characters.</td> + <td>dbBd</td> + </tr> + <tr> + <td><code>[1], ...[n]</code></td> + <td>Read-only elements that specify the parenthesized substring matches, if included in the regular expression. The number of possible parenthesized substrings is unlimited.</td> + <td>[1]: bB<br> + [2]: d</td> + </tr> + </tbody> +</table> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt><code>Array.length</code></dt> + <dd>The <code>Array</code> constructor's length property whose value is 1.</dd> + <dt>{{jsxref("Array.@@species", "get Array[@@species]")}}</dt> + <dd>The constructor function that is used to create derived objects.</dd> + <dt>{{jsxref("Array.prototype")}}</dt> + <dd>Allows the addition of properties to all array objects.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{jsxref("Array.from()")}}</dt> + <dd>Creates a new <code>Array</code> instance from an array-like or iterable object.</dd> + <dt>{{jsxref("Array.isArray()")}}</dt> + <dd>Returns true if a variable is an array, if not false.</dd> + <dt>{{jsxref("Array.of()")}}</dt> + <dd>Creates a new <code>Array</code> instance with a variable number of arguments, regardless of number or type of the arguments.</dd> +</dl> + +<h2 id="Array_instances"><code>Array</code> instances</h2> + +<p>All <code>Array</code> instances inherit from {{jsxref("Array.prototype")}}. The prototype object of the <code>Array</code> constructor can be modified to affect all <code>Array</code> instances.</p> + +<h3 id="Properties_2">Properties</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Properties')}}</div> + +<h3 id="Methods_2">Methods</h3> + +<h4 id="Mutator_methods">Mutator methods</h4> + +<div>{{page('en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Mutator_methods')}}</div> + +<h4 id="Accessor_methods">Accessor methods</h4> + +<div>{{page('en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Accessor_methods')}}</div> + +<h4 id="Iteration_methods">Iteration methods</h4> + +<div>{{page('en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Iteration_methods')}}</div> + +<h2 id="Array_generic_methods"><code>Array</code> generic methods</h2> + +<div class="warning"> +<p><strong>Array generics are non-standard, deprecated and will get removed near future</strong>. Note that you can not rely on them cross-browser. However, there is a <a href="https://github.com/plusdude/array-generics">shim available on GitHub</a>.</p> +</div> + +<p>Sometimes you would like to apply array methods to strings or other array-like objects (such as function {{jsxref("Functions/arguments", "arguments", "", 1)}}). By doing this, you treat a string as an array of characters (or otherwise treat a non-array as an array). For example, in order to check that every character in the variable <var>str</var> is a letter, you would write:</p> + +<pre class="brush: js">function isLetter(character) { + return character >= 'a' && character <= 'z'; +} + +if (Array.prototype.every.call(str, isLetter)) { + console.log("The string '" + str + "' contains only letters!"); +} +</pre> + +<p>This notation is rather wasteful and JavaScript 1.6 introduced a generic shorthand:</p> + +<pre class="brush: js">if (Array.every(str, isLetter)) { + console.log("The string '" + str + "' contains only letters!"); +} +</pre> + +<p>{{jsxref("Global_Objects/String", "Generics", "#String_generic_methods", 1)}} are also available on {{jsxref("String")}}.</p> + +<p>These are <strong>not</strong> part of ECMAScript standards (though the ES6 {{jsxref("Array.from()")}} can be used to achieve this). The following is a shim to allow its use in all browsers:</p> + +<pre class="brush: js">// Assumes Array extras already present (one may use polyfills for these as well) +(function() { + 'use strict'; + + var i, + // We could also build the array of methods with the following, but the + // getOwnPropertyNames() method is non-shimable: + // Object.getOwnPropertyNames(Array).filter(function(methodName) { + // return typeof Array[methodName] === 'function' + // }); + methods = [ + 'join', 'reverse', 'sort', 'push', 'pop', 'shift', 'unshift', + 'splice', 'concat', 'slice', 'indexOf', 'lastIndexOf', + 'forEach', 'map', 'reduce', 'reduceRight', 'filter', + 'some', 'every', 'find', 'findIndex', 'entries', 'keys', + 'values', 'copyWithin', 'includes' + ], + methodCount = methods.length, + assignArrayGeneric = function(methodName) { + if (!Array[methodName]) { + var method = Array.prototype[methodName]; + if (typeof method === 'function') { + Array[methodName] = function() { + return method.call.apply(method, arguments); + }; + } + } + }; + + for (i = 0; i < methodCount; i++) { + assignArrayGeneric(methods[i]); + } +}()); +</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="Creating_an_array">Creating an array</h3> + +<p>The following example creates an array, <code>msgArray</code>, with a length of 0, then assigns values to <code>msgArray[0]</code> and <code>msgArray[99]</code>, changing the length of the array to 100.</p> + +<pre class="brush: js">var msgArray = []; +msgArray[0] = 'Hello'; +msgArray[99] = 'world'; + +if (msgArray.length === 100) { + console.log('The length is 100.'); +} +</pre> + +<h3 id="Creating_a_two-dimensional_array">Creating a two-dimensional array</h3> + +<p>The following creates a chess board as a two dimensional array of strings. The first move is made by copying the 'p' in (6,4) to (4,4). The old position (6,4) is made blank.</p> + +<pre class="brush: js">var board = [ + ['R','N','B','Q','K','B','N','R'], + ['P','P','P','P','P','P','P','P'], + [' ',' ',' ',' ',' ',' ',' ',' '], + [' ',' ',' ',' ',' ',' ',' ',' '], + [' ',' ',' ',' ',' ',' ',' ',' '], + [' ',' ',' ',' ',' ',' ',' ',' '], + ['p','p','p','p','p','p','p','p'], + ['r','n','b','q','k','b','n','r'] ]; + +console.log(board.join('\n') + '\n\n'); + +// Move King's Pawn forward 2 +board[4][4] = board[6][4]; +board[6][4] = ' '; +console.log(board.join('\n')); +</pre> + +<p>Here is the output:</p> + +<pre class="eval">R,N,B,Q,K,B,N,R +P,P,P,P,P,P,P,P + , , , , , , , + , , , , , , , + , , , , , , , + , , , , , , , +p,p,p,p,p,p,p,p +r,n,b,q,k,b,n,r + +R,N,B,Q,K,B,N,R +P,P,P,P,P,P,P,P + , , , , , , , + , , , , , , , + , , , ,p, , , + , , , , , , , +p,p,p,p, ,p,p,p +r,n,b,q,k,b,n,r +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4', 'Array')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>New methods added: {{jsxref("Array.isArray")}}, {{jsxref("Array.prototype.indexOf", "indexOf")}}, {{jsxref("Array.prototype.lastIndexOf", "lastIndexOf")}}, {{jsxref("Array.prototype.every", "every")}}, {{jsxref("Array.prototype.some", "some")}}, {{jsxref("Array.prototype.forEach", "forEach")}}, {{jsxref("Array.prototype.map", "map")}}, {{jsxref("Array.prototype.filter", "filter")}}, {{jsxref("Array.prototype.reduce", "reduce")}}, {{jsxref("Array.prototype.reduceRight", "reduceRight")}}</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array-objects', 'Array')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New methods added: {{jsxref("Array.from")}}, {{jsxref("Array.of")}}, {{jsxref("Array.prototype.find", "find")}}, {{jsxref("Array.prototype.findIndex", "findIndex")}}, {{jsxref("Array.prototype.fill", "fill")}}, {{jsxref("Array.prototype.copyWithin", "copyWithin")}}</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array-objects', 'Array')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>New method added: {{jsxref("Array.prototype.includes()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Indexing_object_properties">JavaScript Guide: “Indexing object properties”</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Predefined_Core_Objects#Array_Object">JavaScript Guide: “Predefined Core Objects: <code>Array</code> Object”</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Array_comprehensions">Array comprehensions</a></li> + <li><a href="https://github.com/plusdude/array-generics">Polyfill for JavaScript 1.8.5 Array Generics and ECMAScript 5 Array Extras</a></li> + <li><a href="/en-US/docs/JavaScript_typed_arrays">Typed Arrays</a></li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/array/isarray/index.html b/files/id/web/javascript/reference/global_objects/array/isarray/index.html new file mode 100644 index 0000000000..152b6cdfd0 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/array/isarray/index.html @@ -0,0 +1,144 @@ +--- +title: Array.isArray() +slug: Web/JavaScript/Reference/Global_Objects/Array/isArray +tags: + - Array + - ECMAScript5 + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/isArray +--- +<div>{{JSRef}}</div> + +<p>Method <code><strong>Array.isArray()</strong></code> mengembalikan nilai <code>true</code> jika objek adalah array, <code>false</code> jika bukan.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><code>Array.isArray(<var>obj</var>)</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>Objek yang di cek.</dd> +</dl> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Baca artikel <a href="http://web.mit.edu/jwalden/www/isArray.html">“Determining with absolute accuracy whether or not a JavaScript object is an array”</a> untuk detailnya.</p> + +<h2 id="Contoh">Contoh</h2> + +<pre class="brush: js">// semuanya mengembalikan nilai true +Array.isArray([]); +Array.isArray([1]); +Array.isArray(new Array()); +// Sekedar fakta : Array.prototype sendiri adalah array: +Array.isArray(Array.prototype); + +// semua mengembalikan nilai false +Array.isArray(); +Array.isArray({}); +Array.isArray(null); +Array.isArray(undefined); +Array.isArray(17); +Array.isArray('Array'); +Array.isArray(true); +Array.isArray(false); +Array.isArray({ __proto__: Array.prototype }); +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Jalankan kode berikut sebelum kode lain untuk membuat method <code>Array.isArray()</code> jika secara native tidak tersedia.</p> + +<pre class="brush: js">if (!Array.isArray) { + Array.isArray = function(arg) { + return Object.prototype.toString.call(arg) === '[object Array]'; + }; +} +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.3.2', 'Array.isArray')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.isarray', 'Array.isArray')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.isarray', 'Array.isArray')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Browser">Kompabilitas Browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("5")}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatOpera("10.5")}}</td> + <td>{{CompatSafari("5")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li>{{jsxref("Array")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/array/join/index.html b/files/id/web/javascript/reference/global_objects/array/join/index.html new file mode 100644 index 0000000000..8ddd3bb8ed --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/array/join/index.html @@ -0,0 +1,132 @@ +--- +title: Array.prototype.join() +slug: Web/JavaScript/Reference/Global_Objects/Array/join +tags: + - Array + - Method + - Referensi +translation_of: Web/JavaScript/Reference/Global_Objects/Array/join +--- +<div>{{JSRef}}</div> + +<p>Method <code><strong>join()</strong></code> menggabungkan semua elemen dari sebuah array menjadi sebuah string.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>str</var> = <var>arr</var>.join([<var>separator</var> = ','])</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>separator</code></dt> + <dd>Opsional. Menentukan string untuk memisahkan setiap elemen array. separator dapat di konersi ke string jika diperlukan. Jika dihilangkan, elemen array akan dipisahkan dengan koma, jika separator adalah string kosong, semua elemen digabungkan tanpa karakter pemisah.</dd> +</dl> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>mengonversi string dari semua elemen array dengan menggabungkannya menjadi sebuah string. Jika elemen bernilai <code>undefined</code> atau <code>null</code>, akan dikonversi menjadi string kosong.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Penggabungan_array_menggunakan_empat_cara_yang_berbeda">Penggabungan array menggunakan empat cara yang berbeda</h3> + +<p>Berikut merupakan contoh membuat array, dengan tiga elemen, kemudian menggabungkan array dengan empa cara berbeda : menggunakan separator default, koma dan spasi, plus dan string kosong.</p> + +<pre class="brush: js">var a = ['Angin', 'Air', 'Api']; +var variabel1 = a.join(); // Memberikan nilai 'Angin,Air,Api' pada variabel1 +var variabel2 = a.join(', '); // Memberikan nilai 'Angin, Air, Api' pada variabel2 +var variabel3 = a.join(' + '); // Memberikan nilai 'Angin + Air + Api' pada variabel3 +var variabel4 = a.join(''); // Memberikan nilai 'AnginAirApi' pada variabel4 +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.5', 'Array.prototype.join')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.join', 'Array.prototype.join')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.join', 'Array.prototype.join')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_browser">Kompabilitas browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Dukungan Dasar</td> + <td>{{CompatChrome("1.0")}}</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>{{CompatIE("5.5")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Dukungan Dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("String.prototype.split()")}}</li> + <li>{{jsxref("Array.prototype.toString()")}}</li> + <li>{{jsxref("TypedArray.prototype.join()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/array/length/index.html b/files/id/web/javascript/reference/global_objects/array/length/index.html new file mode 100644 index 0000000000..6e8e9e3ae8 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/array/length/index.html @@ -0,0 +1,145 @@ +--- +title: Array.length +slug: Web/JavaScript/Reference/Global_Objects/Array/length +tags: + - Array + - JavaScript + - Property + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/length +--- +<div>{{JSRef}}</div> + +<p>Properti array <code><strong>length</strong></code> merangkai atau mengembalikan angka dari sejumlah elemen pada array. berupa unsigned, 32-bit integer yang selalu lebih besar dari indeks array terbesar atau index array terakhir.</p> + +<pre class="brush: js">var items = ["sepatu", "kaos", "baju", "sweater"]; +items.length; + +// index terakhir "sweater" 3 +// returns 4</pre> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Nilai properti <code>length</code> berupa integer positif dan nilainya lebih kecil dari 2 sampai 2 pangkat 32 (2<sup>32</sup>).</p> + +<p>Anda bisa merangkai properti <code>length</code> untuk memotong array kapanpun. Ketika anda memperpanjang array dengan mengubah properti <code>length</code>, nomor dari elemen sebenarnya tidak bertambah; contoh, jika anda merangkai <code>length</code> ke 3 ketika saat ini adalah 2, array tetap berisi 2 element. Dengan begitu, properti <code>length</code> tidak selalu menunjukkan jumlah angka dari nilai yang didefinisikan pada array. Lihat juga <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#Relationship_between_length_and_numerical_properties" title="Relationship between length and numerical properties">Hubungan antara <code>length</code> dan properti numerik</a>.</p> + +<p>{{js_property_attributes(1, 0, 0)}}</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Iterasi_pada_array">Iterasi pada array</h3> + +<p>Pada contoh, <code>numbers</code> array diiterasikan melalui nilai properti array <code>length</code>. Nilai setiap elemen kemudian dikalikan.</p> + +<pre class="brush: js">var numbers = [1, 2, 3, 4, 5]; +var length = numbers.length; +for (var i = 0; i < length; i++) { + numbers[i] *= 2; +} +// numbers is now [2, 4, 6, 8, 10] +</pre> + +<h3 id="Memendekan_array">Memendekan array</h3> + +<p>Pada contoh memendekkan array <code>numbers</code> ke panjang array 3 jika panjang array sebenarnya lebih besar dari 3.</p> + +<pre class="brush: js">var numbers = [1,2,3,4,5]; + +if (numbers.length > 3) { + numbers.length = 3; +} + +console.log(numbers); // [1, 2, 3] +console.log(numbers.length); // 3 +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.5.2', 'Array.length')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-properties-of-array-instances-length', 'Array.length')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-properties-of-array-instances-length', 'Array.length')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Browser">Kompabilitas Browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("Array")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/array/of/index.html b/files/id/web/javascript/reference/global_objects/array/of/index.html new file mode 100644 index 0000000000..49ca553133 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/array/of/index.html @@ -0,0 +1,129 @@ +--- +title: Array.of() +slug: Web/JavaScript/Reference/Global_Objects/Array/of +tags: + - Array + - JavaScript + - Method +translation_of: Web/JavaScript/Reference/Global_Objects/Array/of +--- +<div>{{JSRef}}</div> + +<p>Method <code><strong>Array.of()</strong></code> membuat instansi <code>Array</code> baru denganjumlah variabel argumen.</p> + +<p>Perbedaan antara <code><strong>Array.of()</strong></code> dan konstruktor <code><strong>Array</strong></code> pada penanganan argumen integer: <code><strong>Array.of(42)</strong></code> membuat sebuah array dengan sebuah elemen, <code>42</code>, sedang <code><strong>Array(42)</strong></code> membuat array dengan 42 element, yang masing - masing <code>undefined</code>.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><code>Array.of(<var>element0</var>[, <var>element1</var>[, ...[, <var>elementN</var>]]])</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>element<em>N</em></code></dt> + <dd>Element yang digunakan untuk membuat array.</dd> +</dl> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Fungsi ini merupakan bagian dari ECMAScript 6 standard. Untuk informasi lengkap lihat <a href="https://gist.github.com/rwaldron/1074126"><code>Array.of</code> and <code>Array.from</code> proposal</a> dan <a href="https://gist.github.com/rwaldron/3186576"><code>Array.of</code> polyfill</a>.</p> + +<h2 id="Contoh">Contoh</h2> + +<pre class="brush: js">Array.of(1); // [1] +Array.of(1, 2, 3); // [1, 2, 3] +Array.of(undefined); // [undefined] +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Menjalankan kode berikut sebelum kode lain membuat <code>Array.of()</code> jika secara native tidak tersedia.</p> + +<pre class="brush: js">if (!Array.of) { + Array.of = function() { + return Array.prototype.slice.call(arguments); + }; +} +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.of', 'Array.of')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.of', 'Array.of')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_browser">Kompabilitas browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(45)}}</td> + <td>{{CompatGeckoDesktop("25")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(39)}}</td> + <td>{{CompatGeckoMobile("25")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Array.from()")}}</li> + <li>{{jsxref("TypedArray.of()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/array/pop/index.html b/files/id/web/javascript/reference/global_objects/array/pop/index.html new file mode 100644 index 0000000000..f8dc9f0523 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/array/pop/index.html @@ -0,0 +1,134 @@ +--- +title: Array.prototype.pop() +slug: Web/JavaScript/Reference/Global_Objects/Array/pop +tags: + - Array + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Array/pop +--- +<div>{{JSRef}}</div> + +<p>Method <code><strong>pop()</strong></code> menghapus elemen <strong>terakhir</strong> dari array dan mengembalikan elemen tersebut.</p> + +<h2 id="Syntaks">Syntaks</h2> + +<pre class="syntaxbox"><code><var>arr</var>.pop()</code></pre> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Method <code>pop</code> menghapus elemen terakhir pada array dan mengembalikan nilai ke pemanggil.</p> + +<p><code>pop</code> adalah desain generic; method ini dapat berupa {{jsxref("Function.call", "called", "", 1)}} atau {{jsxref("Function.apply", "applied", "", 1)}} ke objek yang menyerupai array. Objek yang tidak memiliki properti <code>length</code> mencerminkan akhir dari urutan, properti numerik yang berbasis zero mungkin tidak memiliki makna yang berarti.</p> + +<p>jika anda menggunakan <code>pop()</code> pada array yang kosong, akan mengembalikan nilai {{jsxref("undefined")}}.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Menghapus_elemen_terakhir_pada_array">Menghapus elemen terakhir pada array</h3> + +<p>Kode berikut membuat array <code>myFish</code> yang memiliki empat elemen, kemudian menghapus elemen teakhirnya.</p> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; + +console.log(myFish); // ['angel', 'clown', 'mandarin', 'sturgeon'] + +var popped = myFish.pop(); + +console.log(myFish); // ['angel', 'clown', 'mandarin' ] + +console.log(popped); // 'sturgeon'</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.6', 'Array.prototype.pop')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.pop', 'Array.prototype.pop')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.pop', 'Array.prototype.pop')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_browser">Kompabilitas browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("1.0")}}</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>{{CompatIE("5.5")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()")}}</li> + <li>{{jsxref("Array.prototype.shift()")}}</li> + <li>{{jsxref("Array.prototype.unshift()")}}</li> + <li>{{jsxref("Array.prototype.splice()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/array/reverse/index.html b/files/id/web/javascript/reference/global_objects/array/reverse/index.html new file mode 100644 index 0000000000..dca16b463e --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/array/reverse/index.html @@ -0,0 +1,127 @@ +--- +title: Array.prototype.reverse() +slug: Web/JavaScript/Reference/Global_Objects/Array/reverse +tags: + - Array + - Method +translation_of: Web/JavaScript/Reference/Global_Objects/Array/reverse +--- +<div>{{JSRef}}</div> + +<p>Method <code><strong>reverse()</strong></code> membalikkan urutan array elemen. Elemen array pertama menjadi terakhir dan sebaliknya.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><code><var>arr</var>.reverse()</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<p>None.</p> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Method <code>reverse</code> mengubah urutan elemen objek array, memutasi array, dan mengembalikan referensi ke array.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Membalikan_elemen_di_dalam_array">Membalikan elemen di dalam array</h3> + +<p>Pada contoh membuat array <code>myArray </code>dengan tiga elemen, kemudian membalikkan array.</p> + +<pre class="brush: js">var myArray = ['one', 'two', 'three']; +myArray.reverse(); + +console.log(myArray) // ['three', 'two', 'one'] +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.8', 'Array.prototype.reverse')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_browser">Kompabilitas browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("1.0")}}</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>{{CompatIE("5.5")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("Array.prototype.join()")}}</li> + <li>{{jsxref("Array.prototype.sort()")}}</li> + <li>{{jsxref("TypedArray.prototype.reverse()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/array/shift/index.html b/files/id/web/javascript/reference/global_objects/array/shift/index.html new file mode 100644 index 0000000000..ac20d5cd60 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/array/shift/index.html @@ -0,0 +1,129 @@ +--- +title: Array.prototype.shift() +slug: Web/JavaScript/Reference/Global_Objects/Array/shift +translation_of: Web/JavaScript/Reference/Global_Objects/Array/shift +--- +<div>{{JSRef}}</div> + +<p>method <code><strong>shift()</strong></code> menghapus elemen <strong>pertama</strong> pada array dan mengembalikan elemen tersebut. Method ini mengubah panjang (jumlah elemen) array.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><code><var>arr</var>.shift()</code></pre> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Method <code>shift</code> menghapus elemen pada index 0 dan menggeser nilai index setelahnya, kemudian mengembalikan nilai yang dihapus. Jika properti {{jsxref("Array.length", "length")}} bernilai 0, maka akan mengembalikan nilai {{jsxref("undefined")}}.</p> + +<p><code>shift</code> adalah desain generic; method ini dapat berupa {{jsxref("Function.call", "called", "", 1)}} atau {{jsxref("Function.apply", "applied", "", 1)}} pada objek yag menyerupai array. Objek yang tidak memiliki properti <code>length</code> akan dianggap terakhir dalam urutan, properti numerik berbasis zero mungkin tidak memiliki makna yang berarti.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Menghapus_Elemen_dari_sebuah_Array">Menghapus Elemen dari sebuah Array</h3> + +<p>Kode berikut menampilkan array <code>myFish</code> sebelum dan sesudah menghapus elemen pertama. Juga menampilkan elemen yang dihapus:</p> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'surgeon']; + +console.log('myFish sebelum: ' + myFish); +// myFish sebelum: angel,clown,mandarin,surgeon + +var shifted = myFish.shift(); + +console.log('myFish sesudah: ' + myFish); +// myFish sesudah: clown,mandarin,surgeon + +console.log('Elemen yang dihapus: ' + shifted); +// Elemen yang dihapus: angel</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.9', 'Array.prototype.shift')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.shift', 'Array.prototype.shift')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.shift', 'Array.prototype.shift')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabiltas_browser">Kompabiltas browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("1.0")}}</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>{{CompatIE("5.5")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()")}}</li> + <li>{{jsxref("Array.prototype.pop()")}}</li> + <li>{{jsxref("Array.prototype.unshift()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/array/slice/index.html b/files/id/web/javascript/reference/global_objects/array/slice/index.html new file mode 100644 index 0000000000..44f018ba65 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/array/slice/index.html @@ -0,0 +1,152 @@ +--- +title: Array.prototype.slice() +slug: Web/JavaScript/Reference/Global_Objects/Array/slice +translation_of: Web/JavaScript/Reference/Global_Objects/Array/slice +--- +<div>{{JSRef}}</div> + +<p>Method <code><strong>slice()</strong></code> mengembalikan sebuah salinan dangkal dari sebagian array menjadi sebuah objek array baru yang dimulai dari <code>start</code> sampai <code>end</code> (<code>end</code> tidak termasuk) dimana <code>start</code> dan <code>end</code> merupakan index dari item yang ada di array tersebut. Tidak merubah array asli.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-slice.html")}}</div> + +<p class="hidden">The source for this interactive demo is stored in a GitHub repository. If you'd like to contribute to the interactive demo project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox notranslate"><var>arr</var>.slice([<var>start</var>[, <var>end</var>]]) +</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code><var>start</var></code> {{optional_inline}}</dt> + <dd>Indeks berbasis nol untuk memulai ekstraksi.</dd> + <dd><br> + Indeks negatif dapat digunakan, menunjukkan offset dari akhir urutan.. <code>slice(-2)</code> mengekstrak dua elemen terakhir dari urutan.</dd> + <dd>Jika <code><var>start</var></code> tidak terdefinisi, <code>slice</code> memulai dari indeks ke <code>0</code>.</dd> + <dd>Jika <code><var>start</var></code> lebih besar dari indeks urutan, array kosong akan dikembalikan.</dd> + <dt><code><var>end</var></code> {{optional_inline}}</dt> + <dd>Indeks berbasis nol untuk mengakhiri ekstraksi. <code>slice</code> mengekstrak hingga tapi tidak termasuk <code><var>end</var></code>. Sebagai contoh, <code>slice(1,4)</code> mengekstrak elemen kedua menuju elemen ke-empat (indeks elemen 1, 2, dan 3).</dd> + <dd> + <p>Indeks negatif bisa digunakan,<br> + menunjukkan offset dari akhir urutan. <code>slice(2,-1)</code> mengekstrak elemen ketiga menuju elemen kedua-ke-terakhir dalam urutan.</p> + </dd> + <dd>Jika <code><var>end</var></code> dihillangkan, <code>slice</code> mengekstrak melalui akhir dari urutan (<code><var>arr</var>.length</code>).</dd> + <dd>Jika <code><var>end</var></code> lebih besar dari panjang urutan, <code>slice</code> mengkstrak melalui akhir urutan (<code><var>arr</var>.length</code>).</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>Array baru berisi elemen yang diekstrak.</p> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p><code>slice</code> does not alter the original array. It returns a shallow copy of elements from the original array. Elements of the original array are copied into the returned array as follows:</p> + +<ul> + <li>For object references (and not the actual object), <code>slice</code> copies object references into the new array. Both the original and new array refer to the same object. If a referenced object changes, the changes are visible to both the new and original arrays.</li> + <li>For strings, numbers and booleans (not {{jsxref("String")}}, {{jsxref("Number")}} and {{jsxref("Boolean")}} objects), <code>slice</code> copies the values into the new array. Changes to the string, number, or boolean in one array do not affect the other array.</li> +</ul> + +<p>If a new element is added to either array, the other array is not affected.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Return_a_portion_of_an_existing_array">Return a portion of an existing array</h3> + +<pre class="brush: js notranslate">let fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'] +let citrus = fruits.slice(1, 3) + +// fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'] +// citrus contains ['Orange','Lemon'] +</pre> + +<h3 id="Using_slice">Using <code>slice</code></h3> + +<p>In the following example, <code>slice</code> creates a new array, <code>newCar</code>, from <code>myCar</code>. Both include a reference to the object <code>myHonda</code>. When the color of <code>myHonda</code> is changed to purple, both arrays reflect the change.</p> + +<pre class="brush: js notranslate">// Using slice, create newCar from myCar. +let myHonda = { color: 'red', wheels: 4, engine: { cylinders: 4, size: 2.2 } } +let myCar = [myHonda, 2, 'cherry condition', 'purchased 1997'] +let newCar = myCar.slice(0, 2) + +// Display the values of myCar, newCar, and the color of myHonda +// referenced from both arrays. +console.log('myCar = ' + JSON.stringify(myCar)) +console.log('newCar = ' + JSON.stringify(newCar)) +console.log('myCar[0].color = ' + myCar[0].color) +console.log('newCar[0].color = ' + newCar[0].color) + +// Change the color of myHonda. +myHonda.color = 'purple' +console.log('The new color of my Honda is ' + myHonda.color) + +// Display the color of myHonda referenced from both arrays. +console.log('myCar[0].color = ' + myCar[0].color) +console.log('newCar[0].color = ' + newCar[0].color) +</pre> + +<p>This script writes:</p> + +<pre class="notranslate">myCar = [{color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}}, 2, + 'cherry condition', 'purchased 1997'] +newCar = [{color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}}, 2] +myCar[0].color = red +newCar[0].color = red +The new color of my Honda is purple +myCar[0].color = purple +newCar[0].color = purple +</pre> + +<h3 id="Array-like_objects">Array-like objects</h3> + +<p><code>slice</code> method can also be called to convert Array-like objects/collections to a new Array. You just {{jsxref("Function.prototype.bind", "bind")}} the method to the object. The {{jsxref("Functions/arguments", "arguments")}} inside a function is an example of an 'array-like object'.</p> + +<pre class="brush: js notranslate">function list() { + return Array.prototype.slice.call(arguments) +} + +let list1 = list(1, 2, 3) // [1, 2, 3] +</pre> + +<p>Binding can be done with the {{jsxref("Function.prototype.call", "call()")}} method of {{jsxref("Function.prototype")}} and it can also be reduced using <code>[].slice.call(arguments)</code> instead of <code>Array.prototype.slice.call</code>.</p> + +<p>Anyway, it can be simplified using {{jsxref("Function.prototype.bind", "bind")}}.</p> + +<pre class="brush: js notranslate">let unboundSlice = Array.prototype.slice +let slice = Function.prototype.call.bind(unboundSlice) + +function list() { + return slice(arguments) +} + +let list1 = list(1, 2, 3) // [1, 2, 3]</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.slice', 'Array.prototype.slice')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatibilitas_Peramban">Kompatibilitas Peramban</h2> + + + +<p>{{Compat("javascript.builtins.Array.slice")}}</p> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("Array.prototype.splice()")}}</li> + <li>{{jsxref("Function.prototype.call()")}}</li> + <li>{{jsxref("Function.prototype.bind()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/array/splice/index.html b/files/id/web/javascript/reference/global_objects/array/splice/index.html new file mode 100644 index 0000000000..a0c7c1cb86 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/array/splice/index.html @@ -0,0 +1,146 @@ +--- +title: Array.prototype.splice() +slug: Web/JavaScript/Reference/Global_Objects/Array/splice +tags: + - Indonesia +translation_of: Web/JavaScript/Reference/Global_Objects/Array/splice +--- +<div>{{JSRef}}</div> + +<p>Metode <code><strong>splice()</strong></code> mengubah konten dari array dengan menghapus elemen yang ada dan/atau menambah elemen baru.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-splice.html")}}</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>array</var>.splice(<var>start[</var>, <var>deleteCount[</var>, <var>item1[</var>, <var>item2[</var>, <em>...]]]]</em>) +</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>start</code></dt> + <dd>Indeks di mana untuk mulai mengubah array (dengan asal 0). Jika lebih besar dari panjang array, indeks awal sebenarnya akan diatur ke panjang array. Jika negatif, akan mulai banyak elemen dari akhir array (dengan asal -1) dan akan diset ke 0 jika nilai absolut lebih besar dari panjang array.</dd> + <dt><code>deleteCount</code> {{optional_inline}}</dt> + <dd>Sebuah integer yang menunjukkan jumlah elemen array lama yang akan dihapus.</dd> + <dd>Jika <code>deleteCount</code> dihilangkan, atau jika nilainya lebih besar dari <code>array.length - start</code> (yaitu, jika lebih besar dari jumlah elemen yang tersisa dalam array, mulai dari <code>start</code>), maka semua elemen dari <code>start</code> sampai akhir dari array akan dihapus.</dd> + <dd>Jika <code>deleteCount</code> adalah 0 atau negatif, tidak ada elemen yang dihapus. Dalam kasus ini, Anda harus menentukan setidaknya satu elemen baru (lihat di bawah).</dd> + <dt><code>item1, item2, <em>...</em></code> {{optional_inline}}</dt> + <dd>Elemen yang ditambahkan ke array, <code>dimulai</code> pada indeks awal. Jika kamu tidak menentukan elemen apapun, <code>splice()</code> hanya akan menghapus elemen-elemen dari array.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p><span id="result_box" lang="id"><span>Array berisi elemen yang dihapus.</span> <span>Jika hanya satu elemen yang dihapus, array dari satu elemen dikembalikan.</span> <span>Jika tidak ada elemen yang dihapus, sebuah array kosong akan dikembalikan.</span></span></p> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Jika anda menentukan elemen yang berbeda untuk disisipkan daripada nomor yang anda hapus, array akan memiliki panjang yang berbeda ketika kamu memanggilnya nanti.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Remove_0_elements_from_index_2_and_insert_drum">Remove 0 elements from index 2, and insert "drum"</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; +var removed = myFish.splice(2, 0, 'drum'); + +// myFish is ["angel", "clown", "drum", "mandarin", "sturgeon"] +// removed is [], no elements removed +</pre> + +<h3 id="Remove_1_element_from_index_3">Remove 1 element from index 3</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon']; +var removed = myFish.splice(3, 1); + +// removed is ["mandarin"] +// myFish is ["angel", "clown", "drum", "sturgeon"] +</pre> + +<h3 id="Remove_1_element_from_index_2_and_insert_trumpet">Remove 1 element from index 2, and insert "trumpet"</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'drum', 'sturgeon']; +var removed = myFish.splice(2, 1, 'trumpet'); + +// myFish is ["angel", "clown", "trumpet", "sturgeon"] +// removed is ["drum"]</pre> + +<h3 id="Remove_2_elements_from_index_0_and_insert_parrot_anemone_and_blue">Remove 2 elements from index 0, and insert "parrot", "anemone" and "blue"</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'trumpet', 'sturgeon']; +var removed = myFish.splice(0, 2, 'parrot', 'anemone', 'blue'); + +// myFish is ["parrot", "anemone", "blue", "trumpet", "sturgeon"] +// removed is ["angel", "clown"]</pre> + +<h3 id="Remove_2_elements_from_index_2">Remove 2 elements from index 2</h3> + +<pre class="brush: js">var myFish = ['parrot', 'anemone', 'blue', 'trumpet', 'sturgeon']; +var removed = myFish.splice(myFish.length - 3, 2); + +// myFish is ["parrot", "anemone", "sturgeon"] +// removed is ["blue", "trumpet"]</pre> + +<h3 id="Remove_1_element_from_index_-2">Remove 1 element from index -2</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; +var removed = myFish.splice(-2, 1); + +// myFish is ["angel", "clown", "sturgeon"] +// removed is ["mandarin"]</pre> + +<h3 id="Remove_all_elements_after_index_2_(incl.)">Remove all elements after index 2 (incl.)</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; +var removed = myFish.splice(2); + +// myFish is ["angel", "clown"] +// removed is ["mandarin", "sturgeon"]</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.12', 'Array.prototype.splice')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.splice', 'Array.prototype.splice')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.splice', 'Array.prototype.splice')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.splice")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()", "push()")}} / {{jsxref("Array.prototype.pop()", "pop()")}} — add/remove elements from the end of the array</li> + <li>{{jsxref("Array.prototype.unshift()", "unshift()")}} / {{jsxref("Array.prototype.shift()", "shift()")}} — add/remove elements from the beginning of the array</li> + <li>{{jsxref("Array.prototype.concat()", "concat()")}} — returns a new array comprised of this array joined with other array(s) and/or value(s)</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/array/unshift/index.html b/files/id/web/javascript/reference/global_objects/array/unshift/index.html new file mode 100644 index 0000000000..4df2069f54 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/array/unshift/index.html @@ -0,0 +1,135 @@ +--- +title: Array.prototype.unshift() +slug: Web/JavaScript/Reference/Global_Objects/Array/unshift +translation_of: Web/JavaScript/Reference/Global_Objects/Array/unshift +--- +<div>{{JSRef}}</div> + +<p>Method <code><strong>unshift()</strong></code> menambahkan satu atau lebih elemen ke indek awal array dan mengembalikan jumlah index array yang baru.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><code><var>arr</var>.unshift([<var>element1</var>[, ...[, <var>elementN</var>]]])</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>element<em>N</em></code></dt> + <dd>Elemen yang akan di tambahkan di awal array.</dd> +</dl> + +<h3 id="Returns">Returns</h3> + +<p>Properti {{jsxref("Array.length", "length")}} baru dari objek teratas dimana method di panggil.</p> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Method <code>unshift</code> menambahkan nilai yang diberikan ke awal objek array.</p> + +<p><code>unshift</code> biasanya generic; method ini bisa berupa {{jsxref("Function.call", "called", "", 1)}} atau {{jsxref("Function.apply", "applied", "", 1)}} ke objek menyerupai array. Objek yang tidak memiliki properti <code>length</code> mencerminkan dari serangkaian urutan, properti numerik berbasis zero kemungkinan tidak berperilaku dengan cara yang berarti.</p> + +<h2 id="Contoh">Contoh</h2> + +<pre class="brush: js">var arr = [1, 2]; + +arr.unshift(0); // result of call is 3, the new array length +// arr is [0, 1, 2] + +arr.unshift(-2, -1); // = 5 +// arr is [-2, -1, 0, 1, 2] + +arr.unshift([-3]); +// arr is [[-3], -2, -1, 0, 1, 2] +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.13', 'Array.prototype.unshift')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Browser">Kompabilitas Browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("1.0")}}</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>{{CompatIE("5.5")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()")}}</li> + <li>{{jsxref("Array.prototype.pop()")}}</li> + <li>{{jsxref("Array.prototype.shift()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/array/values/index.html b/files/id/web/javascript/reference/global_objects/array/values/index.html new file mode 100644 index 0000000000..dd77cc65a5 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/array/values/index.html @@ -0,0 +1,120 @@ +--- +title: Array.prototype.values() +slug: Web/JavaScript/Reference/Global_Objects/Array/values +translation_of: Web/JavaScript/Reference/Global_Objects/Array/values +--- +<div>{{JSRef}}</div> + +<p>Method <strong><code>values()</code></strong> mengembalikan objek <strong><code>Array Iterator</code></strong> baru yang berisi nilai setiap index pada array.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><var>arr</var>.values()</pre> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Iterasi_menggunakan_for...of_loop">Iterasi menggunakan <code>for...of</code> loop</h3> + +<pre class="brush: js">var arr = ['w', 'y', 'k', 'o', 'p']; +var eArr = arr.values(); +// your browser must support for..of loop +// and let-scoped variables in for loops +for (let letter of eArr) { + console.log(letter); +} +</pre> + +<h3 id="Iterasi_alternatif">Iterasi alternatif</h3> + +<pre class="brush: js">var arr = ['w', 'y', 'k', 'o', 'p']; +var eArr = arr.values(); +console.log(eArr.next().value); // w +console.log(eArr.next().value); // y +console.log(eArr.next().value); // k +console.log(eArr.next().value); // o +console.log(eArr.next().value); // p +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.values', 'Array.prototype.values')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.values', 'Array.prototype.values')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Browser">Kompabilitas Browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("51")}}</td> + <td>{{CompatGeckoDesktop(48)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>9</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome("51")}}</td> + <td>{{CompatGeckoMobile(48)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("Array.prototype.keys()")}}</li> + <li>{{jsxref("Array.prototype.entries()")}}</li> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/date/getfullyear/index.html b/files/id/web/javascript/reference/global_objects/date/getfullyear/index.html new file mode 100644 index 0000000000..08e657aeec --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/date/getfullyear/index.html @@ -0,0 +1,88 @@ +--- +title: Date.prototype.getFullYear() +slug: Web/JavaScript/Reference/Global_Objects/Date/getFullYear +tags: + - Date + - JavaScript + - Metode + - Prototype + - Referensi +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getFullYear +--- +<div>{{JSRef}}</div> + +<p>Metode <strong><code>getFullYear()</code></strong> mengembanlikan tahun dari tanggal yang dispesifikasi, mengikuti waktu lokal.</p> + +<p>Gunakan metode ini ketimbang metode {{jsxref("Date.prototype.getYear()", "getYear()")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-getfullyear.html")}}</div> + +<p class="hidden">Sumber untuk contoh interaktif ini disimpan di repository GitHub. Jika kamu ingin berkontribusi ke project contoh interaktif ini, silakan clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> dan kirimi kamu pull request.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.getFullYear()</code></pre> + +<h3 id="Nilai_kembali">Nilai kembali</h3> + +<p>Angka yang berkorespondensi ke tahuny dari tanggal yang diberikan, mengikuti waktu lokal.</p> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Nilai yang dikembalikan oleh <code>getFullYear()</code> is an absolute number. For dates between the years 1000 and 9999, <code>getFullYear()</code> returns a four-digit number, for example, 1995. Use this function to make sure a year is compliant with years after 2000.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Menggunakan_getFullYear()">Menggunakan <code>getFullYear()</code></h3> + +<p>Contoh ini menggassign nilai empat-digit dari tahun saat ini ke variabel <code>year</code>.</p> + +<pre class="brush: js">var today = new Date(); +var year = today.getFullYear(); +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Komen</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definisi inisial. Diimplementasi di JavaScript 1.3.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.10', 'Date.prototype.getFullYear')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.getfullyear', 'Date.prototype.getFullYear')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.getfullyear', 'Date.prototype.getFullYear')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatibilitas_peramban">Kompatibilitas peramban</h2> + +<p class="hidden">Tabel kompatibilitas di laman ini digenerate dari data terstruktur. Jika kamu ingin berkontribusi ke datanya, silakan check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> dan kirimi kami pull request.</p> + +<p>{{Compat("javascript.builtins.Date.getFullYear")}}</p> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li> + <li>{{jsxref("Date.prototype.setFullYear()")}}</li> + <li>{{jsxref("Date.prototype.getYear()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/date/index.html b/files/id/web/javascript/reference/global_objects/date/index.html new file mode 100644 index 0000000000..1fc6272dcf --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/date/index.html @@ -0,0 +1,261 @@ +--- +title: Date +slug: Web/JavaScript/Reference/Global_Objects/Date +tags: + - Date + - JavaScript + - NeedsTranslation + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/Date +--- +<div>{{JSRef}}</div> + +<p>Creates a JavaScript <strong><code>Date</code></strong> instance that represents a single moment in time. <code>Date</code> objects are based on a time value that is the number of milliseconds since 1 January, 1970 UTC.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>new Date(); +new Date(<var>value</var>); +new Date(<var>dateString</var>); +new Date(<var>year</var>, <var>month</var>[, <var>day</var>[, <var>hour</var>[, <var>minutes</var>[, <var>seconds</var>[, <var>milliseconds</var>]]]]]); +</code></pre> + +<div class="note"> +<p><strong>Note:</strong> JavaScript <code>Date</code> objects can only be instantiated by calling JavaScript <code>Date</code> as a constructor: calling it as a regular function (i.e. without the {{jsxref("Operators/new", "new")}} operator) will return a string rather than a <code>Date</code> object; unlike other JavaScript object types, JavaScript <code>Date</code> objects have no literal syntax.</p> +</div> + +<h3 id="Parameters">Parameters</h3> + +<div class="note"> +<p><strong>Note:</strong> Where <code>Date</code> is called as a constructor with more than one argument, if values are greater than their logical range (e.g. 13 is provided as the month value or 70 for the minute value), the adjacent value will be adjusted. E.g. <code>new Date(2013, 13, 1)</code> is equivalent to <code>new Date(2014, 1, 1)</code>, both create a date for <code>2014-02-01</code> (note that the month is 0-based). Similarly for other values: <code>new Date(2013, 2, 1, 0, 70)</code> is equivalent to <code>new Date(2013, 2, 1, 1, 10)</code> which both create a date for <code>2013-03-01T01:10:00</code>.</p> +</div> + +<div class="note"> +<p><strong>Note:</strong> Where <code>Date</code> is called as a constructor with more than one argument, the specifed arguments represent local time. If UTC is desired, use <code>new Date({{jsxref("Date.UTC()", "Date.UTC(...)")}})</code> with the same arguments.</p> +</div> + +<dl> + <dt><code>value</code></dt> + <dd>Integer value representing the number of milliseconds since 1 January 1970 00:00:00 UTC (Unix Epoch).</dd> + <dt><code>dateString</code></dt> + <dd>String value representing a date. The string should be in a format recognized by the {{jsxref("Date.parse()")}} method (<a href="http://tools.ietf.org/html/rfc2822#page-14">IETF-compliant RFC 2822 timestamps</a> and also a <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15">version of ISO8601</a>). + <div class="note"> + <p><strong>Note:</strong> parsing of date strings with the <code>Date</code> constructor (and <code>Date.parse</code>, they are equivalent) is strongly discouraged due to browser differences and inconsistencies.</p> + </div> + </dd> + <dt><code>year</code></dt> + <dd>Integer value representing the year. Values from 0 to 99 map to the years 1900 to 1999. See the {{anch("Example:_Two_digit_years_map_to_1900_-_1999", "example below")}}.</dd> + <dt><code>month</code></dt> + <dd>Integer value representing the month, beginning with 0 for January to 11 for December.</dd> + <dt><code>day</code></dt> + <dd>Optional. Integer value representing the day of the month.</dd> + <dt><code>hour</code></dt> + <dd>Optional. Integer value representing the hour of the day.</dd> + <dt><code>minute</code></dt> + <dd>Optional. Integer value representing the minute segment of a time.</dd> + <dt><code>second</code></dt> + <dd>Optional. Integer value representing the second segment of a time.</dd> + <dt><code>millisecond</code></dt> + <dd>Optional. Integer value representing the millisecond segment of a time.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<ul> + <li>If no arguments are provided, the constructor creates a JavaScript <code>Date</code> object for the current date and time according to system settings.</li> + <li>If at least two arguments are supplied, missing arguments are either set to 1 (if day is missing) or 0 for all others.</li> + <li>The JavaScript date is based on a time value that is milliseconds since midnight 01 January, 1970 UTC. A day holds 86,400,000 milliseconds. The JavaScript <code>Date</code> object range is -100,000,000 days to 100,000,000 days relative to 01 January, 1970 UTC.</li> + <li>The JavaScript <code>Date</code> object provides uniform behavior across platforms. The time value can be passed between systems to represent the same moment in time and if used to create a local date object, will reflect the local equivalent of the time.</li> + <li>The JavaScript <code>Date</code> object supports a number of UTC (universal) methods, as well as local time methods. UTC, also known as Greenwich Mean Time (GMT), refers to the time as set by the World Time Standard. The local time is the time known to the computer where JavaScript is executed.</li> + <li>Invoking JavaScript <code>Date</code> as a function (i.e., without the {{jsxref("Operators/new", "new")}} operator) will return a string representing the current date and time.</li> +</ul> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{jsxref("Date.prototype")}}</dt> + <dd>Allows the addition of properties to a JavaScript <code>Date</code> object.</dd> + <dt><code>Date.length</code></dt> + <dd>The value of <code>Date.length</code> is 7. This is the number of arguments handled by the constructor.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{jsxref("Date.now()")}}</dt> + <dd>Returns the numeric value corresponding to the current time - the number of milliseconds elapsed since 1 January 1970 00:00:00 UTC.</dd> + <dt>{{jsxref("Date.parse()")}}</dt> + <dd>Parses a string representation of a date and returns the number of milliseconds since 1 January, 1970, 00:00:00, UTC. + <div class="note"> + <p><strong>Note:</strong> Parsing of strings with <code>Date.parse</code> is strongly discouraged due to browser differences and inconsistencies.</p> + </div> + </dd> + <dt>{{jsxref("Date.UTC()")}}</dt> + <dd>Accepts the same parameters as the longest form of the constructor (i.e. 2 to 7) and returns the number of milliseconds since 1 January, 1970, 00:00:00 UTC.</dd> +</dl> + +<h2 id="JavaScript_Date_instances">JavaScript <code>Date</code> instances</h2> + +<p>All <code>Date</code> instances inherit from {{jsxref("Date.prototype")}}. The prototype object of the <code>Date</code> constructor can be modified to affect all <code>Date</code> instances.</p> + +<h3 id="Date.prototype_Methods">Date.prototype Methods</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/prototype', 'Methods')}}</div> + +<h2 id="Examples">Examples</h2> + +<h3 id="Several_ways_to_create_a_Date_object">Several ways to create a <code>Date</code> object</h3> + +<p>The following examples show several ways to create JavaScript dates:</p> + +<div class="note"> +<p><strong>Note:</strong> parsing of date strings with the <code>Date</code> constructor (and <code>Date.parse</code>, they are equivalent) is strongly discouraged due to browser differences and inconsistencies.</p> +</div> + +<pre class="brush: js">var today = new Date(); +var birthday = new Date('December 17, 1995 03:24:00'); +var birthday = new Date('1995-12-17T03:24:00'); +var birthday = new Date(1995, 11, 17); +var birthday = new Date(1995, 11, 17, 3, 24, 0); +</pre> + +<h3 id="Two_digit_years_map_to_1900_-_1999">Two digit years map to 1900 - 1999</h3> + +<p>In order to create and get dates between the years 0 and 99 the {{jsxref("Date.prototype.setFullYear()")}} and {{jsxref("Date.prototype.getFullYear()")}} methods should be used.</p> + +<pre class="brush: js">var date = new Date(98, 1); // Sun Feb 01 1998 00:00:00 GMT+0000 (GMT) + +// Deprecated method, 98 maps to 1998 here as well +date.setYear(98); // Sun Feb 01 1998 00:00:00 GMT+0000 (GMT) + +date.setFullYear(98); // Sat Feb 01 0098 00:00:00 GMT+0000 (BST) +</pre> + +<h3 id="Calculating_elapsed_time">Calculating elapsed time</h3> + +<p>The following examples show how to determine the elapsed time between two JavaScript dates in millisconds.</p> + +<p>Due to the differing lengths of days (due to daylight saving changeover), months and years, expressing elapsed time in units greater than hours, minutes and seconds requires addressing a number of issues and should be thoroughly researched before being attempted.</p> + +<pre class="brush: js">// using Date objects +var start = Date.now(); + +// the event to time goes here: +doSomethingForALongTime(); +var end = Date.now(); +var elapsed = end - start; // elapsed time in milliseconds +</pre> + +<pre class="brush: js">// using built-in methods +var start = new Date(); + +// the event to time goes here: +doSomethingForALongTime(); +var end = new Date(); +var elapsed = end.getTime() - start.getTime(); // elapsed time in milliseconds +</pre> + +<pre class="brush: js">// to test a function and get back its return +function printElapsedTime(fTest) { + var nStartTime = Date.now(), + vReturn = fTest(), + nEndTime = Date.now(); + + console.log('Elapsed time: ' + String(nEndTime - nStartTime) + ' milliseconds'); + return vReturn; +} + +yourFunctionReturn = printElapsedTime(yourFunction); +</pre> + +<div class="note"> +<p><strong>Note:</strong> In browsers that support the {{domxref("window.performance", "Web Performance API", "", 1)}}'s high-resolution time feature, {{domxref("Performance.now()")}} can provide more reliable and precise measurements of elapsed time than {{jsxref("Date.now()")}}.</p> +</div> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date-objects', 'Date')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date-objects', 'Date')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9', 'Date')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}} [1]</td> + <td>{{CompatVersionUnknown}} [1]</td> + <td>{{CompatVersionUnknown}} [2]</td> + <td>{{CompatVersionUnknown}} [1]</td> + <td>{{CompatVersionUnknown}} [1]</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Some browsers can have issues when parsing dates: <a href="http://dygraphs.com/date-formats.html">3/14/2012 blog from danvk Comparing FF/IE/Chrome on Parsing Date Strings</a></p> + +<p>[2] <a href="https://msdn.microsoft.com/en-us//library/ie/ff743760(v=vs.94).aspx">ISO8601 Date Format is not supported</a> in Internet Explorer 8, and other version can have <a href="http://dygraphs.com/date-formats.html">issues when parsing dates</a></p> diff --git a/files/id/web/javascript/reference/global_objects/date/now/index.html b/files/id/web/javascript/reference/global_objects/date/now/index.html new file mode 100644 index 0000000000..43760a275b --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/date/now/index.html @@ -0,0 +1,124 @@ +--- +title: Date.now() +slug: Web/JavaScript/Reference/Global_Objects/Date/now +tags: + - Date + - JavaScript + - Method + - Referensi +translation_of: Web/JavaScript/Reference/Global_Objects/Date/now +--- +<div>{{JSRef}}</div> + +<p>Method <strong><code>Date.now()</code></strong> mengembalikan jumlah milisekon sejak 1 Januari 1970 00:00:00 UTC.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><code>var timeInMs = Date.now();</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<p>None.</p> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Method <code>now()</code> mengembalikan nilaimillisekon sejak 1 January 1970 00:00:00 UTC hingga sekarang sebagai {{jsxref("Number")}}.</p> + +<p>Karena <code>now()</code> adalah method static dari {{jsxref("Date")}}, anda bisa menggunakannya sebagai <code>Date.now()</code>.</p> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Method ini di bakukan pada ECMA-262 5<sup>th</sup> edition. Mesin yang belum diupdate untuk mendukung method ini bisa menggunkan shim berikut:</p> + +<pre class="brush: js">if (!Date.now) { + Date.now = function now() { + return new Date().getTime(); + }; +} +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.4.4', 'Date.now')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.now', 'Date.now')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.now', 'Date.now')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Browser">Kompabilitas Browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatChrome("5")}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatOpera("10.50")}}</td> + <td>{{CompatSafari("4")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li>{{domxref("Performance.now()")}} — menyediakan timestamp dengan resolusi sub-millisekon untuk digunakan untuk mengukur performa halaman web</li> + <li>{{domxref("console.time()")}} / {{domxref("console.timeEnd()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/date/tojson/index.html b/files/id/web/javascript/reference/global_objects/date/tojson/index.html new file mode 100644 index 0000000000..cb951d5fa0 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/date/tojson/index.html @@ -0,0 +1,119 @@ +--- +title: Date.prototype.toJSON() +slug: Web/JavaScript/Reference/Global_Objects/Date/toJSON +tags: + - Date + - Method + - Referensi +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toJSON +--- +<div>{{JSRef}}</div> + +<p>Method <strong><code>toJSON()</code></strong> mengembalikan string berdasarkan pada object {{jsxref("Date")}}.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.toJSON()</code></pre> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>{{jsxref("Date")}} mengacu pada titik waktu tertentu. Memanggil <code>toJSON()</code> mengembalikan nilai ke string (menggunakan {{jsxref("Date.prototype.toISOString()", "toISOString()")}}) berdasarkan nilai pada object {{jsxref("Date")}}. Method ini biasanya ditujukan, secara default, guna menserialisasi object {{jsxref("Date")}} saat serialisasi {{Glossary("JSON")}}.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Penggunaan_toJSON()">Penggunaan <code>toJSON()</code></h3> + +<pre class="brush:js">var jsonDate = (new Date()).toJSON(); +var backToDate = new Date(jsonDate); + +console.log(jsonDate); //2015-10-26T07:46:36.611Z +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.44', 'Date.prototype.toJSON')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definisi Inisial. Diimplementasikan dalam JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.tojson', 'Date.prototype.toJSON')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.tojson', 'Date.prototype.toJSON')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Browser">Kompabilitas Browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="sect1"> </h2> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li> + <li>{{jsxref("Date.prototype.toTimeString()")}}</li> + <li>{{jsxref("Date.prototype.toUTCString()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/date/totimestring/index.html b/files/id/web/javascript/reference/global_objects/date/totimestring/index.html new file mode 100644 index 0000000000..90ebd23e68 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/date/totimestring/index.html @@ -0,0 +1,125 @@ +--- +title: Date.prototype.toTimeString() +slug: Web/JavaScript/Reference/Global_Objects/Date/toTimeString +tags: + - Date + - JavaScript + - Prototype + - Referensi +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toTimeString +--- +<div>{{JSRef}}</div> + +<p>Method <strong><code>toTimeString()</code></strong> mengembalikan satuan waktu dari objek {{jsxref("Date")}} object dalam format yang dapat dibaca manusia.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.toTimeString()</code></pre> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Instansi {{jsxref("Date")}} menunjuk pada titik waktu spesifik. Dengan memanggil {{jsxref("Date.prototype.toString()", "toString()")}} akan mengembalikan format tanggal dalam bentuk yang mudah dibaca manuasia dengan format tanggal English (Amerika). Di <a href="/en-US/docs/SpiderMonkey">SpiderMonkey</a>, Bagian tanggal terdiri dari (hari, bulan, dan tahun) di ikuti dengan waktu (Jam, menit, detik, dan waktu bagian). Terkadang kita hanya membutuhan bagian waktu dalam bentuk string; hal tersebut bisa di capai dengan menggunakan metod <code>toTimeString()</code>.</p> + +<p>Method <code>toTimeString()</code> sangatlah berguna karena berdasarkan engine (compiliant engine) yang di implementasikan <a href="/en-US/docs/ECMAScript">ECMA-262</a> mungkin string yang diperoleh akan berbeda dari {{jsxref("Date.prototype.toString()", "toString()")}} untuk objek {{jsxref("Date")}}, dengan format tergantung dari implementasi; pendekatan bagian string sederhana kemungkinan tidak sama untuk engine yang berbeda.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Dasar_penggunaan_of_toTimeString()">Dasar penggunaan of <code>toTimeString()</code></h3> + +<pre class="brush: js">var d = new Date(1993, 6, 28, 14, 39, 7); + +console.log(d.toString()); // logs Wed Jul 28 1993 14:39:07 GMT-0600 (PDT) +console.log(d.toTimeString()); // logs 14:39:07 GMT-0600 (PDT) +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.4', 'Date.prototype.toTimeString')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.totimestring', 'Date.prototype.toTimeString')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.totimestring', 'Date.prototype.toTimeString')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Browser">Kompabilitas Browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("Date.prototype.toLocaleTimeString()")}}</li> + <li>{{jsxref("Date.prototype.toDateString()")}}</li> + <li>{{jsxref("Date.prototype.toString()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/error/index.html b/files/id/web/javascript/reference/global_objects/error/index.html new file mode 100644 index 0000000000..c0fc3cec6f --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/error/index.html @@ -0,0 +1,231 @@ +--- +title: Error +slug: Web/JavaScript/Reference/Global_Objects/Error +tags: + - Error + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Error +--- +<div>{{JSRef}}</div> + +<p>Konstruktor <strong><code>Error</code></strong> membuat sebuah objek error. Misal objek <code>Error</code> di lontarkan ketika terjadi runtime error. Objek <code>Error</code> juga dapat digunakan sebagai objek dasar dengan pengecualian yang ditentukan pengguna. Berikut untuk standard jenis built-in error.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox">new Error([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>message</code></dt> + <dd>Optional. Human-readable description of the error.</dd> + <dt><code>fileName</code> {{non-standard_inline}}</dt> + <dd>Optional. The value for the <code>fileName</code> property on the created <code>Error</code> object. Defaults to the name of the file containing the code that called the <code>Error()</code> constructor.</dd> + <dt><code>lineNumber</code> {{non-standard_inline}}</dt> + <dd>Optional. The value for the <code>lineNumber</code> property on the created <code>Error</code> object. Defaults to the line number containing the <code>Error()</code> constructor invocation.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>Runtime errors result in new <code>Error</code> objects being created and thrown.</p> + +<p>This page documents the use of the <code>Error</code> object itself and its use as a constructor function. For a list of properties and methods inherited by <code>Error</code> instances, see {{jsxref("Error.prototype")}}.</p> + +<h3 id="Error_types">Error types</h3> + +<p>Besides the generic <code>Error</code> constructor, there are six other core error constructors in JavaScript. For client-side exceptions, see <a href="/en-US/docs/Web/JavaScript/Guide/Statements#Exception_Handling_Statements">Exception Handling Statements</a>.</p> + +<dl> + <dt>{{jsxref("EvalError")}}</dt> + <dd>Creates an instance representing an error that occurs regarding the global function {{jsxref("Global_Objects/eval", "eval()")}}.</dd> + <dt>{{jsxref("InternalError")}} {{non-standard_inline}}</dt> + <dd>Creates an instance representing an error that occurs when an internal error in the JavaScript engine is thrown. E.g. "too much recursion".</dd> + <dt>{{jsxref("RangeError")}}</dt> + <dd>Creates an instance representing an error that occurs when a numeric variable or parameter is outside of its valid range.</dd> + <dt>{{jsxref("ReferenceError")}}</dt> + <dd>Creates an instance representing an error that occurs when de-referencing an invalid reference.</dd> + <dt>{{jsxref("SyntaxError")}}</dt> + <dd>Creates an instance representing a syntax error that occurs while parsing code in {{jsxref("Global_Objects/eval", "eval()")}}.</dd> + <dt>{{jsxref("TypeError")}}</dt> + <dd>Creates an instance representing an error that occurs when a variable or parameter is not of a valid type.</dd> + <dt>{{jsxref("URIError")}}</dt> + <dd>Creates an instance representing an error that occurs when {{jsxref("Global_Objects/encodeURI", "encodeURI()")}} or {{jsxref("Global_Objects/decodeURI", "decodeURI()")}} are passed invalid parameters.</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{jsxref("Error.prototype")}}</dt> + <dd>Allows the addition of properties to <code>Error</code> instances.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p>The global <code>Error</code> object contains no methods of its own, however, it does inherit some methods through the prototype chain.</p> + +<h2 id="Error_instances"><code>Error</code> instances</h2> + +<div>{{page('en-US/docs/JavaScript/Reference/Global_Objects/Error/prototype', 'Description')}}</div> + +<h3 id="Properties_2">Properties</h3> + +<div>{{page('en-US/docs/JavaScript/Reference/Global_Objects/Error/prototype', 'Properties')}}</div> + +<h3 id="Methods_2">Methods</h3> + +<div>{{page('en-US/docs/JavaScript/Reference/Global_Objects/Error/prototype', 'Methods')}}</div> + +<h2 id="Examples">Examples</h2> + +<h3 id="Throwing_a_generic_error">Throwing a generic error</h3> + +<p>Usually you create an <code>Error</code> object with the intention of raising it using the {{jsxref("Statements/throw", "throw")}} keyword. You can handle the error using the {{jsxref("Statements/try...catch", "try...catch")}} construct:</p> + +<pre class="brush: js">try { + throw new Error('Whoops!'); +} catch (e) { + console.log(e.name + ': ' + e.message); +} +</pre> + +<h3 id="Handling_a_specific_error">Handling a specific error</h3> + +<p>You can choose to handle only specific error types by testing the error type with the error's {{jsxref("Object.prototype.constructor", "constructor")}} property or, if you're writing for modern JavaScript engines, {{jsxref("Operators/instanceof", "instanceof")}} keyword:</p> + +<pre class="brush: js">try { + foo.bar(); +} catch (e) { + if (e instanceof EvalError) { + console.log(e.name + ': ' + e.message); + } else if (e instanceof RangeError) { + console.log(e.name + ': ' + e.message); + } + // ... etc +} +</pre> + +<h3 id="Custom_Error_Types">Custom Error Types</h3> + +<p>You might want to define your own error types deriving from <code>Error</code> to be able to <code>throw new MyError()</code> and use <code>instanceof MyError</code> to check the kind of error in the exception handler. The common way to do this is demonstrated below.</p> + +<div class="warning"> +<p>Note that the thrown <code>MyError</code> will report incorrect <code>lineNumber</code> and <code>fileName</code> at least in Firefox.</p> +</div> + +<p>See also the <a href="http://stackoverflow.com/questions/1382107/whats-a-good-way-to-extend-error-in-javascript">"What's a good way to extend Error in JavaScript?" discussion on Stackoverflow</a>.</p> + +<pre class="brush: js">// Create a new object, that prototypically inherits from the Error constructor +function MyError(message) { + this.name = 'MyError'; + this.message = message || 'Default Message'; + this.stack = (new Error()).stack; +} +MyError.prototype = Object.create(Error.prototype); +MyError.prototype.constructor = MyError; + +try { + throw new MyError(); +} catch (e) { + console.log(e.name); // 'MyError' + console.log(e.message); // 'Default Message' +} + +try { + throw new MyError('custom message'); +} catch (e) { + console.log(e.name); // 'MyError' + console.log(e.message); // 'custom message' +}</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.11', 'Error')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-error-objects', 'Error')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-error-objects', 'Error')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Error.prototype")}}</li> + <li>{{jsxref("Statements/throw", "throw")}}</li> + <li>{{jsxref("Statements/try...catch", "try...catch")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/error/name/index.html b/files/id/web/javascript/reference/global_objects/error/name/index.html new file mode 100644 index 0000000000..6644fff80a --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/error/name/index.html @@ -0,0 +1,119 @@ +--- +title: Error.prototype.name +slug: Web/JavaScript/Reference/Global_Objects/Error/name +tags: + - Error + - JavaScript + - Property + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Error/name +--- +<div>{{JSRef}}</div> + +<p>Properti <code><strong>name</strong></code> menyatakan nama dari jenis error. Nilai awalnya adalah "Error".</p> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Secara default, misalnya {{jsxref("Error")}} diberi nama "Error". Properti <code>name</code>, sebagai tambahan utuk properti {{jsxref("Error.prototype.message", "message")}}, digunakan oleh method {{jsxref("Error.prototype.toString()")}} untuk membuat sebuah pernyataan dalam bentuk string yang menyatakan error.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Menggunakan_custom_error">Menggunakan custom error</h3> + +<pre class="brush: js">var e = new Error('Inputan tidak lengkap'); // e.name nilainya 'Error' + +e.name = 'ParseError'; +throw e; +// e.toString() akan mengembalikan 'ParseError: Inputan tidak lengkap' +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.11.4.2', 'Error.prototype.name')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-error.prototype.name', 'Error.prototype.name')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-error.prototype.name', 'Error.prototype.name')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_browser">Kompabilitas browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("Error.prototype.message")}}</li> + <li>{{jsxref("Error.prototype.toString()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/function/displayname/index.html b/files/id/web/javascript/reference/global_objects/function/displayname/index.html new file mode 100644 index 0000000000..952014983b --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/function/displayname/index.html @@ -0,0 +1,123 @@ +--- +title: Function.displayName +slug: Web/JavaScript/Reference/Global_Objects/Function/displayName +tags: + - Function + - JavaScript + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Function/displayName +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p>Properti <code><strong><em>function</em>.displayName</strong></code> mengembalikan nama fungsi.</p> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Ketika didefinisikan, properti <code>displayName</code> mengembalikan nama dari sebuah fungsi:</p> + +<pre class="brush: js">function doSomething() {} + +console.log(doSomething.displayName); // "undefined" + +var popup = function(content) { console.log(content); }; + +popup.displayName = 'Show Popup'; + +console.log(popup.displayName); // "Show Popup" +</pre> + +<p>Anda bisa mendefinisikan sebuah fungsi dengan sebuah display nama di {{jsxref("Functions", "function expression", "", 1)}}:</p> + +<pre class="brush: js">var object = { + someMethod: function() {} +}; + +object.someMethod.displayName = 'someMethod'; + +console.log(object.someMethod.displayName); // logs "someMethod" + +try { someMethod } catch(e) { console.log(e); } +// ReferenceError: someMethod is not defined +</pre> + +<p>Anda bisa merubah <code>displayName</code> dari sebuah fungsi secara dinamis:</p> + +<pre class="brush: js">var object = { + // anonymous + someMethod: function(value) { + this.displayName = 'someMethod (' + value + ')'; + } +}; + +console.log(object.someMethod.displayName); // "undefined" + +object.someMethod('123') +console.log(object.someMethod.displayName); // "someMethod (123)" +</pre> + +<h2 id="Contoh">Contoh</h2> + +<p>Biasanya lebih banyak digunakan dengan console dan profiler melalui {{jsxref("Function.name", "func.name")}} untuk menampilkan nama function.</p> + +<p>Dengan menuliskan kode berikut, maka seharusnya akan menampilkan "<code>function My Function()</code>":</p> + +<pre class="brush: js">var a = function() {}; +a.displayName = 'My Function'; + +a; // "function My Function()"</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<p>Bukan bagian dari spesifikasi.</p> + +<h2 id="Kompabilitas_browser">Kompabilitas browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(13)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/id/web/javascript/reference/global_objects/function/index.html b/files/id/web/javascript/reference/global_objects/function/index.html new file mode 100644 index 0000000000..49d1c1a114 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/function/index.html @@ -0,0 +1,241 @@ +--- +title: Function +slug: Web/JavaScript/Reference/Global_Objects/Function +tags: + - Constructor + - Function + - JavaScript + - NeedsTranslation + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/Function +--- +<div>{{JSRef}}</div> + +<p>Konstruktor<strong><code><strong> </strong></code><code>Function</code> </strong>membuat sebuah objek <code>Function</code> baru. Di Javascript setiap fungsi adalah sebuah objek <code>Function</code>.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><code>new Function ([<var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]],] <var>functionBody</var>)</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>Nama yang akan digunakan oleh fungsi sebagai nama formal argumen. Masing-masing harus berupa string yang sesuai dengan identifier JavaScript yang valid atau daftar string dipisahkan dengan koma; contohnya "<code>x</code>", "<code>theValue</code>", atau "<code>a,b</code>".</dd> + <dt><code>functionBody</code></dt> + <dd>String berisi sintaks JavaScript yang terdiri dari definisi fungsi.</dd> +</dl> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Objek <code> Function</code> yang dibuat dengan konstruktor <code>Function</code> diuraikan ketika fungsi dibuat. Hal tersebut kurang efisien dibandingkan dengan mendeklarasikan fungsi dengan <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">function expression</a> atau <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function statement</a> dan memanggilnya dengan kode Anda, karena fungsi-fungsi tersebut diuraikan dengan sisa kode.</p> + +<p>Semua argumen yang diteruskan ke fungsi diperlakukan sebagai nama identifier parameter dalam fungsi yang akan dibuat, dalam urutan yang dilewatkan.</p> + +<div class="note"> +<p><strong>Catatan:</strong> Fungsi dibuat dengan konstruktor <code>Function</code> jangan membuat penutup pada konteks kreasi mereka; Mereka selalu dibuat dalam ruang lingkup global. Saat menjalankannya, mereka hanya bisa mengakses variabel lokal mereka sendiri dan variabel global, bukan variabel dari ruang lingkup dimana konstruktor <code>Function</code> dipanggil. Berbeda dari menggunakan {{jsxref("eval")}} dengan kode untuk fungsi ekspresi.</p> +</div> + +<p>memanggil konstruktor <code>Function</code> sebagai sebuah fungsi (tanpa menggunakan operatur <code>baru</code>) mempunyai efek yang sama seperti memanggilnya sebagai konstruktor</p> + +<h2 id="Properti_dan_Method_Function">Properti dan Method <code>Function</code></h2> + +<p>Objek <code>Function</code> global tidak memiliki method atau properti sendiri. Namun, fungsi itu sendiri mewarisi beberapa method dan properti melalui prototipe dari {{jsxref("Function.prototype")}}.</p> + +<h2 id="Objek_prototipe_Function">Objek prototipe<code> Function</code></h2> + +<h3 id="Properti">Properti</h3> + +<div>{{page('/en-US/docs/JavaScript/Reference/Global_Objects/Function/prototype', 'Properties')}}</div> + +<h3 id="Method">Method</h3> + +<div>{{page('/en-US/docs/JavaScript/Reference/Global_Objects/Function/prototype', 'Methods')}}</div> + +<h2 id="Function_instances"><code>Function</code> instances</h2> + +<p><code>Function</code> instances mewarisi method dan properti dari {{jsxref("Function.prototype")}}. Seperti halnya semua konstruktor, Anda dapat mengubah objek prototipe konstruktor untuk membuat perubahan pada semua <code>Function</code> instances.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Menentukan_arguman_dengan_konstruktor_Function">Menentukan arguman dengan konstruktor <code>Function</code></h3> + +<p>Dibawah ini kode untuk membuat sebuah objek <code>Function</code> yang menggunakan dua argumen.</p> + +<pre class="brush: js">// Contoh dapat dijalankan langsung di konsol JavaScript Anda + +// Buat fungsi yang mengambil dua argumen dan mengembalikan jumlah argumen tersebut +var adder = new Function('a', 'b', 'return a + b'); + +// Memanggil fungsi +adder(2, 6); +// > 8 +</pre> + +<p>Argumen "<code>a</code>" dan "<code>b</code>" adalah nama argumen formal yang digunakan pada function body "<code>return a + b</code>".</p> + +<h3 id="Pintasan_rekursif_untuk_memofikasi_DOM_secara_masif">Pintasan rekursif untuk memofikasi DOM secara masif</h3> + +<p>Membuat fungsi dengan konstruktor <code>Function</code> adalah salah satu cara dinamis untuk membuat objek baru dengan beberapa kode yang dapat dieksekusi ke dalam lingkup global dari suatu fungsi. Contoh berikut (pintasan rekursif untuk memodifikasi DOM secara masif) tidak dimungkinkan tanpa permintaan konstruktor <code>Function </code>untuk setiap kueri baru jika Anda ingin menghindari penutup tiap fungsi.</p> + +<pre class="brush: html"><!doctype html> +<html> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> +<title>MDN Example - a recursive shortcut to massively modify the DOM</title> +<script type="text/javascript"> +var domQuery = (function() { + var aDOMFunc = [ + Element.prototype.removeAttribute, + Element.prototype.setAttribute, + CSSStyleDeclaration.prototype.removeProperty, + CSSStyleDeclaration.prototype.setProperty + ]; + + function setSomething(bStyle, sProp, sVal) { + var bSet = Boolean(sVal), fAction = aDOMFunc[bSet | bStyle << 1], + aArgs = Array.prototype.slice.call(arguments, 1, bSet ? 3 : 2), + aNodeList = bStyle ? this.cssNodes : this.nodes; + + if (bSet && bStyle) { aArgs.push(''); } + for ( + var nItem = 0, nLen = this.nodes.length; + nItem < nLen; + fAction.apply(aNodeList[nItem++], aArgs) + ); + this.follow = setSomething.caller; + return this; + } + + function setStyles(sProp, sVal) { return setSomething.call(this, true, sProp, sVal); } + function setAttribs(sProp, sVal) { return setSomething.call(this, false, sProp, sVal); } + function getSelectors() { return this.selectors; }; + function getNodes() { return this.nodes; }; + + return (function(sSelectors) { + var oQuery = new Function('return arguments.callee.follow.apply(arguments.callee, arguments);'); + oQuery.selectors = sSelectors; + oQuery.nodes = document.querySelectorAll(sSelectors); + oQuery.cssNodes = Array.prototype.map.call(oQuery.nodes, function(oInlineCSS) { return oInlineCSS.style; }); + oQuery.attributes = setAttribs; + oQuery.inlineStyle = setStyles; + oQuery.follow = getNodes; + oQuery.toString = getSelectors; + oQuery.valueOf = getNodes; + return oQuery; + }); +})(); +</script> +</head> + +<body> + +<div class="testClass">Lorem ipsum</div> +<p>Some text</p> +<div class="testClass">dolor sit amet</div> + +<script type="text/javascript"> +domQuery('.testClass') + .attributes('lang', 'en')('title', 'Risus abundat in ore stultorum') + .inlineStyle('background-color', 'black')('color', 'white')('width', '100px')('height', '50px'); +</script> +</body> + +</html> +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.3', 'Function')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-objects', 'Function')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-objects', 'Function')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kesesuaian_Browser">Kesesuaian Browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("Functions", "Functions and function scope")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Statements/function", "function statement")}}</li> + <li>{{jsxref("Operators/function", "function expression")}}</li> + <li>{{jsxref("Statements/function*", "function* statement")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/function/length/index.html b/files/id/web/javascript/reference/global_objects/function/length/index.html new file mode 100644 index 0000000000..901c11b336 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/function/length/index.html @@ -0,0 +1,148 @@ +--- +title: Function.length +slug: Web/JavaScript/Reference/Global_Objects/Function/length +tags: + - Function + - JavaScript + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Function/length +--- +<div>{{JSRef}}</div> + +<p>Properti <code><strong>length</strong></code> menentukan jumlah argumen yang diharapkan oleh fungsi.</p> + +<div>{{js_property_attributes(0,0,1)}}</div> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p><code>length</code> merupakan properti dari objek fungsi, dan mengindikasikan berapa banyak argumen yang diharapkan fungsi, mis. jumlah parameter formal. Jumlah ini mengesampingkan {{jsxref("rest_parameters", "rest parameter", "", 1)}}. Sebaliknya, {{jsxref("Functions_and_function_scope/arguments/length", "arguments.length")}} adalah lokal untuk fungsi dan memberikan jumlah argumen sebenarnya ke fungsi.</p> + +<h3 id="Properti_data_dari_constructor_Function">Properti data dari constructor <code>Function</code></h3> + +<p>Construktor {{jsxref("Function")}} sendiri adalah objek {{jsxref("Function")}}. data properti <code>length</code> bernilai 1. Properti atribut: Writable: <code>false</code>, Enumerable: <code>false</code>, Configurable: <code>true</code>.</p> + +<h3 id="Properti_dari_Function_prototype_object">Properti dari <code>Function</code> prototype object</h3> + +<p>Panjang properti dari prototype objek {{jsxref("Function")}} bernilai 0.</p> + +<h2 id="Contoh">Contoh</h2> + +<pre class="brush: js">console.log(Function.length); /* 1 */ + +console.log((function() {}).length); /* 0 */ +console.log((function(a) {}).length); /* 1 */ +console.log((function(a, b) {}).length); /* 2 etc. */ + +console.log((function(...args) {}).length); +// 0, rest parameter is not counted + +console.log((function(a, b = 1, c) {}).length); +// 1, only parameters before the first one with +// a default value is counted</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.3.5.1', 'Function.length')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-instances-length', 'Function.length')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>The <code>configurable</code> attribute of this property is now <code>true</code>.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-instances-length', 'Function.length')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_browser">Kompabilitas browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Configurable: true</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(37)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Configurable: true</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(37)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("Function")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/function/name/index.html b/files/id/web/javascript/reference/global_objects/function/name/index.html new file mode 100644 index 0000000000..1a35d62020 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/function/name/index.html @@ -0,0 +1,191 @@ +--- +title: Function.name +slug: Web/JavaScript/Reference/Global_Objects/Function/name +tags: + - ECMAScript6 + - Function + - JavaScript + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Function/name +--- +<div>{{JSRef}}</div> + +<p>Properti <code><strong><em>function</em>.name</strong></code> mengembalikan nama fungsi.</p> + +<div>{{js_property_attributes(0,0,1)}}</div> + +<div>Perlu di ingat bahwa ini di dalam non-standard, implementasi pre-ES6 atribut <code>configurable</code> juga <code>false</code>.</div> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Properti <code>name</code> property mengembalikan nama sebuah fungsi , atau (sebelum implementasi ES6) string kosong untuk anonymous functions:</p> + +<pre class="brush: js">function doSomething() {} + +console.log(doSomething.name); // logs "doSomething" +</pre> + +<p>Fungsi di buat menggunakan sintaks <code>new Function(...)</code> atau hanya <code>Function(...)</code> memiliki properti <code>name</code> di set empty string. Pada contoh anonymous functions dibuat, sehingga <code>name</code> mengembalikan empty string:</p> + +<pre class="brush: js">var f = function() {}; +var object = { + someMethod: function() {} +}; + +console.log(f.name == ''); // true +console.log(object.someMethod.name == ''); // also true +</pre> + +<p>Browser yang mengimplementasikan fungsi ES6 mengambil nama dari anonymous function dari posisi syntactic-nya. Contoh:</p> + +<pre class="brush: js">var f = function() {}; +console.log(f.name); // "f"</pre> + +<p>Anda bisa mendefinisikan sebuah fungsi dengan nama di {{jsxref("Operators/Function", "function expression", "", 1)}}:</p> + +<pre class="brush: js">var object = { + someMethod: function object_someMethod() {} +}; +console.log(object.someMethod.name); // logs "object_someMethod" + +try { object_someMethod } catch(e) { console.log(e); } +// ReferenceError: object_someMethod is not defined +</pre> + +<p>Anda tidak bisa mengubah nama fungsi, Properti ini hanya bisa dibaca:</p> + +<pre class="brush: js">var object = { + // anonymous + someMethod: function() {} +}; + +object.someMethod.name = 'someMethod'; +console.log(object.someMethod.name); // empty string, someMethod is anonymous +</pre> + +<p>Untuk mengubah, anda perlu menggunakan {{jsxref("Object.defineProperty()")}}.</p> + +<h2 id="Contoh">Contoh</h2> + +<p>Anda bisa menggunakan <code>obj.constructor.name</code> untuk memeriksa "class" dari sebuah objek:</p> + +<pre class="brush: js">function a() {} + +var b = new a(); + +console.log(b.constructor.name); // logs "a" +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-name', 'name')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-name', 'name')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_browser">Kompabilitas browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(33.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Configurable: true</td> + <td>{{CompatChrome(43.0)}}</td> + <td>{{CompatGeckoDesktop(38)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Inferred names on anonymous functions</td> + <td>{{CompatChrome(51.0)}}</td> + <td>{{CompatNo}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Configurable: true</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(38)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Inferred names on anonymous functions</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(51.0)}}</td> + <td>{{CompatNo}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(51.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] See {{bug(883377)}}.</p> 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 new file mode 100644 index 0000000000..d522a363e0 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/function/prototype/index.html @@ -0,0 +1,143 @@ +--- +title: Function.prototype +slug: Web/JavaScript/Reference/Global_Objects/Function/prototype +tags: + - Function + - JavaScript + - Property + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Function +--- +<div>{{JSRef}}</div> + +<p>Properti <code><strong>Function.prototype</strong></code> mewakili objek properti {{jsxref("Function")}} .</p> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Objek {{jsxref("Function")}} turunan dari <code>Function.prototype</code>. <code>Function.prototype</code> tidak dapat di ubah.</p> + +<h2 id="Properti">Properti</h2> + +<dl> + <dt>{{jsxref("Function.arguments")}} {{deprecated_inline}}</dt> + <dd>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.</dd> + <dt><s class="obsoleteElement">{{jsxref("Function.arity")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement">Digunakan untuk menentukan jumlah argumen yang diperlukan fungsi, tapi telah dihapus. Gunakan properti {{jsxref("Function.length", "length")}}.</s></dd> + <dt>{{jsxref("Function.caller")}} {{non-standard_inline}}</dt> + <dd>Menentukan fungsi yang dipanggil oleh fungsi yang sedang dijalankan saat ini.</dd> + <dt>{{jsxref("Function.length")}}</dt> + <dd>Menentukan jumlah argumen yang diperlukan oleh fungsi.</dd> + <dt>{{jsxref("Function.name")}}</dt> + <dd>Nama dari fungsi.</dd> + <dt>{{jsxref("Function.displayName")}} {{non-standard_inline}}</dt> + <dd>Tampilan nama fungsi.</dd> + <dt><code>Function.prototype.constructor</code></dt> + <dd>Menentukan fungsi yang membuat objek prototype. Lihat {{jsxref("Object.prototype.constructor")}} untuk lebih detailnya.</dd> +</dl> + +<h2 id="Method">Method</h2> + +<dl> + <dt>{{jsxref("Function.prototype.apply()")}}</dt> + <dd>Memanggil fungsi dan menentukan nilai <em>this</em> berdasar nilai yang diberikan, argument bisa ditambahkan sebagai objek {{jsxref("Array")}}.</dd> + <dt>{{jsxref("Function.prototype.bind()")}}</dt> + <dd>Membuat fungsi baru dimana, ketika dipanggil, memiliki <em>this</em> yang diberi nilai yang tersedia, dengan urutan tertentu sesudah nilai yang tersedia ketika fungsi di jalankan.</dd> + <dt>{{jsxref("Function.prototype.call()")}}</dt> + <dd>Memanggil (menjalankan) sebuah fungsi dan memberi nilai <em>this</em> dari nilai yang tersedia, argumen bisa ditambahkan sebagaimana mestinya.</dd> + <dt>{{jsxref("Function.prototype.isGenerator()")}} {{non-standard_inline}}</dt> + <dd>Mengembalikan <code>true</code> jika fungsi adalah sebuah <a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">generator</a>; selain itu akan mengembalikan nilai <code>false</code>.</dd> + <dt>{{jsxref("Function.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>Mengembalikan string berdasarkan kode sumber dari fungsi. Mengesampingkan method {{jsxref("Object.prototype.toSource")}}.</dd> + <dt>{{jsxref("Function.prototype.toString()")}}</dt> + <dd>Mengembalikan string berdasarkan kode sumber dari fungsi, mengesampingkan method {{jsxref("Object.prototype.toString")}}.</dd> +</dl> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.3.5.2', 'Function.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-instances-prototype', 'Function.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-instances-prototype', 'Function.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Browser">Kompabilitas Browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li>{{jsxref("Function")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/index.html b/files/id/web/javascript/reference/global_objects/index.html new file mode 100644 index 0000000000..5259bde5b8 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/index.html @@ -0,0 +1,189 @@ +--- +title: Global Objek +slug: Web/JavaScript/Reference/Global_Objects +tags: + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects +--- +<div>{{jsSidebar("Objects")}}</div> + +<p>Pada bagian ini membahas standar javascript, objek built-in, Termasuk didalamnya method dan properti.</p> + +<div class="onlyinclude"> +<p>Istilah "Global Objek" (atau standar objek built-in)disini bukan berarti <strong>Global Objek</strong>. Disini global objek di artikan sebagai <strong>objek pada scope global</strong> (tapi hanya jika ECMAScript 5 mode strict tidak digunakan; pada kasus ini mengembalikan {{jsxref("undefined")}}). <strong>Global objek</strong> sendiri bisa di akses menggunakan operator {{jsxref("Operators/this", "this")}} pada lingkup global. Bahkan, lingkup global <strong>terdiri dari</strong> properti pada global objek, termasuk peoperti yang diwariskan, jika ada.</p> + +<p>Objek lain di lingkup global salah satunya <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Creating_new_objects">dibuat oleh user script</a> atau disediakan oleh aplikasi host. Objek host tersedia di konteks browser, didokumentasi di <a href="/en-US/docs/Web/API/Reference">Referensi API</a>. Untuk informasi lengkap tentang perbedaan antara <a href="/en-US/docs/DOM/DOM_Reference">DOM</a> dan inti <a href="/en-US/docs/Web/JavaScript">JavaScript</a>, lihat <a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">Gambaran teknologi javaScript</a>.</p> + +<h2 id="Objek_standar_berdasarkan_kategori">Objek standar berdasarkan kategori</h2> + +<h3 id="Properti_nilai">Properti nilai</h3> + +<p>Properti global ini mengembalikan nilai simple; tidak memiliki properti ataupun method.</p> + +<ul> + <li>{{jsxref("Global_Objects/Infinity", "Infinity")}}</li> + <li>{{jsxref("Global_Objects/NaN", "NaN")}}</li> + <li>{{jsxref("Global_Objects/undefined", "undefined")}}</li> + <li>{{jsxref("Global_Objects/null", "null")}} literal</li> +</ul> + +<h3 id="Properti_fungsi">Properti fungsi</h3> + +<p>Fungsi global—fungsi yang di panggil secara global bukan pada objek — langsung mengembalikan nilai ke pemenggil.</p> + +<ul> + <li>{{jsxref("Global_Objects/eval", "eval()")}}</li> + <li>{{jsxref("Global_Objects/uneval", "uneval()")}} {{non-standard_inline}}</li> + <li>{{jsxref("Global_Objects/isFinite", "isFinite()")}}</li> + <li>{{jsxref("Global_Objects/isNaN", "isNaN()")}}</li> + <li>{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}</li> + <li>{{jsxref("Global_Objects/parseInt", "parseInt()")}}</li> + <li>{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}</li> + <li>{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</li> + <li>{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}</li> + <li>{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</li> + <li>{{jsxref("Global_Objects/escape", "escape()")}} {{deprecated_inline}}</li> + <li>{{jsxref("Global_Objects/unescape", "unescape()")}} {{deprecated_inline}}</li> +</ul> + +<h3 id="Fundamental_objek">Fundamental objek</h3> + +<p>Ini merupakan fundamental, objek dasar berdasarkan pada semua objek lain yang didasarkan. Ini termasuk objek yang mewakili objek umum, fungsi dan error.</p> + +<ul> + <li>{{jsxref("Global_Objects/Object", "Object")}}</li> + <li>{{jsxref("Global_Objects/Function", "Function")}}</li> + <li>{{jsxref("Global_Objects/Boolean", "Boolean")}}</li> + <li>{{jsxref("Global_Objects/Symbol", "Symbol")}}</li> + <li>{{jsxref("Global_Objects/Error", "Error")}}</li> + <li>{{jsxref("Global_Objects/EvalError", "EvalError")}}</li> + <li>{{jsxref("Global_Objects/InternalError", "InternalError")}}</li> + <li>{{jsxref("Global_Objects/RangeError", "RangeError")}}</li> + <li>{{jsxref("Global_Objects/ReferenceError", "ReferenceError")}}</li> + <li>{{jsxref("Global_Objects/SyntaxError", "SyntaxError")}}</li> + <li>{{jsxref("Global_Objects/TypeError", "TypeError")}}</li> + <li>{{jsxref("Global_Objects/URIError", "URIError")}}</li> +</ul> + +<h3 id="Nomor_dan_tanggal">Nomor dan tanggal</h3> + +<p>Objek dasar yang mewakili angka, tanggal dan kalkulasi matematik.</p> + +<ul> + <li>{{jsxref("Global_Objects/Number", "Number")}}</li> + <li>{{jsxref("Global_Objects/Math", "Math")}}</li> + <li>{{jsxref("Global_Objects/Date", "Date")}}</li> +</ul> + +<h3 id="Pengolah_teks">Pengolah teks</h3> + +<p>Objek yang mewakili string dan dukungan untuk memanipulasinya.</p> + +<ul> + <li>{{jsxref("Global_Objects/String", "String")}}</li> + <li>{{jsxref("Global_Objects/RegExp", "RegExp")}}</li> +</ul> + +<h3 id="Koleksi_Index">Koleksi Index</h3> + +<p>Objek ini mewakili koleksi data berdasarkan nilai index. Ini termasuk (jenis) array dan konstruksi mirip array (array-like).</p> + +<ul> + <li>{{jsxref("Global_Objects/Array", "Array")}}</li> + <li>{{jsxref("Global_Objects/Int8Array", "Int8Array")}}</li> + <li>{{jsxref("Global_Objects/Uint8Array", "Uint8Array")}}</li> + <li>{{jsxref("Global_Objects/Uint8ClampedArray", "Uint8ClampedArray")}}</li> + <li>{{jsxref("Global_Objects/Int16Array", "Int16Array")}}</li> + <li>{{jsxref("Global_Objects/Uint16Array", "Uint16Array")}}</li> + <li>{{jsxref("Global_Objects/Int32Array", "Int32Array")}}</li> + <li>{{jsxref("Global_Objects/Uint32Array", "Uint32Array")}}</li> + <li>{{jsxref("Global_Objects/Float32Array", "Float32Array")}}</li> + <li>{{jsxref("Global_Objects/Float64Array", "Float64Array")}}</li> +</ul> + +<h3 id="Koleksi_keyed">Koleksi keyed</h3> + +<p>Objek ini merupakan koleksi yang menggunakan key; mengandung unsur yang iterable di urutan penyisipan.</p> + +<ul> + <li>{{jsxref("Map")}}</li> + <li>{{jsxref("Set")}}</li> + <li>{{jsxref("WeakMap")}}</li> + <li>{{jsxref("WeakSet")}}</li> +</ul> + +<h3 id="Koleksi_vektor">Koleksi vektor</h3> + +<p>{{Glossary("SIMD")}} tipe data vector adalah objek dimana data diatur arahnya.</p> + +<ul> + <li>{{jsxref("SIMD")}} {{experimental_inline}}</li> + <li>{{jsxref("Float32x4", "SIMD.Float32x4")}} {{experimental_inline}}</li> + <li>{{jsxref("Float64x2", "SIMD.Float64x2")}} {{experimental_inline}}</li> + <li>{{jsxref("Int8x16", "SIMD.Int8x16")}} {{experimental_inline}}</li> + <li>{{jsxref("Int16x8", "SIMD.Int16x8")}} {{experimental_inline}}</li> + <li>{{jsxref("Int32x4", "SIMD.Int32x4")}} {{experimental_inline}}</li> + <li>{{jsxref("Uint8x16", "SIMD.Uint8x16")}} {{experimental_inline}}</li> + <li>{{jsxref("Uint16x8", "SIMD.Uint16x8")}} {{experimental_inline}}</li> + <li>{{jsxref("Uint32x4", "SIMD.Uint32x4")}} {{experimental_inline}}</li> + <li>{{jsxref("Bool8x16", "SIMD.Bool8x16")}} {{experimental_inline}}</li> + <li>{{jsxref("Bool16x8", "SIMD.Bool16x8")}} {{experimental_inline}}</li> + <li>{{jsxref("Bool32x4", "SIMD.Bool32x4")}} {{experimental_inline}}</li> + <li>{{jsxref("Bool64x2", "SIMD.Bool64x2")}} {{experimental_inline}}</li> +</ul> + +<h3 id="Data_terstruktur">Data terstruktur</h3> + +<p>Objek ini mewakili dan berinteraksi dengan buffer data terstruktur dan data yang dikodekan menggunakan JavaScript Object Notation (JSON).</p> + +<ul> + <li>{{jsxref("ArrayBuffer")}}</li> + <li>{{jsxref("SharedArrayBuffer")}} {{experimental_inline}}</li> + <li>{{jsxref("Atomics")}} {{experimental_inline}}</li> + <li>{{jsxref("DataView")}}</li> + <li>{{jsxref("JSON")}}</li> +</ul> + +<h3 id="Kontrol_objek_abstraksi">Kontrol objek abstraksi </h3> + +<ul> + <li>{{jsxref("Promise")}}</li> + <li>{{jsxref("Generator")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> +</ul> + +<h3 id="Refleksi_(Pantulan)">Refleksi (Pantulan)</h3> + +<ul> + <li>{{jsxref("Reflect")}}</li> + <li>{{jsxref("Proxy")}}</li> +</ul> + +<h3 id="Internasionalisasi">Internasionalisasi</h3> + +<p>Penambahan inti ECMAScript untuk fungsi bahasa-sensitif.</p> + +<ul> + <li>{{jsxref("Intl")}}</li> + <li>{{jsxref("Global_Objects/Collator", "Intl.Collator")}}</li> + <li>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li> + <li>{{jsxref("Global_Objects/NumberFormat", "Intl.NumberFormat")}}</li> +</ul> + +<h3 id="Objek_Non-standar">Objek Non-standar</h3> + +<ul> + <li>{{jsxref("Iterator")}} {{non-standard_inline}}</li> + <li>{{jsxref("ParallelArray")}} {{non-standard_inline}}</li> + <li>{{jsxref("StopIteration")}} {{non-standard_inline}}</li> +</ul> + +<h3 id="Lainnya">Lainnya</h3> + +<ul> + <li><code><a href="/id/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a></code></li> +</ul> +</div> + +<p> </p> diff --git a/files/id/web/javascript/reference/global_objects/isnan/index.html b/files/id/web/javascript/reference/global_objects/isnan/index.html new file mode 100644 index 0000000000..b7a6774528 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/isnan/index.html @@ -0,0 +1,186 @@ +--- +title: isNaN() +slug: Web/JavaScript/Reference/Global_Objects/isNaN +translation_of: Web/JavaScript/Reference/Global_Objects/isNaN +--- +<div>{{jsSidebar("Objects")}}</div> + +<p>Fungsi <code><strong>isNaN()</strong></code> menentukan apakah nilai adalah sebuah {{jsxref("NaN")}} atau bukan. Catatan: pemaksaan pada fungsi <code>isNaN</code> memiliki aturan yang <a href="#Description">menarik</a>. Anda mungkin ingin menggunakan {{jsxref("Number.isNaN()")}}, <span id="result_box" lang="id"><span>seperti yang didefinisikan dalam ECMAScript 2015.</span></span></p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>isNaN(v<em>alue</em>)</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>value</code></dt> + <dd>Nilai yang akan di uji.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p><strong><code>true</code></strong> Jika nilai yang di uji adalah {{jsxref("NaN")}}; jika tidak, <strong><code>false</code></strong>.</p> + +<h2 id="Deskripsi">Deskripsi</h2> + +<h3 id="Kebutuhan_akan_fungsi_isNaN">Kebutuhan akan fungsi <code>isNaN</code></h3> + +<p>Mungkin tidak seperti nilai lainnya dalam javascript, Ini tidak memungkinkan untuk mengandalkan operator persamaan (== dan ===) untuk menentukan bahwa nilai adalah {{jsxref("NaN")}} atau bukan, karena <code>NaN == NaN</code> dan <code>NaN === NaN</code> mengevaluasi ke <code>false</code>. Oleh karena itu, diperlukan adanya fungsi <code>isNaN</code>.</p> + +<h3 id="Asal_Mula_Nilai_NaN">Asal Mula Nilai <code>NaN</code></h3> + +<p>Nilai<code>NaN</code> <span id="result_box" lang="id"><span>dihasilkan saat operasi aritmatika menghasilkan nilai <em>undefined</em> atau <em>unrepresentable</em></span></span>. <span id="result_box" lang="id"><span>Nilai tersebut tidak harus mewakili kondisi overflow</span></span>. <code>NaN</code> juga dihasilkan dari percobaan pemaksaan ke nilai numerik dari nilai non-numerik <span id="result_box" lang="id"><span>yang tidak memiliki nilai numerik primitif yang tersedia.</span></span></p> + +<p><span class="short_text" id="result_box" lang="id"><span>Misalnya, membagi nol dengan nol menghasilkan sebuah</span></span> <code>NaN</code> — namun <span class="short_text" id="result_box" lang="id"><span>membagi angka lain dengan nol tidak menghasilkan sebuah <code>NaN</code>.</span></span></p> + +<h3 id="Perilaku_Khusus_yang_membingungkan">Perilaku Khusus yang membingungkan</h3> + +<p><span id="result_box" lang="id"><span>Karena versi paling awal dari spesifikasi fungsi</span></span> <code>isNaN</code> , perilaku untuk argumen non-numerik menjadi membingungkan. Ketika<span id="result_box" lang="id"><span> argumen ke fungsi</span></span> <code>isNaN</code> bukan bertipe <a href="http://es5.github.com/#x8.5" title="http://es5.github.com/#x8.5">Number</a>, Nilainya akan dipaksakan terlebih dahulu ke tipe <a href="http://es5.github.com/#x8.5" title="http://es5.github.com/#x8.5">Number</a>. <span id="result_box" lang="id"><span>Nilai yang dihasilkan kemudian diuji untuk menentukan apakah itu</span></span> {{jsxref("NaN")}}. Jadi untuk non-angka <span id="result_box" lang="id"><span>yang jika dipaksakan pada hasil numerik menghasilkan nilai numerik</span></span> non-NaN (<span id="result_box" lang="id"><span>terutama string kosong dan primitif boolean, yang jika dipaksakan memberi nilai numerik nol atau satu</span></span>), nilai pengembalian "false" mungkin tidak terduga; <span id="result_box" lang="id"><span>String kosong, misalnya, pastinya "not a number"</span></span>. <span id="result_box" lang="id"><span>Kebingungan itu berawal dari kenyataan bahwa istilah</span></span> "not a number", <span id="result_box" lang="id"><span>memiliki arti khusus untuk angka yang diwakili sebagai nilai floating-point IEEE-754</span></span>. <span id="result_box" lang="id"><span>Fungsi harus diinterpretasikan sebagai penjawab pertanyaan, "apakah nilai ini, jika dipaksakan pada nilai numerik, nilai IEEE-754 'Not A Number'?"</span></span></p> + +<p><span class="short_text" id="result_box" lang="id"><span class="alt-edited">Versi terbaru dari ECMAScript (ES2015) berisi fungsi </span></span>{{jsxref("Number.isNaN()")}}. <code>Number.isNaN(x)</code> <span class="short_text" id="result_box" lang="id"><span>akan menjadi cara yang andal untuk menguji apakah</span></span> <code>x</code> adalah <code>NaN</code> atau bukan. Bahkan dengan <code>Number.isNaN</code>, <span id="result_box" lang="id"><span>namun arti <code>NaN</code> tetap merupakan makna numerik yang tepat, dan bukan sekadar,</span></span> "not a number". Sebagai alternatif, untuk ketidakhadiran <code>Number.isNaN</code>, ekspresi <code>(x != x)</code> <span id="result_box" lang="id"><span>adalah cara yang lebih dapat diandalkan untuk menguji apakah variabel x adalah <code>NaN</code></span></span> <span id="result_box" lang="id"><span>atau bukan, karena hasilnya tidak sesuai dengan false positive yang membuat</span></span> <code>isNaN</code> <span id="result_box" lang="id"><span>tidak dapat diandalkan</span></span>.</p> + +<p><span class="short_text" id="result_box" lang="id"><span>Anda bisa memikirkan isNaN sebagai:</span></span></p> + +<pre class="brush: js">var isNaN = function(value) { + return Number.isNaN(Number(value)); +}</pre> + +<h2 id="Contoh">Contoh</h2> + +<pre class="brush: js">isNaN(NaN); // true +isNaN(undefined); // true +isNaN({}); // true + +isNaN(true); // false +isNaN(null); // false +isNaN(37); // false + +// strings +isNaN('37'); // false: "37" <span class="short_text" id="result_box" lang="id"><span>dikonversi ke nomor</span></span> 37 yang mana bukan NaN +isNaN('37.37'); // false: "37.37" <span class="short_text" id="result_box" lang="id"><span>dikonversi ke nomor</span></span> 37.37 yang mana bukan NaN +isNaN('123ABC'); // true: parseInt("123ABC") adalah 123 namun Number("123ABC") adalah NaN +isNaN(''); // false: string kosing dikonversi ke 0 yang mana bukan NaN +isNaN(' '); // false: string dengan spasi dikonversi ke 0 yang mana bukan NaN + +// dates +isNaN(new Date()); // false +isNaN(new Date().toString()); // true + +// <span id="result_box" lang="id"><span>Ini adalah false positif dan alasan mengapa NaN tidak sepenuhnya dapat diandalkan</span></span> +isNaN('blabla'); // true: "blabla" dikonversi ke nomor. + // <span id="result_box" lang="id"><span>Parsing ini sebagai nomor gagal dan mengembalikan NaN</span></span> +</pre> + +<h3 id="Berguna_dalam_perilaku_khusus">Berguna dalam perilaku khusus</h3> + +<p><span id="result_box" lang="id"><span>Ada cara penggunaan </span></span><span lang="id"><span>yang lebih berorientasi untuk memikirkan <code>isNaN</code></span></span> <code>isNaN()</code>: Jika <code>isNaN(x)</code> mengembalikan <code>false</code>, anda bisa menggunakan <code>x</code> <span id="result_box" lang="id"><span>dalam ekspresi aritmatika tidak membuat ekspresi mengembalikan</span></span> <code>NaN</code>. Jika itu mengembalikan<code>true</code>, <code>x</code> <span class="short_text" id="result_box" lang="id"><span>akan membuat setiap ekspresi aritmatika</span></span> mengembalikan <code>NaN</code>. <span class="short_text" id="result_box" lang="id"><span>Ini berarti bahwa dalam JavaScript,</span></span> <code>isNaN(x) == true</code> <span class="short_text" id="result_box" lang="id"><span>setara dengan</span></span> <code>x - 0</code> mengembalikan <code>NaN</code> (<span class="short_text" id="result_box" lang="id"><span>meskipun di JavaScript</span></span> <code>x - 0 == NaN</code> selalu mengembalikan false, <span id="result_box" lang="id"><span>jadi anda tidak bisa mengujinya).</span> <span>Sebenarnya, </span></span><code>isNaN(x)</code>, <code>isNaN(x - 0)</code>, <code>isNaN(Number(x))</code>, <code>Number.isNaN(x - 0)</code>, dan <code>Number.isNaN(Number(x))</code> <span class="short_text" id="result_box" lang="id"><span>selalu kembali sama dan di JavaScript</span></span><code>isNaN(x)</code> <span id="result_box" lang="id"><span>hanya bentuk sesingkat mungkin untuk mengungkapkan masing-masing istilah ini.</span></span></p> + +<p><span id="result_box" lang="id"><span>Anda dapat menggunakan ini, misalnya, untuk menguji apakah sebuah argumen terhadap suatu fungsi secara aritmatika dapat diolah (dapat digunakan "seperti" angka), atau jika tidak dan Anda harus memberikan nilai default atau yang lainnya.</span> <span>Dengan cara ini Anda dapat memiliki fungsi yang memanfaatkan fleksibilitas penuh JavaScript yang disediakan oleh nilai konversi secara implisit bergantung pada konteks.</span></span></p> + +<h2 id="Contoh_2">Contoh</h2> + +<pre class="brush: js">function increment(x) { + if (isNaN(x)) x = 0; + return x + 1; +} + +// <span class="short_text" id="result_box" lang="id"><span>Efek yang sama dengan</span></span> Number.isNaN(): +function increment(x) { + if (Number.isNaN(Number(x))) x = 0; + return x + 1; +} + +// <span class="short_text" id="result_box" lang="id"><span>Dalam kasus berikut untuk argumen fungsi x,</span></span> +// isNaN(x)<span class="short_text" id="result_box" lang="id"><span>selalu salah, meski x memang bukan sebuah</span></span> +// nomor, <span class="short_text" id="result_box" lang="id"><span>namun bisa digunakan seperti itu dalam ekspresi +// aritmatika</span></span> +increment(''); // 1: "" dikonversi ke 0 +increment(new String()); // 1: <span id="result_box" lang="id"><span>Objek String yang mewakili string kosong dikonversi menjadi 0</span></span> +increment([]); // 1: [] dikonversi ke 0 +increment(new Array()); // 1: <span id="result_box" lang="id"><span>Objek array yang mewakili sebuah array kosong dikonversi menjadi 0</span></span> +increment('0'); // 1: "0" dikonversi ke 0 +increment('1'); // 2: "1" dikonversi ke 1 +increment('0.1'); // 1.1: "0.1" dikonversi ke 0.1 +increment('Infinity'); // Infinity: "Infinity" dikonversi ke Infinity +increment(null); // 1: null dikonversi ke 0 +increment(false); // 1: false dikonversi ke 0 +increment(true); // 2: true dikonversi ke 1 +increment(new Date()); // <span id="result_box" lang="id"><span>mengembalikan tanggal/waktu sekarang dalam milidetik ditambah 1</span></span> + +// <span class="short_text" id="result_box" lang="id"><span>Dalam kasus berikut untuk argumen fungsi x,</span></span> +// isNaN(x) <span class="short_text" id="result_box" lang="id"><span>selalu false dan x memang angka</span></span> +increment(-1); // 0 +increment(-0.1); // 0.9 +increment(0); // 1 +increment(1); // 2 +increment(2); // 3 +// ... <span class="short_text" id="result_box" lang="id"><span>dan seterusnya</span></span> ... +increment(Infinity); // Infinity + +// <span class="short_text" id="result_box" lang="id"><span>Dalam kasus berikut untuk argumen fungsi x,</span></span> +// isNaN(x) <span class="short_text" id="result_box" lang="id"><span>selalu true dan x benar-benar bukan angka,</span></span> +// <span id="result_box" lang="id"><span>sehingga fungsi tersebut menggantikannya dengan 0 dan mengembalikan 1</span></span> +increment(String); // 1 +increment(Array); // 1 +increment('blabla'); // 1 +increment('-blabla'); // 1 +increment(0 / 0); // 1 +increment('0 / 0'); // 1 +increment(Infinity / Infinity); // 1 +increment(NaN); // 1 +increment(undefined); // 1 +increment(); // 1 + +// isNaN(x) <span class="short_text" id="result_box" lang="id"><span>selalu sama dengan</span></span> isNaN(Number(x)), +// <span class="short_text" id="result_box" lang="id"><span>namun kehadirannya</span></span> x <span class="short_text" id="result_box" lang="id"><span>adalah wajib disini</span></span>! +isNaN(x) == isNaN(Number(x)); // true <span class="short_text" id="result_box" lang="id"><span>untuk setiap nilai</span></span> x, termasuk x == undefined, + // karena isNaN(undefined) == true dan Number(undefined) mengembalikan NaN, + // namun ... +isNaN() == isNaN(Number()); // false, karena isNaN() == true dan Number() == 0 +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.1.2.4', 'isNaN')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-isnan-number', 'isNaN')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-isnan-number', 'isNaN')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.builtins.isNaN")}}</p> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li>{{jsxref("NaN")}}</li> + <li>{{jsxref("Number.isNaN()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/json/index.html b/files/id/web/javascript/reference/global_objects/json/index.html new file mode 100644 index 0000000000..4f07030358 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/json/index.html @@ -0,0 +1,243 @@ +--- +title: JSON +slug: Web/JavaScript/Reference/Global_Objects/JSON +translation_of: Web/JavaScript/Reference/Global_Objects/JSON +--- +<div>{{JSRef}}</div> + +<p>Didalam object <strong><code>JSON</code></strong> terdapat banyak method untuk memparse <a class="external" href="http://json.org/">JavaScript Object Notation</a> ({{glossary("JSON")}}) dan mengkonversi nilai ke JSON. Hal ini tidak dapat di gunakan atau dibangun, dan selain dari kedua sifat method tersebut tidak memiliki fungsi tersendiri.</p> + +<h2 id="Deskripsi">Deskripsi</h2> + +<h3 id="JavaScript_Object_Notation">JavaScript Object Notation</h3> + +<p>JSON merupakan sebuah syntax untuk menserialisasi objects, array, angka, string, boolean, dan {{jsxref("null")}}. Hal ini dilihat berdasarkan pada syntax javascript. Akan tetapi terpisah dari dari hal tersebut: beberapa javascript bukanlah JSON, dan beberapa JSON juga tidak dapat dikatakan sebagai Javascript. Lihat juga <a href="http://timelessrepo.com/json-isnt-a-javascript-subset">JSON: The JavaScript subset that isn't</a>.</p> + +<table> + <caption>Perbedaan JavaScript dan JSON</caption> + <thead> + <tr> + <th scope="col">Type pada JavaScript</th> + <th scope="col">Perbedaan dengan JSON</th> + </tr> + </thead> + <tbody> + <tr> + <td>Object dan Array</td> + <td>Nama properti harus menggunakan string double quotes; tidak diakhiri dengan koma.</td> + </tr> + <tr> + <td>Angka</td> + <td>Tidak diawali dengan nol; desimal harus di ikuti setidaknya satu digit.</td> + </tr> + <tr> + <td>String</td> + <td> + <p>Hanya beberapa karakter tertentu yang menggunakan escape; Kontrol karakter tertentu tidak diperbolehkan; Pemisah baris Unicode (<a href="http://unicode-table.com/en/2028/">U+2028</a>) dan pemisah paragraf (<a href="http://unicode-table.com/en/2029/">U+2029</a>) dapat digunakan; string harus menggunakan double-quoted. Lihat contoh dimana {{jsxref("JSON.parse()")}} bisa digunakan dan {{jsxref("SyntaxError")}} dilemparkan ketika mengevaluasi kode sebagai javascript:</p> + + <pre class="brush: js"> +var kode = '"\u2028\u2029"'; +JSON.parse(kode); // bisa digunakan. +eval(kode); // gagal! +</pre> + </td> + </tr> + </tbody> +</table> + +<p>Syntax JSON lengkapnya sebagai berikut:</p> + +<pre><var>JSON</var> = <strong>null</strong> + <em>or</em> <strong>true</strong> <em>or</em> <strong>false</strong> + <em>or</em> <var>JSONNumber</var> + <em>or</em> <var>JSONString</var> + <em>or</em> <var>JSONObject</var> + <em>or</em> <var>JSONArray</var> + +<var>JSONNumber</var> = <strong>-</strong> <var>PositiveNumber</var> + <em>or</em> <var>PositiveNumber</var> +<var>PositiveNumber</var> = DecimalNumber + <em>or</em> <var>DecimalNumber</var> <strong>.</strong> <var>Digits</var> + <em>or</em> <var>DecimalNumber</var> <strong>.</strong> <var>Digits</var> <var>ExponentPart</var> + <em>or</em> <var>DecimalNumber</var> <var>ExponentPart</var> +<var>DecimalNumber</var> = <strong>0</strong> + <em>or</em> <var>OneToNine</var> <var>Digits</var> +<var>ExponentPart</var> = <strong>e</strong> <var>Exponent</var> + <em>or</em> <strong>E</strong> <var>Exponent</var> +<var>Exponent</var> = <var>Digits</var> + <em>or</em> <strong>+</strong> <var>Digits</var> + <em>or</em> <strong>-</strong> <var>Digits</var> +<var>Digits</var> = <var>Digit</var> + <em>or</em> <var>Digits</var> <var>Digit</var> +<var>Digit</var> = <strong>0</strong> through <strong>9</strong> +<var>OneToNine</var> = <strong>1</strong> through <strong>9</strong> + +<var>JSONString</var> = <strong>""</strong> + <em>or</em> <strong>"</strong> <var>StringCharacters</var> <strong>"</strong> +<var>StringCharacters</var> = <var>StringCharacter</var> + <em>or</em> <var>StringCharacters</var> <var>StringCharacter</var> +<var>StringCharacter</var> = any character + <em>except</em> <strong>"</strong> <em>or</em> <strong>\</strong> <em>or</em> U+0000 through U+001F + <em>or</em> <var>EscapeSequence</var> +<var>EscapeSequence</var> = <strong>\"</strong> <em>or</em> <strong>\/</strong> <em>or</em> <strong>\\</strong> <em>or</em> <strong>\b</strong> <em>or</em> <strong>\f</strong> <em>or</em> <strong>\n</strong> <em>or</em> <strong>\r</strong> <em>or</em> <strong>\t</strong> + <em>or</em> <strong>\u</strong> <var>HexDigit</var> <var>HexDigit</var> <var>HexDigit</var> <var>HexDigit</var> +<var>HexDigit</var> = <strong>0</strong> through <strong>9</strong> + <em>or</em> <strong>A</strong> through <strong>F</strong> + <em>or</em> <strong>a</strong> through <strong>f</strong> + +<var>JSONObject</var> = <strong>{</strong> <strong>}</strong> + <em>or</em> <strong>{</strong> <var>Members</var> <strong>}</strong> +<var>Members</var> = <var>JSONString</var> <strong>:</strong> <var>JSON</var> + <em>or</em> <var>Members</var> <strong>,</strong> <var>JSONString</var> <strong>:</strong> <var>JSON</var> + +<var>JSONArray</var> = <strong>[</strong> <strong>]</strong> + <em>or</em> <strong>[</strong> <var>ArrayElements</var> <strong>]</strong> +<var>ArrayElements</var> = <var>JSON</var> + <em>or</em> <var>ArrayElements</var> <strong>,</strong> <var>JSON</var> +</pre> + +<p>Whitespace yang tidak signifikan dapat digunakan dimanasaja kecuali didalam <code><var>JSONNumber</var></code> (angka tidak dipisahkan dengan whitespace) atau <code><var>JSONString</var></code> (dimana ditafsirkan sebagai karakter yang sesuai dalam string; atau akan menyebabkan kesalahan). Karakter Tab (<a href="http://unicode-table.com/en/0009/">U+0009</a>), carriage return (<a href="http://unicode-table.com/en/000D/">U+000D</a>), line feed (<a href="http://unicode-table.com/en/000A/">U+000A</a>), dan karakter spasi (<a href="http://unicode-table.com/en/0020/">U+0020</a>) merupakan karakter whitespace yang valid.</p> + +<h2 id="Method">Method</h2> + +<dl> + <dt>{{jsxref("JSON.parse()")}}</dt> + <dd>Memparse string sebagai JSON, biasanya mengubah nilai yang diberikan beserta sifatnya, dan mengembalikan nilai.</dd> + <dt>{{jsxref("JSON.stringify()")}}</dt> + <dd>Mengembalikan string JSON berdasarkan nilai spesifik, biasanya termasuk beberapa properti tertentu saja atau mengganti nilai properti secara user-defined.</dd> +</dl> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Object JSON tidak didukung oleh browser lawas. Anda bisa menyiasatinya dengan memasukkan kode berikut di awal skrip Anda, memungkinkan penggunaan JSON objek dalam implementasi yang secara native tidak mendukung Object JSON (seperti Internet Explorer 6).</p> + +<p>Algoritma berikut adalah tiruan dari objek JSON asli:</p> + +<pre class="brush: js">if (!window.JSON) { + window.JSON = { + parse: function(sJSON) { return eval('(' + sJSON + ')'); }, + stringify: (function () { + var toString = Object.prototype.toString; + var isArray = Array.isArray || function (a) { return toString.call(a) === '[object Array]'; }; + var escMap = {'"': '\\"', '\\': '\\\\', '\b': '\\b', '\f': '\\f', '\n': '\\n', '\r': '\\r', '\t': '\\t'}; + var escFunc = function (m) { return escMap[m] || '\\u' + (m.charCodeAt(0) + 0x10000).toString(16).substr(1); }; + var escRE = /[\\"\u0000-\u001F\u2028\u2029]/g; + return function stringify(value) { + if (value == null) { + return 'null'; + } else if (typeof value === 'number') { + return isFinite(value) ? value.toString() : 'null'; + } else if (typeof value === 'boolean') { + return value.toString(); + } else if (typeof value === 'object') { + if (typeof value.toJSON === 'function') { + return stringify(value.toJSON()); + } else if (isArray(value)) { + var res = '['; + for (var i = 0; i < value.length; i++) + res += (i ? ', ' : '') + stringify(value[i]); + return res + ']'; + } else if (toString.call(value) === '[object Object]') { + var tmp = []; + for (var k in value) { + if (value.hasOwnProperty(k)) + tmp.push(stringify(k) + ': ' + stringify(value[k])); + } + return '{' + tmp.join(', ') + '}'; + } + } + return '"' + value.toString().replace(escRE, escFunc) + '"'; + }; + })() + }; +} +</pre> + +<p>Lebih kompleks dari <a class="external" href="http://remysharp.com/2010/10/08/what-is-a-polyfill/">polyfills</a> yang banyak dikenal untuk object <code>JSON</code> adalah <a class="link-https" href="https://github.com/douglascrockford/JSON-js">JSON2</a> dan <a class="external" href="http://bestiejs.github.com/json3">JSON3</a>.</p> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.12', 'JSON')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-json-object', 'JSON')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-json-object', 'JSON')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>{{CompatIE("8.0")}}</td> + <td>{{CompatOpera("10.5")}}</td> + <td>{{CompatSafari("4.0")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="sect1"> </h2> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li>{{jsxref("Date.prototype.toJSON()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/json/parse/index.html b/files/id/web/javascript/reference/global_objects/json/parse/index.html new file mode 100644 index 0000000000..5eb3f60424 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/json/parse/index.html @@ -0,0 +1,171 @@ +--- +title: JSON.parse() +slug: Web/JavaScript/Reference/Global_Objects/JSON/parse +tags: + - ECMAScript5 + - JSON + - Method + - Referensi +translation_of: Web/JavaScript/Reference/Global_Objects/JSON/parse +--- +<div>{{JSRef}}</div> + +<p>Method <strong><code>JSON.parse()</code></strong> memparse string ke JSON, biasanya mengubah nilai yang dihasilkan oleh parsing.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><code>JSON.parse(<var>text</var>[, <var>reviver</var>])</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>text</code></dt> + <dd>String yang akan di parse ke JSON. Lihat objek {{jsxref("JSON")}} untuk deskripsi lengkap sintaks JSON.</dd> + <dt><code>reviver</code> {{optional_inline}}</dt> + <dd>Jika sebuah fungsi, mendeskripsikan bagaimana nilai asli dihasilkan oleh parsing berubah, sebelum dikembalikan.</dd> +</dl> + +<h3 id="Pemulangan">Pemulangan</h3> + +<p>Mengembalikan {{jsxref("Object")}} sesuai dengan teks JSON yang diberikan.</p> + +<h3 id="Lontaran">Lontaran</h3> + +<p>Melontarkan pengecualian {{jsxref("SyntaxError")}} jika string yang di parse tidak sesuai JSON.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Menggunakan_JSON.parse()">Menggunakan <code>JSON.parse()</code></h3> + +<pre class="brush: js">JSON.parse('{}'); // {} +JSON.parse('true'); // true +JSON.parse('"foo"'); // "foo" +JSON.parse('[1, 5, "false"]'); // [1, 5, "false"] +JSON.parse('null'); // null +</pre> + +<h3 id="Menggunakan_parameter_reviver">Menggunakan parameter <code>reviver</code></h3> + +<p>Jika <code>reviver</code> telah ditentukan, nilai dihitung dengan parsing <em>transformed</em> sebelum dikembalikan. Khususnya, nilai yang terhitung, dan semua propertinya (dimulai dari properti yang paling bersarang dan berlanjut ke nilai asli), secara individu dijalankan melalui <code>reviver</code>, yang di panggil dengan objek yang berada di dalam properti yang akan diproses sebagai <code>this</code> dan dengan nama properti sebagai string dan nilai properti sebagai argumen. jika fungsi <code>reviver</code> mengembalikan {{jsxref("undefined")}} (tidak mengembalikan nilai, contoh, jika eksekusi gagal di akhir fungsi), properti akan dihapus dari objek. Jika tidak, properti akan didefinisikan ulang sebagai sebuah nilai kembali.</p> + +<p><code>reviver</code> dipanggil dengan string kosong dan nilai paling atas mengizinkan tranformsi dari nilai paling atas. Jadi untuk menangani kasus ini dengan baik, biasanya dengan mengembalikan nilai yang diberikan, atau <code>JSON.parse()</code> akan mengembalikan {{jsxref("undefined")}}.</p> + +<pre class="brush: js">JSON.parse('{"p": 5}', function(k, v) { + if (k === '') { return v; } // if topmost value, return it, + return v * 2; // else return v * 2. +}); // { p: 10 } + +JSON.parse('{"1": 1, "2": 2, "3": {"4": 4, "5": {"6": 6}}}', function(k, v) { + console.log(k); // log the current property name, the last is "". + return v; // return the unchanged property value. +}); + +// 1 +// 2 +// 4 +// 6 +// 5 +// 3 +// "" +</pre> + +<h3 id="JSON.parse()_tidak_mengizinkan_trailing_koma"><code>JSON.parse()</code> tidak mengizinkan trailing koma</h3> + +<pre class="example-bad brush: js">// both will <code>throw a SyntaxError</code> +JSON.parse('[1, 2, 3, 4, ]'); +JSON.parse('{"foo" : 1, }'); +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.12.2', 'JSON.parse')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.7.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-json.parse', 'JSON.parse')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-json.parse', 'JSON.parse')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_browser">Kompabilitas browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>{{CompatIE("8.0")}}</td> + <td>{{CompatOpera("10.5")}}</td> + <td>{{CompatSafari("4.0")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Gecko-specific_notes">Gecko-specific notes</h2> + +<p>Pada Gecko 29 {{geckoRelease("29")}}, string JSON yang gagal akan menampilkan pesan kesalahan yang lebih rinci tentang error dalam memparse. Hal ini sangat berguna ketika mendebug data JSON yang besar.</p> + +<pre class="brush: js">JSON.parse('[1, 2, 3, 4,]'); +// SyntaxError: JSON.parse: unexpected character at +// line 1 column 13 of the JSON data +</pre> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li>{{jsxref("JSON.stringify()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/map/clear/index.html b/files/id/web/javascript/reference/global_objects/map/clear/index.html new file mode 100644 index 0000000000..2869835e02 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/map/clear/index.html @@ -0,0 +1,109 @@ +--- +title: Map.prototype.clear() +slug: Web/JavaScript/Reference/Global_Objects/Map/clear +translation_of: Web/JavaScript/Reference/Global_Objects/Map/clear +--- +<div>{{JSRef}}</div> + +<p>Method <code><strong>clear()</strong></code> menghapus semua elemen yang ada pada objek <code>Map</code>.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><code><em>myMap</em>.clear();</code></pre> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Menggunakan_method_clear">Menggunakan method <code>clear</code></h3> + +<pre class="brush: js">var myMap = new Map(); +myMap.set("bar", "baz"); +myMap.set(1, "foo"); + +myMap.size; // 2 +myMap.has("bar"); // true + +myMap.clear(); + +myMap.size; // 0 +myMap.has("bar") // false +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-map.prototype.clear', 'Map.prototype.clear')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-map.prototype.clear', 'Map.prototype.clear')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_browser">Kompabilitas browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>38</td> + <td>{{CompatGeckoDesktop("19.0")}}</td> + <td>11</td> + <td>25</td> + <td>7.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Dukungan dasart</td> + <td>{{CompatNo}}</td> + <td>38</td> + <td>{{CompatGeckoMobile("19.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li>{{jsxref("Map")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/map/delete/index.html b/files/id/web/javascript/reference/global_objects/map/delete/index.html new file mode 100644 index 0000000000..ad9d1922b9 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/map/delete/index.html @@ -0,0 +1,114 @@ +--- +title: Map.prototype.delete() +slug: Web/JavaScript/Reference/Global_Objects/Map/delete +translation_of: Web/JavaScript/Reference/Global_Objects/Map/delete +--- +<div>{{JSRef}}</div> + +<p>Method <code><strong>delete()</strong></code> menghapus elemen yang ditentukan dari objek <code>Map</code>.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="brush: js">myMap.delete(key);</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt>key</dt> + <dd>Diperlukan. Kunci dari elemen untuk menghapusnya dari objek <code>Map</code>.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>Mengembalikan nilai <code>true</code> jika elemen yang ada di dalam objek <code>Map</code> ada dan telah dihapus, atau <code>false</code> jika elemen tidak ada.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Menggunakan_method_delete">Menggunakan method <code>delete</code></h3> + +<pre class="brush: js">var myMap = new Map(); +myMap.set("bar", "foo"); + +myMap.delete("bar"); // Returns true. Berhasil dihapus. +myMap.has("bar"); // Returns false. Elemen "bar" sudah tidak tersedia. +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-map.prototype.delete', 'Map.prototype.delete')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-map.prototype.delete', 'Map.prototype.delete')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Browser">Kompabilitas Browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>38</td> + <td>{{CompatGeckoDesktop("13.0")}}</td> + <td>11</td> + <td>25</td> + <td>7.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatNo}}</td> + <td>38</td> + <td>{{CompatGeckoMobile("13.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("Map")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/map/index.html b/files/id/web/javascript/reference/global_objects/map/index.html new file mode 100644 index 0000000000..9e4a93cfa0 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/map/index.html @@ -0,0 +1,443 @@ +--- +title: Map +slug: Web/JavaScript/Reference/Global_Objects/Map +tags: + - ECMAScript6 + - JavaScript + - Map + - NeedsTranslation + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/Map +--- +<div>{{JSRef}}</div> + +<p>The <strong><code>Map</code></strong> object is a simple key/value map. Any value (both objects and {{Glossary("Primitive", "primitive values")}}) may be used as either a key or a value.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>new Map([iterable]) +</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>iterable</code></dt> + <dd>Iterable is an Array or other iterable object whose elements are key-value pairs (2-element Arrays). Each key-value pair is added to the new Map. <code>null</code> is treated as <code>undefined</code>.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>A Map object iterates its elements in insertion order — a {{jsxref("Statements/for...of", "for...of")}} loop returns an array of <code>[key, value]</code> for each iteration.</p> + +<h3 id="Key_equality">Key equality</h3> + +<p>Key equality is based on the "same-value" algorithm: <code>NaN</code> is considered the same as <code>NaN</code> (even though <code>NaN !== NaN</code>) and all other values are considered equal according to the semantics of the === operator. In earlier versions of the ECMAScript 6 draft <code>-0</code> and <code>+0</code> were considered distinct (even though <code>-0 === +0</code>), this has been changed in later versions and has been adapted in Gecko 29 {{geckoRelease("29")}} ({{bug("952870")}}) and a <a href="https://code.google.com/p/v8/issues/detail?id=3069">recent nightly Chrome</a>.</p> + +<h3 id="Objects_and_maps_compared">Objects and maps compared</h3> + +<p>{{jsxref("Object", "Objects")}} are similar to <code>Maps</code> in that both let you set keys to values, retrieve those values, delete keys, and detect whether something is stored at a key. Because of this (and because there were no built-in alternatives), <code>Objects</code> have been used as <code>Maps</code> historically; however, there are important differences between <code>Objects</code> and <code>Maps</code> that make using a <code>Map</code> better:</p> + +<ul> + <li>An <code>Object</code> has a prototype, so there are default keys in the map. This could be bypassed by using <code>map = Object.create(null)</code> since ES5, but was seldomly done.</li> + <li>The keys of an <code>Object</code> are {{jsxref("String", "Strings")}} and {{jsxref("Symbol", "Symbols")}}, where they can be any value for a <code>Map</code>.</li> + <li>You can get the size of a <code>Map</code> easily while you have to manually keep track of size for an <code>Object</code>.</li> +</ul> + +<p>This does not mean you should use <code>Map</code>s everywhere, objects still are used in most cases. <code>Map</code> instances are only useful for collections, and you should consider adapting your code where you have previously used objects for such. Objects shall be used as records, with fields and methods.<br> + If you're still not sure which one to use, ask yourself the following questions:</p> + +<ul> + <li>Are keys usually unknown until run time, do you need to look them up dynamically?</li> + <li>Do all values have the same type, and can be used interchangeably?</li> + <li>Do you need keys that aren't strings?</li> + <li>Are key-value pairs often added or removed?</li> + <li>Do you have an arbitrary (easily changing) amount of key-value pairs?</li> + <li>Is the collection iterated?</li> +</ul> + +<p>Those all are signs that you want a <code>Map</code> for a collection. If in contrast you have a fixed amount of keys, operate on them individually, and distinguish between their usage, then you want an object.</p> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt><code>Map.length</code></dt> + <dd>The value of the <code>length</code> property is 0.</dd> + <dt>{{jsxref("Map.@@species", "get Map[@@species]")}}</dt> + <dd>The constructor function that is used to create derived objects.</dd> + <dt>{{jsxref("Map.prototype")}}</dt> + <dd>Represents the prototype for the <code>Map</code> constructor. Allows the addition of properties to all <code>Map</code> objects.</dd> +</dl> + +<h2 id="Map_instances"><code>Map</code> instances</h2> + +<p>All <code>Map</code> instances inherit from {{jsxref("Map.prototype")}}.</p> + +<h3 id="Properties_2">Properties</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Map/prototype','Properties')}}</p> + +<h3 id="Methods">Methods</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Map/prototype','Methods')}}</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_the_Map_object">Using the <code>Map</code> object</h3> + +<pre class="brush: js">var myMap = new Map(); + +var keyString = "a string", + keyObj = {}, + keyFunc = function () {}; + +// setting the values +myMap.set(keyString, "value associated with 'a string'"); +myMap.set(keyObj, "value associated with keyObj"); +myMap.set(keyFunc, "value associated with keyFunc"); + +myMap.size; // 3 + +// getting the values +myMap.get(keyString); // "value associated with 'a string'" +myMap.get(keyObj); // "value associated with keyObj" +myMap.get(keyFunc); // "value associated with keyFunc" + +myMap.get("a string"); // "value associated with 'a string'" + // because keyString === 'a string' +myMap.get({}); // undefined, because keyObj !== {} +myMap.get(function() {}) // undefined, because keyFunc !== function () {} +</pre> + +<h3 id="Using_NaN_as_Map_keys">Using <code>NaN</code> as <code>Map</code> keys</h3> + +<p><code>NaN</code> can also be used as a key. Even though every <code>NaN</code> is not equal to itself (<code>NaN !== NaN</code> is true), the following example works, because <code>NaN</code>s are indistinguishable from each other:</p> + +<pre class="brush: js">var myMap = new Map(); +myMap.set(NaN, "not a number"); + +myMap.get(NaN); // "not a number" + +var otherNaN = Number("foo"); +myMap.get(otherNaN); // "not a number" +</pre> + +<h3 id="Iterating_Maps_with_for..of">Iterating <code>Maps</code> with <code>for..of</code></h3> + +<p>Maps can be iterated using a <code>for..of</code> loop:</p> + +<pre class="brush: js">var myMap = new Map(); +myMap.set(0, "zero"); +myMap.set(1, "one"); +for (var [key, value] of myMap) { + console.log(key + " = " + value); +} +// Will show 2 logs; first with "0 = zero" and second with "1 = one" + +for (var key of myMap.keys()) { + console.log(key); +} +// Will show 2 logs; first with "0" and second with "1" + +for (var value of myMap.values()) { + console.log(value); +} +// Will show 2 logs; first with "zero" and second with "one" + +for (var [key, value] of myMap.entries()) { + console.log(key + " = " + value); +} +// Will show 2 logs; first with "0 = zero" and second with "1 = one" +</pre> + +<h3 id="Iterating_Maps_with_forEach()">Iterating <code>Maps</code> with <code>forEach()</code></h3> + +<p>Maps can be iterated using the <code>forEach()</code> method:</p> + +<pre class="brush: js">myMap.forEach(function(value, key) { + console.log(key + " = " + value); +}, myMap) +// Will show 2 logs; first with "0 = zero" and second with "1 = one" +</pre> + +<h3 id="Relation_with_Array_objects">Relation with <code>Array</code> objects</h3> + +<pre class="brush: js">var kvArray = [["key1", "value1"], ["key2", "value2"]]; + +// Use the regular Map constructor to transform a 2D key-value Array into a map +var myMap = new Map(kvArray); + +myMap.get("key1"); // returns "value1" + +// Use the spread operator to transform a map into a 2D key-value Array. +console.log(uneval([...myMap])); // Will show you exactly the same Array as kvArray + +// Or use the spread operator on the keys or values iterator to get +// an array of only the keys or values +console.log(uneval([...myMap.keys()])); // Will show ["key1", "key2"] +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-map-objects', 'Map')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-map-objects', 'Map')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td> + <p>{{ CompatChrome(38) }} [1]</p> + </td> + <td>{{ CompatGeckoDesktop("13") }}</td> + <td>11</td> + <td>25</td> + <td>7.1</td> + </tr> + <tr> + <td>Constructor argument: <code>new Map(iterable)</code></td> + <td>{{ CompatChrome(38) }}</td> + <td>{{ CompatGeckoDesktop("13") }}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>iterable</td> + <td>{{ CompatChrome(38) }}</td> + <td>{{ CompatGeckoDesktop("17") }}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>7.1</td> + </tr> + <tr> + <td><code>Map.clear()</code></td> + <td>{{ CompatChrome(31) }}<br> + {{ CompatChrome(38) }}</td> + <td>{{CompatGeckoDesktop("19")}}</td> + <td>11</td> + <td>25</td> + <td>7.1</td> + </tr> + <tr> + <td><code>Map.keys(), Map.values(), Map.entries()</code></td> + <td>{{ CompatChrome(37) }}<br> + {{ CompatChrome(38) }}</td> + <td>{{CompatGeckoDesktop("20")}}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>7.1</td> + </tr> + <tr> + <td><code>Map.forEach()</code></td> + <td>{{ CompatChrome(36) }}<br> + {{ CompatChrome(38) }}</td> + <td>{{CompatGeckoDesktop("25")}}</td> + <td>11</td> + <td>25</td> + <td>7.1</td> + </tr> + <tr> + <td>Key equality for -0 and 0</td> + <td>{{ CompatChrome(34) }}<br> + {{ CompatChrome(38) }}</td> + <td>{{CompatGeckoDesktop("29")}}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Constructor argument: <code>new Map(null)</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("37")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Monkey-patched <code>set()</code> in Constructor</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("37")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>Map[@@species]</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("41")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>Map()</code> without <code>new</code> throws</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatGeckoDesktop("42") }}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{ CompatChrome(38) }} [1]</td> + <td>{{ CompatGeckoMobile("13") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + <tr> + <td>Constructor argument: <code>new Map(iterable)</code></td> + <td>{{CompatNo}}</td> + <td>{{ CompatChrome(38) }}</td> + <td>{{ CompatGeckoMobile("13") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>iterable</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoMobile("17") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + <tr> + <td><code>Map.clear()</code></td> + <td>{{CompatNo}}</td> + <td>{{ CompatChrome(31) }}<br> + {{ CompatChrome(38) }}</td> + <td>{{CompatGeckoMobile("19")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + <tr> + <td><code>Map.keys(), Map.values(), Map.entries()</code></td> + <td>{{CompatNo}}</td> + <td>{{ CompatChrome(37) }}<br> + {{ CompatChrome(38) }}</td> + <td>{{CompatGeckoMobile("20")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + <tr> + <td><code>Map.forEach()</code></td> + <td>{{CompatNo}}</td> + <td>{{ CompatChrome(36) }}<br> + {{ CompatChrome(38) }}</td> + <td>{{CompatGeckoMobile("25")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + <tr> + <td>Key equality for -0 and 0</td> + <td>{{CompatNo}}</td> + <td>{{ CompatChrome(34) }}<br> + {{ CompatChrome(38) }}</td> + <td>{{CompatGeckoMobile("29")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Constructor argument: <code>new Map(null)</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("37")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Monkey-patched <code>set()</code> in Constructor</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("37")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>Map[@@species]</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("41")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>Map()</code> without <code>new</code> throws</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("42")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Starting with Chrome 31, the feature was available behind a preference. In <code>chrome://flags</code>, activate the entry “Enable Experimental JavaScript”.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=697479">Map and Set bug at Mozilla</a></li> + <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:simple_maps_and_sets">ECMAScript Harmony proposal</a></li> + <li>{{jsxref("Set")}}</li> + <li>{{jsxref("WeakMap")}}</li> + <li>{{jsxref("WeakSet")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/math/abs/index.html b/files/id/web/javascript/reference/global_objects/math/abs/index.html new file mode 100644 index 0000000000..c15b00b315 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/math/abs/index.html @@ -0,0 +1,145 @@ +--- +title: Math.abs() +slug: Web/JavaScript/Reference/Global_Objects/Math/abs +tags: + - Math + - abs + - math abs +translation_of: Web/JavaScript/Reference/Global_Objects/Math/abs +--- +<div>{{JSRef}}</div> + +<p>Fungsi Math.abs() mengembalikan nilai mutlak dari sebuah bilangan, yakni</p> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.abs</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mrow><mo stretchy="false">|</mo><mi>x</mi><mo stretchy="false">|</mo></mrow><mo>=</mo><mrow><mo>{</mo><mtable columnalign="left left"><mtr><mtd><mi>x</mi></mtd><mtd><mtext>if</mtext><mspace width="1em"></mspace><mi>x</mi><mo>></mo><mn>0</mn></mtd></mtr><mtr><mtd><mi>0</mi></mtd><mtd><mtext>if</mtext><mspace width="1em"></mspace><mi>x</mi><mo>=</mo><mn>0</mn></mtd></mtr><mtr><mtd><mo>-</mo><mi>x</mi></mtd><mtd><mtext>if</mtext><mspace width="1em"></mspace><mi>x</mi><mo><</mo><mn>0</mn></mtd></mtr></mtable></mrow></mrow><annotation encoding="TeX">{\mathtt{\operatorname{Math.abs}(x)}} = {|x|} = \begin{cases} x & \text{if} \quad x \geq 0 \\ -x & \text{if} \quad x < 0 \end{cases} </annotation></semantics></math></p> + +<h2 id="Sintak">Sintak</h2> + +<pre class="syntaxbox"><code>Math.abs(<var>x</var>)</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Sebuah bilangan.</dd> +</dl> + +<h3 id="Nilai_kembali">Nilai kembali</h3> + +<p>Nilai mutlak dari bilangan yang diberikan.</p> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Karena <code>abs()</code> merupakan sebuah metode statis dari Math, anda harus menggunakannya/menulisnya sebagai berikut <code>Math.abs()</code>, Bukan sebagai metode dari sebuah object Math yang anda buat (<code>Math</code> bukanlah sebuah konstruktor).</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Prilaku_dari_Math.abs()">Prilaku dari <code>Math.abs()</code></h3> + +<p>Mengabaikan objek kosong, sebuah array dengan lebih dari satu anggota, sebuah string non-numerik atau {{jsxref("undefined")}}/variabel kosong dikembalikan{{jsxref("NaN")}}. Mengabaikan {{jsxref("null")}}, sebuah string kosong atau sebuah array kosong akan menghasilkan 0.</p> + +<pre class="brush: js" dir="rtl">Math.abs('-1'); // 1 +Math.abs(-2); // 2 +Math.abs(null); // 0 +Math.abs(''); // 0 +Math.abs([]); // 0 +Math.abs([2]); // 2 +Math.abs([1,2]); // NaN +Math.abs({}); // NaN +Math.abs('string'); // NaN +Math.abs(); // NaN +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Komentar</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definisi awal. Diimplementasikan pada JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.1', 'Math.abs')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.abs', 'Math.abs')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.abs', 'Math.abs')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatibilitas_browser">Kompatibilitas browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Android</th> + <th>Chrome untuk Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("Math.ceil()")}}</li> + <li>{{jsxref("Math.floor()")}}</li> + <li>{{jsxref("Math.round()")}}</li> + <li>{{jsxref("Math.sign()")}}</li> + <li>{{jsxref("Math.trunc()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/math/ceil/index.html b/files/id/web/javascript/reference/global_objects/math/ceil/index.html new file mode 100644 index 0000000000..cba010ffdb --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/math/ceil/index.html @@ -0,0 +1,174 @@ +--- +title: Math.ceil() +slug: Web/JavaScript/Reference/Global_Objects/Math/ceil +tags: + - JavaScript + - Math + - Metode + - Referensi +translation_of: Web/JavaScript/Reference/Global_Objects/Math/ceil +--- +<div>{{JSRef}}</div> + +<p>Fungsi Math.ceil() adalah memberikan nilai integer lebih-besar-dari terkecil atau sama-dengan (pembulatan ke atas) nilai yang ditentukan.</p> + +<p><strong>Catatan: </strong>Nilai kembalian Math.ceil(null) adalah integer 0 dan tidak memberikan kesalahan NaN.</p> + +<div>{{EmbedInteractiveExample("pages/js/math-ceil.html")}}</div> + + + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><code>Math.ceil(<var>x</var>)</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Sebuah angka.</dd> +</dl> + +<h3 id="Nilai_kembali">Nilai kembali</h3> + +<p>Nilai integer lebih-besar-dari terkecil atau sama-dengan (pembulatan ke atas) nilai yang ditentukan.</p> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Karena <code>ceil()</code> adalah sebuah metode statis dari Math, Anda harus selalu menggunakan sebagai <code>Math.ceil()</code>, bukan sebagai metode dari object Math yang Anda buat (<code>Math</code> bukanlah sebuah konstruktor).</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Menggunakan_Math.ceil()">Menggunakan <code>Math.ceil()</code></h3> + +<p>Berikut adalah contoh penggunaan dari <code>Math.ceil()</code>.</p> + +<pre class="brush: js">Math.ceil(.95); // 1 +Math.ceil(4); // 4 +Math.ceil(7.004); // 8 +Math.ceil(-0.95); // -0 +Math.ceil(-4); // -4 +Math.ceil(-7.004); // -7 +</pre> + +<h3 id="Penyesuaian_desimal">Penyesuaian desimal</h3> + +<pre class="brush: js">// Closure +(function() { + /** + * Penyesuaian desimal dari sebuah angka. + * + * @param {String} type Tipe dari penyesuaian. + * @param {Number} value Angka. + * @param {Integer} exp Eksponen (10 logaritma basis penyesuaian). + * @returns {Number} Nilai yang di sesuaikan. + */ + function decimalAdjust(type, value, exp) { + // jika exp adalah undefined atau nol... + if (typeof exp === 'undefined' || +exp === 0) { + return Math[type](value); + } + value = +value; + exp = +exp; + // Jika nilai adalah bukan sebuah angka atau bilangan integer... + if (isNaN(value) || !(typeof exp === 'number' && exp % 1 === 0)) { + return NaN; + } + // Shift + value = value.toString().split('e'); + value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp))); + // Shift back + value = value.toString().split('e'); + return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp)); + } + + // Decimal round + if (!Math.round10) { + Math.round10 = function(value, exp) { + return decimalAdjust('round', value, exp); + }; + } + // Decimal floor + if (!Math.floor10) { + Math.floor10 = function(value, exp) { + return decimalAdjust('floor', value, exp); + }; + } + // Decimal ceil + if (!Math.ceil10) { + Math.ceil10 = function(value, exp) { + return decimalAdjust('ceil', value, exp); + }; + } +})(); + +// Round +Math.round10(55.55, -1); // 55.6 +Math.round10(55.549, -1); // 55.5 +Math.round10(55, 1); // 60 +Math.round10(54.9, 1); // 50 +Math.round10(-55.55, -1); // -55.5 +Math.round10(-55.551, -1); // -55.6 +Math.round10(-55, 1); // -50 +Math.round10(-55.1, 1); // -60 +// Floor +Math.floor10(55.59, -1); // 55.5 +Math.floor10(59, 1); // 50 +Math.floor10(-55.51, -1); // -55.6 +Math.floor10(-51, 1); // -60 +// Ceil +Math.ceil10(55.51, -1); // 55.6 +Math.ceil10(51, 1); // 60 +Math.ceil10(-55.59, -1); // -55.5 +Math.ceil10(-59, 1); // -50 +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Komen</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definisi awal. Diimplementasikan dalam JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.6', 'Math.ceil')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.ceil', 'Math.ceil')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.ceil', 'Math.ceil')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatibilitas_peramban">Kompatibilitas peramban</h2> + +<div> +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("javascript.builtins.Math.ceil")}}</p> + +<h2 id="Lihat_pula">Lihat pula</h2> + +<ul> + <li>{{jsxref("Math.abs()")}}</li> + <li>{{jsxref("Math.floor()")}}</li> + <li>{{jsxref("Math.round()")}}</li> + <li>{{jsxref("Math.sign()")}}</li> + <li>{{jsxref("Math.trunc()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/math/e/index.html b/files/id/web/javascript/reference/global_objects/math/e/index.html new file mode 100644 index 0000000000..79e9f21f4a --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/math/e/index.html @@ -0,0 +1,81 @@ +--- +title: Math.E +slug: Web/JavaScript/Reference/Global_Objects/Math/E +translation_of: Web/JavaScript/Reference/Global_Objects/Math/E +--- +<div>{{JSRef}}</div> + +<p>Properti <strong><code>Math.E</code></strong> mewakili dasar logaritma alami, e, mendekati 2.718.</p> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.E</mi></mstyle><mo>=</mo><mi>e</mi><mo>≈</mo><mn>2.718</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.E}} = e \approx 2.718</annotation></semantics></math></p> + +<div>{{EmbedInteractiveExample("pages/js/math-e.html")}}</div> + +<p class="hidden">Sumber untuk contoh interaktif ini disimpan di repositori GitHub. Apabila anda ingin berkontribusi dalam proyek contoh interaktif tersebut, silahkan klon <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> dan kirimi kami sebuah pull request.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Karena <code>E</code> adalah sebuah properti matematika statis, saudara selalu menggunakannya sebagai <code>Math.E</code>, daripada sebagai sebuah properti dari objek matematika yang saudara buat. (<code>Math</code> bukan sebuah konstruktor).</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Menggunakan_Math.E">Menggunakan <code>Math.E</code></h3> + +<p>Fungsi berikut menampilkan nilai e:</p> + +<pre class="brush: js">function getNapier() { + return Math.E; +} + +getNapier(); // 2.718281828459045 +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Komentar</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td> + <p>definisi inisial. Diimplementasikan dalam JavaScript 1.0.</p> + </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.1.1', 'Math.E')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.e', 'Math.E')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.e', 'Math.E')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatibilitas_browser">Kompatibilitas browser</h2> + +<p class="hidden">Tabel kompatibilitas pada halaman ini dihasilkan dari data terstruktur. Apabila anda ingin berkontribusi, silahkan kunjungi <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> dan kirimi kami pull request.</p> + +<p>{{Compat("javascript.builtins.Math.E")}}</p> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li>{{jsxref("Math.exp()")}}</li> + <li>{{jsxref("Math.log()")}}</li> + <li>{{jsxref("Math.log1p()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/math/floor/index.html b/files/id/web/javascript/reference/global_objects/math/floor/index.html new file mode 100644 index 0000000000..ecd6e89cdd --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/math/floor/index.html @@ -0,0 +1,210 @@ +--- +title: Math.floor() +slug: Web/JavaScript/Reference/Global_Objects/Math/floor +tags: + - Math + - math floor + - pembulatan + - pembulatan bilangan + - pembulatan kebawah javascript +translation_of: Web/JavaScript/Reference/Global_Objects/Math/floor +--- +<div>{{JSRef}}</div> + +<p>Fungsi Math.floor() mengembalikan bilangan bulat terbesar yang kurang dari atau sama dengan bilangan yang diberikan.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><code>Math.floor(<var>x</var>)</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Sebuah bilangan.</dd> +</dl> + +<h3 id="Nilai_kembali">Nilai kembali</h3> + +<p>Sebuah bilangan yang merepresentasikan bilangan bulat terbesar yang kurang dari atau sama dengan nilai yang diberikan</p> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Karena <code>floor()</code> adalah sebuah metode statis dari <code>Math</code>, sintaks yang harus anda gunakan adalah <code>Math.floor()</code>, bukan sebagai metode dari obyek Math yang anda buat (<font face="Consolas, Liberation Mono, Courier, monospace">Math bukanlah sebuah konstruktor</font>).</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Penggunaan_Math.floor()">Penggunaan <code>Math.floor()</code></h3> + +<pre class="brush: js">Math.floor( 45.95); // 45 +Math.floor( 45.05); // 45 +Math.floor( 4 ); // 4 +Math.floor(-45.05); // -46 +Math.floor(-45.95); // -46 +</pre> + +<h3 id="Penyesuaian_desimal">Penyesuaian desimal</h3> + +<pre class="brush: js">// Closure +(function() { + /** + * Penyesuaian desimal dari sebuah bilangan. + * + * @param {String} type Jenis penyesuaian. + * @param {Number} value Nomor. + * @param {Integer} exp Eksponen (10 logaritma dari penyesuaian dasar). + * @returns {Number} Nilai yang disesuaikan. + */ + function decimalAdjust(jenis, nilai, eks) { + // Jika eks adalah undefined(belum didefinisikan) atau kosong... + if (typeof eks === 'undefined' || +eks === 0) { + return Math[jenis](nilai); + } + nilai = +nilai; + eks= +eks; + // Jika nilai bukan sebuah angka atau eks bukan sebuah bilangan integer... + if (isNaN(nilai) || !(typeof eks === 'number' && eks % 1 === 0)) { + return NaN; + } + // Pengalihan + nilai = nilai.toString().split('e'); + nilai = Math[jenis](+(nilai[0] + 'e' + (nilai[1] ? (+nilai[1] - eks) : -eks))); + // pengalihan kembali + nilai = nilai.toString().split('e'); + return +(nilai[0] + 'e' + (nilai[1] ? (+nilai[1] + eks) : eks)); + } + + // Desimal bulat + if (!Math.round10) { + Math.round10 = function(nilai, eks) { + return decimalAdjust('round', nilai, eks); + }; + } + // Desimal floor + if (!Math.floor10) { + Math.floor10 = function(nilai, eks) { + return decimalAdjust('floor', nilai, eks); + }; + } + // Desimal ceil + if (!Math.ceil10) { + Math.ceil10 = function(nilai, eks) { + return decimalAdjust('ceil', nilai, eks); + }; + } +})(); + +// Round +Math.round10(55.55, -1); // 55.6 +Math.round10(55.549, -1); // 55.5 +Math.round10(55, 1); // 60 +Math.round10(54.9, 1); // 50 +Math.round10(-55.55, -1); // -55.5 +Math.round10(-55.551, -1); // -55.6 +Math.round10(-55, 1); // -50 +Math.round10(-55.1, 1); // -60 +// Floor +Math.floor10(55.59, -1); // 55.5 +Math.floor10(59, 1); // 50 +Math.floor10(-55.51, -1); // -55.6 +Math.floor10(-51, 1); // -60 +// Ceil +Math.ceil10(55.51, -1); // 55.6 +Math.ceil10(51, 1); // 60 +Math.ceil10(-55.59, -1); // -55.5 +Math.ceil10(-59, 1); // -50 +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Komentar</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definisi awal. Diimplementasikan pada JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.9', 'Math.floor')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.floor', 'Math.floor')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.floor', 'Math.floor')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatibilitas_browser">Kompatibilitas browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("Math.abs()")}}</li> + <li>{{jsxref("Math.ceil()")}}</li> + <li>{{jsxref("Math.round()")}}</li> + <li>{{jsxref("Math.sign()")}}</li> + <li>{{jsxref("Math.trunc()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/math/index.html b/files/id/web/javascript/reference/global_objects/math/index.html new file mode 100644 index 0000000000..4d9bb6a9bb --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/math/index.html @@ -0,0 +1,213 @@ +--- +title: Math +slug: Web/JavaScript/Reference/Global_Objects/Math +tags: + - JavaScript + - Math + - NeedsTranslation + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/Math +--- +<div>{{JSRef}}</div> + +<p><strong><code>Math</code></strong> merupakan objek built-in yang memiliki properti dan method untuk perhitungan konstan dan fungsi. bukan Fungsi Objek.</p> + +<h2 id="Description">Description</h2> + +<p>Tidak seperti global objects lain, <code>Math</code> bukanlah constructor. Semua properti dan method dari <code>Math</code> adalah static. You refer to the constant pi as <code>Math.PI</code> and you call the sine function as <code>Math.sin(x)</code>, where <code>x</code> is the method's argument. Constants are defined with the full precision of real numbers in JavaScript.</p> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{jsxref("Math.E")}}</dt> + <dd>Euler's constant and the base of natural logarithms, approximately 2.718.</dd> + <dt>{{jsxref("Math.LN2")}}</dt> + <dd>Natural logarithm of 2, approximately 0.693.</dd> + <dt>{{jsxref("Math.LN10")}}</dt> + <dd>Natural logarithm of 10, approximately 2.303.</dd> + <dt>{{jsxref("Math.LOG2E")}}</dt> + <dd>Base 2 logarithm of E, approximately 1.443.</dd> + <dt>{{jsxref("Math.LOG10E")}}</dt> + <dd>Base 10 logarithm of E, approximately 0.434.</dd> + <dt>{{jsxref("Math.PI")}}</dt> + <dd>Ratio of the circumference of a circle to its diameter, approximately 3.14159.</dd> + <dt>{{jsxref("Math.SQRT1_2")}}</dt> + <dd>Square root of 1/2; equivalently, 1 over the square root of 2, approximately 0.707.</dd> + <dt>{{jsxref("Math.SQRT2")}}</dt> + <dd>Square root of 2, approximately 1.414.</dd> +</dl> + +<h2 id="Method">Method</h2> + +<div class="note"> +<p>Note that the trigonometric functions (<code>sin()</code>, <code>cos()</code>, <code>tan()</code>, <code>asin()</code>, <code>acos()</code>, <code>atan()</code>, <code>atan2()</code>) expect or return angles in radians. To convert radians to degrees, divide by <code>(Math.PI / 180)</code>, and multiply by this to convert the other way.</p> +</div> + +<div class="note"> +<p>Note that a lot of the math functions have a precision that's implementation-dependent. This means that different browsers can give a different result, and even the same JS engine on a different OS or architecture can give different results.</p> +</div> + +<dl> + <dt>{{jsxref("Global_Objects/Math/abs", "Math.abs(x)")}}</dt> + <dd>Returns the absolute value of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/acos", "Math.acos(x)")}}</dt> + <dd>Returns the arccosine of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/acosh", "Math.acosh(x)")}}</dt> + <dd>Returns the hyperbolic arccosine of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/asin", "Math.asin(x)")}}</dt> + <dd>Returns the arcsine of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/asinh", "Math.asinh(x)")}}</dt> + <dd>Returns the hyperbolic arcsine of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/atan", "Math.atan(x)")}}</dt> + <dd>Returns the arctangent of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/atanh", "Math.atanh(x)")}}</dt> + <dd>Returns the hyperbolic arctangent of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/atan2", "Math.atan2(y, x)")}}</dt> + <dd>Returns the arctangent of the quotient of its arguments.</dd> + <dt>{{jsxref("Global_Objects/Math/cbrt", "Math.cbrt(x)")}}</dt> + <dd>Returns the cube root of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/ceil", "Math.ceil(x)")}}</dt> + <dd>Returns the smallest integer greater than or equal to a number.</dd> + <dt>{{jsxref("Global_Objects/Math/clz32", "Math.clz32(x)")}}</dt> + <dd>Returns the number of leading zeroes of a 32-bit integer.</dd> + <dt>{{jsxref("Global_Objects/Math/cos", "Math.cos(x)")}}</dt> + <dd>Returns the cosine of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/cosh", "Math.cosh(x)")}}</dt> + <dd>Returns the hyperbolic cosine of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/exp", "Math.exp(x)")}}</dt> + <dd>Returns E<sup>x</sup>, where <var>x</var> is the argument, and E is Euler's constant (2.718…), the base of the natural logarithm.</dd> + <dt>{{jsxref("Global_Objects/Math/expm1", "Math.expm1(x)")}}</dt> + <dd>Returns subtracting 1 from <code>exp(x)</code>.</dd> + <dt>{{jsxref("Global_Objects/Math/floor", "Math.floor(x)")}}</dt> + <dd>Returns the largest integer less than or equal to a number.</dd> + <dt>{{jsxref("Global_Objects/Math/fround", "Math.fround(x)")}}</dt> + <dd>Returns the nearest <a href="http://en.wikipedia.org/wiki/Single-precision_floating-point_format" title="link to the wikipedia page on single precision">single precision</a> float representation of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/hypot", "Math.hypot([x[, y[, …]]])")}}</dt> + <dd>Returns the square root of the sum of squares of its arguments.</dd> + <dt>{{jsxref("Global_Objects/Math/imul", "Math.imul(x, y)")}}</dt> + <dd>Returns the result of a 32-bit integer multiplication.</dd> + <dt>{{jsxref("Global_Objects/Math/log", "Math.log(x)")}}</dt> + <dd>Returns the natural logarithm (log<sub>e</sub>, also ln) of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/log1p", "Math.log1p(x)")}}</dt> + <dd>Returns the natural logarithm of <code>1 + x</code> (log<sub>e</sub>, also ln) of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/log10", "Math.log10(x)")}}</dt> + <dd>Returns the base 10 logarithm of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/log2", "Math.log2(x)")}}</dt> + <dd>Returns the base 2 logarithm of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/max", "Math.max([x[, y[, …]]])")}}</dt> + <dd>Returns the largest of zero or more numbers.</dd> + <dt>{{jsxref("Global_Objects/Math/min", "Math.min([x[, y[, …]]])")}}</dt> + <dd>Returns the smallest of zero or more numbers.</dd> + <dt>{{jsxref("Global_Objects/Math/pow", "Math.pow(x, y)")}}</dt> + <dd>Returns base to the exponent power, that is, <code>base<sup>exponent</sup></code>.</dd> + <dt>{{jsxref("Global_Objects/Math/random", "Math.random()")}}</dt> + <dd>Returns a pseudo-random number between 0 and 1.</dd> + <dt>{{jsxref("Global_Objects/Math/round", "Math.round(x)")}}</dt> + <dd>Returns the value of a number rounded to the nearest integer.</dd> + <dt>{{jsxref("Global_Objects/Math/sign", "Math.sign(x)")}}</dt> + <dd>Returns the sign of the x, indicating whether x is positive, negative or zero.</dd> + <dt>{{jsxref("Global_Objects/Math/sin", "Math.sin(x)")}}</dt> + <dd>Returns the sine of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/sinh", "Math.sinh(x)")}}</dt> + <dd>Returns the hyperbolic sine of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/sqrt", "Math.sqrt(x)")}}</dt> + <dd>Returns the positive square root of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/tan", "Math.tan(x)")}}</dt> + <dd>Returns the tangent of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/tanh", "Math.tanh(x)")}}</dt> + <dd>Returns the hyperbolic tangent of a number.</dd> + <dt><code>Math.toSource()</code> {{non-standard_inline}}</dt> + <dd>Returns the string <code>"Math"</code>.</dd> + <dt>{{jsxref("Global_Objects/Math/trunc", "Math.trunc(x)")}}</dt> + <dd>Returns the integral part of the number x, removing any fractional digits.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8', 'Math')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math-object', 'Math')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New methods {{jsxref("Math.log10()", "log10()")}}, {{jsxref("Math.log2()", "log2()")}}, {{jsxref("Math.log1p()", "log1p()")}}, {{jsxref("Math.expm1()", "expm1()")}}, {{jsxref("Math.cosh()", "cosh()")}}, {{jsxref("Math.sinh()", "sinh()")}}, {{jsxref("Math.tanh()", "tanh()")}}, {{jsxref("Math.acosh()", "acosh()")}}, {{jsxref("Math.asinh()", "asinh()")}}, {{jsxref("Math.atanh()", "atanh()")}}, {{jsxref("Math.hypot()", "hypot()")}}, {{jsxref("Math.trunc()", "trunc()")}}, {{jsxref("Math.sign()", "sign()")}}, {{jsxref("Math.imul()", "imul()")}}, {{jsxref("Math.fround()", "fround()")}}, {{jsxref("Math.cbrt()", "cbrt()")}} and {{jsxref("Math.clz32()", "clz32()")}} added.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math-object', 'Math')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Number")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/math/ln10/index.html b/files/id/web/javascript/reference/global_objects/math/ln10/index.html new file mode 100644 index 0000000000..04e4fe5468 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/math/ln10/index.html @@ -0,0 +1,81 @@ +--- +title: Math.LN10 +slug: Web/JavaScript/Reference/Global_Objects/Math/LN10 +translation_of: Web/JavaScript/Reference/Global_Objects/Math/LN10 +--- +<div>{{JSRef}}</div> + +<p>Properti <strong><code>Math.LN10</code></strong> mewakili logaritma alami dari 10, mendekati 2.302:</p> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.LN10</mi></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mo stretchy="false">(</mo><mn>10</mn><mo stretchy="false">)</mo><mo>≈</mo><mn>2.302</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.LN10}} = \ln(10) \approx 2.302</annotation></semantics></math></p> + +<div>{{EmbedInteractiveExample("pages/js/math-ln10.html")}}</div> + +<p class="hidden">Sumber dari contoh interaktif ini disimpan di repositori GitHub. Apabila saudara ingin berkontribusi, silahkan klon <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> dan kirimi kami sebuah pull request.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Karena <code>LN10</code> adalah sebuah properti matematika statis, saudara selalu menggunakannya sebagai <code>Math.LN10</code>, daripada sebagai sebuah properti objek matematika yang saudara buat (<code>Math</code> bukan sebuah konstruktor).</p> + +<p><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 40px;"><strong>Contoh</strong></span></font></p> + +<p> + </p><h3 id="Menggunakan_Math.LN10">Menggunakan <code>Math.LN10</code></h3> +<p></p> + +<p>Fungsi berikut menampilkan log alami dari 10:</p> + +<pre class="brush:js">function getNatLog10() { + return Math.LN10; +} + +getNatLog10(); // 2.302585092994046 +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specisifikasi</th> + <th scope="col">Status</th> + <th scope="col">Komentar</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definisi inisial. Diimplementasikan di JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.1.2', 'Math.LN10')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.ln10', 'Math.LN10')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.ln10', 'Math.LN10')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatibilitas_browser">Kompatibilitas browser</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Math.LN10")}}</p> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("Math.exp()")}}</li> + <li>{{jsxref("Math.log()")}}</li> + <li>{{jsxref("Math.log10()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/math/max/index.html b/files/id/web/javascript/reference/global_objects/math/max/index.html new file mode 100644 index 0000000000..aeb1b207ce --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/math/max/index.html @@ -0,0 +1,144 @@ +--- +title: Math.max() +slug: Web/JavaScript/Reference/Global_Objects/Math/max +tags: + - JavaScript + - Math + - Method + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Math/max +--- +<div>{{JSRef}}</div> + +<p>Fungsi <strong><code>Math.max()</code></strong> mengembalikan nilai terbesar dari zero atau lebih besar.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><code>Math.max([<var>value1</var>[, <var>value2</var>[, ...]]])</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>value1, value2, ...</code></dt> + <dd>Nomor.</dd> +</dl> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Karena <code>max()</code> merupakan method static dari <code>Math</code>, anda perlu menggunakan <code>Math.max()</code>, daripada sebagai method dari objek <code>Math</code> yang anda buat (<code>Math</code> bukan constructor).</p> + +<p>Jika tidak diberi argumen, hasilnya akan -{{jsxref("Infinity")}}.</p> + +<p>Jika setidaknya satu argumen tidak dapat dikonversi ke angka, maka hasilnya {{jsxref("NaN")}}.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Penggunaan_Math.max()">Penggunaan <code>Math.max()</code></h3> + +<pre class="brush: js">Math.max(10, 20); // 20 +Math.max(-10, -20); // -10 +Math.max(-10, 20); // 20 +</pre> + +<p>Pada contoh menggunakan fungsi {{jsxref("Function.prototype.apply()")}} untuk mencari nilai elemen maksimum pada sebuah numeric array. <code>getMaxOfArray([1, 2, 3])</code> sama halnya dengan <code>Math.max(1, 2, 3)</code>, tapi anda bisa menggunakan <code>getMaxOfArray()</code> pada programmatikal pembuatan array untuk semua ukuran.</p> + +<pre class="brush: js">function getMaxOfArray(numArray) { + return Math.max.apply(null, numArray); +} +</pre> + +<p>Atau dengan {{jsxref("Operators/Spread_operator", "spread operator")}} baru, mencari nilai terbesar menjadi lebih mudah.</p> + +<pre class="brush: js">var arr = [1, 2, 3]; +var max = Math.max(...arr); +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.11', 'Math.max')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.max', 'Math.max')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.max', 'Math.max')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Browser">Kompabilitas Browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("Math.min()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/math/min/index.html b/files/id/web/javascript/reference/global_objects/math/min/index.html new file mode 100644 index 0000000000..eb557f36bf --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/math/min/index.html @@ -0,0 +1,150 @@ +--- +title: Math.min() +slug: Web/JavaScript/Reference/Global_Objects/Math/min +tags: + - JavaScript + - Math + - Method + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Math/min +--- +<div>{{JSRef}}</div> + +<p>Function <strong><code>Math.min()</code></strong> mengembalikan nilai terkecil dari zero atau lebih kecil.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><code>Math.min([<var>value1</var>[, <var>value2</var>[, ...]]])</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>value1, value2, ...</code></dt> + <dd>Nomor.</dd> +</dl> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Karena <code>min()</code> merupakan static method dari <code>Math</code>, anda perlu menggunakan <code>Math.min()</code>, daripada sebagai method dari objek <code>Math</code> yang anda buat (<code>Math</code> bukanlah konstruktor).</p> + +<p>Jika tidak diberi argumen, hasilnya adalah {{jsxref("Infinity")}}.</p> + +<p>Jika setidaknya satu argumen tidak bisa di konversi ke angka, maka hasilnya{{jsxref("NaN")}}.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Menggunakan_Math.min()">Menggunakan <code>Math.min()</code></h3> + +<p>Mencari nilai terkecil diantara <code>x</code> dan <code>y</code> dan menyimpannya di variabel <code>z</code>:</p> + +<pre class="brush: js">var x = 10, y = -20; +var z = Math.min(x, y); +</pre> + +<h3 id="Mengambil_nilai_dengan_Math.min()">Mengambil nilai dengan <code>Math.min()</code></h3> + +<p><code>Math.min()</code> biasa digunakan untuk mengambil nilai yang terkecil atau sama berdasarkan batasan yang ada. contoh sebagai berikut.</p> + +<pre class="brush: js">var x = f(foo); + +if (x > boundary) { + x = boundary; +} +</pre> + +<p>bisa ditulis sebagai berikut</p> + +<pre class="brush: js">var x = Math.min(f(foo), boundary); +</pre> + +<p>{{jsxref("Math.max()")}} bisa digunakan sama halnya denga mengambil nilai pada setiap batasan.</p> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.12', 'Math.min')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.min', 'Math.min')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.min', 'Math.min')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_browser">Kompabilitas browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("Math.max()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/math/pow/index.html b/files/id/web/javascript/reference/global_objects/math/pow/index.html new file mode 100644 index 0000000000..878fde0e04 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/math/pow/index.html @@ -0,0 +1,53 @@ +--- +title: Math.pow +slug: Web/JavaScript/Reference/Global_Objects/Math/pow +translation_of: Web/JavaScript/Reference/Global_Objects/Math/pow +--- +<h2 id="Summary" name="Summary">Ringkasan</h2> +<p>Mengembalikan <code>bilangan</code> terhadap Pangkat <code>exponent</code>,<span style="line-height: 1.572;"> yaitu, </span><code style="font-size: 14px;">bilangan<sup>eksponen</sup></code><span style="line-height: 1.572;">.</span></p> +<table class="standard-table"> + <thead> + <tr> + <th class="header" colspan="2"><em>Method</em> dari <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Math"><code>Math</code></a></th> + </tr> + </thead> + <tbody> + <tr> + <td>Diimplementasikan pada</td> + <td>JavaScript 1.0</td> + </tr> + <tr> + <td>Edisi ECMAScript</td> + <td>ECMAScript 1st Edition</td> + </tr> + </tbody> +</table> +<h2 id="Syntax" name="Syntax">Sintaks</h2> +<pre class="syntaxbox"><code>Math.pow(<em>bilangan</em>, <em>eksponen</em>) </code></pre> +<h3 id="Parameters" name="Parameters">Parameter</h3> +<dl> + <dt> + <code>bilangan</code></dt> + <dd> + Bilangan pokok.</dd> + <dt> + <code>eksponen</code></dt> + <dd> + Eksponen yang digunakan untuk memangkatkan bilangan pokok.</dd> +</dl> +<h2 id="Description" name="Description">Deskripsi</h2> +<p>Karena <code>pow</code> adalah sebuah <em>static method</em> dari <code>Math</code>, anda senantiasa menggunakannya sebagai <code>Math.pow()</code>, daripada sebagai sebuah <em>method</em> dari sebuah Objek <em><code>Math</code></em> yang anda buat.</p> +<h2 id="Examples" name="Examples">Contoh</h2> +<h3 id="Example:_Using_Math.pow" name="Example:_Using_Math.pow">Contoh: Penggunaan <code>Math.pow</code></h3> +<pre class="brush:js">function raisePower(x,y) { + return Math.pow(x,y) +}</pre> +<p>Jika <code>x</code> adalah 7 dan <code>y</code> adalah 2, raisePower mengembalikan 49 (7 dipangkatkan 2).</p> +<h2 id="See_also" name="See_also">Lihat juga</h2> +<ul> + <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Math/exp" title="JavaScript/Reference/Global_Objects/Math/exp">Math.exp</a></li> + <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Math/log" title="JavaScript/Reference/Global_Objects/Math/log">Math.log</a> + <p> </p> + </li> + +</ul> diff --git a/files/id/web/javascript/reference/global_objects/object/getprototypeof/index.html b/files/id/web/javascript/reference/global_objects/object/getprototypeof/index.html new file mode 100644 index 0000000000..6ac06ec718 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/object/getprototypeof/index.html @@ -0,0 +1,133 @@ +--- +title: Object.getPrototypeOf() +slug: Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf +translation_of: Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf +--- +<div>{{JSRef}}</div> + +<p>Metode <code><strong>Object.getPrototypeOf()</strong></code> mengembalikan nilai prototipe dari obyek yang disebutkan (misalnya, nilai dari properti internal <code>[[Prototype]]</code>).</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><code>Object.getPrototypeOf(<var>obj</var>)</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>Obyek yang memiliki prototipe.</dd> +</dl> + +<h3 id="Nilai_kembali">Nilai kembali</h3> + +<p>Prototipe dari obyek yang diberikan. Jika tidak ada property yang ditemukan, {{jsxref("null")}} yang akan dikembalikan.</p> + +<h2 id="Contoh">Contoh</h2> + +<pre class="brush: js">var proto = {}; +var obj = Object.create(proto); +Object.getPrototypeOf(obj) === proto; // true +</pre> + +<h2 id="Catatan">Catatan</h2> + +<p>Dalam ES5, akan melemparkan eksepsi {{jsxref("TypeError")}} jika parameter <code>obj</code> parameter bukanlah sebuah obyek. Dalam ES6, parameter akan dipaksa menjadi {{jsxref("Object")}}.</p> + +<pre class="brush: js">Object.getPrototypeOf("foo"); +// TypeError: "foo" is not an object (ES5 code) +Object.getPrototypeOf("foo"); +// String.prototype (ES6 code) +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Komentar</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.2', 'Object.getPrototypeOf')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definisi awal.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.getprototypeof', 'Object.getProtoypeOf')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.getprototypeof', 'Object.getProtoypeOf')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatibilitas_perambah">Kompatibilitas perambah</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatChrome("5")}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatOpera("12.10")}}</td> + <td>{{CompatSafari("5")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Catatan_khusus_Opera">Catatan khusus Opera</h2> + +<p>Meskipun Opera dengan versi yang lebih lama belum mendukung <code>Object.getPrototypeOf()</code>, Opera mendukung properti non-standar {{jsxref("Object.proto", "__proto__")}} sejak Opera 10.50.</p> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li> + <li>{{jsxref("Object.setPrototypeOf()")}}</li> + <li>{{jsxref("Object.prototype.__proto__")}}</li> + <li>John Resig's post on <a class="external" href="http://ejohn.org/blog/objectgetprototypeof/">getPrototypeOf</a></li> + <li>{{jsxref("Reflect.getPrototypeOf()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/object/index.html b/files/id/web/javascript/reference/global_objects/object/index.html new file mode 100644 index 0000000000..cc79ab6890 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/object/index.html @@ -0,0 +1,221 @@ +--- +title: Object +slug: Web/JavaScript/Reference/Global_Objects/Object +tags: + - Constructor + - JavaScript + - Object + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/Object +--- +<div>{{JSRef}}</div> + +<p>Konstruktor <code><strong>Object</strong></code> membuat sebuah pembungkus objek.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox">// Persiapan literasi objek +{ [ <var>nameValuePair1</var>[, <var>nameValuePair2</var>[, ...<var>nameValuePairN</var>] ] ] } + +// Panggil konstruktor +new Object([<var>value</var>])</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>nameValuePair1, nameValuePair2, ... nameValuePair<em>N</em></code></dt> + <dd>Pasangan dari nama (strings) dan nilai dimana nama dipisahkan dari nilai menggunakan titik dua (colon).</dd> + <dt><code>value</code></dt> + <dd>Nilai bebas.</dd> +</dl> + +<h2 id="Keterangan">Keterangan</h2> + +<p>Konstruktor <code>Object</code> membuat sebuah pembungkus objek dari nilai yang diberikan. Jika nilainya {{jsxref("null")}} atau {{jsxref("undefined")}}, maka akan menghasilkan dan mengembalikan objek kosong. Sebaliknya, akan mengembalikan sebuah objek dari Type yang bergantung pada nilai yang diberikan. Jika nilai adalah objek, maka nilai akan langsung dikembalikan.</p> + +<p>Ketika memanggil konteks non-constructor, <code>Object</code> berperilaku seperti layaknya <code>new Object()</code>.</p> + +<p>Lihat juga <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">object initializer / literal syntax</a>.</p> + +<h2 id="Properti_dari_konstruktor_Object">Properti dari konstruktor <code>Object</code></h2> + +<dl> + <dt><code>Object.length</code></dt> + <dd>Bernilai 1.</dd> + <dt>{{jsxref("Object.prototype")}}</dt> + <dd>Memungkinkan untuk menambahkan properti ke semua objek dari type Object.</dd> +</dl> + +<h2 id="Method_dari_konstruktor_Object">Method dari konstruktor <code>Object</code></h2> + +<dl> + <dt>{{jsxref("Object.assign()")}}</dt> + <dd>Membuat objek baru dengan menyalin nilai dari semua properti enumerable dari satu atau lebih sumber ke sebuah objek target.</dd> + <dt>{{jsxref("Object.create()")}}</dt> + <dd>Membuat objek baru dengan prototype dan properti objek tertentu.</dd> + <dt>{{jsxref("Object.defineProperty()")}}</dt> + <dd>Menambahkan nama properti berdasarkan deskripsi yang diberikan oleh descriptor pada sebuah objek.</dd> + <dt>{{jsxref("Object.defineProperties()")}}</dt> + <dd>Menambahkan nama properti yang dideskripsikan descriptors pada sebuah object.</dd> + <dt>{{jsxref("Object.entries()")}} {{experimental_inline}}</dt> + <dd>Mengembalikan sebuah array dari enumerable objek dengan pasangan properti <code>[key, value]</code>.</dd> + <dt>{{jsxref("Object.freeze()")}}</dt> + <dd>Membekukan objek: kode lain tidak dapat dihapus atau diubah oleh semua properti.</dd> + <dt>{{jsxref("Object.getOwnPropertyDescriptor()")}}</dt> + <dd>Mengembalikan sebuah properti descriptor untuk nama propeti pada sebuah object.</dd> + <dt>{{jsxref("Object.getOwnPropertyNames()")}}</dt> + <dd>Mengembalikan array berisi nama dari semua objek yang diberikan <strong>own</strong> enumerable dan properti non-enumerable.</dd> + <dt>{{jsxref("Object.getOwnPropertySymbols()")}}</dt> + <dd>Mengembalikan sebuah array dari semua properti simbol yang ditemukan secara langsung atas objek yang diberikan.</dd> + <dt>{{jsxref("Object.getPrototypeOf()")}}</dt> + <dd>Mengembalikan prototype dari objek tertentu.</dd> + <dt>{{jsxref("Object.is()")}}</dt> + <dd>Membandingkan dua nilai yang berbeda (mis. the same)</dd> + <dt>{{jsxref("Object.isExtensible()")}}</dt> + <dd>Menentukan apakah memperluas objek di perbolehkan.</dd> + <dt>{{jsxref("Object.isFrozen()")}}</dt> + <dd>Menentukan apakah objek telah beku.</dd> + <dt>{{jsxref("Object.isSealed()")}}</dt> + <dd>Menentukan apakah objek adalah sealed.</dd> + <dt>{{jsxref("Object.keys()")}}</dt> + <dd>Menegembalikan array berisi nama dari semua objek properti <strong>own</strong> enumerable.</dd> + <dt>{{jsxref("Object.preventExtensions()")}}</dt> + <dd>Mencegah ekstensi dari sebuah objek.</dd> + <dt>{{jsxref("Object.seal()")}}</dt> + <dd>Mencegah kode lain dari penghapusan properti dari sebuah objek.</dd> + <dt>{{jsxref("Object.setPrototypeOf()")}}</dt> + <dd>Mengatur prototype (mis., internal properti <code>[[Prototype]]</code>)</dd> + <dt>{{jsxref("Object.values()")}} {{experimental_inline}}</dt> + <dd>Mengembalikan array dari objek nilai own enumerable.</dd> +</dl> + +<h2 id="Perumpamaan_Object_dan_Object_prototype_objek">Perumpamaan <em><code>Object</code></em> dan <em><code>Object</code></em> prototype objek</h2> + +<p>Pada JavaScript, semua objek diturunkan dari <em><code>Object</code></em>; dan semua objek mewarisi method dan property dari <em>{{jsxref("Object.prototype")}}</em>, meskipun hal tersebut telah di-<em>override </em>(diganti). Sebagai contoh, prototipe konstruktor lain mengesampingkan properti konstruktor dan menyediakan metode <code>toString()</code> yang spesifik. Perubahan ke objek prototipe <code>Object</code> disebarkan ke semua objek kecuali properti dan metode yang telah diubah sebelumnya diganti di sepanjang rantai prototipe.</p> + +<h3 id="Properti">Properti</h3> + +<div>{{page('/id/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', 'Properties') }}</div> + +<h3 id="Method">Method</h3> + +<div>{{page('/id/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', 'Methods') }}</div> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Using_Object_given_undefined_and_null_types">Using <code>Object</code> given <code>undefined</code> and <code>null</code> types</h3> + +<p>Dibawah ini adalah contoh menyimpan objek kosong pada variabel <code>o</code>:</p> + +<pre class="brush: js">var o = new Object(); +</pre> + +<pre class="brush: js">var o = new Object(undefined); +</pre> + +<pre class="brush: js">var o = new Object(null); +</pre> + +<h3 id="Using_Object_to_create_Boolean_objects">Using <code>Object</code> to create <code>Boolean</code> objects</h3> + +<p>Dibawah ini adalah contoh menyimpan objek {{jsxref("Boolean")}} pada variabel <code>o</code>:</p> + +<pre class="brush: js">// equivalent to o = new Boolean(true); +var o = new Object(true); +</pre> + +<pre class="brush: js">// equivalent to o = new Boolean(false); +var o = new Object(Boolean()); +</pre> + +<h2 id="Rincian_Teknis">Rincian Teknis</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definisi awal. Diterapkan di JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2', 'Object')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>-</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object-objects', 'Object')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> + <p>Penambahan Object.assign, Object.getOwnPropertySymbols, Object.setPrototypeOf, Object.is</p> + </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object-objects', 'Object')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Penambahan Object.entries, Object.values, dan Object.getOwnPropertyDescriptors.</td> + </tr> + </tbody> +</table> + +<h2 id="Kesesuaian_browser">Kesesuaian browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">Object initializer</a></li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/object/keys/index.html b/files/id/web/javascript/reference/global_objects/object/keys/index.html new file mode 100644 index 0000000000..cc1c7dc1a9 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/object/keys/index.html @@ -0,0 +1,197 @@ +--- +title: Object.keys() +slug: Web/JavaScript/Reference/Global_Objects/Object/keys +translation_of: Web/JavaScript/Reference/Global_Objects/Object/keys +--- +<div>{{JSRef}}</div> + +<p><code><strong>Object.keys()</strong></code> Metode mengembalikan array dari objek yang diberikan sendiri enumerable properti, dalam urutan yang sama seperti yang disediakan oleh loop {{jsxref("Statements/for...in", "for...in")}} (perbedaan adalah bahwa sebuah loop for-in enumerates properti dalam mata rantai prototipe juga).</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>Object.keys(<var>obj</var>)</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>Objek yang propertinya sendiri enumerable yang harus dikembalikan.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p><code>Object.keys()</code> mengembalikan array yang elemen string yang sesuai dengan properti enumerable yang ditemukan langsung pada objek. Urutan properti adalah sama dengan yang diberikan oleh perulangan / looping melalui properti dari objek secara manual.</p> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: js">var arr = ['a', 'b', 'c']; +console.log(Object.keys(arr)); // console: ['0', '1', '2'] + +// array like object +var obj = { 0: 'a', 1: 'b', 2: 'c' }; +console.log(Object.keys(obj)); // console: ['0', '1', '2'] + +// array like object with random key ordering +var an_obj = { 100: 'a', 2: 'b', 7: 'c' }; +console.log(Object.keys(an_obj)); // console: ['2', '7', '100'] + +// getFoo is property which isn't enumerable +var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } }); +my_obj.foo = 1; + +console.log(Object.keys(my_obj)); // console: ['foo'] +</pre> + +<p>Jika Anda ingin semua properti, bahkan tidak enumerables, lihat {{jsxref("Object.getOwnPropertyNames()")}}.</p> + +<h2 id="Notes">Notes</h2> + +<p>Dalam ES5, jika argumen untuk metode ini bukan merupakan objek (primitive), maka akan menyebabkan {{jsxref("TypeError")}}. Dalam ES6, argumen tidak-objek akan dipaksa untuk sebuah objek.</p> + +<pre class="brush: js">Object.keys("foo"); +// TypeError: "foo" is not an object (ES5 code) + +Object.keys("foo"); +// ["0", "1", "2"] (ES6 code) +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Untuk menambahkan kompatibel <code>Object.keys</code> dukungan dalam lingkungan yang lebih tua yang tidak native mendukung itu, copy potongan berikut:</p> + +<pre class="brush: js">// From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys +if (!Object.keys) { + Object.keys = (function() { + 'use strict'; + var hasOwnProperty = Object.prototype.hasOwnProperty, + hasDontEnumBug = !({ toString: null }).propertyIsEnumerable('toString'), + dontEnums = [ + 'toString', + 'toLocaleString', + 'valueOf', + 'hasOwnProperty', + 'isPrototypeOf', + 'propertyIsEnumerable', + 'constructor' + ], + dontEnumsLength = dontEnums.length; + + return function(obj) { + if (typeof obj !== 'object' && (typeof obj !== 'function' || obj === null)) { + throw new TypeError('Object.keys called on non-object'); + } + + var result = [], prop, i; + + for (prop in obj) { + if (hasOwnProperty.call(obj, prop)) { + result.push(prop); + } + } + + if (hasDontEnumBug) { + for (i = 0; i < dontEnumsLength; i++) { + if (hasOwnProperty.call(obj, dontEnums[i])) { + result.push(dontEnums[i]); + } + } + } + return result; + }; + }()); +} +</pre> + +<p>Harap dicatat bahwa kode di atas termasuk kunci non-enumerable di IE7 (dan mungkin IE8), ketika lewat di sebuah objek dari berbagai window.</p> + +<p>Untuk Browser sederhana Polyfill, lihat <a href="http://tokenposts.blogspot.com.au/2012/04/javascript-objectkeys-browser.html">Javascript - Object.keys Browser Compatibility</a>.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.14', 'Object.keys')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.keys', 'Object.keys')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.keys', 'Object.keys')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("5")}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatOpera("12")}}</td> + <td>{{CompatSafari("5")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li> + <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li> + <li>{{jsxref("Object.create()")}}</li> + <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> + <li>{{jsxref("Object.values()")}} {{experimental_inline}}</li> + <li>{{jsxref("Object.entries()")}} {{experimental_inline}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/object/preventextensions/index.html b/files/id/web/javascript/reference/global_objects/object/preventextensions/index.html new file mode 100644 index 0000000000..3899fef48f --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/object/preventextensions/index.html @@ -0,0 +1,185 @@ +--- +title: Object.preventExtensions() +slug: Web/JavaScript/Reference/Global_Objects/Object/preventExtensions +translation_of: Web/JavaScript/Reference/Global_Objects/Object/preventExtensions +--- +<div>{{JSRef}}</div> + +<p>Metode <code><strong>Object.preventExtensions()</strong></code> mencegah properti-properti baru untuk ditambahkan pada sebuah obyek (mencegah ekstensi di masa depan pada sebuah obyek).</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><code>Object.preventExtensions(<var>obj</var>)</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>Obyek yang akan dibuat menjadi non-ekstensibel.</dd> +</dl> + +<h3 id="Pengembalian_nilai">Pengembalian nilai</h3> + +<p>Obyek yang telah dibuat non-ekstensibel.</p> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p> </p> + +<p>Sebuah obyek disebut ekstensibel jika properti baru dapat ditambahkan ke dalamnya . <code>Object.preventExtensions()</code> menandai suatu obyek untuk menjadi tidak ekstensibel, sehingga tidak akan pernah memiliki properti diluar properti-properti yang dimiliki sebelum ditandai sebagai non-ekstensibel. Perhatikan bahwa properti-properti obyek non-ekstensibel, secara umum, masih dapat <em>dihapus</em>. Mencoba untuk menambah properti baru ke obyek non-ekstensibel akan gagal, baik secara diam-diam atau dengan melemparkan {{jsxref("TypeError")}} (paling umum, tetapi tidak secara eksklusif, ketika berada di {{jsxref("Functions_and_function_scope/Strict_mode", "strict mode", "", 1)}}).</p> + +<p><code>Object.preventExtensions()</code> hanya mencegah penambahan properti sendiri . Sifat masih bisa ditambahkan ke prototipe obyek. Namun, memanggil <code>Object.preventExtensions()</code> pada obyek juga akan mencegah ekstensi / penambahan properti {{jsxref("Object.proto", "__proto__")}} {{deprecated_inline}}.</p> + +<p>Jika ada cara untuk mengubah suatu obyek ekstensibel untuk satu non-ekstensibel, tidak ada cara untuk melakukan yang sebaliknya di ECMAScript 5 .</p> + +<h2 id="Contoh">Contoh</h2> + +<pre class="brush: js">// Object.preventExtensions returns the object being made non-extensible. +var obj = {}; +var obj2 = Object.preventExtensions(obj); +obj === obj2; // true + +// Objects are extensible by default. +var empty = {}; +Object.isExtensible(empty); // === true + +// ...but that can be changed. +Object.preventExtensions(empty); +Object.isExtensible(empty); // === false + +// Object.defineProperty throws when adding a new property to a non-extensible object. +var nonExtensible = { removable: true }; +Object.preventExtensions(nonExtensible); +Object.defineProperty(nonExtensible, 'new', { value: 8675309 }); // throws a TypeError + +// In strict mode, attempting to add new properties to a non-extensible object throws a TypeError. +function fail() { + 'use strict'; + nonExtensible.newProperty = 'FAIL'; // throws a TypeError +} +fail(); + +// EXTENSION (only works in engines supporting __proto__ +// (which is deprecated. Use Object.getPrototypeOf instead)): +// A non-extensible object's prototype is immutable. +var fixed = Object.preventExtensions({}); +fixed.__proto__ = { oh: 'hai' }; // throws a TypeError +</pre> + +<h2 id="Catatan">Catatan</h2> + +<p>Pada ES5, jika argumen pada fungsi metode ini adalah bukan sebuah obyek (sebuah tipe data primitif), maka hal itu akan menyebabkan {{jsxref("TypeError")}}. Pada ES6, sebuah argumen non-obyek akan diperlakukan seperti obyek tersebut obyek biasa yang non-ekstensibel, dan langsung mengembalikan nilai. </p> + +<pre class="brush: js">Object.preventExtensions(1); +// TypeError: 1 is not an object (ES5 code) + +Object.preventExtensions(1); +// 1 (ES6 code) +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Komentar</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.10', 'Object.preventExtensions')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definisi awal. Terimplementasi pada JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.preventextensions', 'Object.preventExtensions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.preventextensions', 'Object.preventExtensions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_kompatibilitas">Browser kompatibilitas</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("6")}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatOpera("12")}}</td> + <td>{{CompatSafari("5.1")}}</td> + </tr> + <tr> + <td>ES6 behavior for non-object argument</td> + <td>{{CompatChrome("44")}}</td> + <td>{{CompatGeckoDesktop("35.0")}}</td> + <td>{{CompatIE("11")}}</td> + <td>{{CompatOpera("31")}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>ES6 behavior for non-object argument</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("35.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Object.isExtensible()")}}</li> + <li>{{jsxref("Object.seal()")}}</li> + <li>{{jsxref("Object.isSealed()")}}</li> + <li>{{jsxref("Object.freeze()")}}</li> + <li>{{jsxref("Object.isFrozen()")}}</li> + <li>{{jsxref("Reflect.preventExtensions()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/promise/catch/index.html b/files/id/web/javascript/reference/global_objects/promise/catch/index.html new file mode 100644 index 0000000000..f2d5e38e8f --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/promise/catch/index.html @@ -0,0 +1,127 @@ +--- +title: Promise.prototype.catch() +slug: Web/JavaScript/Reference/Global_Objects/Promise/catch +tags: + - ECMAScript6 + - Method + - Promise + - Prototype + - Referensi +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/catch +--- +<div>{{JSRef}}</div> + +<p>Method <strong>catch()</strong> mengembalikan <code>Promise</code> dan hanya setuju jika kasusnya gagal. Sama halnya dengan memenggil method {{jsxref("Promise.then", "Promise.prototype.then(undefined, onRejected)")}}.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><var>p.catch(onRejected)</var>; + +p.catch(function(reason) { + // rejection +}); +</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt>onRejected</dt> + <dd> {{jsxref("Function")}} dipanggil ketika <code>Promise</code> ditolak. Fungsi ini memiliki satu argumen, alasan penolakan.</dd> +</dl> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Method <code>catch</code> sangat berguna untuk menangani error di gabungan promis anda.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Penggunaan_method_catch">Penggunaan method <code>catch</code></h3> + +<pre class="brush: js">var p1 = new Promise(function(resolve, reject) { + resolve('Success'); +}); + +p1.then(function(value) { + console.log(value); // "Success!" + throw 'oh, no!'; +}).catch(function(e) { + console.log(e); // "oh, no!" +}).then(function(){ + console.log('after a catch the chain is restored'); +}, function () { + console.log('Not fired due to the catch'); +}); + +// The following behaves the same as above +p1.then(function(value) { + console.log(value); // "Success!" + return Promise.reject('oh, no!'); +}).catch(function(e) { + console.log(e); // "oh, no!" +}).then(function(){ + console.log('after a catch the chain is restored'); +}, function () { + console.log('Not fired due to the catch'); +}); + +</pre> + +<h3 id="Promis_tidak_dapat_mendeteksi_error_pada_asynchronous_callback">Promis tidak dapat mendeteksi error pada asynchronous callback</h3> + +<pre class="brush: js">var p1 = new Promise(function(resolve, reject) { + throw 'Uh-oh!'; +}); + +p1.catch(function(e) { + console.log(e); // "Uh-oh!" +}); + + +var p2 = new Promise(function(resolve, reject) { + setTimeout(function() { + throw 'Uncaught Exception!'; + }, 1000); +}); + +p2.catch(function(e) { + console.log(e); // This is never called +});</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-promise.prototype.catch', 'Promise.prototype.catch')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition in an ECMA standard.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-promise.prototype.catch', 'Promise.prototype.catch')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Browser">Kompabilitas Browser</h2> + +<p> </p> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Promise.catch")}}</p> + +<p> </p> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li>{{jsxref("Promise")}}</li> + <li>{{jsxref("Promise.prototype.then()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/promise/index.html b/files/id/web/javascript/reference/global_objects/promise/index.html new file mode 100644 index 0000000000..240915ba23 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/promise/index.html @@ -0,0 +1,317 @@ +--- +title: Promise +slug: Web/JavaScript/Reference/Global_Objects/Promise +tags: + - ECMAScript6 + - JavaScript + - NeedsTranslation + - Promise + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/Promise +--- +<div>{{JSRef}}</div> + +<p>The <strong><code>Promise</code></strong> object is used for deferred and asynchronous computations. A <code>Promise</code> represents an operation that hasn't completed yet, but is expected in the future.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">new Promise( /* executor */ function(resolve, reject) { ... } );</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt>executor</dt> + <dd>A function that will be passed to other functions via the arguments <code>resolve</code> and <code>reject</code>. The <code>executor</code> function is executed immediately by the Promise implementation which provides the <code>resolve</code> and <code>reject</code> functions (the executor is called before the <code>Promise</code> constructor even returns the created object). The <code>resolve</code> and <code>reject</code> functions are bound to the promise and calling them fulfills or rejects the promise, respectively. The executor is expected to initiate some asynchronous work and then, once that completes, call either the <code>resolve</code> or <code>reject</code> function to resolve the promise's final value or else reject it if an error occurred.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>A <code><strong>Promise</strong></code> represents a proxy for a value not necessarily known when the promise is created. It allows you to associate handlers to an asynchronous action's eventual success value or failure reason. This lets asynchronous methods return values like synchronous methods: instead of the final value, the asynchronous method returns a <em>promise</em> of having a value at some point in the future.</p> + +<p>A <code>Promise</code> is in one of these states:</p> + +<ul> + <li><em>pending</em>: initial state, not fulfilled or rejected.</li> + <li><em>fulfilled</em>: meaning that the operation completed successfully.</li> + <li><em>rejected</em>: meaning that the operation failed.</li> +</ul> + +<p>A pending promise can become either <em>fulfilled</em> with a value, or <em>rejected</em> with a reason (error). When either of these happens, the associated handlers queued up by a promise's <code>then</code> method are called. (If the promise has already been fulfilled or rejected when a corresponding handler is attached, the handler will be called, so there is no race condition between an asynchronous operation completing and its handlers being attached.)</p> + +<p>As the <code>{{jsxref("Promise.then", "Promise.prototype.then()")}}</code> and <code>{{jsxref("Promise.catch", "Promise.prototype.catch()")}}</code> methods return promises, they can be chained—an operation called <em>composition</em>.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8633/promises.png"></p> + +<div class="note"> +<p><strong>Note</strong>: A promise is said to be <em>settled </em>if it is either fulfilled or rejected, but not pending. You will also hear the term <em>resolved</em> used with promises — this means that the promise is settled, or it is locked into a promise chain. Domenic Denicola's <a href="https://github.com/domenic/promises-unwrapping/blob/master/docs/states-and-fates.md">States and fates</a> contains more details about promise terminology.</p> +</div> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt><code>Promise.length</code></dt> + <dd>Length property whose value is 1 (number of constructor arguments).</dd> + <dt>{{jsxref("Promise.prototype")}}</dt> + <dd>Represents the prototype for the <code>Promise</code> constructor.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{jsxref("Promise.all", "Promise.all(iterable)")}}</dt> + <dd>Returns a promise that either resolves when all of the promises in the iterable argument have resolved or rejects as soon as one of the promises in the iterable argument rejects. If the returned promise resolves, it is resolved with an array of the values from the resolved promises in the iterable. If the returned promise rejects, it is rejected with the reason from the promise in the iterable that rejected. This method can be useful for aggregating results of multiple promises together.</dd> + <dt>{{jsxref("Promise.race", "Promise.race(iterable)")}}</dt> + <dd>Returns a promise that resolves or rejects as soon as one of the promises in the iterable resolves or rejects, with the value or reason from that promise.</dd> +</dl> + +<dl> + <dt>{{jsxref("Promise.reject", "Promise.reject(reason)")}}</dt> + <dd>Returns a <code>Promise</code> object that is rejected with the given reason.</dd> +</dl> + +<dl> + <dt>{{jsxref("Promise.resolve", "Promise.resolve(value)")}}</dt> + <dd>Returns a <code>Promise</code> object that is resolved with the given value. If the value is a thenable (i.e. has a <code>then</code> method), the returned promise will "follow" that thenable, adopting its eventual state; otherwise the returned promise will be fulfilled with the value. Generally, if you want to know if a value is a promise or not - {{jsxref("Promise.resolve", "Promise.resolve(value)")}} it instead and work with the return value as a promise.</dd> +</dl> + +<h2 id="Promise_prototype"><code>Promise</code> prototype</h2> + +<h3 id="Properties_2">Properties</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Promise/prototype','Properties')}}</p> + +<h3 id="Methods_2">Methods</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Promise/prototype','Methods')}}</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Creating_a_Promise">Creating a Promise</h3> + +<pre class="brush: html hidden"><button id="btn">Make a promise!</button> +<div id="log"></div> +</pre> + +<p>This small example shows the mechanism of a <code>Promise</code>. The <code>testPromise()</code> method is called each time the {{HTMLElement("button")}} is clicked. It creates a promise that will resolve, using {{domxref("window.setTimeout()")}}, to the promise count (number starting from 1) every 1-3 seconds, at random. The <code>Promise()</code> constructor is used to create the promise.</p> + +<p>The fulfillment of the promise is simply logged, via a fulfill callback set using {{jsxref("Promise.prototype.then()","p1.then()")}}. A few logs shows how the synchronous part of the method is decoupled of the asynchronous completion of the promise.</p> + +<pre class="brush: js">'use strict'; +var promiseCount = 0; + +function testPromise() { + var thisPromiseCount = ++promiseCount; + + var log = document.getElementById('log'); + log.insertAdjacentHTML('beforeend', thisPromiseCount + + ') Started (<small>Sync code started</small>)<br/>'); + + // We make a new promise: we promise a numeric count of this promise, starting from 1 (after waiting 3s) + var p1 = new Promise( + // The resolver function is called with the ability to resolve or + // reject the promise + function(resolve, reject) { + log.insertAdjacentHTML('beforeend', thisPromiseCount + + ') Promise started (<small>Async code started</small>)<br/>'); + // This is only an example to create asynchronism + window.setTimeout( + function() { + // We fulfill the promise ! + resolve(thisPromiseCount); + }, Math.random() * 2000 + 1000); + } + ); + + // We define what to do when the promise is resolved/fulfilled with the then() call, + // and the catch() method defines what to do if the promise is rejected. + p1.then( + // Log the fulfillment value + function(val) { + log.insertAdjacentHTML('beforeend', val + + ') Promise fulfilled (<small>Async code terminated</small>)<br/>'); + }) + .catch( + // Log the rejection reason + function(reason) { + console.log('Handle rejected promise ('+reason+') here.'); + }); + + log.insertAdjacentHTML('beforeend', thisPromiseCount + + ') Promise made (<small>Sync code terminated</small>)<br/>'); +}</pre> + +<pre class="brush:js hidden">if ("Promise" in window) { + var btn = document.getElementById("btn"); + btn.addEventListener("click",testPromise); +} +else { + log = document.getElementById('log'); + log.innerHTML = "Live example not available as your browser doesn't support the <code>Promise<code> interface."; +} +</pre> + +<p>This example is executed when clicking the button. You need a browser supporting <code>Promise</code>. By clicking several times the button in a short amount of time, you'll even see the different promises being fulfilled one after the other.</p> + +<p>{{EmbedLiveSample("Creating_a_Promise", "500", "200")}}</p> + +<h2 id="Example_using_new_XMLHttpRequest()">Example using new XMLHttpRequest()</h2> + +<h3 id="Creating_a_Promise_2">Creating a Promise</h3> + +<p>This example shows the implementation of a method which uses a <code>Promise</code> to report the success or failure of an {{domxref("XMLHttpRequest")}}.</p> + +<pre class="brush: js">'use strict'; + +// A-> $http function is implemented in order to follow the standard Adapter pattern +function $http(url){ + + // A small example of object + var core = { + + // Method that performs the ajax request + ajax : function (method, url, args) { + + // Creating a promise + var promise = new Promise( function (resolve, reject) { + + // Instantiates the XMLHttpRequest + var client = new XMLHttpRequest(); + var uri = url; + + if (args && (method === 'POST' || method === 'PUT')) { + uri += '?'; + var argcount = 0; + for (var key in args) { + if (args.hasOwnProperty(key)) { + if (argcount++) { + uri += '&'; + } + uri += encodeURIComponent(key) + '=' + encodeURIComponent(args[key]); + } + } + } + + client.open(method, uri); + client.send(); + + client.onload = function () { + if (this.status >= 200 && this.status < 300) { + // Performs the function "resolve" when this.status is equal to 2xx + resolve(this.response); + } else { + // Performs the function "reject" when this.status is different than 2xx + reject(this.statusText); + } + }; + client.onerror = function () { + reject(this.statusText); + }; + }); + + // Return the promise + return promise; + } + }; + + // Adapter pattern + return { + 'get' : function(args) { + return core.ajax('GET', url, args); + }, + 'post' : function(args) { + return core.ajax('POST', url, args); + }, + 'put' : function(args) { + return core.ajax('PUT', url, args); + }, + 'delete' : function(args) { + return core.ajax('DELETE', url, args); + } + }; +}; +// End A + +// B-> Here you define its functions and its payload +var mdnAPI = 'https://developer.mozilla.org/en-US/search.json'; +var payload = { + 'topic' : 'js', + 'q' : 'Promise' +}; + +var callback = { + success : function(data){ + console.log(1, 'success', JSON.parse(data)); + }, + error : function(data){ + console.log(2, 'error', JSON.parse(data)); + } +}; +// End B + +// Executes the method call +$http(mdnAPI) + .get(payload) + .then(callback.success) + .catch(callback.error); + +// Executes the method call but an alternative way (1) to handle Promise Reject case +$http(mdnAPI) + .get(payload) + .then(callback.success, callback.error); + +// Executes the method call but an alternative way (2) to handle Promise Reject case +$http(mdnAPI) + .get(payload) + .then(callback.success) + .then(undefined, callback.error); +</pre> + +<h3 id="Loading_an_image_with_XHR">Loading an image with XHR</h3> + +<p>Another simple example using <code>Promise</code> and <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> to load an image is available at the MDN GitHub<a href="https://github.com/mdn/promises-test/blob/gh-pages/index.html"> promise-test</a> repository. You can also <a href="http://mdn.github.io/promises-test/">see it in action</a>. Each step is commented and allows you to follow the Promise and XHR architecture closely.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-promise-objects', 'Promise')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition in an ECMA standard.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-promise-objects', 'Promise')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p> </p> + +<div> + + +<p>{{Compat("javascript.builtins.Promise")}}</p> +</div> + +<p> </p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="http://promisesaplus.com/">Promises/A+ specification</a></li> + <li><a href="http://www.html5rocks.com/en/tutorials/es6/promises/">Jake Archibald: JavaScript Promises: There and Back Again</a></li> + <li><a href="http://de.slideshare.net/domenicdenicola/callbacks-promises-and-coroutines-oh-my-the-evolution-of-asynchronicity-in-javascript">Domenic Denicola: Callbacks, Promises, and Coroutines – Asynchronous Programming Patterns in JavaScript</a></li> + <li><a href="http://www.mattgreer.org/articles/promises-in-wicked-detail/">Matt Greer: JavaScript Promises ... In Wicked Detail</a></li> + <li><a href="https://www.promisejs.org/">Forbes Lindesay: promisejs.org</a></li> + <li><a href="http://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html">Nolan Lawson: We have a problem with promises — Common mistakes with promises</a></li> + <li><a href="https://github.com/jakearchibald/es6-promise/">Promise polyfill</a></li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/promise/reject/index.html b/files/id/web/javascript/reference/global_objects/promise/reject/index.html new file mode 100644 index 0000000000..180fcc5571 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/promise/reject/index.html @@ -0,0 +1,81 @@ +--- +title: Promise.reject() +slug: Web/JavaScript/Reference/Global_Objects/Promise/reject +tags: + - ECMAScript6 + - Method + - Promise + - Referensi +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/reject +--- +<div>{{JSRef}}</div> + +<p>Method <code><strong>Promise.reject(reason)</strong></code> mengembalikan objek <code>Promise</code> yang ditolak dengan alasan yang diberikan.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><var>Promise.reject(reason)</var>;</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt>reason</dt> + <dd>Alasan kenapa <code>Promise</code> ditolak.</dd> +</dl> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Fungsi static <code>Promise.reject</code> mengembalikan <code>Promise</code> yang ditolak. Untuk keperluan debugging dan seleksi penankapan error, sangat berguna untuk membuat <code>reason</code> pada <code>instanceof</code> {{jsxref("Error")}}.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Penggunaan_mthod_static_Promise.reject()">Penggunaan mthod static Promise.reject()</h3> + +<pre class="brush: js">Promise.reject("Testing static reject").then(function(reason) { + // not called +}, function(reason) { + console.log(reason); // "Testing static reject" +}); + +Promise.reject(new Error("fail")).then(function(error) { + // not called +}, function(error) { + console.log(error); // Stacktrace +});</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-promise.reject', 'Promise.reject')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition in an ECMA standard.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-promise.reject', 'Promise.reject')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Browser">Kompabilitas Browser</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Promise.reject")}}</p> + +<p> </p> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li>{{jsxref("Promise")}}</li> + <li><a href="https://github.com/petkaantonov/bluebird#error-handling">Selective error catching using the BlueBird Promise library</a></li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/promise/resolve/index.html b/files/id/web/javascript/reference/global_objects/promise/resolve/index.html new file mode 100644 index 0000000000..d958ab4d52 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/promise/resolve/index.html @@ -0,0 +1,140 @@ +--- +title: Promise.resolve() +slug: Web/JavaScript/Reference/Global_Objects/Promise/resolve +tags: + - ECMAScript6 + - JavaScript + - Method + - Promise +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/resolve +--- +<div>{{JSRef}}</div> + +<p>Method <code><strong>Promise.resolve(value)</strong></code> mengembalikan objek {{jsxref("Promise.then")}} yang diselesaikan dengan nilai yang diberikan. jika nilainya thenable (mis. memiliki {{jsxref("Promise.then", "\"then\" method")}}), promise yang dikembalikan akan "mengikuti" thenable-nya, menggunakan keadaan ini; sebaliknya promise akan dikembalikan sesuai nilai yang terpenuhi.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><var>Promise.resolve(value)</var>; +Promise.resolve(promise); +Promise.resolve(thenable); +</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt>value</dt> + <dd>Argumen untuk diselesaikan oleh <code>Promise</code>. Dapat juga sebuah <code>Promise</code> atau thenable untuk diselesaikan.</dd> +</dl> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Fungsi statis <code>Promise.resolve</code> mengembalikan <code>Promise</code> yang terselesaikan.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Penggunaan_method_static_Promise.resolve">Penggunaan method static <code>Promise.resolve</code></h3> + +<pre class="brush: js">Promise.resolve("Success").then(function(value) { + console.log(value); // "Success" +}, function(value) { + // not called +}); +</pre> + +<h3 id="Penyelesaian_pada_array">Penyelesaian pada array</h3> + +<pre class="brush: js">var p = Promise.resolve([1,2,3]); +p.then(function(v) { + console.log(v[0]); // 1 +}); +</pre> + +<h3 id="Penyelesaian_pada_Promise_lain">Penyelesaian pada <code>Promise </code>lain</h3> + +<pre class="brush: js">var original = Promise.resolve(true); +var cast = Promise.resolve(original); +cast.then(function(v) { + console.log(v); // true +}); +</pre> + +<h3 id="Penyelesaian_thenables_dan_throwing_Errors">Penyelesaian thenables dan throwing Errors</h3> + +<pre class="brush: js">// Resolving a thenable object +var p1 = Promise.resolve({ + then: function(onFulfill, onReject) { onFulfill("fulfilled!"); } +}); +console.log(p1 instanceof Promise) // true, object casted to a Promise + +p1.then(function(v) { + console.log(v); // "fulfilled!" + }, function(e) { + // not called +}); + +// Thenable throws before callback +// Promise rejects +var thenable = { then: function(resolve) { + throw new TypeError("Throwing"); + resolve("Resolving"); +}}; + +var p2 = Promise.resolve(thenable); +p2.then(function(v) { + // not called +}, function(e) { + console.log(e); // TypeError: Throwing +}); + +// Thenable throws after callback +// Promise resolves +var thenable = { then: function(resolve) { + resolve("Resolving"); + throw new TypeError("Throwing"); +}}; + +var p3 = Promise.resolve(thenable); +p3.then(function(v) { + console.log(v); // "Resolving" +}, function(e) { + // not called +}); +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-promise.resolve', 'Promise.resolve')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition in an ECMA standard.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-promise.resolve', 'Promise.resolve')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Browser">Kompabilitas Browser</h2> + +<p> </p> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Promise.resolve")}}</p> + +<p> </p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Promise")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/promise/then/index.html b/files/id/web/javascript/reference/global_objects/promise/then/index.html new file mode 100644 index 0000000000..5a1e275c8c --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/promise/then/index.html @@ -0,0 +1,132 @@ +--- +title: Promise.prototype.then() +slug: Web/JavaScript/Reference/Global_Objects/Promise/then +tags: + - ECMAScript6 + - JavaScript + - Method + - Promise + - Prototype + - Referensi +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/then +--- +<div>{{JSRef}}</div> + +<p>Method <code><strong>then()</strong></code> mengembalikan {{domxref("Promise")}}. Menggunakan dua argumen: fungsi callback untuk kasus sukses dan gagal pada <code>Promise</code>.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><var>p.then(onFulfilled, onRejected)</var>; + +p.then(function(value) { + // fulfillment + }, function(reason) { + // rejection +}); +</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>onFulfilled</code></dt> + <dd>{{jsxref("Function")}} dipanggil ketika <code>Promise</code> dipenuhi. Fungsi ini memiliki satu argumen, <code>value pemenuhan</code>.</dd> + <dt><code>onRejected</code></dt> + <dd>{{jsxref("Function")}} dipangil ketika <code>Promise</code> ditolak. fungsi ini memiliki satau argumen, alasan penolakan.</dd> +</dl> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Kedua method <code>then</code> dan {{jsxref("Promise.prototype.catch()")}} megembalikan promis, juga dapat dirantaikan — operasi yang disebut <em>composition</em>.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Meggunakan_method_then">Meggunakan method <code>then</code></h3> + +<pre class="brush: js">var p1 = new Promise(function(resolve, reject) { + resolve("Success!"); + // or + // reject ("Error!"); +}); + +p1.then(function(value) { + console.log(value); // Success! +}, function(reason) { + console.log(reason); // Error! +}); +</pre> + +<h3 id="Perantaian">Perantaian</h3> + +<p>Karena method <code>then</code> mengembalikan <code>Promise</code>, anda bisa merantaikan pemanggilan <code>then</code>.</p> + +<pre class="brush: js">var p2 = new Promise(function(resolve, reject) { + resolve(1); +}); + +p2.then(function(value) { + console.log(value); // 1 + return value + 1; +}).then(function(value) { + console.log(value); // 2 +}); + +p2.then(function(value) { + console.log(value); // 1 +}); +</pre> + +<p>Anda juga bisa menggunakan perantaian untuk melaksanakan satu fungsi dengan sebuah Promise berbasis API diatas fungsi lainnya.</p> + +<pre class="brush: js">function fetch_current_data() { + // The <a href="/en-US/docs/Web/API/GlobalFetch/fetch">fetch</a>() API returns a Promise. This function + // exposes a similar API, except the fulfillment + // value of this function's Promise has had more + // work done on it. + return fetch("current-data.json").then((response) => { + if (response.headers.get("content-type") != "application/json") { + throw new TypeError(); + } + var j = response.json(); + // maybe do something with j + return j; // fulfillment value given to user of + // fetch_current_data().then() + }); +} +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-promise.prototype.then', 'Promise.prototype.then')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition in an ECMA standard.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-promise.prototype.then', 'Promise.prototype.then')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Browser">Kompabilitas Browser</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Promise.then")}}</p> + +<p> </p> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("Promise")}}</li> + <li>{{jsxref("Promise.prototype.catch()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/regexp/index.html b/files/id/web/javascript/reference/global_objects/regexp/index.html new file mode 100644 index 0000000000..8bd6dce4b9 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/regexp/index.html @@ -0,0 +1,231 @@ +--- +title: RegExp +slug: Web/JavaScript/Reference/Global_Objects/RegExp +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp +--- +<div>{{JSRef}}</div><p>The <strong><code>RegExp</code></strong>objek digunakan untuk pencocokan teks dengan pola.</p> + +<p>Untuk pengantar ekspresi reguler, baca <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">bab Ekspresi Reguler</a> di <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">Panduan JavaScript</a> .</p> + +<h2 id="Deskripsi">Deskripsi</h2> + +<h3 id="Notasi_dan_konstruktor_literal">Notasi dan konstruktor literal</h3> + +<p>Ada dua cara untuk membuat <code>RegExp</code>objek: <em>notasi literal</em> dan <em>konstruktor</em> .</p> + +<ul> + <li>Parameter <strong>notasi literal</strong> terlampir di antara garis miring dan tidak menggunakan tanda kutip.</li> + <li>Parameter <strong>fungsi konstruktor</strong> tidak tertutup di antara garis miring tetapi menggunakan tanda kutip.</li> +</ul> + +<p>Tiga ekspresi berikut membuat ekspresi reguler yang sama:</p> + +<pre class="notranslate"><code>/ab+c/i +new RegExp(/ab+c/, 'i') // literal notation +new RegExp('ab+c', 'i') // constructor +</code></pre> + +<p>Notasi literal menghasilkan kompilasi dari ekspresi reguler ketika ekspresi dievaluasi. Gunakan notasi literal ketika ekspresi reguler akan tetap konstan. Misalnya, jika Anda menggunakan notasi literal untuk membuat ekspresi reguler yang digunakan dalam satu lingkaran, ekspresi reguler tidak akan dikompilasi ulang pada setiap iterasi.</p> + +<p>Konstruktor objek ekspresi reguler — misalnya, <code>new RegExp('ab+c')</code>—menghasilkan kompilasi runtime dari ekspresi reguler. Gunakan fungsi konstruktor ketika Anda tahu pola ekspresi reguler akan berubah, atau Anda tidak tahu pola dan mendapatkannya dari sumber lain, seperti input pengguna.</p> + +<h3 id="Bendera_dalam_konstruktor">Bendera dalam konstruktor</h3> + +<p>Dimulai dengan ECMAScript 6, <code>new RegExp(/ab+c/, 'i')</code>tidak lagi melempar a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypeError"><code>TypeError</code></a>( <code>"can't supply flags when constructing one RegExp from another"</code>) ketika argumen pertama adalah a <code>RegExp</code>dan <code><var>flags</var></code>argumen kedua hadir. Sebagai <code>RegExp</code>gantinya, argumen baru dibuat.</p> + +<p>Saat menggunakan fungsi konstruktor, aturan pelolosan string normal (mendahului karakter khusus <code>\</code>ketika disertakan dalam string) diperlukan.</p> + +<p>Misalnya, yang berikut ini setara:</p> + +<pre class="notranslate"><code>let re = /\w+/ +let re = new RegExp('\\w+') +</code></pre> + +<h3 id="Properti_Reg-suka_seperti_Perl">Properti Reg-suka seperti Perl</h3> + +<p>Perhatikan bahwa beberapa <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp"><code>RegExp</code></a>properti memiliki nama panjang dan pendek (seperti Perl). Kedua nama selalu merujuk pada nilai yang sama. (Perl adalah bahasa pemrograman tempat JavaScript memodelkan ekspresi regulernya.). Lihat juga <a href="/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#RegExp_Properties">properti yang </a><a href="/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#RegExp_Properties">sudah usang <code>RegExp</code>.</a></p> + +<h2 id="Konstruktor">Konstruktor</h2> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/RegExp"><code>RegExp()</code></a></dt> + <dd>Menciptakan <code>RegExp</code>objek baru .</dd> +</dl> + +<h2 id="Sifat_statis">Sifat statis</h2> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@species"><code>get RegExp[@@species]</code></a></dt> + <dd>The constructor function that is used to create derived objects.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex"><code>RegExp.lastIndex</code></a></dt> + <dd>The index at which to start the next match.</dd> +</dl> + +<h2 id="Instance_properties">Instance properties</h2> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/flags"><code>RegExp.prototype.flags</code></a></dt> + <dd>A string that contains the flags of the <code>RegExp</code> object.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/dotAll"><code>RegExp.prototype.dotAll</code></a></dt> + <dd>Whether <code>.</code> matches newlines or not.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/global"><code>RegExp.prototype.global</code></a></dt> + <dd>Whether to test the regular expression against all possible matches in a string, or only against the first.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/ignoreCase"><code>RegExp.prototype.ignoreCase</code></a></dt> + <dd>Whether to ignore case while attempting a match in a string.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/multiline"><code>RegExp.prototype.multiline</code></a></dt> + <dd>Whether or not to search in strings across multiple lines.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/source"><code>RegExp.prototype.source</code></a></dt> + <dd>The text of the pattern.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/sticky"><code>RegExp.prototype.sticky</code></a></dt> + <dd>Whether or not the search is sticky.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/unicode"><code>RegExp.prototype.unicode</code></a></dt> + <dd>Whether or not Unicode features are enabled.</dd> +</dl> + +<h2 id="Instance_methods">Instance methods</h2> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/compile"><code>RegExp.prototype.compile()</code></a></dt> + <dd>(Re-)compiles a regular expression during execution of a script.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec"><code>RegExp.prototype.exec()</code></a></dt> + <dd>Executes a search for a match in its string parameter.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test"><code>RegExp.prototype.test()</code></a></dt> + <dd>Tests for a match in its string parameter.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/toString"><code>RegExp.prototype.toString()</code></a></dt> + <dd>Returns a string representing the specified object. Overrides the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/toString"><code>Object.prototype.toString()</code></a> method.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@match"><code>RegExp.prototype[@@match]()</code></a></dt> + <dd>Performs match to given string and returns match result.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@matchAll"><code>RegExp.prototype[@@matchAll]()</code></a></dt> + <dd>Returns all matches of the regular expression against a string.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@replace"><code>RegExp.prototype[@@replace]()</code></a></dt> + <dd>Replaces matches in given string with new substring.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@search"><code>RegExp.prototype[@@search]()</code></a></dt> + <dd>Searches the match in given string and returns the index the pattern found in the string.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@split"><code>RegExp.prototype[@@split]()</code></a></dt> + <dd>Splits given string into an array by separating the string into substring.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_a_regular_expression_to_change_data_format">Using a regular expression to change data format</h3> + +<p>The following script uses the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace"><code>replace()</code></a> method of the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String"><code>String</code></a> instance to match a name in the format <em>first last</em> and output it in the format <em>last, first</em>.</p> + +<p>In the replacement text, the script uses <code>$1</code> and <code>$2</code> to indicate the results of the corresponding matching parentheses in the regular expression pattern.</p> + +<pre class="notranslate"><code>let re = /(\w+)\s(\w+)/ +let str = 'John Smith' +let newstr = str.replace(re, '$2, $1') +console.log(newstr) +</code></pre> + +<p>This displays <code>"Smith, John"</code>.</p> + +<h3 id="Using_regular_expression_to_split_lines_with_different_line_endingsends_of_lineline_breaks">Using regular expression to split lines with different line endings/ends of line/line breaks</h3> + +<p>The default line ending varies depending on the platform (Unix, Windows, etc.). The line splitting provided in this example works on all platforms.</p> + +<pre class="notranslate"><code>let text = 'Some text\nAnd some more\r\nAnd yet\rThis is the end' +let lines = text.split(/\r\n|\r|\n/) +console.log(lines) // logs [ 'Some text', 'And some more', 'And yet', 'This is the end' ] +</code></pre> + +<p>Note that the order of the patterns in the regular expression matters.</p> + +<h3 id="Using_regular_expression_on_multiple_lines">Using regular expression on multiple lines</h3> + +<pre class="notranslate"><code>let s = 'Please yes\nmake my day!' + +s.match(/yes.*day/); +// Returns null + +s.match(/yes[^]*day/); +// Returns ["yes\nmake my day"] +</code></pre> + +<h3 id="Using_a_regular_expression_with_the_sticky_flag">Using a regular expression with the sticky flag</h3> + +<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/sticky"><code>sticky</code></a> flag indicates that the regular expression performs sticky matching in the target string by attempting to match starting at <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex"><code>RegExp.prototype.lastIndex</code></a>.</p> + +<pre class="notranslate"><code>let str = '#foo#' +let regex = /foo/y + +regex.lastIndex = 1 +regex.test(str) // true +regex.lastIndex = 5 +regex.test(str) // false (lastIndex is taken into account with sticky flag) +regex.lastIndex // 0 (reset after match failure)</code></pre> + +<h3 id="The_difference_between_the_sticky_flag_and_the_global_flag">The difference between the sticky flag and the global flag</h3> + +<p>With the sticky flag <code>y</code>, the next match has to happen at the <code>lastIndex</code> position, while with the global flag <code>g</code>, the match can happen at the <code>lastIndex</code> position or later:</p> + +<pre class="notranslate"><code>re = /\d/y; +while (r = re.exec("123 456")) console.log(r, "AND re.lastIndex", re.lastIndex); + +// [ '1', index: 0, input: '123 456', groups: undefined ] AND re.lastIndex 1 +// [ '2', index: 1, input: '123 456', groups: undefined ] AND re.lastIndex 2 +// [ '3', index: 2, input: '123 456', groups: undefined ] AND re.lastIndex 3 +// ... and no more match.</code></pre> + +<p>With the global flag <code>g</code>, all 6 digits would be matched, not just 3.</p> + +<h3 id="Regular_expression_and_Unicode_characters">Regular expression and Unicode characters</h3> + +<p>As mentioned above, <code>\w</code> or <code>\W</code> only matches ASCII based characters; for example, <code>a</code> to <code>z</code>, <code>A</code> to <code>Z</code>, <code>0</code> to <code>9</code>, and <code>_</code>.</p> + +<p>To match characters from other languages such as Cyrillic or Hebrew, use <code>\u<var>hhhh</var></code>, where <code><var>hhhh</var></code> is the character's Unicode value in hexadecimal.</p> + +<p>This example demonstrates how one can separate out Unicode characters from a word.</p> + +<pre class="notranslate"><code>let text = 'Образец text на русском языке' +let regex = /[\u0400-\u04FF]+/g + +let match = regex.exec(text) +console.log(match[0]) // logs 'Образец' +console.log(regex.lastIndex) // logs '7' + +let match2 = regex.exec(text) +console.log(match2[0]) // logs 'на' [did not log 'text'] +console.log(regex.lastIndex) // logs '15' + +// and so on +</code></pre> + +<p>The <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes">Unicode property escapes</a> feature introduces a solution, by allowing for a statement as simple as <code>\p{scx=Cyrl}</code>. One can also use an external resource for getting the complete Unicode block range for different scripts, such as <a href="http://kourge.net/projects/regexp-unicode-block" rel="noopener">Regexp-Unicode-block</a>.</p> + +<h3 id="Extracting_sub-domain_name_from_URL">Extracting sub-domain name from URL</h3> + +<pre class="notranslate"><code>let url = 'http://xxx.domain.com' +console.log(/[^.]+/.exec(url)[0].substr(7)) // logs 'xxx' +</code></pre> + +<p>Instead of using regular expressions for parsing URLs, it is usually better to use the browsers built-in URL parser by using the <a href="/en-US/docs/Web/API/URL_API">URL API</a>.</p> + +<h2 id="Specifications">Specifications</h2> + +<table> + <thead> + <tr> + <th scope="col">Specification</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="https://tc39.es/ecma262/#sec-regexp-regular-expression-objects" hreflang="en" lang="en" rel="noopener">ECMAScript (ECMA-262)<br> + <small lang="en-US">The definition of 'RegExp' in that specification.</small></a></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{Compat("javascript.builtins.RegExp")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">Regular Expressions</a> chapter in the <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript Guide</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match"><code>String.prototype.match()</code></a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace"><code>String.prototype.replace()</code></a></li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/string/concat/index.html b/files/id/web/javascript/reference/global_objects/string/concat/index.html new file mode 100644 index 0000000000..0ba2b2a156 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/string/concat/index.html @@ -0,0 +1,134 @@ +--- +title: String.prototype.concat() +slug: Web/JavaScript/Reference/Global_Objects/String/concat +tags: + - JavaScript + - Referensi + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/concat +--- +<div>{{JSRef}}</div> + +<p>Method <strong><code>concat()</code></strong> menggabungkan dua teks atau lebih menjadi sebuah string baru.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>str</var>.concat(<var>string2</var>, <var>string3</var>[, ..., <var>stringN</var>])</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>string2...string<em>N</em></code></dt> + <dd>String untuk menggabungkan string.</dd> +</dl> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Fungsi <code>concat()</code> menggabungkan teks dari satu atau lebih string dan mengembalikanya menjadi sebuah string. Perubahan pada salah satu teks tidak mempengaruhi string lainnya.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Penggunaan_concat()">Penggunaan <code>concat()</code></h3> + +<p>Untuk menggabungkan string menjadi sebuah string baru seperti pada contoh dibawah.</p> + +<pre class="brush: js">var halo = 'Halo, '; +console.log(halo.concat('Didik', ' semoga hari ini menyenangkan.')); + +/* Halo, Didik semoga hari ini menyenangkan. */ +</pre> + +<h2 id="Performa">Performa</h2> + +<p>Sangat disarankan untuk menggunakan {{jsxref("Operators/Assignment_Operators", "assignment operators", "", 1)}} (<code>+</code>, <code>+=</code>) pada method <code>concat()</code>. lihat <a href="http://jsperf.com/concat-vs-plus-vs-join">test performa berikut ini</a>.</p> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.4.6', 'String.prototype.concat')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.concat', 'String.prototype.concat')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.concat', 'String.prototype.concat')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_browser">Kompabilitas browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Android</th> + <th>Chrome untuk Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Array.prototype.concat()")}}</li> + <li>{{jsxref("Operators/Assignment_Operators", "Assignment operators", "", 1)}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/string/fromcharcode/index.html b/files/id/web/javascript/reference/global_objects/string/fromcharcode/index.html new file mode 100644 index 0000000000..786e32883e --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/string/fromcharcode/index.html @@ -0,0 +1,143 @@ +--- +title: String.fromCharCode() +slug: Web/JavaScript/Reference/Global_Objects/String/fromCharCode +tags: + - JavaScript + - Method + - Metode + - Reference + - Referensi + - String + - Unicode +translation_of: Web/JavaScript/Reference/Global_Objects/String/fromCharCode +--- +<div>{{JSRef}}</div> + +<p>Metode statis <strong><code>String.fromCharCode()</code></strong> mengembalikan sebuah string yang dibuat dari barisan nilai Unicode tertentu.</p> + +<h2 id="Sintak">Sintak</h2> + +<pre class="syntaxbox notranslate"><code>String.fromCharCode(<var>num1</var>[, ...[, <var>numN</var>]])</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>num1, ..., num<em>N</em></code></dt> + <dd>Barisan dari angka-angka yang merupakan nilai Unicode.Jangkauannya antara 0 sampai dengan 65535(0xFFFF).Nomor yang lebih besar dari 0xFFFF dipotong.Tidak ada cek validasi yang dilakukan. </dd> +</dl> + +<h3 id="Nilai_kembalian">Nilai kembalian</h3> + +<p>Sebuah string yang di dalamnya terdapat karakter-karakter sesuai nilai Unicode dari barisan angka yang diberikan.</p> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Metode ini mengembalikan sebuah string dan bukan objek {{jsxref("String")}}.</p> + +<p>Karena <code>fromCharCode()</code> merupakan metode statis dari {{jsxref("String")}}, Anda selalu bisa menggunakannya sebagai <code>String.fromCharCode()</code>, daripada sebagai metode dari objek {{jsxref("String")}} yang Anda buat.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Menggunakan_fromCharCode">Menggunakan <code>fromCharCode()</code></h3> + +<p>Contoh di bawah ini mengembalikan string "ABC".</p> + +<pre class="brush: js notranslate">String.fromCharCode(65, 66, 67); // "ABC" +</pre> + +<h2 id="Membuatnya_bekerja_dengan_nilai_yang_lebih_tinggi">Membuatnya bekerja dengan nilai yang lebih tinggi</h2> + +<p>Meskipu nilai Unicode yang umum dapat digambarkan dengan satu angka 16-bit (seperti yang diharapkan pada awal mula standarisasi JavaScript) dan <code>fromCharCode()</code> dapat digunakan untuk mengembalikan sebuah karakter dari nilai yang paling umum (misal. nilai UCS-2 yang merupakan bagian dari UTF-16 dengan karakter yang paling umum digunakan). Untuk menghadapi SEMUA nilai Unicode yang sah (hingga 21 bit), <code>fromCharCode()</code> sendiri tidak dapat menghadapinya. Semenjak nilai code point karakter yang lebih tinggi menggunakan dua angka "pengganti" (dengan nilai yang lebih rendah) untuk membuat sebuah karakter tunggal, {{jsxref("String.fromCodePoint()")}} (bagian dari draf ES6) dapat digunakan untuk menggunakan sepasang angka tersebut, sehingga dapat menampilkan karakter dengan nilai yang lebih tinggi.</p> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Komentar</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definisi awal. Diimplementasikan dalam JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.3.2', 'StringfromCharCode')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.fromcharcodes', 'String.fromCharCode')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.fromcharcodes', 'String.fromCharCode')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_peramban">Kompabilitas peramban</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("String.fromCodePoint()")}}</li> + <li>{{jsxref("String.prototype.charAt()")}}</li> + <li>{{jsxref("String.prototype.charCodeAt()")}}</li> + <li>{{jsxref("String.prototype.codePointAt()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/string/fromcodepoint/index.html b/files/id/web/javascript/reference/global_objects/string/fromcodepoint/index.html new file mode 100644 index 0000000000..dc4024f941 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/string/fromcodepoint/index.html @@ -0,0 +1,149 @@ +--- +title: String.fromCodePoint() +slug: Web/JavaScript/Reference/Global_Objects/String/fromCodePoint +tags: + - ECMAScript 2015 + - JavaScript + - Metode + - Referensi + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/fromCodePoint +--- +<div>{{JSRef}}</div> + +<p>Metode <strong><code>String.fromCodePoint()</code></strong> mengembalikan string yang dibuat dengan menggunakan urutan titik kode yang ditentukan.</p> + +<div>{{EmbedInteractiveExample("pages/js/string-fromcodepoint.html")}}</div> + +<p class="hidden">Sumber untuk contoh interaktif ini disimpan dalam repositori github. Jika anda ingin berkontribusi pada proyek contoh interaktif lainnya, silakan klon <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> dan kirim permintaan penarikan kepada kami.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>String.fromCodePoint(<var>num1</var>[, ...[, <var>numN</var>]])</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>num1, ..., num<em>N</em></code></dt> + <dd>Urutan Poin Kode</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p><span class="tlid-translation translation"><span title="">String yang dibuat dengan menggunakan urutan titik kode yang ditentukan.</span></span></p> + +<h3 id="Exceptions">Exceptions</h3> + +<ul> + <li>A {{jsxref("Errors/Not_a_codepoint", "RangeError")}} adalah sebuah pembatalan jika titik kode Unicode yang valid tidak diberikan (e.g. "RangeError: NaN is not a valid code point").</li> +</ul> + +<h2 id="Description">Description</h2> + +<p>Metode ini mengembalikan string dan bukan sebuah objek. {{jsxref("String")}} .</p> + +<p>Karena <code>fromCodePoint()</code> adalah metode statik dari {{jsxref("String")}}, dan anda selalu menggunakannya sebagai <code>String.fromCodePoint()</code>, alih-alih sebagai sebuah metode yang anda buat {{jsxref("String")}}</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_fromCodePoint()">Using <code>fromCodePoint()</code></h3> + +<pre class="brush: js">String.fromCodePoint(42); // "*" +String.fromCodePoint(65, 90); // "AZ" +String.fromCodePoint(0x404); // "\u0404" +String.fromCodePoint(0x2F804); // "\uD87E\uDC04" +String.fromCodePoint(194564); // "\uD87E\uDC04" +String.fromCodePoint(0x1D306, 0x61, 0x1D307) // "\uD834\uDF06a\uD834\uDF07" + +String.fromCodePoint('_'); // RangeError +String.fromCodePoint(Infinity); // RangeError +String.fromCodePoint(-1); // RangeError +String.fromCodePoint(3.14); // RangeError +String.fromCodePoint(3e-2); // RangeError +String.fromCodePoint(NaN); // RangeError +</pre> + +<pre class="brush: js">// String.fromCharCode() sendiri tidak bisa mendapatkan karakter pada titik kode tinggi seperti itu +// Disisi lain, dapat juga mengembalikan karakter 4-byte dan juga +// yang biasa 2-byte (i.e., dapat mengembalikan satu karakter yang sebenarnya sudah dimiliki +// string 2 daripada 1!) +console.log(String.fromCodePoint(0x2F804)); // atau 194564 dalam bilangan desimal +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Metode <code>String.fromCodePoint</code> telah ditambahkan ke ECMAScript 2015 dan mungkin belum didukung di semua browser web atau lingkungannya. Gunakan kode dibawah ini untuk polyfill:</p> + +<pre class="brush: js">if (!String.fromCodePoint) (function(stringFromCharCode) { + var fromCodePoint = function(_) { + var codeUnits = [], codeLen = 0, result = ""; + for (var index=0, len = arguments.length; index !== len; ++index) { + var codePoint = +arguments[index]; + // correctly handles all cases including `NaN`, `-Infinity`, `+Infinity` + // The surrounding `!(...)` is required to correctly handle `NaN` cases + // The (codePoint>>>0) === codePoint clause handles decimals and negatives + if (!(codePoint < 0x10FFFF && (codePoint>>>0) === codePoint)) + throw RangeError("Invalid code point: " + codePoint); + if (codePoint <= 0xFFFF) { // BMP code point + codeLen = codeUnits.push(codePoint); + } else { // Astral code point; split in surrogate halves + // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae + codePoint -= 0x10000; + codeLen = codeUnits.push( + (codePoint >> 10) + 0xD800, // highSurrogate + (codePoint % 0x400) + 0xDC00 // lowSurrogate + ); + } + if (codeLen >= 0x3fff) { + result += stringFromCharCode.apply(null, codeUnits); + codeUnits.length = 0; + } + } + return result + stringFromCharCode.apply(null, codeUnits); + }; + try { // IE 8 only supports `Object.defineProperty` on DOM elements + Object.defineProperty(String, "fromCodePoint", { + "value": fromCodePoint, "configurable": true, "writable": true + }); + } catch(e) { + String.fromCodePoint = fromCodePoint; + } +}(String.fromCharCode)); +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-string.fromcodepoint', 'String.fromCodePoint')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definisi Awal</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.fromcodepoint', 'String.fromCodePoint')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">Tabel Kompatibilitas di halaman ini dihasilkan dari data terstruktur. Jika anda ingin berkontribusi pada data, silakan berkunjung <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> dan kirimkan permintaan penarikan</p> + +<p>{{Compat("javascript.builtins.String.fromCodePoint")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("String.fromCharCode()")}}</li> + <li>{{jsxref("String.prototype.charAt()")}}</li> + <li>{{jsxref("String.prototype.codePointAt()")}}</li> + <li>{{jsxref("String.prototype.charCodeAt()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/string/index.html b/files/id/web/javascript/reference/global_objects/string/index.html new file mode 100644 index 0000000000..35f78502d5 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/string/index.html @@ -0,0 +1,371 @@ +--- +title: String +slug: Web/JavaScript/Reference/Global_Objects/String +tags: + - ECMAScript6 + - JavaScript + - Reference + - Referensi + - Referensı(2) + - Référence(2) + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String +--- +<div>{{JSRef("Global_Objects", "String")}}</div> + +<h2 id="Summary" name="Summary">Ringkasan</h2> + +<p>Objek global <strong><code>String</code></strong> adalah sebuah pembangun untuk string, atau sebuah rangkaian dari karakter.</p> + +<h2 id="Syntax" name="Syntax">Sintak</h2> + +<p>String secara harfiah berbentuk:</p> + +<pre class="syntaxbox"><code>'string text' +"string text" +"中文 español English हिन्दी العربية português বাংলা русский 日本語 ਪੰਜਾਬੀ 한국어 </code><span style="color: #222222; font-family: consolas,lucida console,monospace; font-size: 12px; line-height: normal; white-space: pre-wrap;">தமிழ்</span><code>" +</code></pre> + +<p>Sejak ECMAScript 6 String secara harfiah dapat juga menjadi <a href="/en-US/docs/Web/JavaScript/Reference/template_strings">Template Strings</a>:</p> + +<pre><code>`hello world`</code> +`hello! + world!` +<code>`hello ${who}`</code> +<code>escape `<a>${who}</a>`</code></pre> + +<p>Selain karakter biasa yang dapat dicetak, karakter spesial dapat disandikan dengan notasi lepas:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Kode</th> + <th scope="col">Keluaran</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>\0</code></td> + <td>karakter NUL</td> + </tr> + <tr> + <td><code>\'</code></td> + <td>petik satu</td> + </tr> + <tr> + <td><code>\"</code></td> + <td>petik dua</td> + </tr> + <tr> + <td><code>\\</code></td> + <td>garis miring</td> + </tr> + <tr> + <td><code>\n</code></td> + <td>baris baru</td> + </tr> + <tr> + <td><code>\r</code></td> + <td>carriage return</td> + </tr> + <tr> + <td><code>\v</code></td> + <td>tab vertikal</td> + </tr> + <tr> + <td><code>\t</code></td> + <td>tab</td> + </tr> + <tr> + <td><code>\b</code></td> + <td>backspace</td> + </tr> + <tr> + <td><code>\f</code></td> + <td>form feed</td> + </tr> + <tr> + <td><code>\uXXXX</code></td> + <td>unicode codepoint</td> + </tr> + <tr> + <td><code>\u{X}</code> ... <code>\u{XXXXXX}</code></td> + <td>unicode codepoint {{experimental_inline}}</td> + </tr> + <tr> + <td><code>\xXX</code></td> + <td>karakter Latin-1</td> + </tr> + </tbody> +</table> + +<p>Atau, menggunakan objek global <code>String</code> langsung:</p> + +<pre class="syntaxbox"><code>String(benda) +new String(benda) +</code></pre> + +<h3 id="Parameters" name="Parameters">Parameter</h3> + +<dl> + <dt><code>benda</code></dt> + <dd>Apapun yang akan diubah ke string.</dd> +</dl> + +<h2 id="Description" name="Description">Deskripsi</h2> + +<p>String berguna untuk membawa data yang dapat diitampilkan dalam bentuk teks. Beberapa operasi yang paling sering digunakan dalam string adalah untuk memeriksa {{jsxref("String.length", "panjangnya")}}, untuk membuat dan menggabungkannya dengan <a href="/en-US/docs/Web/JavaScript/Reference/Operators/String_Operators">operator string + dan +=</a>, mengecek adanya atau lokasi dari substring dengan metode {{jsxref("String.prototype.indexOf()", "indexOf()")}}, atau mendapatkan substring dengan metode {{jsxref("String.prototype.substring()", "substring()")}}.</p> + +<h3 id="Character_access" name="Character_access">Akses karakter</h3> + +<p>Ada dua cara untuk mengakses sebuah karakter dalam string. Cara yang pertama adalah metode {{jsxref("String.prototype.charAt()", "charAt()")}}:</p> + +<pre class="brush: js">return 'cat'.charAt(1); // mengembalikan "a" +</pre> + +<p>Cara yang lain (diperkenalkan dalam ECMAScript 5) adalah menganggap string sebagai objek mirip-susunan, di mana setiap karakter disesuaikan dengan indeks angka:</p> + +<pre class="brush: js">return 'cat'[1]; // mengembalikan "a" +</pre> + +<p>Untuk akses karakter dengan menggunakan notasi kurung, mencoba untuk menghapus atau menetapkan nilai ke propertinya tidak akan berhasil. Properti yang terlibat tidak dapat ditulis maupun diubah. (Lihat {{jsxref("Object.defineProperty()")}} untuk informasi lebih.)</p> + +<h3 id="Comparing_strings" name="Comparing_strings">Membandingkan string</h3> + +<p>Pengembang C mempunyai fungsi <code>strcmp()</code> untuk membandingkan string. Dalam JavaScript, Anda cukup menggunakan <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">operas kurang dari dan lebih dari</a>:</p> + +<pre class="brush: js">var a = 'a'; +var b = 'b'; +if (a < b) { // benar + print(a + ' kurang dari ' + b); +} else if (a > b) { + print(a + ' lebih dari ' + b); +} else { + print(a + ' sama dengan ' + b); +} +</pre> + +<p>Hasil yang serupa dapat didapatkan dengan metode {{jsxref("String.prototype.localeCompare()", "localeCompare()")}} yang diwariskan oleh benda <code>String</code>.</p> + +<h3 id="Perbedaan_antara_string_primitif_dan_objek_String">Perbedaan antara string primitif dan objek <code>String</code></h3> + +<p>Ingat bahwa JavaScript membedakan nilai antara objek <code>String</code> dan string primitif. (Serupa dengan {{jsxref("Global_Objects/Boolean", "Boolean")}} dan {{jsxref("Global_Objects/Number", "Angka")}}.)</p> + +<p>String yang harfiah (ditandai dengan petik satu atau dua) dan string yang dikembalikan dari panggilan <code>String</code> dalam sebuah konteks non-pembangun (misal, tanpa menggunakan kata kunci {{jsxref("Operators/new", "new")}}) adalah string primitif. JavaScript secara otomatis mengubah primitif ke objek <code>String</code>, jadi mungkin untuk menggunakan metode objek <code>String</code> untuk string primitif. Dalam konteks di mana sebuah metode dipanggil pada string primitif atau sebuah pembacaan properti terjadi, JavaScript akan secara otomatis membungkus string primitif dan memanggil metode tersebut atau melakukan pembacaan properti.</p> + +<pre class="brush: js">var s_prim = 'foo'; +var s_obj = new String(s_prim); + +console.log(typeof s_prim); // "string" +console.log(typeof s_obj); // "object" +</pre> + +<p>String primitif dan objek <code>String</code> juga memberikan hasil berbeda saat menggunakan {{jsxref("Global_Objects/eval", "eval()")}}. Primitif melewati <code>eval</code> sebagai kode sumber; Objek <code>String</code> dianggap semua objek lain, dengan mengembalikan objek tersebut. Sebagai contoh:</p> + +<pre class="brush: js">var s1 = '2 + 2'; // membuat sebuah string primitif +var s2 = new String('2 + 2'); // membuat sebuah objek String +console.log(eval(s1)); // mengembalikan angka 4 +console.log(eval(s2)); // mengembalikan string "2 + 2" +</pre> + +<p>Untuk itu, kode mungkin berhenti saat menemui objek <code>String</code> saat mengharapkan string primitif, meskipun secara umum pembuat tidak perlu khawatir tentang perbedaannya.</p> + +<p>Sebuah objek <code>String</code> dapat selalu diubah menjadi kawan primitifnya dengan metode {{jsxref("String.prototype.valueOf()", "valueOf()")}}.</p> + +<pre class="brush: js">console.log(eval(s2.valueOf())); // mengembalikan angka 4 +</pre> + +<div class="note"><strong>Catatan:</strong> Untuk kemungkinan lain ke string dalam JavaScript, mohon baca artikel tentang <a href="/en-US/Add-ons/Code_snippets/StringView"><code>StringView</code> — a C-like representation of strings based on typed arrays</a> (bahasa Inggris).</div> + +<h2 id="Properties" name="Properties">Properti</h2> + +<dl> + <dt>{{jsxref("String.prototype")}}</dt> + <dd>Membolehkan penambahan properti ke sebuahobjek <code>String</code>.</dd> +</dl> + +<div>{{jsOverrides("Function", "Properties", "prototype")}}</div> + +<h2 id="Methods" name="Methods">Metode</h2> + +<dl> + <dt>{{jsxref("String.fromCharCode()")}}</dt> + <dd>Mengembalikan sebuah string yang dibuat dengan menggunakan nilai urutan Unicode.</dd> + <dt>{{jsxref("String.fromCodePoint()")}} {{experimental_inline}}</dt> + <dd>Mengembalikan sebuah string dibuat dengan menggunakan urutan code points.</dd> + <dt>{{jsxref("String.raw()")}} {{experimental_inline}}</dt> + <dd>Mengembalikan sebuah string yang dibuat dari sebuah templat string mentah.</dd> +</dl> + +<div>{{jsOverrides("Function", "Methods", "fromCharCode", "fromCodePoint", "raw")}}</div> + +<h2 id="Metode_umum_String">Metode umum <code>String</code></h2> + +<p>Metode benda <code>String</code> juga terdapat dalam Firefox sejak JavaScript 1.6 (meskipun bukan bagian dari standar ECMAScript) salam objek <code>String</code> untuk menerapkan metode <code>String</code> ke objek lain:</p> + +<pre class="brush: js">var num = 15; +console.log(String.replace(num, /5/, '2')); +</pre> + +<p>{{jsxref("Global_Objects/Array", "Metode umum", "#Metode_umum_Array", 1)}} juga terdapat dalam metode {{jsxref("Global_Objects/Array", "Array")}}.</p> + +<p>Berikut ini sebuah pengisi untuk memberikan dukungan ke peramban yang tidak mendukung:</p> + +<pre class="brush: js">/*globals define*/ +// Menganggap semua metode String telah ada +(function() { + 'use strict'; + + var i, + methods = [ + 'quote', 'substring', 'toLowerCase', 'toUpperCase', 'charAt', + 'charCodeAt', 'indexOf', 'lastIndexOf', 'startsWith', 'endsWith', + 'trim', 'trimLeft', 'trimRight', 'toLocaleLowerCase', + 'toLocaleUpperCase', 'localeCompare', 'match', 'search', + 'replace', 'split', 'substr', 'concat', 'slice' + ], + methodCount = methods.length, + assignStringGeneric = function(methodName) { + var method = String.prototype[methodName]; + String[methodName] = function(arg1) { + return method.apply(arg1, Array.prototype.slice.call(arguments, 1)); + }; + }; + + for (i = 0; i < methodCount; i++) { + assignStringGeneric(methods[i]); + } +}()); +</pre> + +<h2 id="String_instances" name="String_instances">Benda <code>String</code></h2> + +<h3 id="Properti">Properti</h3> + +<div>{{page('/id/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'Properti')}}</div> + +<h3 id="Metode">Metode</h3> + +<h4 id="Methods_unrelated_to_HTML" name="Methods_unrelated_to_HTML">Metode yang tidak terkait dengan HTML</h4> + +<div>{{page('/id/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'Metode_yang_tidak_terkait_dengan_HTML')}}</div> + +<h4 id="HTML_wrapper_methods" name="HTML_wrapper_methods">Metode pembungkus HTML</h4> + +<div>{{page('/id/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'Metode_pembungkus_HTML')}}</div> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Contoh_Pengubahan_String">Contoh: Pengubahan String</h3> + +<p>Ini mungkin untuk menggunakan <code>String</code> sebagai alternatif "lebih aman" dari {{jsxref("String.prototype.toString()", "toString()")}}, meskipun masih dapat secara normal memanggil <code>toString()</code>, ini juga bekerja untuk {{jsxref("Global_Objects/null", "null")}} dan {{jsxref("Global_Objects/undefined", "undefined")}}. Sebagai contoh:</p> + +<pre class="brush: js">var outputStrings = []; +for (var i = 0, n = inputValues.length; i < n; ++i) { + outputStrings.push(String(inputValues[i])); +} +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Komentar</th> + </tr> + <tr> + <td>ECMAScript 1st Edition.</td> + <td>Standard</td> + <td>Definisi pertama.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5', 'String')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string-objects', 'String')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatibilitas_peramban">Kompatibilitas peramban</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatChrome("0.2")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>\u{XXXXXX}</code></td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatGeckoDesktop("40")}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>\u{XXXXXX}</code></td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatGeckoMobile("40")}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{domxref("DOMString")}}</li> + <li><a href="/en-US/Add-ons/Code_snippets/StringView"><code>StringView</code> — a C-like representation of strings based on typed arrays</a></li> + <li><a href="/en-US/docs/Web/API/DOMString/Binary">Binary strings</a></li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/string/indexof/index.html b/files/id/web/javascript/reference/global_objects/string/indexof/index.html new file mode 100644 index 0000000000..3b7f7d0965 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/string/indexof/index.html @@ -0,0 +1,190 @@ +--- +title: String.prototype.indexOf() +slug: Web/JavaScript/Reference/Global_Objects/String/indexOf +translation_of: Web/JavaScript/Reference/Global_Objects/String/indexOf +--- +<div>{{JSRef}}</div> + +<p><strong><code>indexOf()</code></strong> method mengembalikan sebuah <em>index</em> saat memanggil objek {{jsxref("String")}} pertama kali dengan <em>value </em>yang di tentukan, bermula dari pencarian pada <em><code>fromIndex</code></em>. Dan pencarian ini akan mengembalikan index dari karakter pada String, dan akan mengembalikan <em>-1</em> ketika pencarian <em>indexOf </em>ini tak menemukan karakter yang cocok/ value yang sesuai.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>str</var>.indexOf(<var>searchValue</var>[, <var>fromIndex</var>]</code>)</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>searchValue</code></dt> + <dd>Sebuah string yang me-representasikan dari nilai yang ingin di cari.</dd> + <dt><code>fromIndex</code> {{optional_inline}}</dt> + <dd>Index bermulai dari awal hingga bergerak ke depan sepanjang string. Index bisa berupa bilangan bulat atau apa pun. Nilai standarnya adalah <code>0</code>, jadi seluruh index dari array akan dicari. Jika <code>fromIndex < 0</code> seluruh string dicari. Jika <code>fromIndex >= str.length</code>, string tidak dicari dan <code>-1</code> sebagai kembaliannya. Kecuali kalau <code>searchValue</code> adalah string kosong, maka <code>str.length</code> sebagai kembaliannya.</dd> +</dl> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Karakter dalam sebuah <em>string</em> di indeks berurutan dari kiri ke kanan. Index pada karakter pertama yaitu 0, dan index pada karakter terakhir dalam sebuah <em>String </em>di sebut <em>stringName </em>is <code>stringName.length - 1</code>.</p> + +<pre class="brush: js">'Blue Whale'.indexOf('Blue'); // mengembalikan 0 +'Blue Whale'.indexOf('Blute'); // mengembalikan -1 +'Blue Whale'.indexOf('Whale', 0); // mengembalikan 5 +'Blue Whale'.indexOf('Whale', 5); // mengembalikan 5 +'Blue Whale'.indexOf('', 9); // mengembalikan 9 +'Blue Whale'.indexOf('', 10); // mengembalikan 10 +'Blue Whale'.indexOf('', 11); // mengembalikan 10 +</pre> + +<h3 id="Case-sensitivity">Case-sensitivity</h3> + +<p>The <code>indexOf()</code> method sangat <em>case sensitive</em>. Sebagai contoh, <em>expression</em> berikut ini mengembalikan -1:</p> + +<pre class="brush: js">'Blue Whale'.indexOf('blue'); // mengembalikan -1 +</pre> + +<h3 id="Checking_occurrences_Memeriksa_suatu_kejadian">Checking occurrences/ Memeriksa suatu kejadian</h3> + +<p>Catat bahwa '0' tak bernilai <em>true</em> dan '-1' bukan bernilali <em>f<code>alse</code></em>. Oleh karena-nya, ketika memeriksa apakah sebuah <em>String</em> Therefore, when checking if a specific string exists within another string the correct way to check would be:</p> + +<pre class="brush: js">'Blue Whale'.indexOf('Blue') !== -1; // true +'Blue Whale'.indexOf('Bloe') !== -1; // false +</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_indexOf()_and_lastIndexOf()">Using <code>indexOf()</code> and <code>lastIndexOf()</code></h3> + +<p>The following example uses <code>indexOf()</code> and {{jsxref("String.prototype.lastIndexOf()", "lastIndexOf()")}} to locate values in the string <code>"Brave new world"</code>.</p> + +<pre class="brush: js">var anyString = 'Brave new world'; + +console.log('The index of the first w from the beginning is ' + anyString.indexOf('w')); +// logs 8 +console.log('The index of the last w from the beginning is ' + anyString.lastIndexOf('w')); +// logs 10 + +console.log('The index of "new" from the beginning is ' + anyString.indexOf('new')); +// logs 6 +console.log('The index of "new" from the end is ' + anyString.lastIndexOf('new')); +// logs 6 +</pre> + +<h3 id="indexOf()_and_case-sensitivity"><code>indexOf()</code> and case-sensitivity</h3> + +<p>The following example defines two string variables. The variables contain the same string except that the second string contains uppercase letters. The first {{domxref("console.log()")}} method displays 19. But because the <code>indexOf()</code> method is case sensitive, the string <code>"cheddar"</code> is not found in <code>myCapString</code>, so the second <code>console.log()</code> method displays -1.</p> + +<pre class="brush: js">var myString = 'brie, pepper jack, cheddar'; +var myCapString = 'Brie, Pepper Jack, Cheddar'; + +console.log('myString.indexOf("cheddar") is ' + myString.indexOf('cheddar')); +// logs 19 +console.log('myCapString.indexOf("cheddar") is ' + myCapString.indexOf('cheddar')); +// logs -1 +</pre> + +<h3 id="Using_indexOf()_to_count_occurrences_of_a_letter_in_a_string">Using <code>indexOf()</code> to count occurrences of a letter in a string</h3> + +<p>The following example sets <code>count</code> to the number of occurrences of the letter <code>e</code> in the string <code>str</code>:</p> + +<pre class="brush: js">var str = 'To be, or not to be, that is the question.'; +var count = 0; +var pos = str.indexOf('e'); + +while (pos !== -1) { + count++; + pos = str.indexOf('e', pos + 1); +} + +console.log(count); // displays 4 +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.4.7', 'String.prototype.indexOf')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.indexof', 'String.prototype.indexOf')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.indexof', 'String.prototype.indexOf')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("String.prototype.charAt()")}}</li> + <li>{{jsxref("String.prototype.lastIndexOf()")}}</li> + <li>{{jsxref("String.prototype.split()")}}</li> + <li>{{jsxref("Array.prototype.indexOf()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/string/length/index.html b/files/id/web/javascript/reference/global_objects/string/length/index.html new file mode 100644 index 0000000000..6975d8b7d3 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/string/length/index.html @@ -0,0 +1,126 @@ +--- +title: String.length +slug: Web/JavaScript/Reference/Global_Objects/String/length +translation_of: Web/JavaScript/Reference/Global_Objects/String/length +--- +<div>{{JSRef}}</div> + +<p>Properti <strong><code>length</code></strong> mewakili panjang string.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>str</var>.length</code></pre> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Properti ini mengembalikan jumlah unit kode dalam string. {{interwiki("wikipedia", "UTF-16")}}, Format string yang digunakan oleh javascript, Menggunakan 16-bit unit kode tunggal untuk mewakili karakter yang paling umum, tapi perlu menggunakan dua unit kode untuk unit karakter tertentu, sehingga dapat terjadi kemungkinan nilai yang dikembalikan oleh <code>length</code> tidak sesuai dengan jumlah karakter pada string.</p> + +<p>Untuk string kosong, <font face="Consolas, Liberation Mono, Courier, monospace">jumlahnya</font> 0.</p> + +<p>Properti static <code>String.length</code> mengembalikan nilai 1.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Penggunaan_Dasar">Penggunaan Dasar</h3> + +<pre class="brush: js">var x = 'Mozilla'; +var kosong = ''; + +console.log('Mozilla memiliki ' + x.length + ' unit kode'); +/* "Mozilla memiliki 7 unit kode" */ + +console.log('String kosong memiliki jumlah unit kode ' + kosong.length); +/* "String kosong memiliki jumlah unit kode 0" */ +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definisi Inisial. Diimplementasikan dalam JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.5.1', 'String.prototype.length')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-properties-of-string-instances-length', 'String.prototype.length')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-properties-of-string-instances-length', 'String.prototype.length')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Browser">Kompabilitas Browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="sect1"> </h2> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li><a href="http://developer.teradata.com/blog/jasonstrimpel/2011/11/javascript-string-length-and-internationalizing-web-applications">JavaScript <code>String.length</code> dan internasionalisasi Aplikasi Web</a></li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/string/link/index.html b/files/id/web/javascript/reference/global_objects/string/link/index.html new file mode 100644 index 0000000000..914eff9955 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/string/link/index.html @@ -0,0 +1,130 @@ +--- +title: String.prototype.link() +slug: Web/JavaScript/Reference/Global_Objects/String/link +tags: + - JavaScript + - Method + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/link +--- +<div>{{JSRef}}</div> + +<p>Method <strong><code>link()</code></strong> membuat sebuah string seperti halnya kode untuk sebuah elemen HTML {{HTMLElement("a")}} untuk digunakan sebagai link hypertext ke URL lain.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><code><var>str</var>.link(<var>url</var>)</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>url</code></dt> + <dd>String yang menentukan atribut <code>href</code> dai tag <code><a></code>; harus merupakan URL yang valid (relative ataupun absolute), dengan setiap karakter <code>&</code> harus ditulis <code>&amp;</code>, dan setiap karakter <code>"</code> harus ditulis <code>&quot;</code>.</dd> +</dl> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Menggunakan method <code>link()</code> untuk membuat snippet HTML untuk sebuah link hypertext. Mengembalikan string yang kemudian dapat di tambahkan ke dokumen html menggunakan {{domxref("document.write()")}} atau {{domxref("element.innerHTML")}}.</p> + +<p>Link yang dibuat menggunakan method <code>link()</code> akan menjadi elemen di array <code>links</code> dari sebuah objek <code>document</code>. Lihat juga {{domxref("document.links")}}.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Penggunaan_link()">Penggunaan <code>link()</code></h3> + +<p>Pada contoh berikut menampilkan kata "MDN" sebagai sebuah link hypertext yang mengembalikan pengguna ke halaman Mozilla Developer Network.</p> + +<pre class="brush: js">var hotText = 'MDN'; +var URL = 'https://developer.mozilla.org/'; + +console.log('Klik untuk kembali ke ' + hotText.link(URL)); +// Klik untuk kembali ke <a href="https://developer.mozilla.org/">MDN</a> +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.link', 'String.prototype.link')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0. Defined in the (normative) Annex B for Additional ECMAScript Features for Web Browsers.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.link', 'String.prototype.link')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Defined in the (normative) Annex B for Additional ECMAScript Features for Web Browsers.</td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_browser">Kompabilitas browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Catatan_Gecko-specific">Catatan Gecko-specific</h2> + +<ul> + <li>Dimulai pada Gecko 17.0 {{geckoRelease("17")}} tanda <code>"</code> (quotation mark) sekarang secara otomatis digantikan oleh referensi karakter HTML <code>&quot;</code> di parameter <code>url</code>.</li> +</ul> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("String.prototype.anchor()")}}</li> +</ul> 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 new file mode 100644 index 0000000000..3570a3627a --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/string/purwarupa/index.html @@ -0,0 +1,221 @@ +--- +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 +--- +<div>{{JSRef}}</div> + +<p>Properti <strong><code>String.prototype</code></strong> mewakili objek prototype {{jsxref("Global_Objects/String", "String")}}.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Description" name="Description">Deskripsi</h2> + +<p>Semua benda {{jsxref("Global_Objects/String", "String")}} diwariskan dari <code>String.prototype</code>. Perubahan ke objek purwarupa <code>String</code> disebarkan ke semua benda {{jsxref("Global_Objects/String", "String")}}.</p> + +<h2 id="Properties" name="Properties">Properti</h2> + +<dl> + <dt><code>String.prototype.constructor</code></dt> + <dd>Menentukan fungsi yang membuat sebuah purwarupa dari objek.</dd> + <dt>{{jsxref("String.prototype.length")}}</dt> + <dd>Menggambarkan panjang dari string.</dd> + <dt><code><em>N</em></code></dt> + <dd>Digunakan untuk mengakses karakter pada posisi ke-<em>N</em> di mana <em>N</em> adalah sebuah bilangan bulat positif antara 0 dan nilai dari {{jsxref("String.length", "panjang")}} dikurangi satu. Nilai ini baca-saja.</dd> +</dl> + +<h2 id="Methods" name="Methods">Metode</h2> + +<h3 id="Methods_unrelated_to_HTML" name="Methods_unrelated_to_HTML">Metode yang tidak terkait dengan HTML</h3> + +<dl> + <dt>{{jsxref("String.prototype.charAt()")}}</dt> + <dd>Mengembalikan karakter pada indeks yang diberikan.</dd> + <dt>{{jsxref("String.prototype.charCodeAt()")}}</dt> + <dd>Mengembalikan sebuah angka yang menggambarkan nilai Unicode dari karakter pada indeks yang diberikan.</dd> + <dt>{{jsxref("String.prototype.codePointAt()")}} {{experimental_inline}}</dt> + <dd>Mengembalikan sebuah bilangan bulat non negatif yang merupakan nilai penyandian code point UTF-16 pada posisi yang diberikan.</dd> + <dt>{{jsxref("String.prototype.concat()")}}</dt> + <dd>Menggabungkan teks dari dua string dan mengembalikan sebuah string baru.</dd> + <dt>{{jsxref("String.prototype.includes()")}} {{experimental_inline}}</dt> + <dd>Menentukan apakah satu string mungkin terdapat pada string lain.</dd> + <dt>{{jsxref("String.prototype.endsWith()")}} {{experimental_inline}}</dt> + <dd>Menentukan apakah sebuah string berakhir dengan karakter dari string lain.</dd> + <dt>{{jsxref("String.prototype.indexOf()")}}</dt> + <dd>Mengembalikan indeks pada objek {{jsxref("Global_Objects/String", "String")}} terpanggil dari pertemuan pertama dari nilai yang diberikan, atau -1 jika tidak ditemukan.</dd> + <dt>{{jsxref("String.prototype.lastIndexOf()")}}</dt> + <dd>Mengembalikan indeks pada objek {{jsxref("Global_Objects/String", "String")}} terpanggil dari pertemuan terakhir dari nilai yang diberikan, atau -1 jika tidak ditemukan.</dd> + <dt>{{jsxref("String.prototype.localeCompare()")}}</dt> + <dd>Returns a number indicating whether a reference string comes before or after or is the same as the given string in sort order.</dd> + <dt>{{jsxref("String.prototype.match()")}}</dt> + <dd>Digunakan untuk mencocokkan sebuah regular expression pada string.</dd> + <dt>{{jsxref("String.prototype.normalize()")}} {{experimental_inline}}</dt> + <dd>Mengembalikan Unicode Normalization Form dari string terpanggil.</dd> + <dt><s class="obsoleteElement">{{jsxref("String.prototype.quote()")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement">Membungkus string dalam petik ganda ("<code>"</code>").</s></dd> + <dt>{{jsxref("String.prototype.repeat()")}} {{experimental_inline}}</dt> + <dd>Mengembalikan sebuah string yang tersiri dari elemen-elemen dari objek yang diulangi sebanyak yang diberikan.</dd> + <dt>{{jsxref("String.prototype.replace()")}}</dt> + <dd>Digunakan untuk mencari kecocokkan antara sebuah regular expression dan sebuah string, dan untuk menggantikan substring yang cocok dengan substring yang baru.</dd> + <dt>{{jsxref("String.prototype.search()")}}</dt> + <dd>Menjalankan pencarian untuk sebuah kecocokan antara sebuah regular expression dan sebuah string yang diberikan.</dd> + <dt>{{jsxref("String.prototype.slice()")}}</dt> + <dd>Menghasilkan sebuah bagian dari string dan mengembalikan sebuah string baru.</dd> + <dt>{{jsxref("String.prototype.split()")}}</dt> + <dd>Memisahkan sebuah objek {{jsxref("Global_Objects/String", "String")}} ke dalam sebuah susunan dari string dengan memisahkan string ke dalam substring.</dd> + <dt>{{jsxref("String.prototype.startsWith()")}} {{experimental_inline}}</dt> + <dd>Menentukan apakah sebuah string dimulai dengan karakter dari string lain.</dd> + <dt>{{jsxref("String.prototype.substr()")}}</dt> + <dd>Mengembalikan karakter-karakter dalam sebuah string yang dimulai dari indeks yang diberikan sebanyak jumlah karakter yang diberikan.</dd> + <dt>{{jsxref("String.prototype.substring()")}}</dt> + <dd>Mengembalikan karakter-karakter dalam sebuah string antara dua indeks ke dalam string.</dd> + <dt>{{jsxref("String.prototype.toLocaleLowerCase()")}}</dt> + <dd>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()")}}.</dd> + <dt>{{jsxref("String.prototype.toLocaleUpperCase()")}}</dt> + <dd>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()")}}.</dd> + <dt>{{jsxref("String.prototype.toLowerCase()")}}</dt> + <dd>Mengembalikan nilai string terpanggil yang diubah menjadi huruf kecil.</dd> + <dt>{{jsxref("String.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>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()")}}.</dd> + <dt>{{jsxref("String.prototype.toString()")}}</dt> + <dd>Mengembalikan sebuah string menggambarkan objek yang diberikan. Mengesampingkan metode {{jsxref("Object.prototype.toString()")}}.</dd> + <dt>{{jsxref("String.prototype.toUpperCase()")}}</dt> + <dd>Mengembalikan nilai string terpanggil yang diubah menjadi huruf kapital.</dd> + <dt>{{jsxref("String.prototype.trim()")}}</dt> + <dd>Memotong whitespace dari permulaan dan akhir string. Bagian dari standar ECMAScript 5.</dd> + <dt>{{jsxref("String.prototype.trimLeft()")}} {{non-standard_inline}}</dt> + <dd>Memotong whitespace dari sisi kiri dari string.</dd> + <dt>{{jsxref("String.prototype.trimRight()")}} {{non-standard_inline}}</dt> + <dd>Memotong whitespace dari sisi kanan dari string.</dd> + <dt>{{jsxref("String.prototype.valueOf()")}}</dt> + <dd>Mengembalikan nilai primitif dari objek yang diberikan. Mengesampingkan metode {{jsxref("Object.prototype.valueOf()")}}.</dd> + <dt>{{jsxref("String.prototype.@@iterator()", "String.prototype[@@iterator]()")}} {{experimental_inline}}</dt> + <dd>Mengembalikan sebuah objek <code>Iterator</code> baru yang mengulangi melewati code points dari nilai String, mengembalikan setiap code point sebagai sebuah nilai String.</dd> +</dl> + +<h3 id="HTML_wrapper_methods" name="HTML_wrapper_methods">Metode pembungkus HTML</h3> + +<p>Metode-metode ini merupakan penggunaan terbatas, karena mereka hanya memberikan sebuah subset dari tag dan atribut HTML yang tersedia.</p> + +<dl> + <dt>{{jsxref("String.prototype.anchor()")}}</dt> + <dd>{{htmlattrxref("name", "a", "<a name=\"name\">")}} (menarget hiperteks)</dd> + <dt>{{jsxref("String.prototype.big()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("big")}}</dd> + <dt>{{jsxref("String.prototype.blink()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("blink")}}</dd> + <dt>{{jsxref("String.prototype.bold()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("b")}}</dd> + <dt>{{jsxref("String.prototype.fixed()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("tt")}}</dd> + <dt>{{jsxref("String.prototype.fontcolor()")}} {{deprecated_inline}}</dt> + <dd>{{htmlattrxref("color", "font", "<font color=\"color\">")}}</dd> + <dt>{{jsxref("String.prototype.fontsize()")}} {{deprecated_inline}}</dt> + <dd>{{htmlattrxref("size", "font", "<font size=\"size\">")}}</dd> + <dt>{{jsxref("String.prototype.italics()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("i")}}</dd> + <dt>{{jsxref("String.prototype.link()")}}</dt> + <dd>{{htmlattrxref("href", "a", "<a href=\"url\">")}} (tautan ke URL)</dd> + <dt>{{jsxref("String.prototype.small()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("small")}}</dd> + <dt>{{jsxref("String.prototype.strike()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("strike")}}</dd> + <dt>{{jsxref("String.prototype.sub()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("sub")}}</dd> + <dt>{{jsxref("String.prototype.sup()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("sup")}}</dd> +</dl> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Komentar</th> + </tr> + <tr> + <td>ECMAScript 1st Edition.</td> + <td>Standard</td> + <td>Definisi awal.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.3.1', 'String.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype', 'String.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatibilitas_peramban">Kompatibilitas peramban</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Lihat juga</h2> + +<ul> + <li>{{jsxref("Global_Objects/String", "String")}}</li> + <li>{{jsxref("Function.prototype")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/string/split/index.html b/files/id/web/javascript/reference/global_objects/string/split/index.html new file mode 100644 index 0000000000..21f19d353f --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/string/split/index.html @@ -0,0 +1,241 @@ +--- +title: String.prototype.split() +slug: Web/JavaScript/Reference/Global_Objects/String/split +tags: + - JavaScript + - Method + - Prototype + - Reference + - Regular Expressions + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/split +--- +<div>{{JSRef}}</div> + +<p>Method <strong><code>split()</code></strong> membagi sebuah objek {{jsxref("String")}} ke sebuah array string dengan memisahkannya menjadi substring.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><code><var>str</var>.split([<var>separator</var>[, <var>limit</var>]])</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>separator</code></dt> + <dd>Opsional. Menentukan karakter yang digunakan untuk memisahkan string. <code>separator</code> dapat berupa string atau sebuah {{jsxref("Global_Objects/RegExp", "regular expression", "", 1)}}. Jika <code>separator</code> dihilangkan / tidak digunakan, array yang dikembalikan akan terdiri dari satu elemen yang berisi seluruh string. Jika <code>separator</code> dikosongkan atau empty string, <code>str</code> akan dikonversikan sebagai sebuah array dari karakter.</dd> + <dt><code>limit</code></dt> + <dd> + <p>Opsional. Nilai integer yang digunakan untuk menentukan jumlah batas yang dapat ditemukan. Method <code>split()</code> tetap membagi pada setiap kecocokan pada <code>separator</code>, sampai jumlah pembagi item sama dengan <code>limit</code> atau string jatuh lebih pendek dari <code>separator</code>.</p> + </dd> +</dl> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Method <code>split()</code> mengembalikan array baru.</p> + +<p>Saat ditemukan, <code>separator</code> akan dihapus dari string dan substrings akan di kembalikan ke dalam array. Jika <code>separator</code> tidak ditemukan atau di hilangkan, array terdiri satu elemen array yang terdiri dari keseluruhan string. Jika <code>separator</code> merupakan empty string, <code>str</code> dikonversi menjadi sebuah array karakter.</p> + +<p>Jika <code>separator</code> adalah ekspesi reguler yang terdapat tanda kurung , maka setiap kali <code>separator</code> cocok, hasilnya (termasuk hasil yang tidak didefinisikan) dari penangkap tanda kurung akan di sambungkan ke dalam output array. Namun, tidak semua browser mendukung kemampuan ini.</p> + +<p>{{Note("Ketika string kosong, method <code>split()</code> mengembalikan array berisi satu string kosong, dari pada array kosong. Jika string dan separator keduanya string kosong, array kosong akan dikembalikan.")}}</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Penggunaan_split()">Penggunaan <code>split()</code></h3> + +<p>Contoh berikut menjelaskan fungsi yang membagi string ke dalam sebuah array string menggunakan separator tertentu. Setelah memisahkan string , fungsi menampilkan pesan yang menunjukan string asli (sebelum dibagi), separator yang digunakan, jumlah elemen pada array, dan elemen array secara individual.</p> + +<pre class="brush: js">function splitString(stringToSplit, separator) { + var arrayOfStrings = stringToSplit.split(separator); + + console.log('The original string is: "' + stringToSplit + '"'); + console.log('The separator is: "' + separator + '"'); + console.log('The array has ' + arrayOfStrings.length + ' elements: ' + arrayOfStrings.join(' / ')); +} + +var tempestString = 'Oh brave new world that has such people in it.'; +var monthString = 'Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec'; + +var space = ' '; +var comma = ','; + +splitString(tempestString, space); +splitString(tempestString); +splitString(monthString, comma); +</pre> + +<p>Contoh ini menghasilkan output berikut:</p> + +<pre>The original string is: "Oh brave new world that has such people in it." +The separator is: " " +The array has 10 elements: Oh / brave / new / world / that / has / such / people / in / it. + +The original string is: "Oh brave new world that has such people in it." +The separator is: "undefined" +The array has 1 elements: Oh brave new world that has such people in it. + +The original string is: "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec" +The separator is: "," +The array has 12 elements: Jan / Feb / Mar / Apr / May / Jun / Jul / Aug / Sep / Oct / Nov / Dec +</pre> + +<h3 id="Menghapus_spasi_dari_string">Menghapus spasi dari string</h3> + +<p>Pada contoh berikut, <code>split()</code> mencari 0 atau lebih spasi diikuti semikolon, dan di ikuti 0 atau lebih spasi dan, saat ditemukan, menghapus spasi dari string. <code>nameList</code> merupakan array yang dikembalikan dari hasil <code>split()</code>.</p> + +<pre class="brush: js">var names = 'Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand '; + +console.log(names); + +var re = /\s*;\s*/; +var nameList = names.split(re); + +console.log(nameList); +</pre> + +<p>Dua baris log ini; log baris pertama string asli, dan log baris kedua array yang dihasilkan.</p> + +<pre>Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand +[ "Harry Trump", "Fred Barney", "Helen Rigby", "Bill Abel", "Chris Hand " ] +</pre> + +<h3 id="Mengembalikan_batas_jumlah_pembagi">Mengembalikan batas jumlah pembagi</h3> + +<p>Pada contoh berikut, <code>split()</code> mencari 0 atau lebih spasi didalam string dan mengembalikan 3 pembagian pertama yang ditemukan.</p> + +<pre class="brush: js">var myString = 'Hello World. How are you doing?'; +var splits = myString.split(' ', 3); + +console.log(splits); +</pre> + +<p>Script ini akan menampilkan seperti berikut:</p> + +<pre>Hello,World.,How +</pre> + +<h3 id="Tanda_kurung">Tanda kurung</h3> + +<p>Jika <code>separator</code> terdapat tanda kurung, hasil yang cocok akan dikembalikan ke dalam array.</p> + +<pre class="brush: js">var myString = 'Hello 1 word. Sentence number 2.'; +var splits = myString.split(/(\d)/); + +console.log(splits); +</pre> + +<p>Script tersebut menampilkan seperti berikut:</p> + +<pre>[ 'Hello ', '1', ' word. Sentence number ', '2', '.' ] +</pre> + +<h3 id="Membalikkan_String_menggunakan_split()">Membalikkan String menggunakan <code>split()</code></h3> + +<pre class="brush: js">var str = 'asdfghjkl'; +var strReverse = str.split('').reverse().join(''); // 'lkjhgfdsa' +// split() returns an array on which reverse() and join() can be applied +</pre> + +<p><strong>Bonus:</strong> Gunakan operator {{jsxref("Operators/Comparison_Operators", "===", "#Identity_strict_equality_(===)")}} untuk mengetahui apakah string asli adalah palindrome.</p> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.4.14', 'String.prototype.split')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.split', 'String.prototype.split')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.split', 'String.prototype.split')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Browser">Kompabilitas Browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td> + <table class="compat-table"> + <tbody> + <tr> + <td>Dukungan dasar</td> + <td> </td> + </tr> + </tbody> + </table> + </td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li>{{jsxref("String.prototype.charAt()")}}</li> + <li>{{jsxref("String.prototype.indexOf()")}}</li> + <li>{{jsxref("String.prototype.lastIndexOf()")}}</li> + <li>{{jsxref("Array.prototype.join()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/string/tolowercase/index.html b/files/id/web/javascript/reference/global_objects/string/tolowercase/index.html new file mode 100644 index 0000000000..69fdfd1bec --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/string/tolowercase/index.html @@ -0,0 +1,121 @@ +--- +title: String.prototype.toLowerCase() +slug: Web/JavaScript/Reference/Global_Objects/String/toLowerCase +tags: + - JavaScript + - Method + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/toLowerCase +--- +<div>{{JSRef}}</div> + +<p>Method <strong><code>toLowerCase()</code></strong> mengembalikan nilai string yang dipanggil yang telah dikonversi ke lowercase (huruf kecil).</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><code><var>str</var>.toLowerCase()</code></pre> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Method <code>toLowerCase()</code> mengembaikan nilai dari string yang telah dikonversi ke lowercase. <code>toLowerCase()</code> tidak berdampak pada nilai string pada variabel <code>str</code> itu sendiri.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Penggunaan_toLowerCase()">Penggunaan <code>toLowerCase()</code></h3> + +<pre class="brush: js">console.log('ALPHABET'.toLowerCase()); // 'alphabet' +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.4.16', 'String.prototype.toLowerCase')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.tolowercase', 'String.prototype.toLowerCase')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.tolowercase', 'String.prototype.toLowerCase')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_browser">Kompabilitas browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("String.prototype.toLocaleLowerCase()")}}</li> + <li>{{jsxref("String.prototype.toLocaleUpperCase()")}}</li> + <li>{{jsxref("String.prototype.toUpperCase()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/string/tostring/index.html b/files/id/web/javascript/reference/global_objects/string/tostring/index.html new file mode 100644 index 0000000000..dba9c9f792 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/string/tostring/index.html @@ -0,0 +1,118 @@ +--- +title: String.prototype.toString() +slug: Web/JavaScript/Reference/Global_Objects/String/toString +translation_of: Web/JavaScript/Reference/Global_Objects/String/toString +--- +<div>{{JSRef}}</div> + +<p>Method <strong><code>toString()</code></strong> mengembalikan sebuah string berdasarkan objek spesifik.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><code><var>str</var>.toString()</code></pre> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Objek {{jsxref("String")}} akan menimpa method <code>toString()</code> dari objek {{jsxref("Object")}}; bukan turunan {{jsxref("Object.prototype.toString()")}}. Untuk objek {{jsxref("String")}}, method <code>toString()</code> mengembalikan sebuah string berdasarkan objek dan seperti halnya pada method {{jsxref("String.prototype.valueOf()")}}.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Penggunaan_toString()">Penggunaan <code>toString()</code></h3> + +<p>Pada contoh menampilkan nilai string dari sebuah objek {{jsxref("String")}}:</p> + +<pre class="brush: js">var x = new String('Halo Dunia'); + +console.log(x.toString()); // logs 'Halo Dunia' +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.4.2', 'String.prototype.toString')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.tostring', 'String.prototype.toString')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.tostring', 'String.prototype.toString')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Browser">Kompabilitas Browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Dukungan Dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Dukungan Dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li>{{jsxref("Object.prototype.toSource()")}}</li> + <li>{{jsxref("String.prototype.valueOf()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/string/touppercase/index.html b/files/id/web/javascript/reference/global_objects/string/touppercase/index.html new file mode 100644 index 0000000000..bf8182a590 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/string/touppercase/index.html @@ -0,0 +1,115 @@ +--- +title: String.prototype.toUpperCase() +slug: Web/JavaScript/Reference/Global_Objects/String/toUpperCase +translation_of: Web/JavaScript/Reference/Global_Objects/String/toUpperCase +--- +<div>{{JSRef}}</div> + +<p>Method <strong><code>toUpperCase()</code></strong> mengembalikan nilai string pemanggil dikonversi ke huruf besar.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><code><var>str</var>.toUpperCase()</code></pre> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Method <code>toUpperCase()</code> mengembalikan nilai string diconversikan ke huruf besar. <code>toUpperCase()</code> tidak mempengaruhi nilai string itu sendiri.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Penggunaan_toUpperCase()">Penggunaan <code>toUpperCase()</code></h3> + +<pre class="brush: js">console.log('alphabet'.toUpperCase()); // 'ALPHABET' +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.4.18', 'String.prototype.toUpperCase')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.touppercase', 'String.prototype.toUpperCase')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.touppercase', 'String.prototype.toUpperCase')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_browser">Kompabilitas browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_Pula">Lihat Pula</h2> + +<ul> + <li>{{jsxref("String.prototype.toLocaleLowerCase()")}}</li> + <li>{{jsxref("String.prototype.toLocaleUpperCase()")}}</li> + <li>{{jsxref("String.prototype.toLowerCase()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/typedarray/index.html b/files/id/web/javascript/reference/global_objects/typedarray/index.html new file mode 100644 index 0000000000..e0b8d942c1 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/typedarray/index.html @@ -0,0 +1,344 @@ +--- +title: TypedArray +slug: Web/JavaScript/Reference/Global_Objects/TypedArray +tags: + - JavaScript + - NeedsTranslation + - TopicStub + - TypedArray + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray +--- +<div>{{JSRef}}</div> + +<p>A <strong><em>TypedArray</em></strong> object describes an array-like view of an underlying <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer">binary data buffer</a>. There is no global property named <code>TypedArray</code>, nor is there a directly visible <code>TypedArray</code> constructor. Instead, there are a number of different global properties, whose values are typed array constructors for specific element types, listed below. On the following pages you will find common properties and methods that can be used with any typed array containing elements of any type.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">new<em> TypedArray</em>(length); +new <em>TypedArray</em>(typedArray); +new <em>TypedArray</em>(object); +new <em>TypedArray</em>(buffer [, byteOffset [, length]]); + +where <em>TypedArray()</em> is one of: + +Int8Array(); +Uint8Array(); +Uint8ClampedArray(); +Int16Array(); +Uint16Array(); +Int32Array(); +Uint32Array(); +Float32Array(); +Float64Array(); +</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt>length</dt> + <dd>When called with a <code>length</code> argument, a typed array containing <code>length</code> zeroes is created.</dd> + <dt>typedArray</dt> + <dd>When called with a <code>typedArray</code> argument, which can be an object of any of the typed array types (such as <code>Int32Array</code>), the <code>typedArray</code> gets copied into a new typed array. Each value in <code>typedArray</code> is converted to the corresponding type of the constructor before being copied into the new array.</dd> + <dt>object</dt> + <dd>When called with an <code>object</code> argument, a new typed array is created as if by the <code><em>TypedArray</em>.from()</code> method.</dd> + <dt>buffer, byteOffset, length</dt> + <dd>When called with a <code>buffer</code>, and optionally a <code>byteOffset</code> and a <code>length</code> argument, a new typed array view is created that views the specified {{jsxref("ArrayBuffer")}}. The <code>byteOffset</code> and <code>length</code> parameters specify the memory range that will be exposed by the typed array view. If both are omitted, all of <code>buffer</code> is viewed; if only <code>length</code> is omitted, the remainder of <code>buffer</code> is viewed.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>ECMAScript 6 defines a <em>TypedArray</em> constructor that serves as the <code>[[Prototype]]</code> of all <em>TypedArray</em> constructors. This constructor is not directly exposed: there is no global <code>%TypedArray%</code> or <code>TypedArray</code> property. It is only directly accessible through <code>Object.getPrototypeOf(Int8Array.prototype)</code> and similar. All <em>TypedArray</em>s constructors inherit common properties from the <code>%TypedArray%</code> constructor function. Additionally, all typed array prototypes (<em>TypedArray</em><code>.prototype</code>) have <code>%TypedArray%.prototype</code> as their <code>[[Prototype]]</code>.</p> + +<p>The <code>%TypedArray%</code> constructor on its own is not particularly useful. Calling it or using it in a <code>new</code> expression will throw a <code>TypeError</code>, except when used during object creation in JS engines that support subclassing. There are at present no such engines, so <code>%TypedArray%</code> is only useful to polyfill functions or properties onto all <em>TypedArray</em> constructors.</p> + +<h3 id="Property_access">Property access</h3> + +<p>You can reference elements in the array using standard array index syntax (that is, using bracket notation). However, getting or setting indexed properties on typed arrays will not search in the prototype chain for this property, even when the indices are out of bound. Indexed properties will consult the {{jsxref("ArrayBuffer")}} and will never look at object properties. You can still use named properties, just like with all objects.</p> + +<pre class="brush: js">// Setting and getting using standard array syntax +var int16 = new Int16Array(2); +int16[0] = 42; +console.log(int16[0]); // 42 + +// Indexed properties on prototypes are not consulted (Fx 25) +Int8Array.prototype[20] = "foo"; +(new Int8Array(32))[20]; // 0 +// even when out of bound +Int8Array.prototype[20] = "foo"; +(new Int8Array(8))[20]; // undefined +// or with negative integers +Int8Array.prototype[-1] = "foo"; +(new Int8Array(8))[-1]; // undefined + +// Named properties are allowed, though (Fx 30) +Int8Array.prototype.foo = "bar"; +(new Int8Array(32)).foo; // "bar"</pre> + +<h2 id="TypedArray_objects">TypedArray objects</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Type</td> + <td class="header">Size in bytes</td> + <td class="header">Description</td> + <td class="header">Web IDL type</td> + <td class="header">Equivalent C type</td> + </tr> + <tr> + <td>{{jsxref("Int8Array")}}</td> + <td>1</td> + <td>8-bit two's complement signed integer</td> + <td><code>byte</code></td> + <td><code>int8_t</code></td> + </tr> + <tr> + <td>{{jsxref("Uint8Array")}}</td> + <td>1</td> + <td>8-bit unsigned integer</td> + <td><code>octet</code></td> + <td><code>uint8_t</code></td> + </tr> + <tr> + <td>{{jsxref("Uint8ClampedArray")}}</td> + <td>1</td> + <td>8-bit unsigned integer (clamped)</td> + <td><code>octet</code></td> + <td><code>uint8_t</code></td> + </tr> + <tr> + <td>{{jsxref("Int16Array")}}</td> + <td>2</td> + <td>16-bit two's complement signed integer</td> + <td><code>short</code></td> + <td><code>int16_t</code></td> + </tr> + <tr> + <td>{{jsxref("Uint16Array")}}</td> + <td>2</td> + <td>16-bit unsigned integer</td> + <td><code>unsigned short</code></td> + <td><code>uint16_t</code></td> + </tr> + <tr> + <td>{{jsxref("Int32Array")}}</td> + <td>4</td> + <td>32-bit two's complement signed integer</td> + <td><code>long</code></td> + <td><code>int32_t</code></td> + </tr> + <tr> + <td>{{jsxref("Uint32Array")}}</td> + <td>4</td> + <td>32-bit unsigned integer</td> + <td><code>unsigned long</code></td> + <td><code>uint32_t</code></td> + </tr> + <tr> + <td>{{jsxref("Float32Array")}}</td> + <td>4</td> + <td>32-bit IEEE floating point number</td> + <td><code>unrestricted float</code></td> + <td><code>float</code></td> + </tr> + <tr> + <td>{{jsxref("Float64Array")}}</td> + <td>8</td> + <td>64-bit IEEE floating point number</td> + <td><code>unrestricted double</code></td> + <td><code>double</code></td> + </tr> + </tbody> +</table> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT")}}</dt> + <dd>Returns a number value of the element size for the different typed array objects.</dd> + <dt><em>TypedArray</em>.length</dt> + <dd>Length property whose value is 3.</dd> + <dt>{{jsxref("TypedArray.name")}}</dt> + <dd>Returns the string value of the constructor name. E.g "Int8Array".</dd> + <dt>{{jsxref("TypedArray.@@species", "get TypedArray[@@species]")}}</dt> + <dd>The constructor function that is used to create derived objects.</dd> + <dt>{{jsxref("TypedArray.prototype")}}</dt> + <dd>Prototype for the <em>TypedArray</em> objects.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{jsxref("TypedArray.from()")}}</dt> + <dd>Creates a new typed array from an array-like or iterable object. See also {{jsxref("Array.from()")}}.</dd> + <dt>{{jsxref("TypedArray.of()")}}</dt> + <dd>Creates a new typed array with a variable number of arguments. See also {{jsxref("Array.of()")}}.</dd> +</dl> + +<h2 id="TypedArray_prototype">TypedArray prototype</h2> + +<p>All <em>TypedArray</em>s inherit from {{jsxref("TypedArray.prototype")}}.</p> + +<h3 id="Properties_2">Properties</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/TypedArray/prototype','Properties')}}</p> + +<h3 id="Methods_2">Methods</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/TypedArray/prototype','Methods')}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Typed Array')}}</td> + <td>{{Spec2('Typed Array')}}</td> + <td>Defined as <code>TypedArray</code> and <code>ArrayBufferView</code> interface with typed array view types. Superseded by ECMAScript 6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-typedarray-objects', 'TypedArray Objects')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition in an ECMA standard. Specified behaviour for indexed and named properties. Specified that <code>new</code> is required.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-typedarray-objects', 'TypedArray Objects')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(7.0)}}</td> + <td>{{CompatGeckoDesktop("2")}}</td> + <td>10</td> + <td>11.6</td> + <td>5.1</td> + </tr> + <tr> + <td>Indexed properties not consulting prototype</td> + <td>{{CompatVersionUnknown}} [1]</td> + <td>{{CompatGeckoDesktop("25")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Named properties</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("30")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>new</code> is required</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("44")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>4.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile("2") }}</td> + <td>10</td> + <td>11.6</td> + <td>4.2</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Indexed properties not consulting prototype</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}} [1]</td> + <td>{{ CompatGeckoMobile("25") }}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}} [1]</td> + </tr> + <tr> + <td>Named properties</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile("30") }}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>new</code> is required</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatGeckoMobile("44") }}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] <code>-1</code> and similar are not considered as indexed properties and therefore return the value of the prototype property.</p> + +<h2 id="Compatibility_notes">Compatibility notes</h2> + +<p>Starting with ECMAScript 2015 (ES6), <code>TypedArray</code> constructors require to be constructed with a {{jsxref("Operators/new", "new")}} operator. Calling a <code>TypedArray</code> constructor as a function without <code>new</code>, will throw a {{jsxref("TypeError")}} from now on.</p> + +<pre class="brush: js example-bad">var dv = Int8Array([1, 2, 3]); +// TypeError: calling a builtin Int8Array constructor +// without new is forbidden</pre> + +<pre class="brush: js example-good">var dv = new Int8Array([1, 2, 3]);</pre> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays" title="en/JavaScript typed arrays">JavaScript typed arrays</a></li> + <li>{{jsxref("ArrayBuffer")}}</li> + <li>{{jsxref("DataView")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/typedarray/join/index.html b/files/id/web/javascript/reference/global_objects/typedarray/join/index.html new file mode 100644 index 0000000000..84f328ae1b --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/typedarray/join/index.html @@ -0,0 +1,114 @@ +--- +title: TypedArray.prototype.join() +slug: Web/JavaScript/Reference/Global_Objects/TypedArray/join +tags: + - ECMAScript6 + - JavaScript + - Method + - Prototype + - TypedArray +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/join +--- +<div>{{JSRef}}</div> + +<p>Method <code><strong>join()</strong></code> menggabungkan semua elemen dari array menjadi sebuah string. Alogaritma method ini memiliki kesamaan dengan {{jsxref("Array.prototype.join()")}}<em>.</em> <em>TypedArray</em> di sini merupakan salah datu <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_objects">typed array types</a>.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><code><var>typedarray</var>.join(<code>[<var>separator</var> = ',']</code>);</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>separator</code></dt> + <dd>Opsional. Menentukan sebuah string untuk memisahkan setiap elemen. Separator perlu di konversi ke string jika dianggap penting. Jika dikosongkan, elemen array akan dipisahkan dengan tanda koma (",").</dd> +</dl> + +<h2 id="Contoh">Contoh</h2> + +<pre class="brush: js">var uint8 = new Uint8Array([1,2,3]); +uint8.join(); // '1,2,3' +uint8.join(' / '); // '1 / 2 / 3' +uint8.join(''); // '123' +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-%typedarray%.prototype.join', 'TypedArray.prototype.join')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.join', 'TypedArray.prototype.join')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Browser">Kompabilitas Browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("37")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("37")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("TypedArray")}}</li> + <li>{{jsxref("Array.prototype.join()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/index.html b/files/id/web/javascript/reference/index.html new file mode 100644 index 0000000000..261b76a5b5 --- /dev/null +++ b/files/id/web/javascript/reference/index.html @@ -0,0 +1,48 @@ +--- +title: Referensi JavaScript +slug: Web/JavaScript/Reference +tags: + - JavaScript +translation_of: Web/JavaScript/Reference +--- +<div>{{JsSidebar}}</div> + +<p>Laman ini merupakan bagian dari sesi JavaScript pada MDN yang berfungsi sebagai acuan mengenai bahasa pemrograman JavaScript. Pelajari lebih lanjut <a href="/id/docs/Web/JavaScript/Reference/About">perihal acuan ini</a>.</p> + +<h2 id="Objek_Global">Objek Global</h2> + +<p>Bagian ini mendokumentasikan semua <a href="/id/docs/Web/JavaScript/Reference/Global_Objects">object standar built-in JavaScript</a>, beserta method dan propertinya.</p> + +<div>{{page('/id/docs/Web/JavaScript/Reference/Global_Objects', 'Standard_objects_by_category')}}</div> + +<h2 id="Pernyataan">Pernyataan</h2> + +<p>Bagian ini mendekumentasikan semua <a href="/id/docs/Web/JavaScript/Reference/Statements">pernyataan dan deklarasi JavaScript</a>.</p> + +<div>{{page('/id/docs/Web/JavaScript/Reference/Statements', 'Statements_and_declarations_by_category')}}</div> + +<h2 id="Ungkapan_dan_operator">Ungkapan dan operator</h2> + +<p>Bagian ini mendokumentasikan semua <a href="/id/docs/Web/JavaScript/Reference/Operators">ungkapan dan operator JavaScript </a>.</p> + +<div>{{page('/id/docs/Web/JavaScript/Reference/Operators', 'Expressions_and_operators_by_category')}}</div> + +<h2 id="Fungsi">Fungsi</h2> + +<p>Bagian ini mendokumentasikan tentang <a href="/id/docs/Web/JavaScript/Reference/Functions">Fungsi JavaScrip</a> dan penggunaanya untuk pengembangan aplikasi anda.</p> + +<ul> + <li><a href="/id/docs/Web/JavaScript/Reference/Functions/arguments"><code>arguments</code></a></li> + <li><a href="/id/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Fungsi panah</a></li> + <li><a href="/id/docs/Web/JavaScript/Reference/Functions/Default_parameters">Parameter default</a></li> + <li><a href="/id/docs/Web/JavaScript/Reference/Functions/rest_parameters">Parameter tambahan</a></li> +</ul> + +<h2 id="Acuan_tambahan">Acuan tambahan</h2> + +<ul> + <li><a href="/id/docs/Web/JavaScript/Reference/Lexical_grammar">Leksikal gramatika</a></li> + <li><a href="/id/docs/Web/JavaScript/Data_structures">Struktur dan tipe data</a></li> + <li><a href="/id/docs/Web/JavaScript/Reference/Strict_mode">Modus strict</a></li> + <li><a href="/id/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features">Fitur usang</a></li> +</ul> diff --git a/files/id/web/javascript/reference/lexical_grammar/index.html b/files/id/web/javascript/reference/lexical_grammar/index.html new file mode 100644 index 0000000000..83e5696ccd --- /dev/null +++ b/files/id/web/javascript/reference/lexical_grammar/index.html @@ -0,0 +1,670 @@ +--- +title: Lexical grammar +slug: Web/JavaScript/Reference/Lexical_grammar +translation_of: Web/JavaScript/Reference/Lexical_grammar +--- +<div>{{JsSidebar("More")}}</div> + +<p>Halaman ini menjelaskan tata bahasa leksikal JavaScript. 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 untuk mengakhiri pernyataan.</p> + +<h2 id="Karakter-karakter_kontrol">Karakter-karakter kontrol</h2> + +<p>Karakter kontrol tidak memiliki representasi visual namun digunakan untuk mengendalikan interpretasi teks.</p> + +<table class="standard-table"> + <caption>Karakter-karakter kontrol format unicode</caption> + <tbody> + <tr> + <th>Kode</th> + <th>Nama</th> + <th>Singkatan</th> + <th>Deskripsi</th> + </tr> + <tr> + <td><code>U+200C</code></td> + <td>Zero width non-joiner</td> + <td><ZWNJ></td> + <td>Ditempatkan di antara karakter untuk mencegah terhubung ke ligatur dalam bahasa tertentu (<a href="http://en.wikipedia.org/wiki/Zero-width_non-joiner">Wikipedia</a>).</td> + </tr> + <tr> + <td><code>U+200D</code></td> + <td>Zero width joiner</td> + <td><ZWJ></td> + <td>Ditempatkan di antara karakter yang biasanya tidak terhubung agar karakter dapat dirender menggunakan bentuknya yang terhubung dalam bahasa tertentu. (<a href="http://en.wikipedia.org/wiki/Zero-width_joiner">Wikipedia</a>).</td> + </tr> + <tr> + <td><code>U+FEFF</code></td> + <td>Byte order mark</td> + <td><BOM></td> + <td>Digunakan pada awal skrip untuk menandainya sebagai Unicode dan urutan byte teks (<a href="http://en.wikipedia.org/wiki/Byte_order_mark">Wikipedia</a>).</td> + </tr> + </tbody> +</table> + +<h2 id="White_space">White space</h2> + +<p>Karakter whitespace meningkatkan keterbacaan teks sumber dan memisahkan token-token. Karakter ini biasanya tidak diperlukan untuk fungsionalitas kode. <a href="http://en.wikipedia.org/wiki/Minification_%28programming%29">Alat minifikasi </a>sering digunakan untuk membuang whitespace agar mengurangi jumlah data yang perlu ditransfer.</p> + +<table class="standard-table"> + <caption>Karakter-karakter whitespace</caption> + <tbody> + <tr> + <th>Kode</th> + <th>Nama</th> + <th>Singkatan</th> + <th>Deskripsi</th> + <th> + <p>Rangkaian pelolosan/Escape</p> + </th> + </tr> + <tr> + <td>U+0009</td> + <td>Tabulasi karakter</td> + <td><HT></td> + <td>Tabulasi horisontal</td> + <td>\t</td> + </tr> + <tr> + <td>U+000B</td> + <td>Tabulasi baris</td> + <td><VT></td> + <td>Tabulasi vertikal</td> + <td>\v</td> + </tr> + <tr> + <td>U+000C</td> + <td>Form feed</td> + <td><FF></td> + <td>Karakter kontrol pemecah halaman (<a href="http://en.wikipedia.org/wiki/Page_break#Form_feed">Wikipedia</a>).</td> + <td>\f</td> + </tr> + <tr> + <td>U+0020</td> + <td>Space</td> + <td><SP></td> + <td>Spasi normal</td> + <td> </td> + </tr> + <tr> + <td>U+00A0</td> + <td>No-break space</td> + <td><NBSP></td> + <td>Spasi normal, tetapi tidak ada petunjuk dimana baris terputus.</td> + <td> </td> + </tr> + <tr> + <td>Others</td> + <td>Other Unicode space characters</td> + <td><USP></td> + <td><a href="http://en.wikipedia.org/wiki/Space_%28punctuation%29#Spaces_in_Unicode">Spasi di Unicode on Wikipedia</a></td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Terminator_baris">Terminator baris</h2> + +<p>Selain karakter whitespace, karakter terminator baris digunakan untuk meningkatkan keterbacaan teks sumber. Namun, dalam beberapa kasus, terminator baris dapat mempengaruhi eksekusi kode JavaScript karena ada beberapa tempat di mana mereka dilarang. Terminator baris juga mempengaruhi proses <a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">penyisipan titik koma otomatis</a>. Terminator baris dicocokkan dengan kelas <strong>\s </strong>dalam <a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Guide/Regular_Expressions">regular expressions</a>.</p> + +<p>Hanya kode Unicode berikut yang diperlakukan sebagai terminator baris di ECMAScript, karakter pemecah baris lainnya diperlakukan sebagai whitespace (misalnya, Next Line, NEL, U+0085 dianggap sebagai whitespace).</p> + +<table class="standard-table"> + <caption>Karakter-karakter terminator baris</caption> + <tbody> + <tr> + <th>Kode</th> + <th>Nama</th> + <th>Singkatan</th> + <th>Deskripsi</th> + <th>Rangkaian pelolosan/escape </th> + </tr> + <tr> + <td>U+000A</td> + <td>Line Feed</td> + <td><LF></td> + <td>Karakter baris baru di sistem UNIX.</td> + <td>\n</td> + </tr> + <tr> + <td>U+000D</td> + <td>Carriage Return</td> + <td><CR></td> + <td>Karakter baris baru di Commodore dan sistem Mac awal.</td> + <td>\r</td> + </tr> + <tr> + <td>U+2028</td> + <td>Line Separator</td> + <td><LS></td> + <td><a href="http://en.wikipedia.org/wiki/Newline">Wikipedia</a></td> + <td> </td> + </tr> + <tr> + <td>U+2029</td> + <td>Paragraph Separator</td> + <td><PS></td> + <td><a href="http://en.wikipedia.org/wiki/Newline">Wikipedia</a></td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Komentar">Komentar</h2> + +<p>Komentar digunakan untuk menambahkan petunjuk, catatan, saran, atau peringatan ke kode JavaScript. Hal ini dapat mempermudah membaca dan memahami. Mereka juga dapat digunakan untuk menonaktifkan kode agar tidak dieksekusi; Ini juga dapat menjadi alat debugging yang berharga.</p> + +<p>JavaScript memiliki dua cara untuk memberi komentar pada kodenya.</p> + +<p>Cara pertama adalah komentar //; Ini membuat semua teks yang mengikutinya pada baris yang sama menjadi sebuah komentar. Sebagai contoh:</p> + +<pre class="brush: js">function komentar() { + // Ini adalah komentar JavaScript satu baris + console.log('Hello world!'); +} +komentar(); +</pre> + +<p>Cara kedua adalah komentar gaya <code>/* */ , yang jauh lebih fleksibel</code>.</p> + +<p>Misalnya, Anda bisa menggunakannya dalam satu baris:</p> + +<pre class="brush: js">function komentar() { + /* Ini adalah komentar JavaScript satu baris */ + console.log('Hello world!'); +} +komentar();</pre> + +<p>Anda juga bisa membuat komentar beberapa baris, seperti ini:</p> + +<pre class="brush: js">function komentar() { + /* Komentar ini merentang dalam beberapa baris. Perhatikan + bahwa kita tidak perlu mengakhir komentar sebelum selesai. */ + console.log('Hello world!'); +} +komentar();</pre> + +<p>Anda juga bisa menggunakannya di tengah baris, jika Anda mau, meskipun ini bisa membuat kode Anda lebih sulit dibaca sehingga harus digunakan dengan hati-hati:</p> + +<pre class="brush: js">function komentar(x) { + console.log('Hello ' + x /* menysipkan nilai dari x */ + ' !'); +} +comment('world');</pre> + +<p>Selain itu, Anda bisa menggunakannya untuk menonaktifkan kode agar tidak berjalan, dengan membungkus kode dalam komentar, seperti ini:</p> + +<pre class="brush: js">function comment() { + /* console.log('Hello world!'); */ +} +comment();</pre> + +<p>Dalam hal ini, pemaggilan <code>console.log()</code> tidak pernah dikeluarkan, karena itu ada di dalam komentar. Sejumlah baris kode dapat dinonaktifkan dengan cara ini.</p> + +<h2 id="Kata_kunci">Kata kunci</h2> + +<h3 id="Reserved_keywords_as_of_ECMAScript_2015">Reserved keywords as of ECMAScript 2015</h3> + +<ul class="threecolumns"> + <li>{{jsxref("Statements/break", "break")}}</li> + <li>{{jsxref("Statements/switch", "case")}}</li> + <li>{{jsxref("Statements/try...catch", "catch")}}</li> + <li>{{jsxref("Statements/class", "class")}}</li> + <li>{{jsxref("Statements/const", "const")}}</li> + <li>{{jsxref("Statements/continue", "continue")}}</li> + <li>{{jsxref("Statements/debugger", "debugger")}}</li> + <li>{{jsxref("Statements/default", "default")}}</li> + <li>{{jsxref("Operators/delete", "delete")}}</li> + <li>{{jsxref("Statements/do...while", "do")}}</li> + <li>{{jsxref("Statements/if...else", "else")}}</li> + <li>{{jsxref("Statements/export", "export")}}</li> + <li>{{jsxref("Statements/class", "extends")}}</li> + <li>{{jsxref("Statements/try...catch", "finally")}}</li> + <li>{{jsxref("Statements/for", "for")}}</li> + <li>{{jsxref("Statements/function", "function")}}</li> + <li>{{jsxref("Statements/if...else", "if")}}</li> + <li>{{jsxref("Statements/import", "import")}}</li> + <li>{{jsxref("Operators/in", "in")}}</li> + <li>{{jsxref("Operators/instanceof", "instanceof")}}</li> + <li>{{jsxref("Operators/new", "new")}}</li> + <li>{{jsxref("Statements/return", "return")}}</li> + <li>{{jsxref("Operators/super", "super")}}</li> + <li>{{jsxref("Statements/switch", "switch")}}</li> + <li>{{jsxref("Operators/this", "this")}}</li> + <li>{{jsxref("Statements/throw", "throw")}}</li> + <li>{{jsxref("Statements/try...catch", "try")}}</li> + <li>{{jsxref("Operators/typeof", "typeof")}}</li> + <li>{{jsxref("Statements/var", "var")}}</li> + <li>{{jsxref("Operators/void", "void")}}</li> + <li>{{jsxref("Statements/while", "while")}}</li> + <li>{{jsxref("Statements/with", "with")}}</li> + <li>{{jsxref("Operators/yield", "yield")}}</li> +</ul> + +<h3 id="Kata_kunci_akan_datang_yang_dicadangkan">Kata kunci akan datang yang dicadangkan</h3> + +<p>Berikut ini disediakan sebagai kata kunci akan datang menurut spesifikasi ECMAScript. Mereka tidak memiliki fungsi khusus saat ini, namun mungkin pada beberapa waktu mendatang, sehingga tidak dapat digunakan sebagai pengidentifikasi.</p> + +<p>Selalu dicadangkan:</p> + +<ul> + <li><code>enum</code></li> +</ul> + +<p>Berikut ini hanya dicadangkan saat ditemukan dalam kode mode strict "ketat":</p> + +<ul class="threecolumns"> + <li><code>implements</code></li> + <li><code>interface</code></li> + <li>{{jsxref("Statements/let", "let")}}</li> + <li><code>package</code></li> + <li><code>private</code></li> + <li><code>protected</code></li> + <li><code>public</code></li> + <li><code>static</code></li> +</ul> + +<p>Berikut ini hanya dicadangkan saat ditemukan dalam kode modul:</p> + +<ul> + <li><code>await</code></li> +</ul> + +<h4 id="Kata_kunci_standart_lama_yang_masih_dingunakan_hingga_sekarang">Kata kunci standart lama yang masih dingunakan hingga sekarang</h4> + +<p>Berikut adalah dicadankan sebagai kata kunci akan datang pada spesifikasi ECMAScript usang (ECMAScript 1 s/d 3).</p> + +<ul class="threecolumns"> + <li><code>abstract</code></li> + <li><code>boolean</code></li> + <li><code>byte</code></li> + <li><code>char</code></li> + <li><code>double</code></li> + <li><code>final</code></li> + <li><code>float</code></li> + <li><code>goto</code></li> + <li><code>int</code></li> + <li><code>long</code></li> + <li><code>native</code></li> + <li><code>short</code></li> + <li><code>synchronized</code></li> + <li><code>throws</code></li> + <li><code>transient</code></li> + <li><code>volatile</code></li> +</ul> + +<p>Selain itu literal-literal null, true, dan false tidak dapat digunakan sebagai pengidentifikasi didalam ECMAScript.</p> + +<h3 id="Penggunaan_kata_dicadangkan">Penggunaan kata dicadangkan</h3> + +<p>Kata yang dicadangkan sebenarnya hanya berlaku untuk pengidentifikasi (vs. <code>IdentifierNames</code> ). Seperti yang dijelaskan di <a href="https://translate.googleusercontent.com/translate_c?depth=1&hl=id&prev=search&rurl=translate.google.co.id&sl=en&sp=nmt4&u=http://es5.github.com/&usg=ALkJrhjBjEUJU4dp4L4cwHxJF9qX9WRmJg#A.1">es5.github.com/#A.1</a>, ini semua adalah <code>IdentifierNames</code> yang tidak mengecualikan <code>ReservedWords</code> .</p> + +<pre class="brush: js">a.import +a['import'] +a = { import: 'test' }. +</pre> + +<p>Di sisi lain, hal-hal berikut ini ilegal karena ini adalah pengidentifikasi, yaitu <code>IdentifierName</code> tanpa kata-kata yang dicadangkan. Pengidentifikasi digunakan untuk <code>FunctionDeclaration</code> dan <code>FunctionExpression</code>.</p> + +<pre class="brush: js">function import() {} // Illegal.</pre> + +<h2 id="Literal">Literal</h2> + +<h3 id="Literal_null">Literal null</h3> + +<p>Lihat juga <a href="/id/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a> untuk informasi lebih lanjut.</p> + +<pre class="brush: js">null</pre> + +<h3 id="Literal_Boolean">Literal Boolean</h3> + +<p>Lihat juga <a href="/id/docs/Web/JavaScript/Reference/Global_Objects/Boolean"><code>Boolean</code></a> untuk informasi lebih lanjut.</p> + +<pre class="brush: js">true +false</pre> + +<h3 id="Literal_numerik">Literal numerik</h3> + +<h4 id="Decimal">Decimal</h4> + +<pre class="brush: js">1234567890 +42 + +// Waspada saat mengunakan nol dimuka: +0888 // 888 diuraikan sebagai desimal +0777 // diuraikan sebagai oktal, 511 dalam desimal +</pre> + +<p>Perhatikan bahwa literal desimal dapat dimulai dengan angka nol ( <code>0</code> ) diikuti oleh digit desimal lainnya, namun jika semua digit setelah angka <code>0</code> teratas lebih kecil dari 8, angka tersebut diartikan sebagai angka oktal. Ini tidak akan melempar JavaScript, lihat {{bug(957513)}}. Lihat juga halaman tentang <a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference/Global_Objects/parseInt#Octal_interpretations_with_no_radix"><code>parseInt()</code></a>.</p> + +<h4 id="Biner">Biner</h4> + +<p>Sintaksis bilangan biner menggunakan nol dimuka diikuti huruf kecil atau huruf besar Latin "B" ( <code>0b</code> atau <code>0B</code> ). Karena sintaksis ini baru di ECMAScript 2015, lihat tabel kompatibilitas browser, di bawah ini. Jika digit setelah <code>0b</code> tidak 0 atau 1, <code><a href="/id/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></code> berikut dilempar: "Missing binary digits after 0b".</p> + +<pre class="brush: js">var FLT_SIGNBIT = 0b10000000000000000000000000000000; // 2147483648 +var FLT_EXPONENT = 0b01111111100000000000000000000000; // 2139095040 +var FLT_MANTISSA = 0B00000000011111111111111111111111; // 8388607</pre> + +<h4 id="Oktal">Oktal</h4> + +<p>Sintaksis bilangan oktal menggunakan nol dimuka diikuti huruf kecil atau huruf besar Latin "O" ( <code>0o</code> atau <code>0O)</code>. Karena sintaks ini baru di ECMAScript 2015, lihat tabel kompatibilitas browser, di bawah ini. Jika digit setelah <code>0o</code> berada di luar kisaran (01234567), <code><a href="https://translate.googleusercontent.com/translate_c?depth=1&hl=id&prev=search&rurl=translate.google.co.id&sl=en&sp=nmt4&u=https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError&usg=ALkJrhiX0-YeC0tkMqUM7J5gbQfM2LI8bA">SyntaxError</a></code> berikut dilempar: "Missing octal digits after 0o".</p> + +<pre class="brush: js">var n = 0O755; // 493 +var m = 0o644; // 420 + +// Juga dimungkinkan hanya menggunakan nol dimuka (lihat tentang desimal diatas) +0755 +0644 +</pre> + +<h4 id="Heksadesimal">Heksadesimal</h4> + +<p>Sintaksis bilangan heksadesimal menggunakan nol dimuka diikuti huruf kecil atau huruf besar Latin "X" ( <code>0x</code> atau <code>0X)</code>. Jika digit setelah 0x berada di luar rentang (0123456789ABCDEF), <code><a href="https://translate.googleusercontent.com/translate_c?depth=1&hl=id&prev=search&rurl=translate.google.co.id&sl=en&sp=nmt4&u=https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError&usg=ALkJrhiX0-YeC0tkMqUM7J5gbQfM2LI8bA">SyntaxError</a></code> berikut dilempar: "Identifier starts immediately after numeric literal".</p> + +<pre class="brush: js">0xFFFFFFFFFFFFFFFFF // 295147905179352830000 +0x123456789ABCDEF // 81985529216486900 +0XA // 10 +</pre> + +<h3 id="Literal_objek">Literal objek</h3> + +<p>Lihat juga <a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference/Global_Objects/Object" title="Konstruktor Objek menciptakan pembungkus objek."><code>Objek</code></a> and <a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference/Operators/Object_initializer">Penginisialisasi objek</a> untuk informasi lebih lanjut.</p> + +<pre class="brush: js">var o = { a: 'foo', b: 'bar', c: 42 }; + +// notasi singkat. baru di ES2015 +var a = 'foo', b = 'bar', c = 42; +var o = {a, b, c}; + +// bukannya +var o = { a: a, b: b, c: c }; +</pre> + +<h3 id="Literal_array">Literal array</h3> + +<p>Lihat juga <a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference/Global_Objects/Array" title="Objek JavaScript Array adalah objek global yang digunakan dalam konstruksi array; Yang tingkat tinggi, daftar-seperti objek."><code>Array</code></a> untuk informasi lebih lanjut.</p> + +<pre class="brush: js">[1954, 1974, 1990, 2014]</pre> + +<h3 id="Literal_string">Literal string</h3> + +<pre class="brush: js">'foo' +"bar"</pre> + +<h4 id="Rangkaian_pelolosanescape_heksadesimal">Rangkaian pelolosan/escape heksadesimal</h4> + +<pre class="brush: js">'\xA9' // "©" +</pre> + +<h4 id="Rangkaian_pelolosanescape_Unicode">Rangkaian pelolosan/escape Unicode</h4> + +<p>Rangkaian pelolosan Unicode memerlukan setidaknya empat karakter diawali <code>\u</code>.</p> + +<pre class="brush: js">'\u00A9' // "©"</pre> + +<h4 id="Penerapan_point_kode_Unicode">Penerapan point kode Unicode</h4> + +<p>Baru di ECMAScript 2015. Dengan pelolosan kode Unicode, tiap karakter dapat diloloskan menggunakan bilangan hexadesimal jadi dimungkinkan untuk menggunkan kode Unicode sampai <code>0x10FFFF</code>. Dengan pelolosan Unicode sederhana terkadang lebih dibutuhkan untuk menulis bagian pengganti secara terpisah untuk mencapai tujuan yang sama.</p> + +<p>Lihat juga <a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference/Global_Objects/String/fromCodePoint" title="Metode String.fromCodePoint () statis mengembalikan sebuah string yang dibuat dengan menggunakan urutan kode poin yang ditentukan."><code>String.fromCodePoint()</code></a> atau <a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference/Global_Objects/String/codePointAt" title="Metode codePointAt () mengembalikan bilangan bulat non-negatif yaitu nilai titik kode Unicode."><code>String.prototype.codePointAt()</code></a>.</p> + +<pre class="brush: js">'\u{2F804}' + +// ekuivalen dengan pelolosan Unicode sederhana +'\uD87E\uDC04'</pre> + +<h3 id="Literal_regular_expression">Literal regular expression</h3> + +<p>Lihat juga <a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference/Global_Objects/RegExp"><code>RegExp</code></a> untuk informasi lebih lanjut.</p> + +<pre class="brush: js">/ab+c/g + +// Suatu literal "kosong" regular expression +// diperlukan grup bukan penangkap +// untuk menghindarkan ambiguitas denga komentar satu baris +/(?:)/</pre> + +<h3 id="Literal_template">Literal template</h3> + +<p>Lihat juga <a href="/id/docs/Web/JavaScript/Reference/template_strings">template strings</a> untuk informasi lebih lanjut.</p> + +<pre class="brush: js">`string text` + +`string text baris 1 + string text baris 2` + +`string text ${expression} string text` + +tag `string text ${expression} string text`</pre> + +<h2 id="Penyisipan_titik_koma_otomatis">Penyisipan titik koma otomatis</h2> + +<p>Beberapa <a href="/id/docs/Web/JavaScript/Reference/Statements">pernyataan JavaScript</a> harus diakhiri dengan titik koma an oleh karena itu dipengaruhi oleh penyisipan otomatis semicolon (ASI):</p> + +<ul> + <li>Pernyataan kosong/empty</li> + <li><code>Pernyataan variabel let</code>, <code>const</code></li> + <li>Deklarasi modul <code>import</code>, <code>export</code></li> + <li>Pernyataan ekspresi</li> + <li><code>debugger</code></li> + <li><code>continue</code>, <code>break</code>, <code>throw</code></li> + <li><code>return</code></li> +</ul> + +<p>Spesifikasi ECMAScript menyebutkan<a href="https://tc39.github.io/ecma262/#sec-rules-of-automatic-semicolon-insertion"> tiga aturan penyisipan titik koma</a>.</p> + +<p>1. Titik koma disisipkan sebelumnya, bila <a href="#Line_terminators">terminator baris</a> or "}" diteramukan yang tidak diizinkan oleh tata bahasa.</p> + +<pre class="brush: js">{ 1 2 } 3 + +// di transformasikan ke ASI kedalam + +{ 1 2 ;} 3;</pre> + +<p>2. Titik koma disisipkan di bagian akhir, saat akhir aliran input token terdeteksi dan parser tidak dapat mengurai aliran input tunggal aliran sebagai program yang lengkap.</p> + +<p>Disini <code>++</code> tidak diperlakukan sebagai <a href="https://translate.googleusercontent.com/translate_c?depth=1&hl=id&prev=search&rurl=translate.google.co.id&sl=en&sp=nmt4&u=https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators&usg=ALkJrhiOfEeVCTWu4sPLc0ZtV2xIdzr_zA#Increment">operator postfix</a> yang menerapkan variabel <code>b</code>, karena terminator baris terjadi antara <code>b</code> dan <code>++</code>.</p> + +<pre class="brush: js">a = b +++c + +// di transformasikan ke ASI kedalam + +a = b; +++c; +</pre> + +<p>3. Titik koma disisipkan pada akhirnya, ketika sebuah pernyataan dengan produksi terbatas dalam tata bahasa diikuti oleh terminator baris. Pernyataan-pernyataan ini dengan aturan "tidak diperlukan terminator baris" adalah:</p> + +<ul> + <li>PostfixExpressions (<code>++</code> and <code>--</code>)</li> + <li><code>continue</code></li> + <li><code>break</code></li> + <li><code>return</code></li> + <li><code>yield</code>, <code>yield*</code></li> + <li><code>module</code></li> +</ul> + +<pre class="brush: js">return +a + b + +// di transformasikan ke ASI kedalam + +return; +a + b; +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2("ES1")}}</td> + <td>Definisi awal.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-7', 'Lexical Conventions')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-ecmascript-language-lexical-grammar', 'Lexical Grammar')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> + <p>Ditambahkan: Literal Bilangan Biner dan Octal, pelolosan kode Unicode, Templates</p> + </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-ecmascript-language-lexical-grammar', 'Lexical Grammar')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Literal numerik biner dan oktal (<code>0b</code> dan <code>0o</code>)</td> + <td>{{CompatChrome(41)}}</td> + <td>12</td> + <td>{{CompatGeckoDesktop(25)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOpera(28)}}</td> + <td>{{CompatSafari(9)}}</td> + </tr> + <tr> + <td>Pelolosan kode Unicode (<code>\u{}</code>)</td> + <td>{{CompatChrome(44)}}</td> + <td>12</td> + <td>{{CompatGeckoDesktop(40)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera(31)}}</td> + <td>{{CompatSafari(9)}}</td> + </tr> + <tr> + <td>Notasi singkat untuk literal objek</td> + <td>{{CompatChrome(43)}}</td> + <td>12</td> + <td>{{CompatGeckoDesktop(33)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(30)}}</td> + <td>{{CompatSafari(9)}}</td> + </tr> + <tr> + <td>Literal template</td> + <td>{{CompatChrome(41)}}</td> + <td>12</td> + <td>{{CompatGeckoDesktop(34)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera(28)}}</td> + <td>{{CompatSafari(9)}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Literal numerik biner dan oktal (<code>0b</code> dan <code>0o</code>)</td> + <td>{{CompatUnknown}}</td> + <td>41</td> + <td>{{CompatGeckomobile(33)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Pelolosan kode Unicode (<code>\u{}</code>)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckomobile(40)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Notasi singkat untuk literal objek</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(33)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Literal template</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(34)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Firefox-specific_notes">Firefox-specific notes</h2> + +<ul> + <li>Sebelum Firefox 5 (JavaScript 1.8.6), kata kunci dicadangkan akan datang dapat digunakan saat tidak menggunakan mode strict. Pelanggaran ECMAScript ini telah diperbaiki di Firefox 5.</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="http://whereswalden.com/2013/08/12/micro-feature-from-es6-now-in-firefox-aurora-and-nightly-binary-and-octal-numbers/">Jeff Walden: </a><a href="http://whereswalden.com/2013/08/12/micro-feature-from-es6-now-in-firefox-aurora-and-nightly-binary-and-octal-numbers/">Bilangan biner dan oktal</a></li> + <li><a href="http://mathiasbynens.be/notes/javascript-escapes">Mathias Bynens: Rangkaian karakter pelolosan JavaScript</a></li> + <li><a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></li> + <li><a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference/Global_Objects/Number" title="The Number JavaScript object is a wrapper object allowing you to work with numerical values. A Number object is created using the Number() constructor."><code>Number</code></a></li> + <li><a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference/Global_Objects/RegExp" title="The RegExp constructor creates a regular expression object for matching text with a pattern."><code>RegExp</code></a></li> + <li><a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference/Global_Objects/String" title="The String global object is a constructor for strings, or a sequence of characters."><code>String</code></a></li> +</ul> diff --git a/files/id/web/javascript/reference/operators/conditional_operator/index.html b/files/id/web/javascript/reference/operators/conditional_operator/index.html new file mode 100644 index 0000000000..1a64158acb --- /dev/null +++ b/files/id/web/javascript/reference/operators/conditional_operator/index.html @@ -0,0 +1,167 @@ +--- +title: Operasional Kondisi (ternary) +slug: Web/JavaScript/Reference/Operators/Conditional_Operator +translation_of: Web/JavaScript/Reference/Operators/Conditional_Operator +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>Operasianal kondisional (ternary)</strong> adalah satu-satunya operator yang hanya membutuhkan tiga operator. Operator ini sering digunakan sebagai jalan pintas untuk `if` statement.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>condition</em> ? <em>expr1</em> : <em>expr2</em> </pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>condition (atau conditions)</code></dt> + <dd>Sebuah ekspresi akan menguji apakah menghasilkan <code>true</code> atau <code>false</code>.</dd> +</dl> + +<dl> + <dt><code>expr1</code>, <code>expr2</code></dt> + <dd>Ekspresi yang akan dilakukan setelah kondisi terpenuhi.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>Jika <code>condition</code> menghasilkan <code>true</code>, maka operator ini akan menghasilkan/mengembalikan nilai dari <code>expr1</code>; dan jika sebaliknya, ini akan menghasilkan/mengembalikan nilai dari <code>expr2</code>. Sebagai contoh, untuk menampilkan pesan yang berbeda berdasarkan nilai dari variabel <code>isMember</code>, anda bisa menggunakan contoh kode berikut:</p> + +<pre class="brush: js">var isMember = true; +'The fee is ' + (isMember ? '$2.00' : '$10.00'); //$2.00 +</pre> + +<p>Anda juga dapat mendefinisikan sebuah variabel secara langsung:</p> + +<pre class="brush: js">var elvisLives = Math.PI > 4 ? 'Yep' : 'Nope';</pre> + +<p>Anda juga bisa menggunakan operator ternary secara jamak (catatan: conditional operator adalah associative yang lebih baik):</p> + +<pre class="syntaxbox">var firstCheck = false, secondCheck = false, access = firstCheck ? 'Access denied' : secondCheck ? 'Access denied' : 'Access granted'; +console.log(access); // logs "Access granted"</pre> + +<p>Anda juga dapat menggunakan pengondisian jamak seperti pengondisian jamak pada statement IF pada umumnya:</p> + +<pre class="syntaxbox">var condition1 = true, + condition2 = false, + access = condition1 ? (condition2 ? "true true": "true false") : (condition2 ? "false true" : "false false"); + +console.log(access); // logs "true false" +</pre> + +<p> </p> + +<p>Note: The parentheses are not required, and do not affect the functionality. They are there to help visualize how the outcome is processed.</p> + +<p>You can also use ternary evaluations in free space in order to do different operations:</p> + +<pre class="brush: js">var stop = false, age = 16; + +age > 18 ? location.assign('continue.html') : stop = true; +</pre> + +<p>You can also do more than one single operation per case, separating them with a comma, and enclosing them in parenthesis:</p> + +<pre class="brush: js">var stop = false, age = 23; + +age > 18 ? ( + alert('OK, you can go.'), + location.assign('continue.html') +) : ( + stop = true, + alert('Sorry, you are much too young!') +); +</pre> + +<p>You can also do more than one operation during the assignation of a value. In this case, <strong><em>the last comma-separated value of the parenthesis</em> will be the value to be assigned</strong>.</p> + +<pre class="brush: js">var age = 16; + +var url = age > 18 ? ( + alert('OK, you can go.'), + // alert returns "undefined", but it will be ignored because + // isn't the last comma-separated value of the parenthesis + 'continue.html' // the value to be assigned if age > 18 +) : ( + alert('You are much too young!'), + alert('Sorry :-('), + // etc. etc. + 'stop.html' // the value to be assigned if !(age > 18) +); + +location.assign(url); // "stop.html"</pre> + +<h3 id="Returning_Ternary_Statements">Returning Ternary Statements</h3> + +<p>The ternary operator lends itself well to function returns that would otherwise require an <code>if/else</code> statement.</p> + +<pre class="brush: js">var func1 = function( .. ) { + if (condition1) { return value1 } + else { return value2 } +} + +var func2 = function( .. ) { + return condition1 ? value1 : value2 +}</pre> + +<p>A good way to spot that the ternary will be a suitable replacement for an <code>if/else</code> statement is when the <code>return</code> keyword is used multiple times and is the only expression inside of the if block.</p> + +<p>By breaking the ternary onto multiple lines and making use of extra whitespace, the ternary operator can be used to very cleanly replace a lengthy series of <code>if/else</code> statements. This provides a syntactically light way of expressing the same logic:</p> + +<pre class="brush: js">var func1 = function( .. ) { + if (condition1) { return value1 } + else if (condition2) { return value2 } + else if (condition3) { return value3 } + else { return value4 } +} + +var func2 = function( .. ) { + return condition1 ? value1 + : condition2 ? value2 + : condition3 ? value3 + : value4 +}</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-conditional-operator', 'Conditional Operator')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-conditional-operator', 'Conditional Operator')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.12', 'The conditional operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.12', 'The conditional operator')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.operators.conditional")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if statement</a></li> +</ul> diff --git a/files/id/web/javascript/reference/operators/fungsi/index.html b/files/id/web/javascript/reference/operators/fungsi/index.html new file mode 100644 index 0000000000..5366891a5c --- /dev/null +++ b/files/id/web/javascript/reference/operators/fungsi/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 +--- +<div>{{jsSidebar("Operators")}}</div> + +<div>Kata kunci <code><strong>fungsi</strong></code> digunakan untuk mendefinisikan <code><strong>fungsi</strong></code> dalam sebuah ungkapan<em>.</em></div> + +<div> </div> + +<h2 id="Sintaksis">Sintaksis</h2> + +<pre class="syntaxbox">function [<em>nama</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) { + pernyataan +}</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>nama</code></dt> + <dd>Bisa dihilangkan apabila fungsi merupaka fungsi <em>anonim</em>. Nama fungsi bersifat lokal, relatif terhadap tubuh fungsi.</dd> + <dt><code>paramN</code></dt> + <dd>Nama argumen yang akan diumpankan kepada fungsi.</dd> + <dt><code>pernyataan</code></dt> + <dd>Pernyataan yang menyusun tubuh fungsi.</dd> +</dl> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Sintaksis ungkapan fungsi nyaris sama apabila dibandingkan dengan sintaksis pernyataan fungsi(lihat <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">pernyataan fungsi</a> untuk lebih jelasnya). Perbedaan utama antara ungkapan fungsi dengan pernyataan fungsi ialah; ungkapan fungsi memperbolehkan <em>nama fungsi </em>untuk tidak digunakan/dihilangkan apabila ungkapan fungsi tersebut merupakan fungsi <em>anonim</em>. Ungkapan fungsi dapat digunakan sebagai <em><strong>IIFE </strong>(immediately Invoked Function Expression)</em>, sebuah fungsi yang otomatis dijalankan apabila didefinisikan. Untuk informasi lebih lanjut, lihat juga bab tentang <a href="/en-US/docs/Web/JavaScript/Reference/Functions">fungsi</a>.</p> + +<h2 id="Contoh">Contoh</h2> + +<p>Dibawah ini merupakan contoh definisi sebuah fungsi tanpa nama yang kemudian ditugaskan kedalam variabel <code>x</code>:</p> + +<pre class="brush: js">var x = function(y) { + return y * y; +}; +</pre> + +<h3 id="Ungkapan_fungsi_bernama_(Named_function_expression)">Ungkapan fungsi bernama (Named function expression)</h3> + +<p>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 <code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/callee">arguments.callee</a></code>.</p> + +<pre class="brush: js">var math = { + 'factorial': function factorial(n) { + if (n <= 1) + return 1; + return n * factorial(n - 1); + } +}; +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Komentar</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-13', 'Function definition')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-13', 'Function definition')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Definisi awal. Diterapkan pada JavaScript 1.5.</td> + </tr> + </tbody> +</table> + +<h2 id="Kesesuaian_Perambah_(Browser)">Kesesuaian Perambah (Browser)</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Dukungan Mendasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Dukungan Mendasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("Functions_and_function_scope", "Functions and function scope")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Statements/function", "function statement")}}</li> + <li>{{jsxref("Statements/function*", "function* statement")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/operators/index.html b/files/id/web/javascript/reference/operators/index.html new file mode 100644 index 0000000000..ef3afeb763 --- /dev/null +++ b/files/id/web/javascript/reference/operators/index.html @@ -0,0 +1,269 @@ +--- +title: Expressions and operators +slug: Web/JavaScript/Reference/Operators +tags: + - JavaScript + - NeedsTranslation + - Operators + - TopicStub +translation_of: Web/JavaScript/Reference/Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>This chapter documents all the JavaScript language operators, expressions and keywords.</p> + +<h2 id="Ekspresi_and_operator_sesuai_kategori">Ekspresi and operator sesuai kategori</h2> + +<p>Untuk daftar isi sesuai Alfabet, silahkan lihat sisi sebelah kiri artikel ini.</p> + +<h3 id="Primary_expressions">Primary expressions</h3> + +<p>Basic keywords and general expressions in JavaScript.</p> + +<p>Keyword-keyword dasar dan ekspersi-ekspresi umum di javascript</p> + +<dl> + <dt>{{jsxref("Operators/this", "this")}}</dt> + <dd>The <code>this</code> keyword refers to the function's execution context.</dd> + <dt>{{jsxref("Operators/function", "function")}}</dt> + <dd>The <code>function</code> keyword defines a function expression.</dd> + <dt>{{jsxref("Global_Objects/Array", "[]")}}</dt> + <dd>Array literal syntax.</dd> + <dt>{{jsxref("Global_Objects/Object", "{}")}}</dt> + <dd>Object literal syntax.</dd> + <dt>{{jsxref("Global_Objects/RegExp", "/ab+c/i")}}</dt> + <dd>Regular expression literal syntax.</dd> + <dt>{{experimental_inline()}} {{jsxref("Operators/Array_comprehensions", "[for (x of y) x]")}}</dt> + <dd>Array comprehensions.</dd> + <dt>{{experimental_inline()}} {{jsxref("Operators/Generator_comprehensions", "(for (x of y) y)")}}</dt> + <dd>Generator comprehensions.</dd> + <dt>{{jsxref("Operators/Grouping", "( )")}}</dt> + <dd>Grouping operator.</dd> +</dl> + +<h3 id="Left-hand-side_expressions">Left-hand-side expressions</h3> + +<p>Left values are the destination of an assignment.</p> + +<dl> + <dt>{{jsxref("Operators/Property_accessors", "Property accessors", "", 1)}}</dt> + <dd>Member operators provide access to a property or method of an object<br> + (<code>object.property</code> and <code>object["property"]</code>).</dd> + <dt>{{jsxref("Operators/new", "new")}}</dt> + <dd>The <code>new</code> operator creates an instance of a constructor.</dd> + <dt>{{experimental_inline()}} {{jsxref("Operators/super", "super")}}</dt> + <dd>The <code>super</code> keyword calls the parent constructor.</dd> + <dt>{{experimental_inline()}} {{jsxref("Operators/Spread_operator", "...obj")}}</dt> + <dd>The spread operator allows an expression to be expanded in places where multiple arguments (for function calls) or multiple elements (for array literals) are expected.</dd> +</dl> + +<h3 id="Increment_and_decrement">Increment and decrement</h3> + +<p>Postfix/prefix increment and postfix/prefix decrement operators.</p> + +<dl> + <dt>{{jsxref("Operators/Arithmetic_Operators", "A++", "#Increment")}}</dt> + <dd>Postfix increment operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "A--", "#Decrement")}}</dt> + <dd>Postfix decrement operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "++A", "#Increment")}}</dt> + <dd>Prefix increment operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "--A", "#Decrement")}}</dt> + <dd>Prefix decrement operator.</dd> +</dl> + +<h3 id="Unary_operators">Unary operators</h3> + +<p>A unary operation is operation with only one operand.</p> + +<dl> + <dt>{{jsxref("Operators/delete", "delete")}}</dt> + <dd>The <code>delete</code> operator deletes a property from an object.</dd> + <dt>{{jsxref("Operators/void", "void")}}</dt> + <dd>The <code>void</code> operator discards an expression's return value.</dd> + <dt>{{jsxref("Operators/typeof", "typeof")}}</dt> + <dd>The <code>typeof</code> operator determines the type of a given object.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "+", "#Unary_plus")}}</dt> + <dd>The unary plus operator converts its operand to Number type.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "-", "#Unary_negation")}}</dt> + <dd>The unary negation operator converts its operand to Number type and then negates it.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", "~", "#Bitwise_NOT")}}</dt> + <dd>Bitwise NOT operator.</dd> + <dt>{{jsxref("Operators/Logical_Operators", "!", "#Logical_NOT")}}</dt> + <dd>Logical NOT operator.</dd> +</dl> + +<h3 id="Arithmetic_operators">Arithmetic operators</h3> + +<p>Arithmetic operators take numerical values (either literals or variables) as their operands and return a single numerical value.</p> + +<dl> + <dt>{{jsxref("Operators/Arithmetic_Operators", "+", "#Addition")}}</dt> + <dd>Addition operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "-", "#Subtraction")}}</dt> + <dd>Subtraction operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "/", "#Division")}}</dt> + <dd>Division operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "*", "#Multiplication")}}</dt> + <dd>Multiplication operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "%", "#Remainder")}}</dt> + <dd>Remainder operator.</dd> +</dl> + +<h3 id="Relational_operators">Relational operators</h3> + +<p>A comparison operator compares its operands and returns a <code>Boolean</code> value based on whether the comparison is true.</p> + +<dl> + <dt>{{jsxref("Operators/in", "in")}}</dt> + <dd>The <code>in</code> operator determines whether an object has a given property.</dd> + <dt>{{jsxref("Operators/instanceof", "instanceof")}}</dt> + <dd>The <code>instanceof</code> operator determines whether an object is an instance of another object.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "<", "#Less_than_operator")}}</dt> + <dd>Less than operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", ">", "#Greater_than_operator")}}</dt> + <dd>Greater than operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "<=", "#Less_than_or_equal_operator")}}</dt> + <dd>Less than or equal operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", ">=", "#Greater_than_or_equal_operator")}}</dt> + <dd>Greater than or equal operator.</dd> +</dl> + +<h3 id="Equality_operators">Equality operators</h3> + +<p>The result of evaluating an equality operator is always of type <code>Boolean</code> based on whether the comparison is true.</p> + +<dl> + <dt>{{jsxref("Operators/Comparison_Operators", "==", "#Equality")}}</dt> + <dd>Equality operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "!=", "#Inequality")}}</dt> + <dd>Inequality operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "===", "#Identity")}}</dt> + <dd>Identity operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "!==", "#Nonidentity")}}</dt> + <dd>Nonidentity operator.</dd> +</dl> + +<h3 id="Bitwise_shift_operators">Bitwise shift operators</h3> + +<p>Operations to shift all bits of the operand.</p> + +<dl> + <dt>{{jsxref("Operators/Bitwise_Operators", "<<", "#Left_shift")}}</dt> + <dd>Bitwise left shift operator.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", ">>", "#Right_shift")}}</dt> + <dd>Bitwise right shift operator.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", ">>>", "#Unsigned_right_shift")}}</dt> + <dd>Bitwise unsigned right shift operator.</dd> +</dl> + +<h3 id="Binary_bitwise_operators">Binary bitwise operators</h3> + +<p>Bitwise operators treat their operands as a set of 32 bits (zeros and ones) and return standard JavaScript numerical values.</p> + +<dl> + <dt>{{jsxref("Operators/Bitwise_Operators", "&", "#Bitwise_AND")}}</dt> + <dd>Bitwise AND.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", "|", "#Bitwise_OR")}}</dt> + <dd>Bitwise OR.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", "^", "#Bitwise_XOR")}}</dt> + <dd>Bitwise XOR.</dd> +</dl> + +<h3 id="Binary_logical_operators">Binary logical operators</h3> + +<p>Logical operators are typically used with boolean (logical) values, and when they are, they return a boolean value.</p> + +<dl> + <dt>{{jsxref("Operators/Logical_Operators", "&&", "#Logical_AND")}}</dt> + <dd>Logical AND.</dd> + <dt>{{jsxref("Operators/Logical_Operators", "||", "#Logical_OR")}}</dt> + <dd>Logical OR.</dd> +</dl> + +<h3 id="Conditional_(ternary)_operator">Conditional (ternary) operator</h3> + +<dl> + <dt>{{jsxref("Operators/Conditional_Operator", "(condition ? ifTrue : ifFalse)")}}</dt> + <dd> + <p>The conditional operator returns one of two values based on the logical value of the condition.</p> + </dd> +</dl> + +<h3 id="Assignment_operators">Assignment operators</h3> + +<p>An assignment operator assigns a value to its left operand based on the value of its right operand.</p> + +<dl> + <dt>{{jsxref("Operators/Assignment_Operators", "=", "#Assignment")}}</dt> + <dd>Assignment operator.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "*=", "#Multiplication_assignment")}}</dt> + <dd>Multiplication assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "/=", "#Division_assignment")}}</dt> + <dd>Division assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "%=", "#Remainder_assignment")}}</dt> + <dd>Remainder assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "+=", "#Addition_assignment")}}</dt> + <dd>Addition assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "-=", "#Subtraction_assignment")}}</dt> + <dd>Subtraction assignment</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "<<=", "#Left_shift_assignment")}}</dt> + <dd>Left shift assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", ">>=", "#Right_shift_assignment")}}</dt> + <dd>Right shift assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", ">>>=", "#Unsigned_right_shift_assignment")}}</dt> + <dd>Unsigned right shift assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "&=", "#Bitwise_AND_assignment")}}</dt> + <dd>Bitwise AND assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "^=", "#Bitwise_XOR_assignment")}}</dt> + <dd>Bitwise XOR assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "|=", "#Bitwise_OR_assignment")}}</dt> + <dd>Bitwise OR assignment.</dd> + <dt>{{experimental_inline()}} {{jsxref("Operators/Destructuring_assignment", "[a, b] = [1, 2]")}}<br> + {{experimental_inline()}} {{jsxref("Operators/Destructuring_assignment", "{a, b} = {a:1, b:2}")}}</dt> + <dd> + <p>Destructuring assignment allows you to assign the properties of an array or object to variables using syntax that looks similar to array or object literals.</p> + </dd> +</dl> + +<h3 id="Comma_operator">Comma operator</h3> + +<dl> + <dt>{{jsxref("Operators/Comma_Operator", ",")}}</dt> + <dd> + <p>The comma operator allows multiple expressions to be evaluated in a single statement and returns the result of the last expression.</p> + </dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>ECMAScript 1st Edition.</td> + <td>Standard</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11', 'Expressions')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New: Spread operator, destructuring assignment, <code>super</code> keyword, Array comprehensions, Generator comprehensions</td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">Operator precedence</a></li> +</ul> diff --git a/files/id/web/javascript/reference/operators/yield/index.html b/files/id/web/javascript/reference/operators/yield/index.html new file mode 100644 index 0000000000..366f2aaa38 --- /dev/null +++ b/files/id/web/javascript/reference/operators/yield/index.html @@ -0,0 +1,109 @@ +--- +title: yield +slug: Web/JavaScript/Reference/Operators/yield +translation_of: Web/JavaScript/Reference/Operators/yield +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Keyword <code>yield</code> digunakan untuk menghentikan sementara dan melanjutkan sebuah fungsi generator ({{jsxref("Statements/function*", "function*")}} atau <a href="/en-US/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function">legacy generator function</a>).</p> + +<h2 id="Sintak">Sintak</h2> + +<pre class="syntaxbox notranslate">[<em>rv</em>] = <strong>yield</strong> [<em>expression</em>];</pre> + +<dl> + <dt><code>expression</code></dt> + <dd>Mendefeniskan nilai yang akan dikembalikan melalui <a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterator_protocol">iterator protocol</a>. Apabila diabaikan, maka <code>undefined</code> akan dikembalikan.</dd> + <dt><code>rv</code></dt> + <dd> + <p>Mengembalikan nilai opsional yang diberikan pada generator method <code>next()</code> untuk melanjutkan eksekusinya.</p> + </dd> +</dl> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Keyword <code>yield </code>menghentikan secara sementara eksekusi dari fungsi generator dan nilai setelah keyword <code>yield</code> dikembalikan pada pemanggil generator tersebut. <code>yield</code> bisa juga disebut sebagai versi generator dari keyword<code>return</code>.</p> + +<p>Keyword <code>yield</code> sebenarnya mengembalikan sebuah obyek <code>IteratorResult</code> dengan dua properti, <code>value</code> dan <code>done</code>. Properti<code>value</code> adalah hasi dari evaluasi ekspresi <code>yield</code>, dan <code>done</code> yang <code>false</code>, mengindikasikan bahwa fungsi generator tersebut belum selesai sepenuhnya.</p> + +<p>Sekali berhenti pada ekspresi <code>yield</code> , eksekusi dari code generator tersebut akan terus dihentikan sampai generator method <code>next()</code> dipanggil. Setiap kali method generator <code>next()</code> dipanggil, generator melanjutkan eksekusi dan berjalan hingga mencapai salah satu dari kondisi berikut ini :</p> + +<ul> + <li>Sebuah<code>yield</code>, yang menyebabkan generator sekali lagi berhenti sementara dan mengembalikan nilai baru dari generator tersebut. Ketika kemudian<code>next()</code> dipanggil lagi, eksekusi berlanjut dengan statement segera setelah<code>yield</code>.</li> + <li>{{jsxref("Statements/throw", "throw")}} digunakan untuk melontarkan exception dari generator. Ini menghentikan generator sepenuhnya, dan eksekusi berlanjut pada pemanggil seperti normalnya ketika sebuah exception dilontarkan.</li> + <li>Akhir dari fungsi generator tersebut tercapai; pada kasus ini, eksekusi dari generator tersebut berakhir dan sebuah <code>IteratorResult</code> dikembalikan pada pemanggilnya dimana <code>value</code> adalah {{jsxref("undefined")}} dan <code>done</code> adalah <code>true</code>.</li> + <li>Mencapai sebuah statement {{jsxref("Statements/return", "return")}}. Pada kasus ini, eksekusi dari generator tersebut berakhir dan sebuah <code>IteratorResult</code> dikembalikan pada pemanggil dimana <code>value</code> ditentukan oleh statement <code>return</code> dan <code>done</code> adalah <code>true</code>.</li> +</ul> + +<p>JIka sebuah nilai opsional diberikan pada generator method <code>next()</code>, nilai tersebut menjadi nilai yang dikembalikan oleh operasi <code>yield</code> dari generator pada saat itu.</p> + +<p>Di antara kode generator, operator<code>yield</code> -nya, dan kemampuan untuk menentukan sebua nilai awal baru dengan memberikannya pada {{jsxref("Generator.prototype.next()")}}, generator menawarkan power dan kontrol yang luar biasa.</p> + +<h2 id="Contoh">Contoh</h2> + +<p>Kode berikut merupakan deklarasi dari sebuah contoh fungsi generator.</p> + +<pre class="brush: js notranslate">function* countAppleSales () { + var saleList = [3, 7, 5]; + for (var i = 0; i < saleList.length; i++) { + yield saleList[i]; + } +}</pre> + +<p>Setelah sebuah fungsi generator didefenisikan, maka fungsi tersebut dapat digunakan untuk menghasilkan sebuah iterator seperti berikut.</p> + +<pre class="brush: js notranslate">var appleStore = countAppleSales(); // Generator { } +console.log(appleStore.next()); // { value: 3, done: false } +console.log(appleStore.next()); // { value: 7, done: false } +console.log(appleStore.next()); // { value: 5, done: false } +console.log(appleStore.next()); // { value: undefined, done: true }</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Komentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES2015', '#', 'Yield')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#', 'Yield')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Kompatabilitas_Browser">Kompatabilitas Browser</h2> + +<div class="hidden">Tabel kompatabilitas ini dihasilkan dari struktur data. Jika anda ingin berkontribusi pada data, silahkan lihat <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> dan kirimkan kami sebuah pull request.</div> + +<p>{{Compat("javascript.operators.yield")}}</p> + +<h2 id="Catatan_Firefox-specific">Catatan Firefox-specific</h2> + +<ul> + <li>Semenjak Gecko 29 {{geckoRelease(29)}}, the completed generator function no longer throws a {{jsxref("TypeError")}} "generator has already finished". Instead, it returns an <code>IteratorResult</code> object like <code>{ value: undefined, done: true }</code> ({{bug(958951)}}).</li> + <li>Starting with Gecko 33 {{geckoRelease(33)}}, the parsing of the <code>yield</code> expression has been updated to conform with the ES2015 specification ({{bug(981599)}}): + <ul> + <li>The expression after the <code>yield</code> keyword is optional and omitting it no longer throws a {{jsxref("SyntaxError")}}: <code>function* countAppleSales() { yield; }</code></li> + </ul> + </li> +</ul> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">The Iterator protocol</a></li> + <li>{{jsxref("Statements/function*", "function*")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("Operators/yield*", "yield*")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/statements/class/index.html b/files/id/web/javascript/reference/statements/class/index.html new file mode 100644 index 0000000000..6ca35e9c71 --- /dev/null +++ b/files/id/web/javascript/reference/statements/class/index.html @@ -0,0 +1,171 @@ +--- +title: class +slug: Web/JavaScript/Reference/Statements/class +tags: + - Classes + - Declaration + - ECMAScript6 + - Referensi +translation_of: Web/JavaScript/Reference/Statements/class +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Deklarasi <strong>class</strong> digunakan untuk membuat class baru dengan nama menggunakan turunan berbasis prototype.</p> + +<div class="noinclude"> +<p>Anda juga bisa mendefinisikan kelas menggunakan{{jsxref("Operators/class", "class expression", "", 1)}}.</p> +</div> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="brush: js">class <em>name</em> [extends] { + // class body +} +</pre> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Seperti halnya dengan ekspresi class, pembentuk (body) class dari deklarasi class di jalankan pada <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>.</p> + +<p>Deklarasi class bukanlah {{Glossary("Hoisting", "hoisted")}} (Tidak seperti <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function declarations</a>).</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Dasar_deklarasi_class">Dasar deklarasi class</h3> + +<p>Pada contoh, hal pertama yang kita lakukan adalah mendefinisikan class dengan nama Polygon, kemudian membentangkannya ( extend ) untuk membuat class bernama Square. Perlu diperhatikan bahwa super(), digunakan pada constructor, hanya dapat digunakan di konstruktor dan harus dipanggil setelah keyword 'this' dapat digunakan.</p> + +<pre class="brush: js">class Polygon { + constructor(height, width) { + this.name = 'Polygon'; + this.height = height; + this.width = width; + } +} + +class Square extends Polygon { + constructor(length) { + super(length, length); + this.name = 'Square'; + } +}</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Browser">Kompabilitas Browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatChrome(42.0)}}</td> + <td>{{CompatGeckoDesktop(45)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Array subclassing</td> + <td>{{CompatChrome(43.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Allowed in sloppy mode</td> + <td>{{CompatChrome(49.0)}}</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(42.0)}}</td> + <td>{{CompatGeckoMobile(45)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(42.0)}}</td> + </tr> + <tr> + <td>Array subclassing</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(43.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(43.0)}}</td> + </tr> + <tr> + <td>Allowed in sloppy mode</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(49.0)}}</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td>{{CompatChrome(49.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/function"><code>function</code> declaration</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li> +</ul> diff --git a/files/id/web/javascript/reference/statements/do...while/index.html b/files/id/web/javascript/reference/statements/do...while/index.html new file mode 100644 index 0000000000..01c518ad84 --- /dev/null +++ b/files/id/web/javascript/reference/statements/do...while/index.html @@ -0,0 +1,101 @@ +--- +title: do...while +slug: Web/JavaScript/Reference/Statements/do...while +tags: + - JavaScript + - Referensi +translation_of: Web/JavaScript/Reference/Statements/do...while +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Pernyataan <strong><code>do...while</code></strong> digunakan untuk membuat perulangan yang mengeksekusi penyataan tertentu hingga kondisi pemeriksaan penyataan tersebut bernilai <code>false</code>. Kondisi akan diperiksa setelah pernyataan dieksekusi/dijalankan dengan hasil penyataan tersebut yang dijalankan sekurangnya sekali.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-dowhile.html")}}</div> + +<p class="hidden">Kode sumber untuk contoh interaktif ini disimpan di repositori GitHub. Bila Anda ingin berkontribusi ke proyek contoh interaktif, silakan mengkloning <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> dan mengirim permintaan <code>pull</code> kepada kami.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox">do + penyataan +while (kondisi); +</pre> + +<dl> + <dt><code>penyataan</code></dt> + <dd>Sebuah penyataan yang dieksekusi setidaknya sekali dan akan kembali dieksekusi setiap kali kondisi pemeriksaan bernial <code>true</code>. Untuk mengeksekusi lebih dari satu penyataan di dalam perulangan, gunakan pernyataan {{jsxref("Statements/block", "block")}} (<code>{ ... }</code>) untuk mengelompokkan penyataan.</dd> +</dl> + +<dl> + <dt><code>kondisi</code></dt> + <dd>Sebuah ekspresi yang periksa setelah perulangan. Bila kondisi periksa bernilai <code>true</code>, maka <code>pernyataan</code> akan kembali dieksekusi. Bila kondisi periksa bernilai <code>false</code>, maka kendali akan melewati <code>do...while</code> dan meneruskan ke pernyataan selanjutnya.</dd> +</dl> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Penggunaan_do...while">Penggunaan <code>do...while</code></h3> + +<p>Pada contoh berikut, perulangan <code>do...while</code> diiterasikan setidaknya sekali dan kembali di iterasikan sampai nilai <code>i</code> tidak kurang dari 5.</p> + +<h3 id="Kode_HTML">Kode HTML</h3> + +<pre class="brush: html"><div id="example"></div></pre> + +<h3 id="Kode_JavaScript">Kode JavaScript</h3> + +<pre class="brush: js">var result = ''; +var i = 0; +do { + i += 1; + result += i + ' '; +} while (i < 5); +document.getElementById('example').innerHTML = result;</pre> + +<h3 id="Hasil">Hasil</h3> + +<p>{{ EmbedLiveSample('Examples') }}</p> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.2</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.6.1', 'do-while statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-do-while-statement', 'do-while statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Trailing ; is now optional.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-do-while-statement', 'do-while statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatibilitas_Peramban">Kompatibilitas Peramban</h2> + +<div class="hidden">Tabel kompatibilitas ini dibuat dari data terstruktur. Bila Anda ingin berkontribusi data, silakan periksa <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> dan mengirim permintaan <code>pull</code> kepada kami.</div> + +<p>{{Compat("javascript.statements.do_while")}}</p> + +<h2 id="Lihat_pula">Lihat pula</h2> + +<ul> + <li>{{jsxref("Statements/while", "while")}}</li> + <li>{{jsxref("Statements/for", "for")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/statements/empty/index.html b/files/id/web/javascript/reference/statements/empty/index.html new file mode 100644 index 0000000000..26b2bf8d20 --- /dev/null +++ b/files/id/web/javascript/reference/statements/empty/index.html @@ -0,0 +1,147 @@ +--- +title: empty +slug: Web/JavaScript/Reference/Statements/Empty +tags: + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/Empty +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><strong>Pernyataan empty</strong> digunakan untuk menyediakan statement kosong, walaupun begitu sintaks JavaScript tetap menghitungnya sebagai sebuah Pernyataan.</p> + +<h2 id="Sintak">Sintak</h2> + +<pre class="syntaxbox">; +</pre> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Statemen atau penyataan kosong hanya berupa semicolon (;) menunjukkan bahawa tidak ada statement untuk dijalankan, meskipun jika sintak JavaScript membutuhkan salah satunya. Sifat kebalikan, dimana anda ingin menggunakan lebih dari satu statemen, namun javascript hanya memperbolehkan sebuah statemen kosong, anda bisa menggunakan <a href="/en-US/docs/Web/JavaScript/Reference/Statements/block">block statement</a>; yang merupakan gabungan dari beberapa statement menjadi satu.</p> + +<h2 id="Contoh">Contoh</h2> + +<p>Statement kosong terkadang digunakan pada perulangan. Lihat pada contoh dengan body berisi sebuah statement kosong:</p> + +<pre class="brush: js">var arr = [1, 2, 3]; + +// Assign all array values to 0 +for (i = 0; i < arr.length; arr[i++] = 0) /* empty statement */ ; + +console.log(arr) +// [0, 0, 0] +</pre> + +<p><strong>Catatan:</strong> Ini merupakan ide yang bagus dengan menggunakan komentar pada penggunaan statement kosong, karena ini tidak benar - benar jelas seperti halnya penggunaan semicolon (;) pada umumnya. Contoh berikut bisa dikatakan merupakan penggunaan yang tidak disengaja:</p> + +<pre class="brush: js">if (condition); // Perhatian, "if" tidak menjalankan apapun! + killTheUniverse() // Jadi ini akan selalu di jalankan!!! +</pre> + +<p>Contoh lain: Statemen <a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else"><code>if...else</code></a> tanpa tanda kurung keriting (<code>{}</code>). Jika <code>three</code> bernilai <code>true</code>, tidak akan terjadi apapun, <code>four</code> tidak begitu penting, dan juga fungsi <code>launchRocket()</code> pada kasus <code>else</code> tidak akan dijalankan.</p> + +<pre class="brush: js">if (one) + doOne(); +else if (two) + doTwo(); +else if (three) + ; // nothing here +else if (four) + doFour(); +else + launchRocket();</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-empty-statement', 'Empty statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-empty-statement', 'Empty statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.3', 'Empty statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12.3', 'Empty statement')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12.3', 'Empty statement')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Browser">Kompabilitas Browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("Statements/block", "Block statement")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/statements/export/index.html b/files/id/web/javascript/reference/statements/export/index.html new file mode 100644 index 0000000000..1f6d26b71d --- /dev/null +++ b/files/id/web/javascript/reference/statements/export/index.html @@ -0,0 +1,171 @@ +--- +title: export +slug: Web/JavaScript/Reference/Statements/export +translation_of: Web/JavaScript/Reference/Statements/export +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><strong>export statement</strong> digunakan untuk meng-ekspor fungsi, objects atau primitives dari file yang di berikan (atau <em>module</em>).</p> + +<div class="note"> +<p><strong>Catatan:</strong> Fitur ini tidak di implementasikan di browser secara bawaan untuk saat ini. ini hanya diimplementasikan di beberapa transpilers, seperti <a href="https://github.com/google/traceur-compiler">Traceur Compiler</a>, <a href="http://babeljs.io/">Babel</a> atau <a href="https://github.com/rollup/rollup">Rollup</a>.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">export { <var>name1</var>, <var>name2</var>, …, <var>nameN</var> }; +export { <var>variable1</var> as <var>name1</var>, <var>variable2</var> as <var>name2</var>, …, <var>nameN</var> }; +export let <var>name1</var>, <var>name2</var>, …, <var>nameN</var>; // also var +export let <var>name1</var> = …, <var>name2</var> = …, …, <var>nameN</var>; // also var, const + +export default <em>expression</em>; +export default function (…) { … } // also class, function* +export default function name1(…) { … } // also class, function* +export { <var>name1</var> as default, … }; + +export * from …; +export { <var>name1</var>, <var>name2</var>, …, <var>nameN</var> } from …; +export { <var>import1</var> as <var>name1</var>, <var>import2</var> as <var>name2</var>, …, <var>nameN</var> } from …;</pre> + +<dl> + <dt><code>nameN</code></dt> +</dl> + +<p>Identitas yang akan diekspor ( sehingga dapat di impor via <a href="/en-US/docs/Web/JavaScript/Reference/Statements/import">import</a> di lain skrip).</p> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Ada dua jenis tipe yang berbeda-beda dari export, masing-masing sesuai dengan salah satu sintaks di atas:</p> + +<ul> + <li>Named exports: + <pre class="brush: js">export { myFunction }; // exports a function declared earlier +export const foo = Math.sqrt(2); // exports a constant</pre> + </li> + <li>Default exports (hanya satu per script): + <pre class="brush: js">export default function() {} // or '<em>export default class {}</em>' +// there is no semi-colon here</pre> + </li> +</ul> + +<p>Named exports berguna untuk mengekspor beberapa nilai. Selama import, satu akan menggunakan nama yang sama untuk mengacu pada nilai yang sesuai.</p> + +<p>Mengenai default export, hanya ada satu default export per modul. default export bisa menjadi fungsi, class, objek atau yang lainya. Nilai ini dianggap sebagai "Pokok" pengeluaran nilai karena akan menjadi sederhana untuk di import.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Menggunakan_named_exports">Menggunakan named exports</h3> + +<p>dalam modul, kita bisa menggunakan kode berikut:</p> + +<pre class="brush: js">// module "my-module.js" +export function cube(x) { + return x * x * x; +} +const foo = Math.PI + Math.SQRT2; +export { foo }; +</pre> + +<p>Cara ini, di dalam script lain (cf. <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/import">import</a></code>), kita bisa memiliki:</p> + +<pre class="brush: js">import { cube, foo } from 'my-module'; +console.log(cube(3)); // 27 +console.log(foo); // 4.555806215962888</pre> + +<h3 id="Menggunakan_default_export">Menggunakan default export</h3> + +<p>Jika kita ingin mengekspor nilai tunggal atau memiliki nilai fallback untuk modul kita, kita bisa menggunakan default export:</p> + +<pre class="brush: js">// module "my-module.js" +export default function cube(x) { + return x * x * x; +} +</pre> + +<p>Kemudian, di lain skrip, akan lebih mudah untuk mengimpor export default :</p> + +<pre class="brush: js">import cube from 'my-module'; +console.log(cube(3)); // 27 +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-exports', 'Exports')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatibilitas_browser">Kompatibilitas browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("Statements/import", "import")}}</li> + <li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, Hacks blog post by Jason Orendorff</li> + <li><a href="http://exploringjs.com/es6/ch_modules.html">Axel Rauschmayer's book: "Exploring JS: Modules"</a></li> +</ul> diff --git a/files/id/web/javascript/reference/statements/for...in/index.html b/files/id/web/javascript/reference/statements/for...in/index.html new file mode 100644 index 0000000000..0162c204ee --- /dev/null +++ b/files/id/web/javascript/reference/statements/for...in/index.html @@ -0,0 +1,201 @@ +--- +title: for...in +slug: Web/JavaScript/Reference/Statements/for...in +tags: + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/for...in +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><strong>Pernyataan</strong> <strong><code>for...in</code></strong> mengulang setiap <a href="/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">properti enumerable </a>dari sebuah objek, dalam urutan sembarang. Untuk setiap properti yang berbeda, pernyataan dapat dieksekusi.</p> + +<h2 id="Sintak">Sintak</h2> + +<pre class="syntaxbox">for (<var>variable</var> in <var>object</var>) {<em>...</em> +}</pre> + +<dl> + <dt><code>variable</code></dt> + <dd>Sebuah nama properti yang berbeda ditugaskan untuk variabel pada setiap iterasi.</dd> + <dt><code>object</code></dt> + <dd>Objek yang propertinya enumerable yang diiterasi.</dd> +</dl> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Perulangan <code>for...in</code> hanya mengiterasi pada properti enumerable. Objek yang dibuat dari built-in konstruktor seperti Array dan Object telah mewarisi properti non-enumerable dari <code>Object.prototype</code> dan <code>String.prototype</code>, seperti {{jsxref("String")}}'s {{jsxref("String.indexOf", "indexOf()")}} metode atau {{jsxref("Object")}}'s {{jsxref("Object.toString", "toString()")}} metode. Perulangan akan iterate atas semua properti enumerable dari objek itu sendiri dan mereka objek mewarisi dari prototipe konstruktor ini (properti lebih dekat ke objek di properti mata rantai prototipe menggantikan prototipe' properti).</p> + +<h3 id="Penghapusan_penambahan_atau_perubahan_pada_properti">Penghapusan, penambahan atau perubahan pada properti</h3> + +<p>Perulangan <code>for...in </code>mengiterasi properti suatu objek dalam urutan sembarang<code> </code>(lihat {{jsxref("Operators/delete", "delete")}} Operator untuk lebih lanjut tentang mengapa salah satu tidak dapat bergantung pada keteraturan tampak dari iterasi, setidaknya dalam pengaturan lintas-browser). Jika properti yang diubah dalam satu iterasi dan kemudian mengunjungi di lain waktu, nilainya dalam lingkaran adalah nilai pada waktu kemudian. Sebuah properti yang dihapus sebelum telah dikunjungi tidak akan dikunjungi nanti. Sifat ditambahkan ke objek dimana iterasi terjadi baik dapat dikunjungi atau dihilangkan dari iterasi. Secara umum yang terbaik adalah tidak untuk menambah, mengubah atau menghapus properti dari objek selama iterasi, selain properti saat ini sedang mengunjungi. Tidak ada jaminan apakah properti menambahkan akan dikunjungi, apakah properti dimodifikasi (selain yang saat ini) akan dikunjungi sebelum atau setelah dimodifikasi, atau apakah properti dihapus akan dikunjungi sebelum dihapus.</p> + +<h3 id="Iterasi_Array_dan_for...in">Iterasi Array dan <code>for...in</code></h3> + +<div class="note"> +<p><strong>Catatan:</strong> <code>for...in</code> tidak perlu digunakan untuk mengiterasi sebuah {{jsxref("Array")}} dimana urutan indeksnya sangat penting.</p> +</div> + +<p>Index array hanyalah properti enumerable dengan nama integer dan tidak sama dengan properti Objek pada umumnya. Disini tidak akan menjamin jika <code>for...in</code> akan mengembalikan indek pada urutan tertentu. Pernyataan <code>for...in</code> akan mengembalikan semua properti enumerable, termasuk didalamnya dengan nama non–integer dan serta turunannya.</p> + +<p>Karena urutan iterasi merupakan implementation-dependent, pengiterasian pada array mungkin tidak membaca elemen pada urutan yang urut. Karena itu lebih baik menggunakan perulangan {{jsxref("Statements/for", "for")}} dengan menggunakan nomor indek (atau {{jsxref("Array.prototype.forEach()")}} atau {{jsxref("Statements/for...of", "for...of")}} loop) ketika mengiterasi array dimana urutan akses sangat penting.</p> + +<h3 id="Iterasi_hanya_pada_properti_sendiri">Iterasi hanya pada properti sendiri</h3> + +<p>Jika anda hanya ingin mempertimbangkan properti yang melekat pada objek itu sendri, dan bukan prototypes-nya, gunakan {{jsxref("Object.getOwnPropertyNames", "getOwnPropertyNames()")}} atau lakukan {{jsxref("Object.prototype.hasOwnProperty", "hasOwnProperty()")}} cek ({{jsxref("Object.prototype.propertyIsEnumerable", "propertyIsEnumerable")}} juga dapat digunakan). Alternatifnya, jika anda tahu disana tidak ada campur tangan kode luar , anda dapat memperpanjang built-in prototypes dengan metode cek.</p> + +<h2 id="Contoh">Contoh</h2> + +<p>Pada fungsi berikut menggunakan sebuah objek argumen. kemudian mengiterasi pada semua properti enumerable pada objek tersebut dan mengembalikan string dari nama properti dan nilainya.</p> + +<pre class="brush: js">var obj = {a:1, b:2, c:3}; + +for (var prop in obj) { + console.log("obj." + prop + " = " + obj[prop]); +} + +// Output: +// "obj.a = 1" +// "obj.b = 2" +// "obj.c = 3"</pre> + +<p>Fungsi berikut mengiterasi menggunakan {{jsxref("Object.prototype.hasOwnProperty", "hasOwnProperty()")}}: properti turunannya tidak akan di tampilkan.</p> + +<pre class="brush: js">var triangle = {a:1, b:2, c:3}; + +function ColoredTriangle() { + this.color = "red"; +} + +ColoredTriangle.prototype = triangle; + +var obj = new ColoredTriangle(); + +for (var prop in obj) { + if( obj.hasOwnProperty( prop ) ) { + console.log("obj." + prop + " = " + obj[prop]); + } +} + +// Output: +// "obj.color = red" +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Komentar</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'for...in statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-for-in-and-for-of-statements', 'for...in statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.6.4', 'for...in statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12.6.4', 'for...in statement')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12.6.3', 'for...in statement')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Browser">Kompabilitas Browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>10</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Kompabilitas_Ekspresi_Initializer">Kompabilitas: Ekspresi Initializer</h2> + +<p>Pada SpiderMonkey 40 {{geckoRelease(40)}} atau sebelumnya, bisa menggunakan ekspersi initializer (<code>i=0</code>) pada perulangan <code>for...in</code> :</p> + +<pre class="brush: js example-bad">var obj = {a:1, b:2, c:3}; +for(var i=0 in obj) { + console.log(obj[i]); +} +// 1 +// 2 +// 3 +</pre> + +<p>Perilaku non-standard ini sekarang diabaikan pada versi 40 dan selanjutnya akan disajikan dengan {{jsxref("SyntaxError")}} ("for-in loop head declarations may not have initializers") Peringatan pada konsole ({{bug(748550)}} dan {{bug(1164741)}}).</p> + +<p>Pada mesin lain seperti v8 (Chrome), Chakra (IE/Edge), dan JSC (WebKit/Safari) juga telah menyelidiki untuk menghapus perilaku non standar tersebut.</p> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li>{{jsxref("Statements/for...of", "for...of")}} - pernyataan serupa yang mengiterasi pada nilai (<em>values) </em>properti.</li> + <li>{{jsxref("Statements/for_each...in", "for each in")}} - pernyataan serupa, namun mengiterasi pada nilai dari properti objek, daripada nama properti sendiri (Usang)</li> + <li>{{jsxref("Statements/for", "for")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">Generator expressions</a> (penggunaan sintak <code>for...in</code> )</li> + <li><a href="/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li> + <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> + <li>{{jsxref("Object.prototype.hasOwnProperty()")}}</li> + <li>{{jsxref("Array.prototype.forEach()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/statements/fungsi/index.html b/files/id/web/javascript/reference/statements/fungsi/index.html new file mode 100644 index 0000000000..8ac13d31af --- /dev/null +++ b/files/id/web/javascript/reference/statements/fungsi/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 +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><strong>Deklarasi fungsi </strong>mendefinisikan sebuah fungsi dengan parameter-parameter yang ditentukan.</p> + +<p>Fungsi juga dapat didefinisikan menggukanan konstruktor {{jsxref("Function")}} dan {{jsxref("Operators/function", "function expression")}}.</p> + +<h2 id="Sintak">Sintak</h2> + +<pre class="syntaxbox">function <em>name</em>([<em>param</em>,[, <em>param</em>,[..., <em>param</em>]]]) { + [<em>statements</em>] +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>Nama dari fungsi.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>Nama dari argumen yang akan dilewatkan kepada fungsi. Jumlah maksimal dari argumen berbeda-beda di setiap mesin.</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>Statemen-statemen yang membentuk tubuh dari sebuah fungsi.</dd> +</dl> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Sebuah fungsi yang diciptakan dengan deklarasi fungsi adalah sebuah objek <code>Function </code>dan memiliki semua properti, method-method dan tingkah laku dari objek <code>Function. Lihat </code>{{jsxref("Function")}} untuk informasi mendetail tentang fungsi-fungsi.</p> + +<p>Sebuah fungsi juga dapat diciptakan menggunakan sebuah ekspresi (lihat {{jsxref("Operators/function", "function expression")}}).</p> + +<p>Secara default, fungsi mengembalikan nilai <code>undefined</code>. Untuk mengembalikan nilai lain, fungsi tersebut harus memiliki sebuah {{jsxref("Statements/return", "return")}} statement yang menentukan nilai untuk dikembalikan.</p> + +<h3 id="Fungsi_yang_dibuat_secara_kondisional">Fungsi yang dibuat secara kondisional</h3> + +<p>Fungsi dapat dideklarasikan secara kondisional, yaitu sebuah statement fungsi dapat disarangkan di dalam sebuah statement <code>if</code>. 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 <a href="http://kangax.github.io/nfe/#function-statements">artikel berikut</a> untuk ikhtisar. Untuk alasan tersebut, deklarasi kondisional seharusnya tidak digunakan -- untuk pembuatakan kondisional gunakan ekspresi fungsi sebagai gantinya.</p> + +<h3 id="Pengangkatan_deklarasi_fungsi">Pengangkatan deklarasi fungsi</h3> + +<p>Deklarasi fungsi di javaScript mengangkat definisi fungsi. Kamu dapat menggunakan fungsi sebelum kamu mendeklarasikan fungsi tersebut.</p> + +<pre class="brush: js">hoisted(); // logs "foo" + +function hoisted() { + console.log('foo'); +} +</pre> + +<p>Dicatat bahwa {{jsxref("Operators/function", "function expressions")}} tidak terangkat:</p> + +<pre class="brush: js">notHoisted(); // TypeError: notHoisted is not a function + +var notHoisted = function() { + console.log('bar'); +}; +</pre> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Menggunakan_fungsi">Menggunakan fungsi</h3> + +<p>Kode berikut mendeklarasikan sebuah fungsi yang mengembalikan jumlah total penjualan ketika diberikan angka dari unit-unit yang terjual dari produk <code>a, b, </code>dan <code>c</code>.</p> + +<pre class="brush: js">function calc_sales(units_a, units_b, units_c) { + return units_a * 79 + units_b * 129 + units_c * 699; +} +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-13', 'Function definition')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-13', 'Function definition')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-13', 'Function definition')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Perambah">Kompabilitas Perambah</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Allowed in sloppy mode</td> + <td>{{CompatChrome(49.0)}}</td> + <td>{{CompatUnknown}}</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + </tr> + <tr> + <td>Trailing comma in parameters</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("52.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Allowed in sloppy mode</td> + <td>{{CompatNo}}</td> + <td> + <p>{{CompatChrome(49.0)}}</p> + </td> + <td>{{CompatUnknown}}</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td> + <p>{{CompatChrome(49.0)}}</p> + </td> + </tr> + <tr> + <td>Trailing comma in parameters</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("52.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("Functions_and_function_scope", "Functions and function scope")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Operators/function", "function expression")}}</li> + <li>{{jsxref("Statements/function*", "function* statement")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("Functions/Arrow_functions", "Arrow functions")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> + <li>{{jsxref("Statements/async_function", "async function")}}</li> + <li>{{jsxref("Operators/async_function", "async function expression")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/statements/index.html b/files/id/web/javascript/reference/statements/index.html new file mode 100644 index 0000000000..08840f4e1a --- /dev/null +++ b/files/id/web/javascript/reference/statements/index.html @@ -0,0 +1,139 @@ +--- +title: Statements +slug: Web/JavaScript/Reference/Statements +tags: + - JavaScript + - Referensi + - Statement +translation_of: Web/JavaScript/Reference/Statements +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Aplikasi JavaScript terdiri dari statemen dengan sebuah sintaks tertentu. Sebuah statement dapat terdiri lebih dari satu baris. Setiap statement dapat berupa sebaris kode jika di pisahkan dengan semikolon ( ; ). Bukan merupakan keyword, tapi sekumpulan keyword.</p> + +<h2 id="Statemen_dan_deklarasi_berdasarkan_kategori">Statemen dan deklarasi berdasarkan kategori</h2> + +<p>Untuk daftar berdasarkan alfabet lihat pada sidebar sebelah kiri.</p> + +<h3 id="Control_flow">Control flow</h3> + +<dl> + <dt>{{jsxref("Statements/block", "Block")}}</dt> + <dd>Sebuah block statemen digunakan untuk mengelompokkan zero ( 0 ) atau lebih statement. Block ini dibatasi menggunakan kurung kurawal.</dd> + <dt>{{jsxref("Statements/break", "break")}}</dt> + <dd>Membatasi loop, switch, atau label statement dan transfer kontrol program pada statement berdasakan statemen akhir.</dd> + <dt>{{jsxref("Statements/continue", "continue")}}</dt> + <dd>Terminates execution of the statements in the current iteration of the current or labeled loop, and continues execution of the loop with the next iteration.</dd> + <dt>{{jsxref("Statements/Empty", "Empty")}}</dt> + <dd>An empty statement is used to provide no statement, although the JavaScript syntax would expect one.</dd> + <dt>{{jsxref("Statements/if...else", "if...else")}}</dt> + <dd>Executes a statement if a specified condition is true. If the condition is false, another statement can be executed.</dd> + <dt>{{jsxref("Statements/switch", "switch")}}</dt> + <dd>Evaluates an expression, matching the expression's value to a case clause, and executes statements associated with that case.</dd> + <dt>{{jsxref("Statements/throw", "throw")}}</dt> + <dd>Throws a user-defined exception.</dd> + <dt>{{jsxref("Statements/try...catch", "try...catch")}}</dt> + <dd>Marks a block of statements to try, and specifies a response, should an exception be thrown.</dd> +</dl> + +<h3 id="Deklarasi">Deklarasi</h3> + +<dl> + <dt>{{jsxref("Statements/var", "var")}}</dt> + <dd>Mendeklarasikan variabel, biasanya menginisialisasi ke sebuah nilai.</dd> + <dt>{{jsxref("Statements/let", "let")}}</dt> + <dd>Declares a block scope local variable, optionally initializing it to a value.</dd> + <dt>{{jsxref("Statements/const", "const")}}</dt> + <dd>Declares a read-only named constant.</dd> +</dl> + +<h3 id="Fungsi_dan_class">Fungsi dan class</h3> + +<dl> + <dt>{{jsxref("Statements/function", "function")}}</dt> + <dd>Declares a function with the specified parameters.</dd> + <dt>{{jsxref("Statements/function*", "function*")}}</dt> + <dd>Generators functions enable writing <a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">iterators</a> more easily.</dd> + <dt>{{jsxref("Statements/return", "return")}}</dt> + <dd>Specifies the value to be returned by a function.</dd> + <dt>{{jsxref("Statements/class", "class")}}</dt> + <dd>Declares a class.</dd> +</dl> + +<h3 id="Iterations">Iterations</h3> + +<dl> + <dt>{{jsxref("Statements/do...while", "do...while")}}</dt> + <dd>Creates a loop that executes a specified statement until the test condition evaluates to false. The condition is evaluated after executing the statement, resulting in the specified statement executing at least once.</dd> + <dt>{{jsxref("Statements/for", "for")}}</dt> + <dd>Creates a loop that consists of three optional expressions, enclosed in parentheses and separated by semicolons, followed by a statement executed in the loop.</dd> + <dt>{{deprecated_inline}} {{non-standard_inline()}} {{jsxref("Statements/for_each...in", "for each...in")}}</dt> + <dd>Iterates a specified variable over all values of object's properties. For each distinct property, a specified statement is executed.</dd> + <dt>{{jsxref("Statements/for...in", "for...in")}}</dt> + <dd>Iterates over the enumerable properties of an object, in arbitrary order. For each distinct property, statements can be executed.</dd> + <dt>{{jsxref("Statements/for...of", "for...of")}}</dt> + <dd>Iterates over iterable objects (including {{jsxref("Global_Objects/Array","arrays","","true")}}, array-like objects, <a href="/en-US/docs/JavaScript/Guide/Iterators_and_Generators">iterators and generators</a>), invoking a custom iteration hook with statements to be executed for the value of each distinct property.</dd> + <dt>{{jsxref("Statements/while", "while")}}</dt> + <dd>Creates a loop that executes a specified statement as long as the test condition evaluates to true. The condition is evaluated before executing the statement.</dd> +</dl> + +<h3 id="Others">Others</h3> + +<dl> + <dt>{{jsxref("Statements/debugger", "debugger")}}</dt> + <dd>Invokes any available debugging functionality. If no debugging functionality is available, this statement has no effect.</dd> + <dt>{{jsxref("Statements/export", "export")}}</dt> + <dd>Used to export functions to make them available for imports in external modules, another scripts.</dd> + <dt>{{jsxref("Statements/import", "import")}}</dt> + <dd>Used to import functions exported from an external module, another script.</dd> + <dt>{{jsxref("Statements/label", "label")}}</dt> + <dd>Provides a statement with an identifier that you can refer to using a <code>break</code> or <code>continue</code> statement.</dd> +</dl> + +<dl> + <dt>{{deprecated_inline}} {{jsxref("Statements/with", "with")}}</dt> + <dd>Extends the scope chain for a statement.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12', 'Statements')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12', 'Statements')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12', 'Statements')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New: function*, let, for...of, yield, class</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators">Operators</a></li> +</ul> diff --git a/files/id/web/javascript/sekilas_teknologi_javascript/index.html b/files/id/web/javascript/sekilas_teknologi_javascript/index.html new file mode 100644 index 0000000000..adb6ec5a68 --- /dev/null +++ b/files/id/web/javascript/sekilas_teknologi_javascript/index.html @@ -0,0 +1,87 @@ +--- +title: Ikhtisar Teknologi JavaScript +slug: Web/JavaScript/sekilas_teknologi_JavaScript +translation_of: Web/JavaScript/JavaScript_technologies_overview +--- +<div>{{JsSidebar("Introductory")}}</div> + +<h2 id="Pengantar">Pengantar</h2> + +<p>Jika <a href="/en-US/docs/Web/HTML">HTML</a> untuk mengatur struktur dan konten dari halaman web dan <a href="/en-US/docs/Web/CSS">CSS</a> untuk menetapkan format dan tampilannya, maka <a href="/en-US/docs/Web/JavaScript">JavaScript</a> digunakan untuk menambah interaksi pada halaman web dan menciptakan aplikasi web yang kaya.</p> + +<p>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 <a href="/en-US/docs/Web/Reference/API">Web APIs</a>, termasuk DOM (Document Object Model).</p> + +<h2 id="Bahasa_inti_(ECMAScript)_JavaScript">Bahasa inti (ECMAScript) JavaScript</h2> + +<p>Bahasa inti dari JavaScript distandarisasi oleh komite ECMA TC39 sebagai bahasa yang bernama <a href="/en-US/docs/JavaScript/Language_Resources">ECMAScript</a>.</p> + +<p>Bahasa inti ini juga digunakan pada lingkungan non-browser, misalnya <a href="http://nodejs.org/">node.js</a>.</p> + +<h3 id="Apa_yang_termasuk_dalam_lingkup_ECMAScript">Apa yang termasuk dalam lingkup ECMAScript?</h3> + +<p>Diantaranya, ECMAScript menetapkan:</p> + +<ul> + <li>Sintaks bahasa (aturan parsing, keywords, control flow, object literal initialization...)</li> + <li>Mekanisme penanganan Error (throw, try/catch, kemampuan membuat tipe Error yang ditetapkan-pengguna)</li> + <li>Tipe (boolean, number, string, function, object...)</li> + <li>Global object. Didalam browser, global object ini adalah window object, namun ECMAScript hanya menetapkan APIs tidak spesifik pada browser, contohnya <code>parseInt</code>, <code>parseFloat</code>, <code>decodeURI</code>, <code>encodeURI</code>...</li> + <li>Mekanisme pewarisan berbasis-prototipe</li> + <li>Built-in objects dan functions (<code>JSON</code>, <code>Math</code>, <code>Array.prototype</code> methods, Object introspection methods...)</li> + <li>Mode strict</li> +</ul> + +<h3 id="Dukungan_browser">Dukungan browser</h3> + +<p>Pada Oktober 2016, versi terbaru dari sebagian besar browser Web sudah menerapkan <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla">ECMAScript 5.1</a> dan <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_2015_support_in_Mozilla">ECMAScript 2015</a>, namun versi yang lebih lama (yang masih digunakan) hanya menerapkan ECMAScript 5.</p> + +<h3 id="Masa_depan">Masa depan</h3> + +<p>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.</p> + +<h3 id="API_Internasionalisasi">API Internasionalisasi</h3> + +<p><a href="http://ecma-international.org/ecma-402/1.0/">Spesifikasi API Internasionalisasi ECMAScript</a> 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 <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Intl"><code>Intl</code> object</a>. Saat ini spesifikasi Internasionalisasi juga disahkan secara tahunan dan browser secara konsisten meningkatkan implementasinya.</p> + +<h2 id="API_DOM">API DOM</h2> + +<h3 id="WebIDL">WebIDL</h3> + +<p><a href="http://www.w3.org/TR/WebIDL/">WebIDL specification</a> memberikan perekat antara teknologi DOM dan ECMAScript.</p> + +<h3 id="Inti_dari_DOM">Inti dari DOM</h3> + +<p>Document Object Model (DOM) adalah <strong>bahasa konvensi independen</strong> lintas platform untuk mewakili dan berinteraksi dengan objects dalam dokumen HTML, XHTML dan XML. Objects didalam <strong>DOM tree</strong> 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:</p> + +<ul> + <li>Struktur dokumen, tree model, dan arsitektur DOM Event didalam <a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html">DOM core</a>: <code>Node</code>, <code>Element</code>, <code>DocumentFragment</code>, <code>Document</code>, <code>DOMImplementation</code>, <code>Event</code>, <code>EventTarget</code>, …</li> + <li>Sebuah penetapan yang tidak ketat untuk DOM Event Architecture, termasuk events tertentu didalam <a href="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html">DOM events</a>.</li> + <li>Dan yang lainnya seperti <a href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html">DOM Traversal</a> dan <a href="http://html5.org/specs/dom-range.html">DOM Range</a>.</li> +</ul> + +<p>Dari sudut pandang ECMAScript, objects yang didefinisikan di spesifikasi DOM disebut "host objects".</p> + +<h3 id="HTML_DOM">HTML DOM</h3> + +<p>Bahasa markup Web (<a href="http://www.whatwg.org/html">HTML</a>) yang ditetapkan dari sisi DOM. Seperti dalam konsep abstrak yang dibahas diatas pada Inti DOM, HTML juga didefinisikan sebagai <em>sebuah</em> elemen. The HTML DOM menyertakan properti <code>className</code> pada elemen HTML, or APIs seperti {{ domxref("document.body") }}.</p> + +<p>Spesifikasi HTML juga menetapkan batasan pada dokumen; misalnya, ia memerlukan semua elemen anak dari sebuah <code>ul</code> untuk mewakili sebuah daftar tak urut, elemen <code>li</code> untuk mewakili daftar item. Secara umum, ia juga melarang penggunaan elemen dan atribut yang tidak didefinisikan dalam standar.</p> + +<p>Ingin mengetahui <a href="/en-US/docs/DOM/document"><code>Document</code> object</a>, <a href="/en-US/docs/DOM/window"><code>Window</code> object</a>, dan elemen DOM lainnya? Baca <a href="/en-US/docs/Web/API/Document_Object_Model">DOM documentation</a>.</p> + +<h2 id="API_penting_lainnya">API penting lainnya</h2> + +<ul> + <li>Fungsi <code>setTimeout</code> dan <code>setInterval</code>. Fungsi yang ditetapkan pertama kali pada antarmuka <code><a href="http://www.whatwg.org/html/#window">Window</a></code> didalam standar HTML.</li> + <li><a href="https://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html">XMLHttpRequest</a> memungkinkan untuk mengrim permintaan HTTP asynchronous.</li> + <li><a href="http://dev.w3.org/csswg/cssom/">CSS Object Model</a> abstraksi aturan CSS sebagai objects.</li> + <li><a href="http://www.whatwg.org/specs/web-workers/current-work/">WebWorkers </a>memungkinkan komputasi paralel.</li> + <li><a href="http://www.whatwg.org/C/#network">WebSockets</a> memungkinkan komunikasi tingkat-rendah secara dua arah.</li> + <li><a href="http://www.whatwg.org/html/#2dcontext">Canvas 2D Context</a> merupakan API drawing untuk {{htmlelement("canvas")}}.</li> +</ul> + +<h3 id="Dukungan_browser_2">Dukungan browser</h3> + +<p>Seperti kata pengembang web yang berpengalaman, <a href="http://ejohn.org/blog/the-dom-is-a-mess/">DOM berantakan</a>. 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.</p> + +<p>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 <a href="http://jquery.com/">jQuery</a>, <a href="http://www.prototypejs.org/">prototype</a>, dan <a href="http://developer.yahoo.com/yui/">YUI</a>.</p> diff --git a/files/id/web/mathml/element/index.html b/files/id/web/mathml/element/index.html new file mode 100644 index 0000000000..cb570e4974 --- /dev/null +++ b/files/id/web/mathml/element/index.html @@ -0,0 +1,234 @@ +--- +title: MathML element reference +slug: Web/MathML/Element +tags: + - MathML + - Referensi MathML +translation_of: Web/MathML/Element +--- +<p>{{MathMLRef}}</p> + +<p>Ini adalah daftar alfabet dari elemen <strong>presentasi</strong> MathML.</p> + +<p>Istilah <strong>Markup presentasi</strong> digunakan untuk menggambarkan struktur tata letak notasi matematika sedangkan <strong>konten markup</strong> memberikan makna matematika yang mendasari dan tidak seharusnya diberikan oleh parser MathML (lihat {{bug (276028)}}). Jika Anda ingin mempelajari lebih lanjut tentang markup konten yang harus Anda pertimbangkan <a class="external" href="http://www.w3.org/TR/MathML3/chapter4.html" title="http://www.w3.org/TR/MathML3/chapter4.html">Chapter 4</a> pada <a class="external" href="http://www.w3.org/TR/MathML3/" title="http://www.w3.org/TR/MathML3/">MathML 3 specification</a>.</p> + +<h2 id="MathML_presentation_elements_A_to_Z">MathML presentation elements A to Z</h2> + +<div class="multiColumnList"> +<h3 id="math">math</h3> + +<ul> + <li>{{MathMLElement("math")}} (Top-level element)</li> +</ul> + +<h3 id="A">A</h3> + +<ul> + <li>{{MathMLElement("maction")}} (Binded actions to sub-expressions)</li> + <li>{{MathMLElement("maligngroup")}} (Alignment group)</li> + <li>{{MathMLElement("malignmark")}} (Alignment points)</li> +</ul> + +<h3 id="E">E</h3> + +<ul> + <li>{{MathMLElement("menclose")}} (Enclosed contents)</li> + <li>{{MathMLElement("merror")}} (Enclosed syntax error messages)</li> +</ul> + +<h3 id="F">F</h3> + +<ul> + <li>{{MathMLElement("mfenced")}} (Parentheses)</li> + <li>{{MathMLElement("mfrac")}} (Fraction)</li> +</ul> + +<h3 id="G">G</h3> + +<ul> + <li>{{MathMLElement("mglyph")}} (Displaying non-standard symbols)</li> +</ul> + +<h3 id="I">I</h3> + +<ul> + <li>{{MathMLElement("mi")}} (Identifier)</li> +</ul> + +<h3 id="L">L</h3> + +<ul> + <li>{{MathMLElement("mlabeledtr")}} (Labeled row in a table or a matrix)</li> + <li>{{MathMLElement("mlongdiv")}} (Long division notation)</li> +</ul> + +<h3 id="M">M</h3> + +<ul> + <li>{{MathMLElement("mmultiscripts")}} (Prescripts and tensor indices)</li> +</ul> + +<h3 id="N">N</h3> + +<ul> + <li>{{MathMLElement("mn")}} (Number)</li> +</ul> + +<h3 id="O">O</h3> + +<ul> + <li>{{MathMLElement("mo")}} (Operator)</li> + <li>{{MathMLElement("mover")}} (Overscript)</li> +</ul> + +<h3 id="P">P</h3> + +<ul> + <li>{{MathMLElement("mpadded")}} (Space around content)</li> + <li>{{MathMLElement("mphantom")}} (Invisible content with reserved space)</li> +</ul> + +<h3 id="R">R</h3> + +<ul> + <li>{{MathMLElement("mroot")}} (Radical with specified index)</li> + <li>{{MathMLElement("mrow")}} (Grouped sub-expressions)</li> +</ul> + +<h3 id="S">S</h3> + +<ul> + <li>{{MathMLElement("ms")}} (String literal)</li> + <li>{{MathMLElement("mscarries")}} (Annotations such as carries)</li> + <li>{{MathMLElement("mscarry")}} (Single carry, child element of {{MathMLElement("mscarries")}})</li> + <li>{{MathMLElement("msgroup")}} (Grouped rows of {{MathMLElement("mstack")}} and {{MathMLElement("mlongdiv")}} elements)</li> + <li>{{MathMLElement("msline")}} (Horizontal lines inside {{MathMLElement("mstack")}} elements)</li> + <li>{{MathMLElement("mspace")}} (Space)</li> + <li>{{MathMLElement("msqrt")}} (Square root without an index)</li> + <li>{{MathMLElement("msrow")}} (Rows in {{MathMLElement("mstack")}} elements)</li> + <li>{{MathMLElement("mstack")}} (Stacked alignment)</li> + <li>{{MathMLElement("mstyle")}} (Style change)</li> + <li>{{MathMLElement("msub")}} (Subscript)</li> + <li>{{MathMLElement("msup")}} (Superscript)</li> + <li>{{MathMLElement("msubsup")}} (Subscript-superscript pair)</li> +</ul> + +<h3 id="T">T</h3> + +<ul> + <li>{{MathMLElement("mtable")}} (Table or matrix)</li> + <li>{{MathMLElement("mtd")}} (Cell in a table or a matrix)</li> + <li>{{MathMLElement("mtext")}} (Text)</li> + <li>{{MathMLElement("mtr")}} (Row in a table or a matrix)</li> +</ul> + +<h3 id="U">U</h3> + +<ul> + <li>{{MathMLElement("munder")}} (Underscript)</li> + <li>{{MathMLElement("munderover")}} (Underscript-overscript pair)</li> +</ul> + +<h3 id="Other_elements">Other elements</h3> + +<ul> + <li>{{MathMLElement("semantics")}} (Container for semantic annotations)</li> + <li><a href="/en-US/docs/Web/MathML/Element/semantics#annotation"><code><annotation></code></a> (Data annotations)</li> + <li><a href="/en-US/docs/Web/MathML/Element/semantics#annotation-xml"><code><annotation-xml></code></a> (XML annotations)</li> +</ul> +</div> + +<h2 id="Elemen_presentasi_MathML_berdasarkan_kategori">Elemen presentasi MathML berdasarkan kategori</h2> + +<p> </p> + +<h3 id="Elemen_tingkat_atas">Elemen tingkat atas</h3> + +<ul> + <li>{{MathMLElement("math")}}</li> +</ul> + +<h3 id="Elemen_Token">Elemen Token</h3> + +<ul> + <li>{{MathMLElement("mglyph")}}</li> + <li>{{MathMLElement("mi")}}</li> + <li>{{MathMLElement("mn")}}</li> + <li>{{MathMLElement("mo")}}</li> + <li>{{MathMLElement("ms")}}</li> + <li>{{MathMLElement("mspace")}}</li> + <li>{{MathMLElement("mtext")}}</li> +</ul> + +<h3 id="Tata_letak_umum">Tata letak umum</h3> + +<ul> + <li>{{MathMLElement("menclose")}}</li> + <li>{{MathMLElement("merror")}}</li> + <li>{{MathMLElement("mfenced")}}</li> + <li>{{MathMLElement("mfrac")}}</li> + <li>{{MathMLElement("mpadded")}}</li> + <li>{{MathMLElement("mphantom")}}</li> + <li>{{MathMLElement("mroot")}}</li> + <li>{{MathMLElement("mrow")}}</li> + <li>{{MathMLElement("msqrt")}}</li> + <li>{{MathMLElement("mstyle")}}</li> +</ul> + +<h3 id="Script_dan_batas_elemen">Script dan batas elemen</h3> + +<ul> + <li>{{MathMLElement("mmultiscripts")}}</li> + <li>{{MathMLElement("mover")}}</li> + <li>{{MathMLElement("mprescripts")}}</li> + <li>{{MathMLElement("msub")}}</li> + <li>{{MathMLElement("msubsup")}}</li> + <li>{{MathMLElement("msup")}}</li> + <li>{{MathMLElement("munder")}}</li> + <li>{{MathMLElement("munderover")}}</li> + <li>{{MathMLElement("none")}}</li> +</ul> + +<h3 id="Tabular_Matematika">Tabular Matematika</h3> + +<ul> + <li>{{MathMLElement("maligngroup")}}</li> + <li>{{MathMLElement("malignmark")}}</li> + <li>{{MathMLElement("mlabeledtr")}}</li> + <li>{{MathMLElement("mtable")}}</li> + <li>{{MathMLElement("mtd")}}</li> + <li>{{MathMLElement("mtr")}}</li> +</ul> + +<h3 id="Matematika_dasar">Matematika dasar</h3> + +<ul> + <li>{{MathMLElement("mlongdiv")}}</li> + <li>{{MathMLElement("mscarries")}}</li> + <li>{{MathMLElement("mscarry")}}</li> + <li>{{MathMLElement("msgroup")}}</li> + <li>{{MathMLElement("msline")}}</li> + <li>{{MathMLElement("msrow")}}</li> + <li>{{MathMLElement("mstack")}}</li> +</ul> + +<h3 id="Elemen_yang_tidak_terkategorikan">Elemen yang tidak terkategorikan</h3> + +<ul> + <li>{{MathMLElement("maction")}}</li> +</ul> + +<h2 id="Anotasi_semantik">Anotasi semantik</h2> + +<ul> + <li><a href="/en-US/docs/Web/MathML/Element/semantics#annotation"><code><annotation></code></a></li> + <li><a href="/en-US/docs/Web/MathML/Element/semantics#annotation-xml"><code><annotation-xml></code></a></li> + <li>{{MathMLElement("semantics")}}</li> +</ul> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li><a href="/en-US/docs/Web/MathML" title="/en-US/docs/Web/MathML">MathML</a></li> + <li><a href="/en-US/docs/Web/MathML/Attribute" title="/en-US/docs/Web/MathML/Attribute">MathML attribute reference</a></li> +</ul> diff --git a/files/id/web/mathml/index.html b/files/id/web/mathml/index.html new file mode 100644 index 0000000000..7c41b63f49 --- /dev/null +++ b/files/id/web/mathml/index.html @@ -0,0 +1,76 @@ +--- +title: MathML +slug: Web/MathML +tags: + - Landing + - MathML + - NeedsTranslation + - Reference + - TopicStub + - Web + - XML +translation_of: Web/MathML +--- +<div>{{MathMLRef}}</div> + +<p class="summary"><span class="seoSummary"><strong>Mathematical Markup Language (MathML)</strong> is a dialect of <a href="/en-US/docs/XML">XML</a> for describing mathematical notation and capturing both its structure and content.</span></p> + +<p>Here you'll find links to documentation, examples, and tools to help you work with this powerful technology. For a quick overview, see the <a href="https://fred-wang.github.io/MozSummitMathML/index.html">slides for the innovation fairs at Mozilla Summit 2013</a>.</p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 id="MathML_reference">MathML reference</h2> + +<dl> + <dt><a href="/en-US/docs/Web/MathML/Element">MathML element reference</a></dt> + <dd>Details about each MathML element and compatibility information for desktop and mobile browsers.</dd> + <dt><a href="/en-US/docs/Web/MathML/Attribute">MathML attribute reference</a></dt> + <dd>Information about MathML attributes that modify the appearance or behavior of elements.</dd> + <dt><a href="/en-US/docs/Web/MathML/Examples">MathML examples</a></dt> + <dd>MathML samples and examples to help you understand how it works.</dd> + <dt><a href="/en-US/docs/Web/MathML/Authoring">Authoring MathML</a></dt> + <dd>Suggestions and tips for writing MathML, including suggested MathML editors and how to integrate their output into Web content.</dd> +</dl> + +<p><a href="/en-US/docs/tag/MathML">View All...</a></p> +</div> + +<div class="section"> +<h2 id="Getting_help_from_the_community">Getting help from the community</h2> + +<ul> + <li>View Mozilla forums...<br> + {{ DiscussionList("dev-tech-mathml", "mozilla.dev.tech.mathml") }}</li> + <li><a href="irc://irc.mozilla.org/%23mathml" rel="external" title="#mathml">IRC channel</a></li> + <li><a href="https://wiki.mozilla.org/MathML:Home_Page">Wiki used by Mozilla contributors</a></li> + <li><a href="https://www.w3.org/Math/" title="http://www.w3.org">W3C Math Home</a></li> + <li><a href="https://lists.w3.org/Archives/Public/www-math/" title="http://lists.w3.org">www-math w3.org mail archive</a></li> +</ul> + +<h2 id="Tools">Tools</h2> + +<ul> + <li><a href="https://validator.w3.org" title="http://validator.w3.org">W3C Validator</a></li> + <li><a href="https://addons.mozilla.org/en/firefox/addon/8969/">FireMath Firefox add-on</a></li> + <li><a href="https://addons.mozilla.org/firefox/collections/fred_wang/mathzilla/">Mathzilla Firefox add-on collection</a></li> + <li><a href="https://github.com/fred-wang/TeXZilla">TeXZilla</a> — Javascript LaTeX to MathML converter (<a href="https://fred-wang.github.io/TeXZilla/" title="http://fred-wang.github.io">live demo</a>, <a href="https://r-gaia-cs.github.io/TeXZilla-webapp/" title="http://r-gaia-cs.github.io">Firefox OS webapp</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/texzilla/">Firefox add-on</a>, <a href="https://github.com/fred-wang/TeXZilla/wiki/Using-TeXZilla">using in a Web Page, JS program etc</a>)</li> + <li><a href="http://dlmf.nist.gov/LaTeXML/" title="http://dlmf.nist.gov">LaTeXML</a> - Convert LaTeX documents into HTML+MathML Web pages</li> + <li><a href="http://webdemo.visionobjects.com/home.html#equation" title="http://webdemo.visionobjects.com">Web Equation</a> - Turn handwritten equations into MathML or LaTeX</li> + <li><a href="https://www.mathjax.org/" title="http://www.mathjax.org">MathJax</a> - Cross-browser JavaScript display engine for mathematics. To force MathJax to use native MathML, try <a href="https://addons.mozilla.org/en-US/firefox/addon/mathjax-native-mathml/">this Mozilla add-on</a>, this <a href="https://fred-wang.github.io/mathjax-native-mathml-safari/mathjax-native-mathml.safariextz" title="http://fred-wang.github.io">Safari extension</a> or this <a href="https://openuserjs.org/scripts/fred.wang/MathJax_Native_MathML/">GreaseMonkey script</a>.</li> +</ul> + +<h2 id="Related_topics">Related topics</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS">CSS</a></li> + <li><a href="/en-US/docs/Web/HTML">HTML</a></li> + <li><a href="/en-US/docs/Web/SVG">SVG</a></li> +</ul> +</div> +</div> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("mathml.elements.math", 0)}}</p> diff --git a/files/id/web/reference/api/index.html b/files/id/web/reference/api/index.html new file mode 100644 index 0000000000..d8589d167f --- /dev/null +++ b/files/id/web/reference/api/index.html @@ -0,0 +1,65 @@ +--- +title: Referensi Web API +slug: Web/Reference/API +tags: + - API + - Landing + - Reference + - Web + - Web Desain +translation_of: Web/Reference/API +--- +<p>Web menyediakan banyak API untuk melaksanakan berbagai tugas. Seluruh API ini dapat diakses menggunakan kode Javascript, dan memungkinkan kita untuk melakukan perubahan-perubahan minor kepada {{domxref("window")}} atau {{domxref("element")}} maupun menghasilkan efek-efek video dan audio yang luar biasa menggunakan API seperti <a href="/en-US/docs/Web/WebGL">WebGL</a> dan <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio</a>.</p> + +<p>Masing-masing antarmuka dari seluruh API yang ada didaftarkan pada <a href="/en-US/docs/Web/API">index</a>.</p> + +<p>Ada juga <a href="/en-US/docs/Web/Events">daftar dari semua <em>event </em>yang tersedia</a> pada referensi <em>event</em>.</p> + +<div class="cleared topicpage-table"> +<div class="section"> +<dl> + <dt><a href="/en-US/docs/DOM">Dokumen Object Model</a></dt> + <dd>DOM adalah API yang memungkinkan modifikasi pada dokumen. Memungkinkan manipulasi dari dokumen {{domxref("Node")}} dan {{domxref("Element")}}. HTML, XML, dan SVG mempunyai kelebihan itu untuk memanipulasi beberapa spesifik element.</dd> + <dt>Device API</dt> + <dd>Merupakan seperangkat APIs yang memungkinkan kita untuk mengakses ke seluruh fitur hardware yang tersedia ke halaman Web dan aplikasi. Misal. <a href="/en-US/docs/WebAPI/Using_Light_Events">Ambient Light Sensor API</a>, <a href="/en-US/docs/WebAPI/Battery_Status" title="WebAPI/Battery_Status">Battery Status API</a>, <a href="/en-US/docs/Using_geolocation" title="Using_geolocation">Geolocation API</a>, <a href="/en-US/docs/WebAPI/Pointer_Lock" title="API/Pointer_Lock_API">Pointer Lock API</a>, <a href="/en-US/docs/WebAPI/Proximity" title="WebAPI/Proximity">Proximity API</a>, <a href="/en-US/docs/WebAPI/Detecting_device_orientation" title="WebAPI/Detecting_device_orientation">Device Orientation API</a>, <a href="/en-US/docs/WebAPI/Managing_screen_orientation" title="WebAPI/Detecting_device_orientation">Screen Orientation API</a>, <a href="/en-US/docs/WebAPI/Vibration" title="WebAPI/WebBluetooth">Vibration API</a>.</dd> + <dt>Communication APIs</dt> + <dd>API ini memungkinkan halaman Web dan aplikasi berkomunikasi dengan halaman lain atau perangkat tertentu. Misal. <a href="/en-US/docs/WebAPI/Network_Information" title="WebAPI/Network_Information">Network Information API</a>, <a href="/en-US/docs/WebAPI/Using_Web_Notifications" title="/en-US/docs/WebAPI/Using_Web_Notifications">Web Notifications</a>, <a href="/en-US/docs/WebAPI/Simple_Push" title="WebAPI/Push_Notifications">Simple Push API</a>.</dd> + <dt id="Data_management_APIs">Data management APIs</dt> + <dd>Data pengguna dapat disimpan dan di kendalikan menggunakan perangkat API ini. Misal. <a href="/en-US/docs/WebAPI/FileHandle_API" title="WebAPI/FileHandle_API">FileHandle API</a>, <a href="/en-US/docs/IndexedDB" title="IndexedDB">IndexedDB</a>.</dd> +</dl> + +<p>Tambahan dari API ini yang tersedia untuk setiap halaman Web dan aplikasi, sebuah set yang lebih powerfull yaitu Mozilla API tersedia untuk aplikasi khusus dan bersertifikat.</p> + +<dl> + <dt>Privileged APIs</dt> + <dd>Aplikasi khusus merupakan aplikasi yang di install dengan hak khusus yang ditentukan pengguna. Privileged API meliputi: <a href="/en-US/docs/WebAPI/TCP_Socket" title="WebAPI/TCP_Socket">TCP Socket API</a>, <a href="/en-US/docs/WebAPI/Contacts" title="WebAPI/Contacts">Contacts API</a>, <a href="/en-US/docs/WebAPI/Device_Storage_API" title="WebAPI/Device_Storage_API">Device Storage API</a>, <a href="/en-US/docs/DOM/Using_the_Browser_API" title="DOM/Using_the_Browser_API">Browser API</a>, <a href="/en-US/docs/WebAPI/Camera" title="WebAPI/Camera">Camera API</a>.</dd> + <dt>Certified APIs</dt> + <dd>Aplikasi bersertifikat merupakan aplikasi tingkat rendah yang melakukan operasi penting dalam sebuah sistem operasi seperti Firefox OS. Aplikasi Khusus tidak berinteraksi dengan aplikasi inimenggunakan <a href="/en-US/docs/WebAPI/Web_Activities" title="WebAPI/Web_Activities">Web Activities</a>. Certified APIs meliputi:<a href="/en-US/docs/WebAPI/WebBluetooth" title="WebAPI/WebBluetooth"> Bluetooth API</a>, <a href="/en-US/docs/WebAPI/Mobile_Connection" title="WebAPI/Mobile_Connection">Mobile Connection API</a>, <a href="/en-US/docs/WebAPI/Network_Stats" title="WebAPI/Network_Stats">Network Stats API</a>, <a href="/en-US/docs/WebAPI/WebTelephony" title="WebAPI/WebTelephony">Telephony</a>, <a href="/en-US/docs/WebAPI/WebSMS" title="WebAPI/WebSMS">WebSMS</a>, <a href="/en-US/docs/WebAPI/WiFi_Information" title="WebAPI/WiFi_Information">WiFi Information API</a>, <a href="/en-US/docs/WebAPI/Power_Management" title="WebAPI/Power_Management">Power Management API</a>, <a href="/en-US/docs/WebAPI/Settings" title="WebAPI/Settings">Settings API</a>, <a href="/en-US/docs/WebAPI/Idle" title="WebAPI/Device_Storage_API">Idle API</a>, <a href="/en-US/docs/WebAPI/Permissions" title="WebAPI/Permissions">Permissions API</a>, <a href="/en-US/docs/WebAPI/Time_and_Clock" title="WebAPI/Time_and_Clock">Time/Clock API</a>.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Community" id="Komunitas">Komunitas</h2> + +<p>Bergabung dengan komunitas API Web pada milis kami atau newsgroup:</p> + +<ul> + <li><a class="external" href="https://lists.mozilla.org/listinfo/dev-webapi">as a mailing list</a></li> + <li><a href="news://news.mozilla.org/mozilla.dev.webapi">as a newsgroup</a></li> + <li><a class="external" href="http://groups.google.com/group/mozilla.dev.webapi">as a Google Group</a></li> + <li><a class="external" href="http://groups.google.com/group/mozilla.dev.webapi/feeds">as a Web feed</a></li> +</ul> + +<p>Juga, pastikan bergabung pada diskusi secara langsung di channel <a href="irc://irc.mozilla.org/webapi">#webapi</a> di <a class="external" href="https://wiki.mozilla.org/IRC">IRC</a>.</p> + +<h2 class="Related_Topics" id="Topik_terkait">Topik terkait</h2> + +<p>Mungkin anda juga tertarik dengan topik berikut:</p> + +<ul> + <li><a href="/en-US/docs/Web/API">Index of all Web API interfaces</a></li> +</ul> +</div> +</div> + +<p> </p> diff --git a/files/id/web/reference/index.html b/files/id/web/reference/index.html new file mode 100644 index 0000000000..445d9adf8a --- /dev/null +++ b/files/id/web/reference/index.html @@ -0,0 +1,49 @@ +--- +title: Web technology reference +slug: Web/Reference +tags: + - Landing + - NeedsTranslation + - Reference + - TopicStub + - Web +translation_of: Web/Reference +--- +<p>{{draft()}}</p> +<p>The open Web is built using a number of technologies. Below you'll find links to our reference material for each of them.</p> +<div class="row topicpage-table"> + <div class="section"> + <h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">Core Web technologies</h2> + <dl> + <dt> + <a href="/en-US/docs/Web/API" title="/en-US/docs/Web/API">Web API interface reference</a></dt> + <dd> + Reference material for each of the interfaces that comprise the Web's APIs, including the DOM and all of the related APIs and interfaces you can use to build Web content and apps. This list covers all interfaces, arranged alphabetically.</dd> + <dt> + <a href="/en-US/docs/Web/Reference/API" title="/en-US/docs/Web/Reference/API">Web APIs</a></dt> + <dd> + A list of the individual APIs and technology suites that make up the overall Web API.</dd> + <dt> + <a href="/en-US/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a></dt> + <dd> + HyperText Markup Language is the language used to describe and define the content of a Web page.</dd> + <dt> + <a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a></dt> + <dd> + Cascading Style Sheets are used to describe the appearance of Web content.</dd> + <dt> + <a href="/en-US/docs/Web/SVG" title="/en-US/docs/Web/SVG">SVG</a></dt> + <dd> + Scalable Vector Graphics let you describe images as sets of vectors and shapes in order to allow them to scale smoothly regardless of the size at which they're drawn.</dd> + <dt> + <a href="/en-US/docs/Web/MathML" title="/en-US/docs/Web/MathML">MathML</a></dt> + <dd> + The Mathematical Markup Language makes it possible to display complex mathematical equations and syntax.</dd> + </dl> + </div> + <div class="section"> + <h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">Other technologies</h2> + <p>To be completed soon...</p> + </div> +</div> +<p> </p> diff --git a/files/id/web/security/index.html b/files/id/web/security/index.html new file mode 100644 index 0000000000..cc8b113b7a --- /dev/null +++ b/files/id/web/security/index.html @@ -0,0 +1,12 @@ +--- +title: Web security +slug: Web/Security +translation_of: Web/Security +--- +<p> +Memastikan bahwa situs web Anda atau aplikasi web terbuka aman sangat penting. Bahkan bug sederhana dalam kode Anda dapat menyebabkan kebocoran informasi pribadi, dan orang jahat di luar sana berusaha mencari cara untuk mencuri data. Artikel berorientasi keamanan web yang tercantum di sini menyediakan informasi yang dapat membantu Anda mengamankan situs Anda dan kode dari serangan dan pencurian data</p> + + +<p>{{LandingPageListSubpages}}</p> + +<p>{{QuickLinksWithSubpages}}</p> diff --git a/files/id/web/web_components/index.html b/files/id/web/web_components/index.html new file mode 100644 index 0000000000..326823bdbb --- /dev/null +++ b/files/id/web/web_components/index.html @@ -0,0 +1,230 @@ +--- +title: Web Components +slug: Web/Web_Components +tags: + - Artikel Web + - Gambaran + - HTML Imports + - JavaScript + - Landing + - Pengembangan Web + - Template + - Web Components + - component + - custom elements + - shadow dom + - slot +translation_of: Web/Web_Components +--- +<div>{{DefaultAPISidebar("Web Components")}}</div> + +<div class="summary"> +<p>Web Components adalah kumpulan fitur teknologi yang memungkinkan Anda membuat elemen khusus yang dapat digunakan kembali dengan fungsionalitasnya yang dikemas jauh dari sisa kode Anda dan menggunakannya di aplikasi web Anda.</p> +</div> + +<h2 id="Konsep_dan_penggunaan">Konsep dan penggunaan</h2> + +<p>Sebagai pengembang, kita semua tahu bahwa menggunakan kembali kode sebanyak mungkin merupakan ide yang bagus. Hal ini biasanya tidak mudah untuk struktur <em>markup </em>kustom memikirkan HTML kompleks (serta gaya dan skrip terkait) yang terkadang harus Anda tulis untuk memnuat kontrol UI khusus, dan bagaimana menggunakannya beberapa kali dapat mengubah halaman Anda menjadi berantankan jika Anda tidak berhati-hati.</p> + +<p>Web Components bertujun untuk menyelesaikan masalah yang terdiri dari tiga teknologi utama, yang dapat digunakan bersama untuk membuat elemen kustom serbaguna dengan fungsionalitas terenkapsulasi yang dapat digunakan kembali di mana pun Anda suka tanpa takut benturan kode.</p> + +<ul> + <li><strong>Custom elements</strong>: Sekumpulan API JavaScript yang memungkinkan Anda menentukan <em>custom element </em>dan perilakunya, yang kemudian dapat digunakan sesuai keinginan di antarmuka pengguna Anda.</li> + <li><strong>Shadow DOM</strong>: Sekumpulan API JavaScript untuk melampirkan pohon DOM "bayangan" yang dienkapsulasi ke elemen yang dirender secara terpisah dari dokumen utama DOM dan mengontrol fungsionalitas terkait. Dengan cara ini, Anda dapat membuat fitur elemen tetap bersifat pribadi, sehingga fitur tersebut dapat ditulis dan diberi gaya tanpa takut bertabrakan dengan bagian lain dari dokumen.</li> + <li><strong>HTML templates</strong>: Elemen {{HTMLElement("template")}} dan {{HTMLElement("slot")}} memungkinkan Anda menulis template markup yang tidak ditampilkan di halaman yang dirender. Ini kemudian dapat digunakan kembali beberapa kali sebagai dasar struktur elemen kustom.</li> +</ul> + +<p>Pendekatan dasar untuk mengimplementasikan <em>web component</em> biasanya terlihat seperti ini:</p> + +<ol> + <li>Buat kelas di mana Anda menentukan fungsionalitas <em>web component</em> Anda, menggunakan sintaks kelas ECMAScript 2015 (lihat <a href="https://wiki.developer.mozilla.org/id/docs/Web/JavaScript/Reference/Classes">Kelas</a> untuk informasi lebih lanjut).</li> + <li>Daftarkan elemen kustom baru Anda menggunakan metode {{domxref ("CustomElementRegistry.define ()")}}, meneruskan nama elemen yang akan ditentukan, kelas atau fungsi di mana fungsionalitasnya ditentukan, dan secara opsional, elemen apa yang diwarisi dari.</li> + <li>Jika perlu, lampirkan shadow DOM ke elemen khusus menggunakan metode {{domxref ("Element.attachShadow ()")}}. Tambahkan child element, event listener, dll., Ke shadow DOM menggunakan metode DOM biasa.</li> + <li>Jika perlu, tentukan template HTML menggunakan {{htmlelement ("template")}} dan {{htmlelement ("slot")}}. Sekali lagi gunakan metode DOM biasa untuk mengkloning template dan melampirkannya ke shadow DOM Anda.</li> + <li>Gunakan elemen kustom Anda di mana pun Anda suka di halaman Anda, seperti yang Anda lakukan pada elemen HTML biasa.</li> +</ol> + +<h2 id="Tutorial">Tutorial</h2> + +<dl> + <dt><a href="/en-US/docs/Web/Web_Components/Using_custom_elements">Menggunakan custom element</a></dt> + <dd>Panduan yang menunjukkan cara menggunakan fitur elemen khusus untuk membuat komponen web sederhana, serta melihat callback siklus proses dan beberapa fitur lanjutan lainnya.</dd> + <dt><a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">Menggunakan shadow DOM</a></dt> + <dd>Panduan yang mempelajari dasar-dasar shadow DOM, menunjukkan cara melampirkan shadow DOM ke elemen, menambahkan ke shadow DOM tree, menatanya, dan banyak lagi.</dd> + <dt><a href="/en-US/docs/Web/Web_Components/Using_templates_and_slots">Menggunakan templates and slots</a></dt> + <dd>Panduan yang menunjukkan cara menentukan struktur HTML yang dapat digunakan kembali menggunakan elemen {{htmlelement ("template")}} dan {{htmlelement ("slot")}}, lalu menggunakan struktur tersebut di dalam komponen web Anda.</dd> +</dl> + +<h2 id="Referensi">Referensi</h2> + +<h3 id="Custom_elements">Custom elements</h3> + +<dl> + <dt>{{domxref("CustomElementRegistry")}}</dt> + <dd>Berisi fungsionalitas yang terkait dengan elemen kustom, terutama metode {{domxref ("CustomElementRegistry.define()")}} yang digunakan untuk mendaftarkan elemen kustom baru sehingga dapat digunakan di dokumen Anda.</dd> + <dt>{{domxref("Window.customElements")}}</dt> + <dd>Mengembalikan referensi ke objek {{domxref("CustomElementRegistry.define()")}}.</dd> + <dt><a href="/en-US/docs/Web/Web_Components/Using_custom_elements#Using_the_lifecycle_callbacks">Life cycle callbacks</a></dt> + <dd>Fungsi panggilan balik khusus yang ditentukan di dalam definisi kelas elemen khusus, yang memengaruhi perilakunya: + <ul> + <li><code>connectedCallback</code>: Dipanggil saat elemen khusus pertama kali dihubungkan ke DOM dokumen.</li> + <li><code>disconnectedCallback</code>: Dipanggil ketika elemen khusus terputus dari DOM dokumen.</li> + <li><code>adoptedCallback</code>: Dipanggil ketika elemen kustom dipindahkan ke dokumen baru.</li> + <li><code>attributeChangedCallback</code>: Dipanggil ketika salah satu atribut elemen khusus ditambahkan, dihapus, atau diubah.</li> + </ul> + </dd> + <dd> + <ul> + </ul> + </dd> +</dl> + +<dl> + <dt>Ekstensi untuk membuat elemen bawaan khusus</dt> + <dd> + <ul> + <li>Atribut HTML global {{htmlattrxref ("is")}}: Memungkinkan Anda menentukan bahwa elemen HTML standar harus berperilaku seperti elemen bawaan khusus terdaftar.</li> + <li>Opsi "is" dari metode {{domxref ("Document.createElement()")}}: Memungkinkan Anda membuat instance elemen HTML standar yang berperilaku seperti elemen bawaan khusus terdaftar yang diberikan.</li> + </ul> + </dd> + <dt>CSS pseudo-classes</dt> + <dd>Pseudo-classes yang berkaitan secara khusus dengan elemen khusus: + <ul> + <li>{{cssxref(":defined")}}: Mencocokkan elemen apa pun yang ditentukan, termasuk elemen bawaan dan elemen khusus yang ditentukan dengan <code>CustomElementRegistry.define()</code>).</li> + <li>{{cssxref(":host")}}: Memilih shadow host dari shadow DOM yang berisi CSS yang digunakan di dalamnya.</li> + <li>{{cssxref(":host()")}}: Memilih shadow host dari <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM">shadow DOM</a> yang berisi CSS yang digunakan di dalamnya (sehingga Anda dapat memilih elemen khusus dari dalam shadow DOM-nya) tetapi hanya jika pemilih yang diberikan sebagai parameter fungsi cocok dengan shadow host.</li> + <li>{{cssxref(":host-context()")}}: Memilih shadow host dari <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM">shadow DOM</a> yang berisi CSS yang digunakan di dalamnya (sehingga Anda dapat memilih elemen khusus dari dalam shadow DOM-nya) tetapi hanya jika pemilih yang diberikan sebagai parameter fungsi cocok dengan leluhur host bayangan di tempat itu itu berada di dalam hierarki DOM.</li> + </ul> + </dd> + <dd>Pseudo-elements yang berkaitan secara khusus dengan elemen khusus: + <ul> + <li>{{cssxref("::part")}}: Merepresentasikan elemen apa pun dalam <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM">shadow tree</a> yang memiliki atribut {{HTMLAttrxRef ("part")}} yang cocok.</li> + </ul> + </dd> +</dl> + +<h3 id="Shadow_DOM">Shadow DOM</h3> + +<dl> + <dt>{{domxref("ShadowRoot")}}</dt> + <dd>Merepresentasikan root node dari shadow DOM subtree.</dd> + <dt>{{domxref("DocumentOrShadowRoot")}}</dt> + <dd>Fitur penentu mixin yang tersedia di seluruh dokumen dan shadow roots.</dd> + <dt>Ekstensi {{domxref("Element")}}</dt> + <dd>Ekstensi ke antarmuka <code>Element</code> yang terkait dengan shadow DOM: + <ul> + <li>Metode {{domxref ("Element.attachShadow ()")}} melampirkan shadow DOM tree ke elemen yang ditentukan.</li> + <li>Properti {{domxref ("Element.shadowRoot")}} mengembalikan shadow root yang dilampirkan ke elemen yang ditentukan, atau <code>null</code> jika tidak ada shadow root yang terpasang.</li> + </ul> + </dd> + <dt>Penambahan {{domxref ("Node")}} yang relevan</dt> + <dd>Penambahan antarmuka <code>Node</code> yang relevan dengan shadow DOM: + <ul> + <li>Metode {{domxref ("Node.getRootNode ()")}} mengembalikan root objek konteks, yang secara opsional menyertakan shadow root jika tersedia.</li> + <li>Properti {{domxref ("Node.isConnected")}} mengembalikan boolean yang menunjukkan apakah Node terhubung (langsung atau tidak langsung) ke objek konteks atau tidak, misalnya objek {{domxref ("Document")}} dalam kasus DOM normal, atau {{domxref ("ShadowRoot")}} untuk shadow DOM.</li> + </ul> + </dd> + <dt>Ekstensi {{domxref("Event")}}</dt> + <dd>Ekstensi ke antarmuka <code>Event</code> yang terkait dengan shadow DOM: + <ul> + <li>{{domxref ("Event.composed")}}: Mengembalikan {{jsxref ("Boolean")}} yang menunjukkan apakah acara akan menyebar melintasi batas shadow DOM ke DOM standar (<code>true</code>), atau tidak (<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">false</span></font>).</li> + <li>{{domxref("Event.composedPath")}}: Mengembalikan event's path (objek tempat pemroses akan dipanggil). Ini tidak termasuk node dalam shadow tree jika shadow root dibuat dengan {{domxref ("ShadowRoot.mode")}} ditutup.</li> + </ul> + </dd> +</dl> + +<h3 id="HTML_templates">HTML templates</h3> + +<dl> + <dt>{{htmlelement("template")}}</dt> + <dd>Berisi fragmen HTML yang tidak dirender saat dokumen penampung awalnya dimuat, tetapi dapat ditampilkan saat runtime menggunakan JavaScript, terutama digunakan sebagai dasar struktur elemen khusus. Antarmuka DOM terkait adalah {{domxref ("HTMLTemplateElement")}}.</dd> + <dt>{{htmlelement("slot")}}</dt> + <dd>Placeholder di dalam web component yang dapat Anda isi dengan markup Anda sendiri, yang memungkinkan Anda membuat DOM tree terpisah dan menyajikannya bersama-sama. Antarmuka DOM terkait adalah {{domxref ("HTMLSlotElement")}}</dd> + <dt>Atribut HTML global <code><a href="/en-US/docs/Web/HTML/Global_attributes/slot">slot</a></code></dt> + <dd>Menetapkan slot di shadow tree shadow DOM ke sebuah elemen.</dd> + <dt>{{domxref("Slotable")}}</dt> + <dd>Mixin yang diimplementasikan oleh node {{domxref ("Element")}} dan {{domxref ("Text")}}, mendefinisikan fitur yang memungkinkan mereka menjadi konten elemen {{htmlelement ("slot")}}. Mixin mendefinisikan satu atribut, {{domxref ("Slotable.assignedSlot")}}, yang mengembalikan referensi ke slot tempat node disisipkan.</dd> +</dl> + +<dl> + <dt>Ekstensi {{domxref("Element")}}</dt> + <dd>Extensions ke antarmuka <code>Element</code> yang terkait dengan slot: + <ul> + <li>{{domxref("Element.slot")}}: Mengembalikan nama slot shadow DOM yang dilampirkan ke elemen.</li> + </ul> + </dd> + <dt>CSS pseudo-elements</dt> + <dd>Pseudo-elements yang berkaitan secara khusus dengan slot: + <ul> + <li>{{cssxref("::slotted")}}: Mencocokkan konten apa pun yang dimasukkan ke dalam slot.</li> + </ul> + </dd> + <dt>Event {{event("slotchange")}}</dt> + <dd>Diaktifkan pada instance {{domxref ("HTMLSlotElement")}} (elemen {{htmlelement ("slot")}}) saat node yang ada di slot itu berubah.</dd> +</dl> + +<h2 id="Contoh">Contoh</h2> + +<p>Kami sedang membangun sejumlah contoh dalam repo GitHub <a href="https://github.com/mdn/web-components-examples">contoh komponen web</a> kami. Lebih banyak akan ditambahkan seiring berjalannya waktu.</p> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Komentar</th> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG","scripting.html#the-template-element","<template> element")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Definisi dari {{HTMLElement("template")}}.</td> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG","custom-elements.html#custom-elements","custom elements")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Definisi dari <a href="/en-US/docs/Web/Web_Components/Using_custom_elements">HTML Custom Elements</a>.</td> + </tr> + <tr> + <td>{{SpecName("DOM WHATWG","#shadow-trees","shadow trees")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td>Definisi dari <a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a>.</td> + </tr> + <tr> + <td>{{SpecName("HTML Imports", "", "")}}</td> + <td>{{Spec2("HTML Imports")}}</td> + <td>Definisi <a href="/en-US/docs/Web/Web_Components/HTML_Imports">Impor HTML</a> awal.</td> + </tr> + <tr> + <td>{{SpecName("Shadow DOM", "", "")}}</td> + <td>{{Spec2("Shadow DOM")}}</td> + <td>Definisi <a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a> awal.</td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_browser">Kompabilitas browser</h2> + +<p>Umumnya:</p> + +<ul> + <li>Komponen web didukung secara default di Firefox (versi 63), Chrome, dan Opera.</li> + <li>Safari mendukung sejumlah fitur komponen web, tetapi kurang dari browser di atas.</li> + <li>Edge sedang berada implementasi pengerjaan.</li> +</ul> + +<p>Untuk dukungan browser mendetail dari fitur tertentu, Anda harus membaca halaman referensi yang tercantum di atas.</p> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li><a href="https://www.webcomponents.org/">webcomponents.org</a> situs yang menampilkan contoh komponen web, tutorial, dan informasi lainnya.</li> + <li><a href="https://www.dataformsjs.com/">DataFormsJS</a> Pustaka web component terbuka — Kumpulan Web Component yang dapat digunakan untuk membangun Single Page Apps(SPA), Menampilkan data JSON dari API dan Web service, dan mengikat data ke berbagai elemen di layar. Semua Web Component adalah JavaScript biasa dan tidak memerlukan proses pembuatan.</li> + <li><a href="https://fast.design/" rel="noopener">FAST</a> adalah pustaka komponen web yang dibangun oleh Microsoft yang menawarkan beberapa paket untuk dimanfaatkan tergantung pada kebutuhan proyek Anda. Fast Element adalah cara yang ringan untuk dengan mudah membangun Web Component yang berkinerja, hemat memori, dan memenuhi standar. Fast Foundation adalah pustaka kelas WebComponent, templat, dan utilitas lain yang dibangun di atas elemen cepat yang dimaksudkan untuk disusun menjadi Web Component terdaftar.</li> + <li><a href="https://github.com/hybridsjs/hybrids">Hybrids</a> Pustaka web component sumber terbuka, yang mendukung objek biasa dan fungsi murni di atas <code>class</code> dan sintaks <code><font face="consolas, Liberation Mono, courier, monospace">this</font></code>. Ini menyediakan API sederhana dan fungsional untuk membuat elemen khusus.</li> + <li><a href="https://www.polymer-project.org/">Polymer</a> framework web component Google, satu set polyfill, penyempurnaan, dan contoh. Saat ini cara termudah untuk menggunakan komponen web lintas browser.</li> + <li><a href="https://github.com/devpunks/snuggsi#readme">Snuggsi</a> Web Component Mudah dalam ~ 1kB Termasuk polyfill - Yang Anda butuhkan hanyalah browser dan pemahaman dasar tentang kelas HTML, CSS, dan JavaScript agar produktif.</li> + <li><a href="https://github.com/slimjs/slim.js">Slim.js</a> Pustaka web component sumber terbuka, pustaka berkinerja tinggi untuk pembuatan komponen yang cepat dan mudah; dapat diperluas dan <em>pluggable</em> dan kompatibel <em>cross-framwork</em>.</li> + <li><a href="https://stenciljs.com/">Stencil</a> — TToolchain untuk membangun sistem desain yang dapat digunakan kembali dan terukur dalam web component.</li> +</ul> diff --git a/files/id/zones/index.html b/files/id/zones/index.html new file mode 100644 index 0000000000..1e9cf86546 --- /dev/null +++ b/files/id/zones/index.html @@ -0,0 +1,70 @@ +--- +title: Zones +slug: Zones +translation_of: Zones +--- +<p>MDN zones provide you one-stop access to information about specific topic areas or products. Here's a list of all the zones available to you.</p> +<div class="row topicpage-table"> + <div class="section"> + <h2 id="Web_and_app_development">Web and app development</h2> + <dl> + <dt> + <a href="/en-US/Apps">App Center</a></dt> + <dd> + Learn how to create open Web apps—rich experiences that run across multiple devices and form factors—using the same Web standards and open technologies you already know.</dd> + <dt> + <a href="/en-US/docs/Tools">Developer tools</a></dt> + <dd> + Learn how to use the Firefox developer tools to debug, test, and optimize your Web apps and sites.</dd> + <dt> + <a href="/en-US/Marketplace">Firefox Marketplace</a></dt> + <dd> + An open, non-proprietary online marketplace for Web applications built using HTML, CSS, and JavaScript. Submit apps to the Firefox Marketplace or use the code to build your own marketplace.</dd> + <dt> + <a href="/en-US/docs/Games">Game development</a></dt> + <dd> + Learn how to develop games for the Web, how to port existing games to Web technologies, and how to turn your games into Web apps.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Developer_Program">Mozilla Developer Program</a></dt> + <dd> + Learn more about the Mozilla Developer Program, where you can sign up for membership in the program, subscribe to our newsletter, and access our growing array of features for Web developers.</dd> + </dl> + </div> + <div class="section"> + <h2 id="Products" name="Products">Products and projects</h2> + <dl> + <dt> + <a href="/en-US/docs/Emscripten">Emscripten</a></dt> + <dd> + An LLVM to JavaScript compiler; this lets you compile, for example, C++ code into JavaScript code which can be run in any Web browser.</dd> + <dt> + <a href="/en-US/docs/L20n">L20n</a></dt> + <dd> + A JavaScript localization framework for unleashing your natural language's power with simple code.</dd> + <dt> + <a href="/en-US/docs/Project:MDN">The MDN project</a></dt> + <dd> + The Mozilla Developer Network (this site) relies on its community of readers and contributors to grow and improve. You can learn here how to help use, contribute to, and build the code behind MDN!1</dd> + <dt> + <a href="/en-US/Persona">Persona</a></dt> + <dd> + A new simple, privacy-sensitive single-sign in system developed by Mozilla which lets users log into your Web site using their email address, freeing you from password management.</dd> + </dl> + <h2 id="Mozilla_technologies">Mozilla technologies</h2> + <dl> + <dt> + <a href="/en-US/Add-ons">Add-ons</a></dt> + <dd> + Learn how to build and install extensions, themes, and plug-ins for Mozilla-based software, including the popular Firefox Web browser.</dd> + <dt> + <a href="/en-US/Firefox">Firefox</a></dt> + <dd> + Learn all about Firefox, from how to build and revise it to how to build add-ons specifically for it.</dd> + <dt> + <a href="/en-US/Firefox_OS">Firefox OS</a></dt> + <dd> + A new mobile operating system developed by Mozilla which lets users install and run open Web applications created using HTML, CSS, and JavaScript.</dd> + </dl> + </div> +</div> +<p> </p> |