---
title: Ikhtisar Teknologi JavaScript
slug: Web/JavaScript/sekilas_teknologi_JavaScript
translation_of: Web/JavaScript/JavaScript_technologies_overview
---
<div>{{JsSidebar("Introductory")}}</div>

<h2 id="Pengantar">Pengantar</h2>

<p>Jika <a href="/en-US/docs/Web/HTML">HTML</a> untuk mengatur struktur dan konten dari halaman web dan <a href="/en-US/docs/Web/CSS">CSS</a> untuk menetapkan format dan tampilannya, maka <a href="/en-US/docs/Web/JavaScript">JavaScript</a> digunakan untuk menambah interaksi pada halaman web dan menciptakan aplikasi web yang kaya.</p>

<p>Namun, istilah "JavaScript" seperti yang dikenal pada konteks browser web berisi beberapa elemen yang sangat berbeda. Salah satunya adalah bahasa intinya (ECMAScript), yang lainnya adalah koleksi dari <a href="/en-US/docs/Web/Reference/API">Web APIs</a>, termasuk DOM (Document Object Model).</p>

<h2 id="Bahasa_inti_(ECMAScript)_JavaScript">Bahasa inti (ECMAScript) JavaScript</h2>

<p>Bahasa inti dari JavaScript distandarisasi oleh komite ECMA TC39 sebagai bahasa yang bernama <a href="/en-US/docs/JavaScript/Language_Resources">ECMAScript</a>.</p>

<p>Bahasa inti ini juga digunakan pada lingkungan non-browser, misalnya <a href="http://nodejs.org/">node.js</a>.</p>

<h3 id="Apa_yang_termasuk_dalam_lingkup_ECMAScript">Apa yang termasuk dalam lingkup ECMAScript?</h3>

<p>Diantaranya, ECMAScript menetapkan:</p>

<ul>
 <li>Sintaks bahasa (aturan parsing, keywords, control flow, object literal initialization...)</li>
 <li>Mekanisme penanganan Error (throw, try/catch, kemampuan membuat tipe Error yang ditetapkan-pengguna)</li>
 <li>Tipe (boolean, number, string, function, object...)</li>
 <li>Global object. Didalam browser, global object ini adalah window object, namun ECMAScript hanya menetapkan APIs tidak spesifik pada browser, contohnya <code>parseInt</code>, <code>parseFloat</code>, <code>decodeURI</code>, <code>encodeURI</code>...</li>
 <li>Mekanisme pewarisan berbasis-prototipe</li>
 <li>Built-in objects dan functions (<code>JSON</code>, <code>Math</code>, <code>Array.prototype</code> methods, Object introspection methods...)</li>
 <li>Mode strict</li>
</ul>

<h3 id="Dukungan_browser">Dukungan browser</h3>

<p>Pada Oktober 2016, versi terbaru dari sebagian besar browser Web sudah menerapkan <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla">ECMAScript 5.1</a> dan <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_2015_support_in_Mozilla">ECMAScript 2015</a>, namun versi yang lebih lama (yang masih digunakan) hanya menerapkan ECMAScript 5.</p>

<h3 id="Masa_depan">Masa depan</h3>

<p>ECMAScript Edisi ke-6 mayor telah secara resmi disetujui dan diumumkan sebagai standar pada 17 Juni 1015 oleh ECMA General Assembly. Sejak saat itu Edisi ECMAScript diumumkan secara tahunan.</p>

<h3 id="API_Internasionalisasi">API Internasionalisasi</h3>

<p><a href="http://ecma-international.org/ecma-402/1.0/">Spesifikasi API Internasionalisasi ECMAScript</a> merupakan tambahan dari Spesifikasi Bahasa ECMAScript, yang juga distandarisasi oleh Ecma TC39. API internasionalisasi menyediakan kolasi (perbandingan string), format angka, format tanggal dan jam untuk aplikasi JavaScript, memungkinkan aplikasi memilih bahasa dan menyesuaikan fungsi sesuai kebutuhannya. Standar awal telah disetujui pada Desember 2012; status impementasinya dalam browser dicatat di dokumentasi <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Intl"><code>Intl</code> object</a>. Saat ini spesifikasi Internasionalisasi juga disahkan secara tahunan dan browser secara konsisten meningkatkan implementasinya.</p>

<h2 id="API_DOM">API DOM</h2>

<h3 id="WebIDL">WebIDL</h3>

<p><a href="http://www.w3.org/TR/WebIDL/">WebIDL specification</a> memberikan perekat antara teknologi DOM dan ECMAScript.</p>

<h3 id="Inti_dari_DOM">Inti dari DOM</h3>

<p>Document Object Model (DOM) adalah <strong>bahasa konvensi independen</strong> lintas platform untuk mewakili dan berinteraksi dengan objects dalam dokumen HTML, XHTML dan XML. Objects didalam <strong>DOM tree</strong> dapat dialamatkan dan dimanipulasi dengan menggunakan methods pada objects. Core Document Object Model yang distandarisasi oleh {{glossary("W3C")}}, menetapkan antarmuka bahasa-agnostik untuk mengabstaraksi dokumen HTML dan XML sebagai objects, dan juga menetapkan mekanisme untuk memanipulasi abstraksi ini. Diantara yang ditetapkan oleh DOM, kita dapat menemukan:</p>

<ul>
 <li>Struktur dokumen, tree model, dan arsitektur DOM Event didalam <a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html">DOM core</a>: <code>Node</code>, <code>Element</code>, <code>DocumentFragment</code>, <code>Document</code>, <code>DOMImplementation</code>, <code>Event</code>, <code>EventTarget</code>, …</li>
 <li>Sebuah penetapan yang tidak ketat untuk DOM Event Architecture, termasuk events tertentu didalam <a href="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html">DOM events</a>.</li>
 <li>Dan yang lainnya seperti <a href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html">DOM Traversal</a> dan <a href="http://html5.org/specs/dom-range.html">DOM Range</a>.</li>
</ul>

<p>Dari sudut pandang ECMAScript, objects yang didefinisikan di spesifikasi DOM disebut "host objects".</p>

<h3 id="HTML_DOM">HTML DOM</h3>

<p>Bahasa markup Web (<a href="http://www.whatwg.org/html">HTML</a>) yang ditetapkan dari sisi DOM. Seperti dalam konsep abstrak yang dibahas diatas pada Inti DOM, HTML juga didefinisikan sebagai <em>sebuah</em> elemen. The HTML DOM menyertakan properti <code>className</code> pada elemen HTML, or APIs seperti {{ domxref("document.body") }}.</p>

<p>Spesifikasi HTML juga menetapkan batasan pada dokumen; misalnya, ia memerlukan semua elemen anak dari sebuah <code>ul</code> untuk mewakili sebuah daftar tak urut, elemen <code>li</code> untuk mewakili daftar item. Secara umum, ia juga melarang penggunaan elemen dan atribut yang tidak didefinisikan dalam standar.</p>

<p>Ingin mengetahui <a href="/en-US/docs/DOM/document"><code>Document</code> object</a>, <a href="/en-US/docs/DOM/window"><code>Window</code> object</a>, dan elemen DOM lainnya? Baca <a href="/en-US/docs/Web/API/Document_Object_Model">DOM documentation</a>.</p>

<h2 id="API_penting_lainnya">API penting lainnya</h2>

<ul>
 <li>Fungsi <code>setTimeout</code> dan <code>setInterval</code>. Fungsi yang ditetapkan pertama kali pada antarmuka <code><a href="http://www.whatwg.org/html/#window">Window</a></code> didalam standar HTML.</li>
 <li><a href="https://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html">XMLHttpRequest</a> memungkinkan untuk mengrim permintaan HTTP asynchronous.</li>
 <li><a href="http://dev.w3.org/csswg/cssom/">CSS Object Model</a> abstraksi aturan CSS sebagai objects.</li>
 <li><a href="http://www.whatwg.org/specs/web-workers/current-work/">WebWorkers </a>memungkinkan komputasi paralel.</li>
 <li><a href="http://www.whatwg.org/C/#network">WebSockets</a> memungkinkan komunikasi tingkat-rendah secara dua arah.</li>
 <li><a href="http://www.whatwg.org/html/#2dcontext">Canvas 2D Context</a> merupakan API drawing untuk {{htmlelement("canvas")}}.</li>
</ul>

<h3 id="Dukungan_browser_2">Dukungan browser</h3>

<p>Seperti kata pengembang web yang berpengalaman, <a href="http://ejohn.org/blog/the-dom-is-a-mess/">DOM berantakan</a>. Dukungan fitur-fitur DOM antar browser bervarasi, terutama disebabkan karena banyak fitur yang penting dari DOM sangat tidak jelas, spesifikasi (jika ada) dan browser web yang berbeda menambahkan fitur yang tidak kompatibel untuk overlapping use cases (misalnya Internet Explorer event model). Pada Juni 2011, W3C dan khususnya WHATWG menetapkan fitur-fitur lama secara rinci untuk meningkatkan interoperabilitas, dan browser pada akhirnya dapat meningkatkan implementasi mereka berdasarkan spesifikasi ini.</p>

<p>Sebuah teknik umum, meskipun mungkin bukan yang paling dapat diandalkan, pendekatan kompatibilitas lintas browser adalah dengan menggunakan pustaka JavaScript, yang menggunakan fitur DOM abstrak untuk menjaga API mereka tetap bekerja di browser yang berbeda. Beberapa framework yang paling banyak digunakan adalah <a href="http://jquery.com/">jQuery</a>, <a href="http://www.prototypejs.org/">prototype</a>, dan <a href="http://developer.yahoo.com/yui/">YUI</a>.</p>