remove retired locales (#699)

8 files changed, 0 insertions, 1239 deletions

diff --git a/files/id/learn/javascript/building_blocks/index.html b/files/id/learn/javascript/building_blocks/index.html
deleted file mode 100644
index 14142a20ba..0000000000
--- a/files/id/learn/javascript/building_blocks/index.html
+++ /dev/null
@@ -1,42 +0,0 @@
----
-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
deleted file mode 100644
index 171c0647b7..0000000000
--- a/files/id/learn/javascript/client-side_web_apis/index.html
+++ /dev/null
@@ -1,50 +0,0 @@
----
-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
deleted file mode 100644
index 20cd0d7214..0000000000
--- a/files/id/learn/javascript/client-side_web_apis/introduction/index.html
+++ /dev/null
@@ -1,278 +0,0 @@
----
-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 &gt; <em>Tools</em> &gt; <em>Page Info</em> &gt; <em>Permissions</em>, then change the setting for <em>Share Location</em>; in Chrome go to <em>Settings</em> &gt; <em>Privacy</em> &gt; <em>Show advanced settings</em> &gt; <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">&lt;script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyDDuGt0E5IEGkcE6ZfrKfUtE9Ko_de66pA"&gt;&lt;/script&gt;</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
deleted file mode 100644
index 6f7e166951..0000000000
--- a/files/id/learn/javascript/first_steps/index.html
+++ /dev/null
@@ -1,63 +0,0 @@
----
-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
deleted file mode 100644
index f85ec8b2e1..0000000000
--- a/files/id/learn/javascript/first_steps/what_is_javascript/index.html
+++ /dev/null
@@ -1,433 +0,0 @@
----
-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">&lt;p&gt;Player 1: Chris&lt;/p&gt;</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>&lt;/head&gt;</code> tag:
-  <pre class="brush: html">&lt;script&gt;
-
-  // JavaScript goes here
-
-&lt;/script&gt;</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 &lt; 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>&lt;/head&gt;</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">&lt;script src="script.js" defer&gt;&lt;/script&gt;</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 &lt; 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">&lt;button onclick="createParagraph()"&gt;Click me!&lt;/button&gt;</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 &lt; 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>&lt;script&gt;</code> tag element has been reached.</p>
-
-<pre class="brush: js">&lt;script src="script.js" async&gt;&lt;/script&gt;</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>&lt;/body&gt;</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">&lt;script async src="js/vendor/jquery.js"&gt;&lt;/script&gt;
-
-&lt;script async src="js/script2.js"&gt;&lt;/script&gt;
-
-&lt;script async src="js/script3.js"&gt;&lt;/script&gt;</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">&lt;script defer src="js/vendor/jquery.js"&gt;&lt;/script&gt;
-
-&lt;script defer src="js/script2.js"&gt;&lt;/script&gt;
-
-&lt;script defer src="js/script3.js"&gt;&lt;/script&gt;</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>&lt;script&gt;</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 &lt; 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
deleted file mode 100644
index bdcf5aeedb..0000000000
--- a/files/id/learn/javascript/index.html
+++ /dev/null
@@ -1,57 +0,0 @@
----
-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/basics/index.html b/files/id/learn/javascript/objects/basics/index.html
deleted file mode 100644
index 9bc5ae4607..0000000000
--- a/files/id/learn/javascript/objects/basics/index.html
+++ /dev/null
@@ -1,262 +0,0 @@
----
-title: Dasar-dasar Objek JavaScript object
-slug: Learn/JavaScript/Objects/Basics
-translation_of: Learn/JavaScript/Objects/Basics
-original_slug: Learn/JavaScript/Objects/Dasar-dasar
----
-<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
deleted file mode 100644
index a1ddfe032a..0000000000
--- a/files/id/learn/javascript/objects/index.html
+++ /dev/null
@@ -1,54 +0,0 @@
----
-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>