diff options
Diffstat (limited to 'files/id/web/javascript/panduan')
8 files changed, 0 insertions, 2611 deletions
diff --git a/files/id/web/javascript/panduan/closures/index.html b/files/id/web/javascript/panduan/closures/index.html deleted file mode 100644 index 73cdbb7e15..0000000000 --- a/files/id/web/javascript/panduan/closures/index.html +++ /dev/null @@ -1,345 +0,0 @@ ---- -title: Closures -slug: Web/JavaScript/Panduan/Closures -translation_of: Web/JavaScript/Closures ---- -<p>Closure adalah fungsi yang merujuk kepada variabel yang mandiri (bebas). </p> - -<p>Dengan kata lain, fungsi yang di definisikan di dalam closure 'mengingat' lingkungan dimana closure ini didefinisikan. </p> - -<p>Lihat contoh berikut:</p> - -<div> -<pre class="brush: js">function init() { - var name = "Mozilla"; // name adalah sebuah lokal variabel yang dibuat oleh init - function displayName() { // displayName() adalah fungsi internal, sebuah closure - alert (name); // displayName() menggunakan variabel yang dideklarasikan pada fungsi induknya - } - displayName(); -} -init(); -</pre> -</div> - -<p><code style="font-size: 14px;">init()</code><span style="line-height: 1.572;"> membuat sebuah lokal variabel </span><code style="font-size: 14px;">name</code><span style="line-height: 1.572;"> dan kemudian memanggil fungsi </span><code style="font-size: 14px;">displayName()</code><span style="line-height: 1.572;">. </span><code style="font-size: 14px;">displayName()</code><span style="line-height: 1.572;"> adalah fungsi internal yang didefinisikan didalam</span><span style="line-height: 1.572;"> </span><code style="font-size: 14px;">init()</code><span style="line-height: 1.572;"> dan hanya dapat diakses di dalam fungsi tersebut. </span><code style="font-size: 14px;">displayName()</code><span style="line-height: 1.572;"> tidak memiliki lokal variabelnya sendiri, namun fungsi ini memiliki akses ke variabel diluar fungsinya dan dapat menggunakan variabel </span><code style="font-size: 14px;">name</code><span style="line-height: 1.572;"> tersebut yang telah di deklarasikan di fungsi induknya.</span></p> - -<p><a href="http://jsfiddle.net/xAFs9/3/" title="http://jsfiddle.net/xAFs9/">Jalankan</a> kode dan perhatikan bahwa <code>alert()</code> dapat menampilkan isi dari variabel <code>name</code>, dimana variabel tersebut dideklarasikan pada fungsi induknya. Ini adalah sebuah contoh dari ruang lingkup leksikal (<em>lexical</em> <em>scoping)</em>, yang menunjukan bagaimana cara javascript mencari variabel. Di Javascript lokasi dimana variabel tersebut dideklarasikan di dalam source code menentukan dimana variabel itu dapat diakses. Nested functions memiliki akses pada variabel yang dideklarasikan pada ruang lingkup induknya.</p> - -<p>Lihat contoh berikut:</p> - -<pre class="brush: js">function makeFunc() { - var name = "Mozilla"; - function displayName() { - alert(name); - } - return displayName; -} - -var myFunc = makeFunc(); -myFunc(); -</pre> - -<p>Jika kamu menjalankan kode ini, kode ini akan memiliki efek yang sama seperti contoh sebelumnya <code>init()</code>: teks "Mozilla" akan muncul di JavaScript alert box. Yang membedakan dan menarik adalah fungsi internal <code>displayName()</code> di kembalikan terlebih dahulu ke fungsi di luar sebelum di eksekusi.</p> - -<p>Jika dilihat ini agak aneh karena normalnya pada bahasa pemrograman lain, variabel lokal di dalam sebuah fungsi hanya ada saat fungsi tersebut dieksekusi. Sehingga saat <code>makeFunc()</code> selesai dieksekusi, sewajarnya variabel <code>name</code> ini tidak dapat diakses lagi. Namun, karena kode ini masih berjalan normal, ini adalah hal yang berbeda di Javascript.</p> - -<p>Alasannya adalah fungsi tersebut telah menjadi <em>closure </em>di javascript. <em>Closure </em>adalah kombinasi dari fungsi dan lingkungan leksikal dimana fungsi itu di deklarasikan. Lingkungan ini terdiri dari lokal variabel yang berada di ruang lingkup yang sama saat <em>closure </em>dibuat. Pada kasus ini, <code>myFunc</code> bereferensi kepada fungsi <code>displayName</code> yang telah dibuat ketika <code>makeFunc</code> dijalankan. Fungsi <code>displayName</code> akan tepat menjaga akses ke lingkungan leksikalnya, dimana variabel <code>name</code> ini aktif. Untuk alasan inilah, ketika <code>myFunc</code> di panggil, variabel <code>name</code> tetap dapat digunakan dan "Mozilla" dikirim ke alert box.</p> - -<p>Berikut adalah contoh menarik yang lainnya — fungsi <code>makeAdder</code> :</p> - -<pre class="brush: js">function makeAdder(x) { - return function(y) { - return x + y; - }; -} - -var add5 = makeAdder(5); -var add10 = makeAdder(10); - -console.log(add5(2)); // 7 -console.log(add10(2)); // 12 -</pre> - -<p>Di contoh ini, kita telah mendefinisikan fungsi <code>makeAdder(x)</code> dengan satu argument <code>x</code> dan mengembalikan sebuah fungsi baru. Fungsi yang dikembalikan membutuhkan satu argumen <code>y</code>, dan mengembalikan jumlah <code>x</code> dan <code>y</code>.</p> - -<p>Esensinya, <code>makeAdder</code> adalah fungsi untuk membuat fungsi (function factory) — fungsi ini akan membuat fungsi yang akan menambahkan angka melalui argumen. Pada contoh diatas kita membuat dua fungsi baru — yang satu menambahkan 5 melalui argumentnya dan satu menambahkan 10.</p> - -<p><code>add5</code> dan <code>add10</code> keduanya adalah closure. Fungsi ini menggunakan definisi fungsi yang sama, namun menggunakan memori yang berbeda. Di <code>add5</code> variabel <code>x</code> memiliki nilai 5. sedangkan di <code>add10</code> variabel <code>x</code> memiliki nilai 10.</p> - -<h2 id="Penggunaan_Closure">Penggunaan Closure</h2> - -<p>Setelah membaca teorinya muncul pertanyaan — Apakah closure berguna? Mari kita lihat implikasi dari penggunaan closure. Closure membantu kita mengakses data (pada lingkungannya) dengan fungsi yang mengoperasikan data tersebut. Ini berhubungan dengan <em>object oriented programming</em>, dimana objek obj0ek tersebut membantu kita dalam menghubukan beberapa data (properti objek) dengan satu atau lebih method.</p> - -<p>Karena itu, kamu dapat menggunakan closure dimanapun kamu dapat menggunakan objek dengan satu method.</p> - -<p>Situasi ini banyak ditemui umumnya pada pengembangan web. Banyak kode yang kita tulis di Javascript berdasarkan event — kita definisikan terlebih dahulu sifat dari event ini, kemudian menempelkannya pada event yang di panggil oleh user (seperti klik atau penekanan tombol). Kode kita secara garis umum adalah sebuah callback: sebuah fungsi yang dijalankan untuk merespon sebuah event.</p> - -<p>Berikut adalah contoh: kita ingin menambahkan beberapa tombol di sebuah halaman yang akan merubah ukuran teks. Cara untuk melakukannya adalah dengan menentukan ukuran huruf dari elemen body dalam satuan unit <em>pixel</em>, kemudian menentukan ukuran elemen lain di halaman (seperti header) menggunakan satuan unit <em>em</em>:</p> - -<pre class="brush: css">body { - font-family: Helvetica, Arial, sans-serif; - font-size: 12px; -} - -h1 { - font-size: 1.5em; -} - -h2 { - font-size: 1.2em; -} -</pre> - -<p>Tombol interaktif kita dapat merubah ukuran huruf dari elemen body dan elemen yang lainnya akan menyesuaikan.</p> - -<p>Berikut kode Javascript:</p> - -<pre class="brush: js">function makeSizer(size) { - return function() { - document.body.style.fontSize = size + 'px'; - }; -} - -var size12 = makeSizer(12); -var size14 = makeSizer(14); -var size16 = makeSizer(16); -</pre> - -<p><code>size12</code>, <code>size14</code>, dan <code>size16</code> adalah fungsi yang akan merubah ukuran teks body ke 12, 14, dan 16 pixel, secara berurutan. Kemudian kita tempelkan fungsi ini ke tombol (pada kasus ini adalah link) sebagai berikut:</p> - -<pre class="brush: js">document.getElementById('size-12').onclick = size12; -document.getElementById('size-14').onclick = size14; -document.getElementById('size-16').onclick = size16; -</pre> - -<pre class="brush: html"><a href="#" id="size-12">12</a> -<a href="#" id="size-14">14</a> -<a href="#" id="size-16">16</a> -</pre> - -<p><a href="https://jsfiddle.net/vnkuZ">Lihat pada JSFiddle</a></p> - -<h2 id="Emulating_private_methods_with_closures">Emulating private methods with closures</h2> - -<p>Languages such as Java provide the ability to declare methods private, meaning that they can only be called by other methods in the same class.</p> - -<p>JavaScript does not provide a native way of doing this, but it is possible to emulate private methods using closures. Private methods aren't just useful for restricting access to code: they also provide a powerful way of managing your global namespace, keeping non-essential methods from cluttering up the public interface to your code.</p> - -<p>Here's how to define some public functions that can access private functions and variables, using closures which is also known as the <a class="external" href="http://www.google.com/search?q=javascript+module+pattern" title="http://www.google.com/search?q=javascript+module+pattern">module pattern</a>:</p> - -<pre class="brush: js">var counter = (function() { - var privateCounter = 0; - function changeBy(val) { - privateCounter += val; - } - return { - increment: function() { - changeBy(1); - }, - decrement: function() { - changeBy(-1); - }, - value: function() { - return privateCounter; - } - }; -})(); - -alert(counter.value()); /* Alerts 0 */ -counter.increment(); -counter.increment(); -alert(counter.value()); /* Alerts 2 */ -counter.decrement(); -alert(counter.value()); /* Alerts 1 */ -</pre> - -<p>There's a lot going on here. In previous examples each closure has had its own environment; here we create a single environment which is shared by three functions: <code>counter.increment</code>, <code>counter.decrement</code>, and <code>counter.value</code>.</p> - -<p>The shared environment is created in the body of an anonymous function, which is executed as soon as it has been defined. The environment contains two private items: a variable called <code>privateCounter</code> and a function called <code>changeBy</code>. Neither of these private items can be accessed directly from outside the anonymous function. Instead, they must be accessed by the three public functions that are returned from the anonymous wrapper.</p> - -<p>Those three public functions are closures that share the same environment. Thanks to JavaScript's lexical scoping, they each have access to the <code>privateCounter</code> variable and <code>changeBy</code> function.</p> - -<p>You'll notice we're defining an anonymous function that creates a counter, and then we call it immediately and assign the result to the <code>counter</code> variable. We could store this function in a separate variable <code>makeCounter </code>and use it to create several counters.</p> - -<pre class="brush: js">var makeCounter = function() { - var privateCounter = 0; - function changeBy(val) { - privateCounter += val; - } - return { - increment: function() { - changeBy(1); - }, - decrement: function() { - changeBy(-1); - }, - value: function() { - return privateCounter; - } - } -}; - -var counter1 = makeCounter(); -var counter2 = makeCounter(); -alert(counter1.value()); /* Alerts 0 */ -counter1.increment(); -counter1.increment(); -alert(counter1.value()); /* Alerts 2 */ -counter1.decrement(); -alert(counter1.value()); /* Alerts 1 */ -alert(counter2.value()); /* Alerts 0 */ -</pre> - -<p>Notice how each of the two counters maintains its independence from the other. Its environment during the call of the <code>makeCounter()</code> function is different each time. The closure variable <code>privateCounter </code>contains a different instance each time.</p> - -<p>Using closures in this way provides a number of benefits that are normally associated with object oriented programming, in particular data hiding and encapsulation.</p> - -<h2 id="Creating_closures_in_loops_A_common_mistake">Creating closures in loops: A common mistake</h2> - -<p>Prior to the introduction of the <a href="/en-US/docs/JavaScript/Reference/Statements/let" title="let"><code>let</code> keyword</a> in JavaScript 1.7, a common problem with closures occurred when they were created inside a loop. Consider the following example:</p> - -<pre class="brush: html"><p id="help">Helpful notes will appear here</p> -<p>E-mail: <input type="text" id="email" name="email"></p> -<p>Name: <input type="text" id="name" name="name"></p> -<p>Age: <input type="text" id="age" name="age"></p> -</pre> - -<pre class="brush: js">function showHelp(help) { - document.getElementById('help').innerHTML = help; -} - -function setupHelp() { - var helpText = [ - {'id': 'email', 'help': 'Your e-mail address'}, - {'id': 'name', 'help': 'Your full name'}, - {'id': 'age', 'help': 'Your age (you must be over 16)'} - ]; - - for (var i = 0; i < helpText.length; i++) { - var item = helpText[i]; - document.getElementById(item.id).onfocus = function() { - showHelp(item.help); - } - } -} - -setupHelp(); -</pre> - -<p><a href="https://jsfiddle.net/v7gjv">Lihat pada JSFiddle</a></p> - -<p>The <code>helpText</code> array defines three helpful hints, each associated with the ID of an input field in the document. The loop cycles through these definitions, hooking up an onfocus event to each one that shows the associated help method.</p> - -<p>If you try this code out, you'll see that it doesn't work as expected. No matter what field you focus on, the message about your age will be displayed.</p> - -<p>The reason for this is that the functions assigned to onfocus are closures; they consist of the function definition and the captured environment from the <code>setupHelp</code> function's scope. Three closures have been created, but each one shares the same single environment. By the time the onfocus callbacks are executed, the loop has run its course and the item variable (shared by all three closures) has been left pointing to the last entry in the <code>helpText</code> list.</p> - -<p>One solution in this case is to use more closures: in particular, to use a function factory as described earlier on:</p> - -<pre class="brush: js">function showHelp(help) { - document.getElementById('help').innerHTML = help; -} - -function makeHelpCallback(help) { - return function() { - showHelp(help); - }; -} - -function setupHelp() { - var helpText = [ - {'id': 'email', 'help': 'Your e-mail address'}, - {'id': 'name', 'help': 'Your full name'}, - {'id': 'age', 'help': 'Your age (you must be over 16)'} - ]; - - for (var i = 0; i < helpText.length; i++) { - var item = helpText[i]; - document.getElementById(item.id).onfocus = makeHelpCallback(item.help); - } -} - -setupHelp(); -</pre> - -<p><a href="https://jsfiddle.net/v7gjv/1">Lihat pada JSFiddle</a></p> - -<p>This works as expected. Rather than the callbacks all sharing a single environment, the <code>makeHelpCallback</code> function creates a new environment for each one in which <code>help</code> refers to the corresponding string from the <code>helpText</code> array.</p> - -<h2 id="Performance_considerations">Performance considerations</h2> - -<p>It is unwise to unnecessarily create functions within other functions if closures are not needed for a particular task, as it will negatively affect script performance both in terms of processing speed and memory consumption.</p> - -<p>For instance, when creating a new object/class, methods should normally be associated to the object's prototype rather than defined into the object constructor. The reason is that whenever the constructor is called, the methods would get reassigned (that is, for every object creation).</p> - -<p>Consider the following impractical but demonstrative case:</p> - -<pre class="brush: js">function MyObject(name, message) { - this.name = name.toString(); - this.message = message.toString(); - this.getName = function() { - return this.name; - }; - - this.getMessage = function() { - return this.message; - }; -} -</pre> - -<p>The previous code does not take advantage of the benefits of closures and thus could instead be formulated:</p> - -<pre class="brush: js">function MyObject(name, message) { - this.name = name.toString(); - this.message = message.toString(); -} -MyObject.prototype = { - getName: function() { - return this.name; - }, - getMessage: function() { - return this.message; - } -}; -</pre> - -<p>However, redefining the prototype is not recommended, so the following example is even better because it appends to the existing prototype:</p> - -<pre class="brush: js">function MyObject(name, message) { - this.name = name.toString(); - this.message = message.toString(); -} -MyObject.prototype.getName = function() { - return this.name; -}; -MyObject.prototype.getMessage = function() { - return this.message; -}; -</pre> - -<p>In the two previous examples, the inherited prototype can be shared by all objects and the method definitions need not occur at every object creation. See <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Details of the Object Model</a> for more details.</p> - -<h2 id="Expression_closures">Expression closures</h2> - -<p>This addition is nothing more than a shorthand for writing simple functions, giving the language something similar to a typical <a class="external" href="http://en.wikipedia.org/wiki/Lambda_calculus#Lambda_calculus_and_programming_languages">Lambda notation</a>.</p> - -<p>JavaScript 1.7 and older:</p> - -<pre class="brush: js">function(x) { return x * x; }</pre> - -<p>JavaScript 1.8:</p> - -<pre class="brush: js">function(x) x * x</pre> - -<p>This syntax allows you to leave off the braces and 'return' statement - making them implicit. There is no added benefit to writing code in this manner, other than having it be syntactically shorter.</p> - -<p><strong>Examples:</strong></p> - -<p>A shorthand for binding event listeners:</p> - -<pre class="brush: js"> document.addEventListener("click", function() false, true); -</pre> - -<p>Using this notation with some of the array functions from JavaScript 1.6:</p> - -<pre class="brush: js">elems.some(function(elem) elem.type == "text");</pre> diff --git a/files/id/web/javascript/panduan/index.html b/files/id/web/javascript/panduan/index.html deleted file mode 100644 index 491d4a4a84..0000000000 --- a/files/id/web/javascript/panduan/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: Panduan JavaScript -slug: Web/JavaScript/Panduan -translation_of: Web/JavaScript/Guide ---- -<div>{{jsSidebar("JavaScript Guide")}}</div> - -<p class="summary">Pedoman javasript memberi tahu bagaimana menggunakan <a href="/id/docs/Web/JavaScript">JavaScript</a> dan memberikan penjelasan tentang bahasa javascript. Jika anda ingin memulai javascript atau programming secara umum, konsultasikan artikel di <a href="/id/Learn">Area pembelajaran</a>. Jika anda membutuhkan informasi lengkap tentang fitur silakan lihat <a href="/id/docs/Web/JavaScript/Reference">Referensi javaScript</a>.</p> - -<h2 id="Bagian">Bagian</h2> - -<p>Pedoman ini dibagi menjadi beberapa bagian:</p> - -<ul class="card-grid"> - <li><span><a href="/id/docs/Web/JavaScript/Guide/Introduction">Introduction</a></span> - - <p><a href="/id/docs/Web/JavaScript/Guide/Introduction#Where_to_find_JavaScript_information">About this guide</a><br> - <a href="/id/docs/Web/JavaScript/Guide/Introduction#What_is_JavaScript">About JavaScript</a><br> - <a href="/id/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_Java">JavaScript and Java</a><br> - <a href="/id/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_the_ECMAScript_Specification">ECMAScript</a><br> - <a href="/id/docs/Web/JavaScript/Guide/Introduction#Getting_started_with_JavaScript">Tools</a><br> - <a href="/id/docs/Web/JavaScript/Guide/Introduction#Hello_world">Hello World</a></p> - </li> - <li><span><a href="/id/docs/Web/JavaScript/Guide/Grammar_and_types">Grammar and types</a></span> - <p><a href="/id/docs/Web/JavaScript/Guide/Grammar_and_types#Basics">Basic syntax & comments</a><br> - <a href="/id/docs/Web/JavaScript/Guide/Grammar_and_types#Declarations">Declarations</a><br> - <a href="/id/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_scope">Variable scope</a><br> - <a href="/id/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_hoisting">Variable hoisting</a><br> - <a href="/id/docs/Web/JavaScript/Guide/Grammar_and_types#Data_structures_and_types">Data structures and types</a><br> - <a href="/id/docs/Web/JavaScript/Guide/Grammar_and_types#Literals">Literals</a></p> - </li> - <li><span><a href="/id/docs/Web/JavaScript/Guide/Control_flow_and_error_handling">Control flow and error handling</a></span> - <p><code><a href="/id/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#if...else_statement">if...else</a></code><br> - <code><a href="/id/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#switch_statement">switch</a></code><br> - <a href="/id/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Exception_handling_statements"><code>try</code>/<code>catch</code>/<code>throw</code></a><br> - <a href="/id/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Utilizing_Error_objects">Error objects</a><br> - <a href="/id/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Promises">Promises</a></p> - </li> - <li><span><a href="/id/docs/Web/JavaScript/Guide/Loops_and_iteration">Loops and iteration</a></span> - <p><code><a href="/id/docs/Web/JavaScript/Guide/Loops_and_iteration#for_statement">for</a><br> - <a href="/id/docs/Web/JavaScript/Guide/Loops_and_iteration#while_statement">while</a><br> - <a href="/id/docs/Web/JavaScript/Guide/Loops_and_iteration#do...while_statement">do...while</a><br> - <a href="/id/docs/Web/JavaScript/Guide/Loops_and_iteration#break_statement">break</a>/<a href="/id/docs/Web/JavaScript/Guide/Loops_and_iteration#continue_statement">continue</a><br> - <a href="/id/docs/Web/JavaScript/Guide/Loops_and_iteration#for...in_statement">for..in</a><br> - <a href="/id/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement">for..of</a></code></p> - </li> -</ul> - -<ul class="card-grid"> - <li><span><a href="/id/docs/Web/JavaScript/Guide/Functions">Functions</a></span> - - <p><a href="/id/docs/Web/JavaScript/Guide/Functions#Defining_functions">Defining functions</a><br> - <a href="/id/docs/Web/JavaScript/Guide/Functions#Calling_functions">Calling functions</a><br> - <a href="/id/docs/Web/JavaScript/Guide/Functions#Function_scope">Function scope</a><br> - <a href="/id/docs/Web/JavaScript/Guide/Functions#Closures">Closures</a><br> - <a href="/id/docs/Web/JavaScript/Guide/Functions#Using_the_arguments_object">Arguments</a> & <a href="/id/docs/Web/JavaScript/Guide/Functions#Function_parameters">parameters</a><br> - <a href="/id/docs/Web/JavaScript/Guide/Functions#Arrow_functions">Arrow functions</a></p> - </li> - <li><span><a href="/id/docs/Web/JavaScript/Guide/Expressions_and_Operators">Expressions and operators</a></span> - <p><a href="/id/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment_operators">Assignment</a> & <a href="/id/docs/Web/JavaScript/Guide/Expressions_and_Operators#Comparison_operators">Comparisons</a><br> - <a href="/id/docs/Web/JavaScript/Guide/Expressions_and_Operators#Arithmetic_operators">Arithmetic operators</a><br> - <a href="/id/docs/Web/JavaScript/Guide/Expressions_and_Operators#Bitwise_operators">Bitwise</a> & <a href="/id/docs/Web/JavaScript/Guide/Expressions_and_Operators#Logical_operators">logical operators</a><br> - <a href="/id/docs/Web/JavaScript/Guide/Expressions_and_Operators#Conditional_(ternary)_operator">Conditional (ternary) operator</a></p> - </li> - <li><span><a href="/id/docs/Web/JavaScript/Guide/Numbers_and_dates">Numbers and dates</a></span><a href="/id/docs/Web/JavaScript/Guide/Numbers_and_dates#Numbers"> Number literals</a> - <p><a href="/id/docs/Web/JavaScript/Guide/Numbers_and_dates#Number_object"><code>Number</code> object</a><br> - <a href="/id/docs/Web/JavaScript/Guide/Numbers_and_dates#Math_object"><code>Math</code> object</a><br> - <a href="/id/docs/Web/JavaScript/Guide/Numbers_and_dates#Date_object"><code>Date</code> object</a></p> - </li> - <li><span><a href="/id/docs/Web/JavaScript/Guide/Text_formatting">Text formatting</a></span> - <p><a href="/id/docs/Web/JavaScript/Guide/Text_formatting#String_literals">String literals</a><br> - <a href="/id/docs/Web/JavaScript/Guide/Text_formatting#String_objects"><code>String</code> object</a><br> - <a href="/id/docs/Web/JavaScript/Guide/Text_formatting#Multi-line_template_literals">Template literals</a><br> - <a href="/id/docs/Web/JavaScript/Guide/Text_formatting#Internationalization">Internationalization</a><br> - <a href="/id/docs/Web/JavaScript/Guide/Regular_Expressions">Regular Expressions</a></p> - </li> -</ul> - -<ul class="card-grid"> - <li><span><a href="/id/docs/Web/JavaScript/Guide/Indexed_collections">Indexed collections</a></span> - - <p><a href="/id/docs/Web/JavaScript/Guide/Indexed_collections#Array_object">Arrays</a><br> - <a href="/id/docs/Web/JavaScript/Guide/Indexed_collections#Typed_Arrays">Typed arrays</a></p> - </li> - <li><span><a href="/id/docs/Web/JavaScript/Guide/Keyed_collections">Keyed collections</a></span> - <p><code><a href="/id/docs/Web/JavaScript/Guide/Keyed_collections#Map_object">Map</a></code><br> - <code><a href="/id/docs/Web/JavaScript/Guide/Keyed_collections#WeakMap_object">WeakMap</a></code><br> - <code><a href="/id/docs/Web/JavaScript/Guide/Keyed_collections#Set_object">Set</a></code><br> - <code><a href="/id/docs/Web/JavaScript/Guide/Keyed_collections#WeakSet_object">WeakSet</a></code></p> - </li> - <li><span><a href="/id/docs/Web/JavaScript/Guide/Working_with_Objects">Working with objects</a></span> - <p><a href="/id/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties">Objects and properties</a><br> - <a href="/id/docs/Web/JavaScript/Guide/Working_with_Objects#Creating_new_objects">Creating objects</a><br> - <a href="/id/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_methods">Defining methods</a><br> - <a href="/id/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">Getter and setter</a></p> - </li> - <li><span><a href="/id/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Details of the object model</a></span> - <p><a href="/id/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Class-based_vs._prototype-based_languages">Prototype-based OOP</a><br> - <a href="/id/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Creating_the_hierarchy">Creating object hierarchies</a><br> - <a href="/id/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Property_inheritance_revisited">Inheritance</a></p> - </li> -</ul> - -<ul class="card-grid"> - <li><span><a href="/id/docs/Web/JavaScript/Guide/Iterators_and_Generators">Iterators and generators</a></span> - - <p><a href="/id/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterators">Iterators</a><br> - <a href="/id/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterables">Iterables</a><br> - <a href="/id/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generators">Generators</a></p> - </li> - <li><span><a href="/id/docs/Web/JavaScript/Guide/Meta_programming">Meta programming</a></span> - <p><code><a href="/id/docs/Web/JavaScript/Guide/Meta_programming#Proxies">Proxy</a></code><br> - <a href="/id/docs/Web/JavaScript/Guide/Meta_programming#Handlers_and_traps">Handlers and traps</a><br> - <a href="/id/docs/Web/JavaScript/Guide/Meta_programming#Revocable_Proxy">Revocable Proxy</a><br> - <code><a href="/id/docs/Web/JavaScript/Guide/Meta_programming#Reflection">Reflect</a></code></p> - </li> -</ul> - -<p>{{Next("Web/JavaScript/Guide/Introduction")}}</p> diff --git a/files/id/web/javascript/panduan/loops_and_iteration/index.html b/files/id/web/javascript/panduan/loops_and_iteration/index.html deleted file mode 100644 index 7fbb416c43..0000000000 --- a/files/id/web/javascript/panduan/loops_and_iteration/index.html +++ /dev/null @@ -1,330 +0,0 @@ ---- -title: Loops and iteration -slug: Web/JavaScript/Panduan/Loops_and_iteration -translation_of: Web/JavaScript/Guide/Loops_and_iteration ---- -<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</div> - -<p class="summary"><span id="result_box" lang="id"><span>Loop menawarkan cara cepat dan mudah untuk melakukan sesuatu secara berulang-ulang.</span> <span>Bab tentang <a href="/id/docs/Web/JavaScript/Guide">Panduan JavaScript</a> ini memperkenalkan berbagai pernyataan iterasi</span></span><span lang="id"><span> berbeda yang tersedia untuk JavaScript.</span></span></p> - -<p><span id="result_box" lang="id"><span>Anda dapat menganggap <em>loop</em> sebagai versi permainan terkomputerisasi di mana Anda menyuruh seseorang untuk mengambil langkah X menuju satu arah lalu langkah Y ke arah yang lain;</span> <span>Sebagai contoh, gagasan "Pergilah lima langkah ke timur" dapat di ekspresikan dengan cara berikut sebagai sebuah loop (pengulangan):</span></span></p> - -<pre class="brush: js">var langkah; -for (langkah= 0; langkah< 5; langkah++) { - // berlari 5 kali, dengan nilai langkah 0 sampai 4. - console.log('<span class="short_text" id="result_box" lang="id"><span>Berjalan ke timur satu langkah</span></span>'); -} -</pre> - -<p><span id="result_box" lang="id"><span>Ada beberapa jenis loop yang berbeda, namun pada dasarnya semuanya melakukan hal yang sama, mereka mengulangi sebuah aksi beberapa kali (dan sebenarnya memungkinkan bahwa dapat saja menjadi nol).</span> <span>Berbagai mekanisme loop menawarkan berbagai cara untuk menentukan titik awal dan akhir perulangan.</span> <span>Ada berbagai situasi yang lebih mudah dikerjakan oleh sebuah tipe loop dibandingkan tipe (loop) yang lain.</span></span></p> - -<p><span id="result_box" lang="id"><span>Pernyataan untuk loop yang disediakan dalam JavaScript adalah:</span></span></p> - -<ul> - <li>{{anch("for statement")}}</li> - <li>{{anch("do...while statement")}}</li> - <li>{{anch("while statement")}}</li> - <li>{{anch("labeled statement")}}</li> - <li>{{anch("break statement")}}</li> - <li>{{anch("continue statement")}}</li> - <li>{{anch("for...in statement")}}</li> - <li>{{anch("for...of statement")}}</li> -</ul> - -<h2 id="for_statement"><code>for</code> statement</h2> - -<p>Sebuah {{jsxref("statements/for","for loop")}} <span id="result_box" lang="id"><span>mengulang hingga kondisi yang ditentukan evaluasinya menjadi salah/false.</span> <span><code> for</code> loop pada Javascript serupa dengan <code> for </code>loop pada Java dan C</span></span><span lang="id"><span>.</span> <span>Sebuah statement (pernyataan) <code>for </code> terlihat sebagai berikut:</span></span></p> - -<pre class="syntaxbox">for ([initialExpression]; [condition]; -[incrementExpression]) statement -</pre> - -<p>Ketika sebuah <code>for</code> loop dieksekusi, <span class="short_text" id="result_box" lang="id"><span>Berikut ini akan terjadi:</span></span></p> - -<ol> - <li><span class="short_text" id="result_box" lang="id"><span>Ekspresi yang menginisialisasi yaitu</span></span> <code>initialExpression</code>, <span id="result_box" lang="id"><span>Jika ada, maka akan di eksekusi</span>. <span>Ekspresi ini biasanya menginisialisasi satu atau lebih penghitung loop, tetapi sintaksnya memperbolehkan ekspresi dengan tingkat kerumitan apapun.</span> <span>Ekspresi ini juga bisa mendeklarasikan variabel.</span></span></li> - <li>Ekpresi <code>condition</code> di evaluasi. JIka <em>value</em> dari kondisi adalah true (benar), maka statement loop akan dieksekusi. Jika value dari <code>condition</code> false (salah), <code>for</code> loop akan dihentikan. <span id="result_box" lang="id"><span>Jika ekspresi <code>condition </code>dihilangkan sama sekali, kondisinya diasumsikan benar.</span></span></li> - <li>Mengeksekusi <code>Statement</code> . <span id="result_box" lang="id"><span>Untuk mengeksekusi berbagai pernyataan, gunakanlah sebuah blok pernyataan</span></span> (<code>{ ... }</code>) <span class="short_text" id="result_box" lang="id"><span>untuk mengelompokkan pernyataan-pernyataan tersebut</span></span>.</li> - <li>Jika ada, ekspresi baru<code> incrementExpression</code> di eksekusi<span id="result_box" lang="id"><span>.</span></span></li> - <li>Kontrol kembali ke langkah ke-2.</li> -</ol> - -<h3 id="Contoh"><strong>Contoh</strong></h3> - -<p><em>function</em> (fungsi) berikut memuat sebuah statement <code>for</code> yang menghitung angka dari opsi yang terpilih dalam sebuah daftar <em>scrolling</em> (sebuah elemen {{HTMLElement("select")}} yang memperbolehkan berbagai pilihan). Statement<code> for</code> mendeklarasikan variable <code>i</code> dan menginisialisasinya ke nol. Ia memeriksa bahwa<code> i</code> lebih kecil dari nomor dari opsi dalam elemen<code> <select></code> , menampilkan statement <code>if</code> yang berhasil, dan menaikan <code>i</code> satu setelah masing-masing lolos melewati loop.</p> - -<pre class="brush: html"><form name="selectForm"> - <p> - <label for="musicTypes">Choose some music types, then click the button below:</label> - <select id="musicTypes" name="musicTypes" multiple="multiple"> - <option selected="selected">R&B</option> - <option>Jazz</option> - <option>Blues</option> - <option>New Age</option> - <option>Classical</option> - <option>Opera</option> - </select> - </p> - <p><input id="btn" type="button" value="How many are selected?" /></p> -</form> - -<script> -function howMany(selectObject) { - var numberSelected = 0; - for (var i = 0; i < selectObject.options.length; i++) { - if (selectObject.options[i].selected) { - numberSelected++; - } - } - return numberSelected; -} - -var btn = document.getElementById('btn'); -btn.addEventListener('click', function() { - alert('Number of options selected: ' + howMany(document.selectForm.musicTypes)); -}); -</script> - -</pre> - -<h2 id="do...while_statement"><code>do...while</code> statement</h2> - -<p>Pernyataan/statement {{jsxref("statements/do...while", "do...while")}} terus di ulangi sampai evaluasi kondisi bernilai false/salah. Sebuah <code>do...while</code> statement terlihat sebagai berikut:</p> - -<pre class="syntaxbox">do - statement -while (condition); -</pre> - -<p><code>statement</code> di jalankan lebih dulu sebelum kondisi diperiksa. Untuk menjalankan banyak statements, gunakan statement blok (<code>{ ... }</code>) untuk membuat grup dari statement tersebut. Jika <code>condition</code> bernilai benar, maka statement akan dijalankan kembali. Kondisi diperiksa pada setiap akhir eksekusi. Ketika kondisi bernilai salah, eksekusi berhenti dan kontrol akan melewati pernyataan yang mengikuti <code>do...while</code>.</p> - -<h3 id="Contoh_2"><strong>Contoh</strong></h3> - -<p>Dalam contoh berikut, perulangan <code>do</code> di iterasi sekali dan di iterasi kembali sampai i tidak lagi kurang dari 5. </p> - -<pre class="brush: js">var i = 0; -do { - i += 1; - console.log(i); -} while (i < 5);</pre> - -<h2 id="while_statement"><code>while</code> statement</h2> - -<p>Sebuah statement {{jsxref("statements/while","while")}} di eksekusi pernyataan pernyataannya asalkan memenuhi syarat kondisinya yang bernilai true/benar. Sebuah statement <code>while</code> terlihat sebagai berikut:</p> - -<pre class="syntaxbox">while (condition) - statement -</pre> - -<p>Jika kondisi bernilai false/salah, <code>statement</code> dengan perulangan berhenti di eksekusi dan kontrol akan melewati statement yang mengikuti perulangan tersebut.</p> - -<p>Kondisi terjadi sebelum <code>statement</code> dalam perulangan di eksekusi. Jika kondisi bernilai true/benar, <code>statement</code> di eksekusi dan kondisi di uji kembali. Jika kondisi bernilai false/salah, eksekusi akan berhenti dan konrol lewat untuk statement yang mengikuti <code>while</code>.</p> - -<p>Untuk mengeksekusi banyak statement, gunakan blok statement ({ ... }) untuk mengelompokan banyak statement tersebut.</p> - -<h3 id="Contoh_1"><strong>Contoh 1</strong></h3> - -<p>Beikut perulangan <code>while</code> mengiterasi <code>n</code> selama n kurang dari tiga:</p> - -<pre class="brush: js">var n = 0; -var x = 0; -while (n < 3) { - n++; - x += n; -} -</pre> - -<p>Dengan setiap iterasi, perulangan akan menambahkan increments <code>n</code> dan menambahkan nilainya pada <code>x</code>. Karena itu, <code>x</code> dan <code>n</code> mengambil nilai nilai berikut:</p> - -<ul> - <li>Setelah lewat awal: <code>n</code> = 1 dan <code>x</code> = 1</li> - <li>Setelah lewat kedua: <code>n</code> = 2 dan <code>x</code> = 3</li> - <li>Setelah lewat ketiga: <code>n</code> = 3 dan <code>x</code> = 6</li> -</ul> - -<p>Setelah melewati perulangan yang ketiga , kondisinya <code>n < 3</code> tidak lagi bernilai true/benar, jadi perulangan di hentikan.</p> - -<h3 id="Contoh_2_2"><strong>Contoh 2</strong></h3> - -<p>Hindari perulangan tanpa batas. Pastikan kondisi dalam perulangan mendapatkan kondisi yang bernilai false/salah untuk berhenti, jika tidak perulangan tidak akan pernah berhenti. Statements dalam <code>while</code> berikut di eksekusi berulang kali selamanya karena kondisi tidak pernah mendapatkan nilai false/salah:</p> - -<pre class="brush: js">while (true) { - console.log('Hello, world!'); -}</pre> - -<h2 id="labeled_statement"><code>labeled</code> statement</h2> - -<p>Sebuah {{jsxref("statements/label","label")}} menyediakan sebuah statement dengan pengenal yang memungkinkan Anda merujuknya di tempat lain dalam program Kamu. Untuk contohnya, Kamu dapat menggunakan label untuk mengidentifikasi pengulangan, lalu gunakan statement <code>break</code> atau <code>continue</code> untuk menunjukkan apakah suatu program harus memutuskan loop atau melanjutkan eksekusinya.</p> - -<p>Sintak dari statement berlabel terlihat seperti berikut:</p> - -<pre class="syntaxbox">label : - statement -</pre> - -<p>Nilai dai sebuah <code><em>label</em></code> dapat berupa identifikasi JavaScript apa pun yang tidak dari kata kunci yang ada pada javascript. <code><em>statement</em></code><br> - yang Kamu identifikasi dengan label tersebut dapat berupa statement apa pun.</p> - -<h3 id="Contoh_3"><strong>Contoh</strong></h3> - -<p>Pada contoh ini, label <code>markLoop</code> mengidentifikasi sebuah perulangan <code>while</code>.</p> - -<pre class="brush: js">markLoop: -while (theMark == true) { - doSomething(); -}</pre> - -<h2 id="break_statement"><code>break</code> statement</h2> - -<p>Gunakan {{jsxref("statements/break","break")}} statement untuk menghentikan perulangan, <code>switch</code>, atau konjungsi dengan statement yang memakai label.</p> - -<ul> - <li>Ketika kamu menggunakan <code>break</code> tanpa sebuah label, Itu akan langsung mengakhiri lampiran yang ada didalam <code>while</code>, <code>do-while</code>, <code>for</code>, atau <code>switch</code> dengan segera dan kontrol pindah dari statement tersebut.</li> - <li>Ketika kamu menggunakan <code>break</code> pada sebuah label, Itu akan mengakhiri statement dari spesifik label.</li> -</ul> - -<p>Sintak dari statement <code>break</code> terlihat seperti ini:</p> - -<pre class="syntaxbox">break [<em>label</em>]; -</pre> - -<p>Bentuk pertama sintak mengakhiri perulangan atau <code>switch</code>; Bentuk kedua sintak mengakhiri statement dari spesifik label.</p> - -<h3 id="Contoh_1_2"><strong>Contoh</strong> <strong>1</strong></h3> - -<p>Contoh berikut mengiterasi melewati elemen-elemen dalam array sampai menemukan indeks elemen yang bernilai dari <code>theValue</code>:</p> - -<pre class="brush: js">for (var i = 0; i < a.length; i++) { - if (a[i] == theValue) { - break; - } -}</pre> - -<h3 id="Contoh_2_Breaking_pada_sebuah_label"><strong>Contoh 2: </strong>Breaking pada sebuah label</h3> - -<pre class="brush: js">var x = 0; -var z = 0; -labelCancelLoops: while (true) { - console.log('Outer loops: ' + x); - x += 1; - z = 1; - while (true) { - console.log('Inner loops: ' + z); - z += 1; - if (z === 10 && x === 10) { - break labelCancelLoops; - } else if (z === 10) { - break; - } - } -} -</pre> - -<h2 id="continue_statement"><code>continue</code> statement</h2> - -<p>Statement {{jsxref("statements/continue","continue")}} bisa digunakan untuk memulai lagi statement <code>while</code>, <code>do-while</code>, <code>for</code>, atau <code>label</code>.</p> - -<ul> - <li>Ketika kamu menggunakan <code>continue</code> tanpa sebuah label, itu akan menghentikan iterasi saat ini dari statement <code>while</code>, <code>do-while</code>, atau <code>for</code> dan melanjutkan eksekusi dari perulangan iterasi selanjutnya. Berbeda dengan statement <code>break</code>, <code>continue</code> tidak mengakhiri eksekusi dari perulangan sepenuhnya. Pada sebuah perulangan <code>while</code>, dia lompat kembali pada kondisinya. Pada sebuah perulangan <code>for</code>, Dia melompat ke ekpresi penambahan ke <code>increment-expression</code>.</li> - <li>Ketika kamu menggunakan <code>continue</code> dengan sebuah label, itu berlaku untuk pernyataan perulangan yang diidentifikasi dengan label tersebut.</li> -</ul> - -<p>Sintak statement <code>continue</code> terlihat sebagai berikut:</p> - -<pre class="syntaxbox">continue [<em>label</em>]; -</pre> - -<h3 id="Contoh_1_3"><strong>Contoh 1</strong></h3> - -<p>Contoh berikut menunjukkan sebuah perulangan <code>while</code> dengan sebuah statement <code>continue</code> yang di eksekusi ketika niai dari <code>i</code> adalah tiga Jadi, <code>n</code> mengambil nilai satu, tiga, tujuh dan dua belas.</p> - -<pre class="brush: js">var i = 0; -var n = 0; -while (i < 5) { - i++; - if (i == 3) { - continue; - } - n += i; -} -</pre> - -<h3 id="Contoh_2_3"><strong>Contoh 2</strong></h3> - -<p>Sebuah statement yang berlabel <code>checkiandj</code> berisikan sebuah statement berlabel <code>checkj</code>. Jika ada <code>continue</code> , Programnya akan menghentikan iterasi saat ini dari <code>checkj</code> dan memulai iterasi selanjutnya. Setiap kali <code>continue</code> ditemui, <code>checkj</code> di iterasi kembali sampai kondisinya bernilai <code>false</code>/salah. Ketika bernilai <code>false</code>/salah, Sisa dari statement <code>checkiandj</code> sudah selesai, dan <code>checkiandj</code> di iterasi kembali sampai kondisi bernilai salah <code>false</code>. Ketika bernilai salah <code>false</code> , program melanjutkan pada statement yang mengikuti <code>checkiandj</code>.</p> - -<p>JIka <code>continue</code> dipunyai label dari <code>checkiandj</code>, program akan terus berlanjut ke bagian atas dari statement <code>checkiandj</code> .</p> - -<pre class="brush: js">checkiandj: - while (i < 4) { - console.log(i); - i += 1; - checkj: - while (j > 4) { - console.log(j); - j -= 1; - if ((j % 2) == 0) { - continue checkj; - } - console.log(j + ' is odd.'); - } - console.log('i = ' + i); - console.log('j = ' + j); - }</pre> - -<h2 id="for...in_statement"><code>for...in</code> statement</h2> - -<p>Statement {{jsxref("statements/for...in","for...in")}} mengiterasi sebuah variabel spesifik diatas properti enumerable dari sebuah objek. Untuk setiap properti yang berbeda, JavaScript mengeksekusi pernyataan pernyataan yang spesifik. Sebuah statement <code>for...in</code> terlihat sebagai berikut:</p> - -<pre class="syntaxbox">for (variable in object) { - statements -} -</pre> - -<h3 id="Contoh_4"><strong>Contoh</strong></h3> - -<p>Function/fungsi berikut mengambil argumentnya dari sebuah objek dan nama objek. Lalu dia di iterasi diatas semua property objek dan mengembalikan sebuah string yang mendaftarkan nama properti dan nilainya.</p> - -<pre class="brush: js">function dump_props(obj, obj_name) { - var result = ''; - for (var i in obj) { - result += obj_name + '.' + i + ' = ' + obj[i] + '<br>'; - } - result += '<hr>'; - return result; -} -</pre> - -<p>Untuk sebuah objek <code>car</code> dengan property <code>make</code> dan <code>model</code>, <code>result/hasil</code> akan menjadi:</p> - -<pre class="brush: js">car.make = Ford -car.model = Mustang -</pre> - -<h3 id="Arrays"><strong>Arrays</strong></h3> - -<p>Meskipun mungkin menggunakan ini sebagai cara untuk melakukan iterasi di atas elemen {{jsxref("Array")}},statement <strong>for...in</strong> akan mengembalikan nilai nama property yang di tetapkan pengguna dalam penambahan numerik indek. Jadi lebih baik menggunakan tradisional perulangan {{jsxref("statements/for","for")}} dengan sebuah numerik indek ketika mengiterasi diatas array, karena statement <strong>for...in</strong> mengiterasi diatas nama properti yang di tetapkan pengguna pada penambahan elemen array, Jika kamu merubah array, seperti menambahkan properti atau metode. </p> - -<h2 id="for...of_statement"><code>for...of</code> statement</h2> - -<p>Statement {{jsxref("statements/for...of","for...of")}} membuat sebuah iterasi perulangan diatas <a href="/en-US/docs/Web/JavaScript/Guide/iterable">iterable objects</a> (termasuk {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("functions/arguments","arguments")}} object dan seterusnya), menjalankan hubungan iterasi khusus dengan statement yang akan dieksekusi untuk setiap nilai properti yang berbeda.</p> - -<pre class="syntaxbox">for (<em>variable</em> of <em>object</em>) { - <em>statement -</em>}</pre> - -<p>Contoh berikut menampilkan perbedaan diantara sebuah perulangan <code>for...of</code> dan sebuah perulangan {{jsxref("statements/for...in","for...in")}}. Ketika <code>for...in</code> mengiterasi diatas nama-nama properti, <code>for...of</code> mengiterasi diatas nilai-nilai properti:</p> - -<pre class="brush:js">let arr = [3, 5, 7]; -arr.foo = 'hello'; - -for (let i in arr) { - console.log(i); // logs "0", "1", "2", "foo" -} - -for (let i of arr) { - console.log(i); // logs 3, 5, 7 -} -</pre> - -<p>{{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</p> diff --git a/files/id/web/javascript/panduan/numbers_and_dates/index.html b/files/id/web/javascript/panduan/numbers_and_dates/index.html deleted file mode 100644 index e9681b2adf..0000000000 --- a/files/id/web/javascript/panduan/numbers_and_dates/index.html +++ /dev/null @@ -1,376 +0,0 @@ ---- -title: Numbers and dates -slug: Web/JavaScript/Panduan/Numbers_and_dates -translation_of: Web/JavaScript/Guide/Numbers_and_dates ---- -<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Expressions_and_Operators", "Web/JavaScript/Guide/Text_formatting")}}</div> - -<p class="summary">Pada Bab ini memperkenalkan cara menggunakan angka dan tanggal pada JavaScript.</p> - -<h2 id="Angka">Angka</h2> - -<p>Pada JavaScript, semua angka diimplementasikan kedalam <a class="external external-icon" href="https://en.wikipedia.org/wiki/Double-precision_floating-point_format">double-precision 64-bit binary format IEEE 754</a> (mis. angka antara -(2<sup>53</sup> -1) dan 2<sup>53</sup> -1). <strong>Tidak ada jenis spesifik untuk integer</strong>. Selain bisa mewakili angka float, tipe data angka memiliki 3 nilai secara simbolik: <code>+</code>{{jsxref("Infinity")}}, <code>-</code>{{jsxref("Infinity")}}, dan {{jsxref("NaN")}} (bukan sebuah angka). Lihat juga <a href="/en-US/docs/Web/JavaScript/Data_structures">JavaScript tipe data dan struktur</a> untuk konteks dengan tipe data primitif JavaScript yang lain.</p> - -<p>Anda dapat menggunakan empat tipe angka literal: desimal, biner, oktal, dan heksadesimal.</p> - -<h3 id="Angka_Desimal">Angka Desimal</h3> - -<pre class="brush: js">1234567890 -42 - -// Perhatikan ketika menggunakan angka berawalan nol: - -0888 // 888 diubah menjadi desimal -0777 // diubah menjadi oktal pada non-strict mode (511 in decimal) -</pre> - -<p>Perhatikan bahwa desimal literal dapat dimulai dari nol(0) diikuti angka desimal yang lain, namun jika setiap angka setelah 0 lebih kecil dari 8, angkanya diubah menjadi oktal.</p> - -<h3 id="Angka_Biner">Angka Biner</h3> - -<p>Sintaks angka biner menggunakan angka nol diikuti dengan huruf kecil atau dengan huruf besar, huruf Latin "B" (<code>0b</code> atau <code>0B</code>). Jika digit setelah <code>0b</code> atau bukan 0 atau 1, menurut <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></code> yang dilemparkan: "Missing binary digits after 0b".</p> - -<pre class="brush: js">var FLT_SIGNBIT = 0b10000000000000000000000000000000; // 2147483648 -var FLT_EXPONENT = 0b01111111100000000000000000000000; // 2139095040 -var FLT_MANTISSA = 0B00000000011111111111111111111111; // 8388607</pre> - -<h3 id="Angka_oktal">Angka oktal</h3> - -<p>Angka oktal menggunakan awalan angka nol. Jika digit setelah <code>0</code> berada diluar jangkauan 0 hinga 7, angka akan diintrepretasikan sebagai angka desimal.</p> - -<pre class="brush: js">var n = 0755; // 493 -var m = 0644; // 420 -</pre> - -<p>Mode ketat pada ECMAScript 5 melarang sintaks oktal. Oktal sintaks bukan bagian dari ECMAScript 5, namun didukung oleh semua peramban dengan cara awalan nomor oktal dengan angka nol: <code>0644 === 420</code> dan <code>"\045" === "%"</code>. Pada ECMAScript 2015, angka oktal didukung jika diawali dengan <code>0o</code>, e.g.: </p> - -<pre class="brush: js">var a = 0o10; // ES2015: 8 -</pre> - -<h3 id="Angka_Heksadesimal">Angka Heksadesimal</h3> - -<p>Sintaks heksadesimal menggunakan awalan nol diikuti dengan huruf kecil atau huruf kapital Latin "X" (<code>0x</code> atau <code>0X)</code>. Jika digit setelah 0x berada diluar jangkauan (0123456789ABCDEF), menurut <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></code> yang dilemparkan: "Identifier starts immediately after numeric literal".</p> - -<pre class="brush: js">0xFFFFFFFFFFFFFFFFF // 295147905179352830000 -0x123456789ABCDEF // 81985529216486900 -0XA // 10 -</pre> - -<h3 id="Eksponensial">Eksponensial</h3> - -<pre class="brush: js">1E3 // 1000 -2e6 // 2000000 -0.1e2 // 10</pre> - -<h2 id="Angka_object"><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">Angka</span></font> object</h2> - -<p>The built-in {{jsxref("Number")}} objek memiliki properti untuk numerik konstanta, seperti nilai maksimal, bukan-sebuah-angka, dan tak terhingga. Anda tidak dapat mengganti nilai dari properti tersebut dan anda dapat menggunakannya sebagai berikut:</p> - -<pre class="brush: js">var biggestNum = Number.MAX_VALUE; -var smallestNum = Number.MIN_VALUE; -var infiniteNum = Number.POSITIVE_INFINITY; -var negInfiniteNum = Number.NEGATIVE_INFINITY; -var notANum = Number.NaN; -</pre> - -<p>Anda selalu mengacu pada properti dari objek angka yang telah ditentukan seperti yang ditunjukkan diatas, dan bukan sebagai properti objek angka yang anda tentukan.</p> - -<p>Tabel berikut meringkas sifat-sifat nomor object.</p> - -<table class="standard-table"> - <caption>Properties of <code>Number</code></caption> - <thead> - <tr> - <th scope="col">Properti</th> - <th scope="col">Deskripsi</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{jsxref("Number.MAX_VALUE")}}</td> - <td>Merepresantikan angka maksimal / terbesar</td> - </tr> - <tr> - <td>{{jsxref("Number.MIN_VALUE")}}</td> - <td>Merepresantikan angka minimal / terkecil</td> - </tr> - <tr> - <td>{{jsxref("Number.NaN")}}</td> - <td>Nilai spesial "bukan sebuah angka"</td> - </tr> - <tr> - <td>{{jsxref("Number.NEGATIVE_INFINITY")}}</td> - <td>Nilai spesial negatif tak terhingga; dikembalikan pada overflow</td> - </tr> - <tr> - <td>{{jsxref("Number.POSITIVE_INFINITY")}}</td> - <td>Nilai spesial positif tak terhingga; dikembalikan pada overflow</td> - </tr> - <tr> - <td>{{jsxref("Number.EPSILON")}}</td> - <td>Perbedaan antara satu dan nilai terkecil lebih besar dari satu yang dapat direpresentasikan sebagai {{jsxref("Number")}}.</td> - </tr> - <tr> - <td>{{jsxref("Number.MIN_SAFE_INTEGER")}}</td> - <td>Bilangan bulat aman minimum dalam JavaScript.</td> - </tr> - <tr> - <td>{{jsxref("Number.MAX_SAFE_INTEGER")}}</td> - <td>Bilangan bulat aman maksimum dalam JavaScript.</td> - </tr> - </tbody> -</table> - -<table class="standard-table"> - <caption>Methods of <code>Number</code></caption> - <thead> - <tr> - <th>Method</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{jsxref("Number.parseFloat()")}}</td> - <td>Parses a string argument and returns a floating point number.<br> - Same as the global {{jsxref("parseFloat", "parseFloat()")}} function.</td> - </tr> - <tr> - <td>{{jsxref("Number.parseInt()")}}</td> - <td>Parses a string argument and returns an integer of the specified radix or base.<br> - Same as the global {{jsxref("parseInt", "parseInt()")}} function.</td> - </tr> - <tr> - <td>{{jsxref("Number.isFinite()")}}</td> - <td>Determines whether the passed value is a finite number.</td> - </tr> - <tr> - <td>{{jsxref("Number.isInteger()")}}</td> - <td>Determines whether the passed value is an integer.</td> - </tr> - <tr> - <td>{{jsxref("Number.isNaN()")}}</td> - <td>Determines whether the passed value is {{jsxref("Global_Objects/NaN", "NaN")}}. More robust version of the original global {{jsxref("Global_Objects/isNaN", "isNaN()")}}.</td> - </tr> - <tr> - <td>{{jsxref("Number.isSafeInteger()")}}</td> - <td>Determines whether the provided value is a number that is a <dfn>safe integer</dfn>.</td> - </tr> - </tbody> -</table> - -<p>Prototipe Angka menyediakan metode-metode untuk menampilkan informasi dari objek angka dalam format bervariasi. Tabel berikut meringkas metode-metode prototipe angka.</p> - -<table class="standard-table"> - <caption>Methods of <code>Number.prototype</code></caption> - <thead> - <tr> - <th scope="col">Method</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{jsxref("Number.toExponential", "toExponential()")}}</td> - <td>Mengembalikan string yang merepresentasikan nomor dalam notasi eksponensial.</td> - </tr> - <tr> - <td>{{jsxref("Number.toFixed", "toFixed()")}}</td> - <td>Mengembalikan string yang merepresentasikan nomor dalam notasi fixed-point.</td> - </tr> - <tr> - <td>{{jsxref("Number.toPrecision", "toPrecision()")}}</td> - <td>Mengembalikan string yang merepresentasikan nomor dalam notasi fixed-point yang lebih spesifik.</td> - </tr> - </tbody> -</table> - -<h2 id="Math_object"><code>Math</code> object</h2> - -<p>The built-in {{jsxref("Math")}} objek memiliki properti dan metode-metode untuk konstanta matematika dan fungsi-fungsi. Sebagai contoh, objek matematik <code>PI</code> properti memiliki nilai (3.141...), yang akan anda gunakan dalam aplikasi sebagai</p> - -<pre class="brush: js">Math.PI -</pre> - -<p>Demikian pula, fungsi standard matematika merupakan metode-metode <code>Math</code>. termasuk trigonometri, logaritma, eksponensial, dan fungsi lainnya. Sebagai contoh, jika anda ingin menggunakan fungsi trigonometri sin, anda akan menulis</p> - -<pre class="brush: js">Math.sin(1.56) -</pre> - -<p>Perhatikan bahwa semua metode trigonometri matematika menggunakan argumen dalam radian.</p> - -<p>Tabel berikut meringkas metode-metode objek matematik.</p> - -<table class="standard-table"> - <caption>Methods of <code>Math</code></caption> - <thead> - <tr> - <th scope="col">Method</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{jsxref("Math.abs", "abs()")}}</td> - <td>Nilai absolut</td> - </tr> - <tr> - <td>{{jsxref("Math.sin", "sin()")}}, {{jsxref("Math.cos", "cos()")}}, {{jsxref("Math.tan", "tan()")}}</td> - <td>Fungsi trigonometri standar; dengan argumen dalam radian.</td> - </tr> - <tr> - <td>{{jsxref("Math.asin", "asin()")}}, {{jsxref("Math.acos", "acos()")}}, {{jsxref("Math.atan", "atan()")}}, {{jsxref("Math.atan2", "atan2()")}}</td> - <td>Fungsi trigonometri terbalik; mengembalikan nilai dalam radian.</td> - </tr> - <tr> - <td>{{jsxref("Math.sinh", "sinh()")}}, {{jsxref("Math.cosh", "cosh()")}}, {{jsxref("Math.tanh", "tanh()")}}</td> - <td>Fungsi hiperbolik. argumen dalam sudut hiperbolik.</td> - </tr> - <tr> - <td>{{jsxref("Math.asinh", "asinh()")}}, {{jsxref("Math.acosh", "acosh()")}}, {{jsxref("Math.atanh", "atanh()")}}</td> - <td>Fungsi hiperbolik terbalik. mengembalikan nilai dalam sudut hiperbolik.</td> - </tr> - <tr> - <td> - <p>{{jsxref("Math.pow", "pow()")}}, {{jsxref("Math.exp", "exp()")}}, {{jsxref("Math.expm1", "expm1()")}}, {{jsxref("Math.log10", "log10()")}}, {{jsxref("Math.log1p", "log1p()")}}, {{jsxref("Math.log2", "log2()")}}</p> - </td> - <td>Fungsi eksponen dan logaritma.</td> - </tr> - <tr> - <td>{{jsxref("Math.floor", "floor()")}}, {{jsxref("Math.ceil", "ceil()")}}</td> - <td>Mengembalikan angka bulat terkecil/terbesar kurang/lebih dari atau sama dengan pada sebuah argumen.</td> - </tr> - <tr> - <td>{{jsxref("Math.min", "min()")}}, {{jsxref("Math.max", "max()")}}</td> - <td>Mengembalikan nilai minimum/maksimum sebuah koma terpisah dari angka sebagai argumen.</td> - </tr> - <tr> - <td>{{jsxref("Math.random", "random()")}}</td> - <td>Megembalikan angka acak antara 0 dan 1.</td> - </tr> - <tr> - <td>{{jsxref("Math.round", "round()")}}, {{jsxref("Math.fround", "fround()")}}, {{jsxref("Math.trunc", "trunc()")}},</td> - <td>Fungsi pembulatan dan pemotongan.</td> - </tr> - <tr> - <td>{{jsxref("Math.sqrt", "sqrt()")}}, {{jsxref("Math.cbrt", "cbrt()")}}, {{jsxref("Math.hypot", "hypot()")}}</td> - <td>Akar kuadrat, akar pangkat tiga, akar kuadrat dari jumlah argumen persegi.</td> - </tr> - <tr> - <td>{{jsxref("Math.sign", "sign()")}}</td> - <td>tanda sebuah angka, mengindikasikan angka apapun merupakan angka positif, negatif, atau nol.</td> - </tr> - <tr> - <td>{{jsxref("Math.clz32", "clz32()")}},<br> - {{jsxref("Math.imul", "imul()")}}</td> - <td>Angka yang dimulai dari nol bit dalam 32-bit.<br> - Hasil dari C-like 32-bit perkalian dari dua argumen.</td> - </tr> - </tbody> -</table> - -<p>Tidak seperti beberapa objek lainnya, anda tidak perlu membuat objek matematika sendiri. anda selalu menggunakan built-in Math object.</p> - -<h2 id="Date_object"><code>Date</code> object</h2> - -<p>JavaScript does not have a date data type. However, you can use the {{jsxref("Date")}} object and its methods to work with dates and times in your applications. The <code>Date</code> object has a large number of methods for setting, getting, and manipulating dates. It does not have any properties.</p> - -<p>JavaScript handles dates similarly to Java. The two languages have many of the same date methods, and both languages store dates as the number of milliseconds since January 1, 1970, 00:00:00, with a Unix Timestamp being the number of seconds since January 1, 1970, 00:00:00.</p> - -<p>The <code>Date</code> object range is -100,000,000 days to 100,000,000 days relative to 01 January, 1970 UTC.</p> - -<p>To create a <code>Date</code> object:</p> - -<pre class="brush: js">var dateObjectName = new Date([parameters]); -</pre> - -<p>where <code>dateObjectName</code> is the name of the <code>Date</code> object being created; it can be a new object or a property of an existing object.</p> - -<p>Calling <code>Date</code> without the <code>new</code> keyword returns a string representing the current date and time.</p> - -<p>The <code>parameters</code> in the preceding syntax can be any of the following:</p> - -<ul> - <li>Nothing: creates today's date and time. For example, <code>today = new Date();</code>.</li> - <li>A string representing a date in the following form: "Month day, year hours:minutes:seconds." For example, <code>var Xmas95 = new Date("December 25, 1995 13:30:00")</code>. If you omit hours, minutes, or seconds, the value will be set to zero.</li> - <li>A set of integer values for year, month, and day. For example, <code>var Xmas95 = new Date(1995, 11, 25)</code>.</li> - <li>A set of integer values for year, month, day, hour, minute, and seconds. For example, <code>var Xmas95 = new Date(1995, 11, 25, 9, 30, 0);</code>.</li> -</ul> - -<h3 id="Methods_of_the_Date_object">Methods of the <code>Date</code> object</h3> - -<p>The <code>Date</code> object methods for handling dates and times fall into these broad categories:</p> - -<ul> - <li>"set" methods, for setting date and time values in <code>Date</code> objects.</li> - <li>"get" methods, for getting date and time values from <code>Date</code> objects.</li> - <li>"to" methods, for returning string values from <code>Date</code> objects.</li> - <li>parse and UTC methods, for parsing <code>Date</code> strings.</li> -</ul> - -<p>With the "get" and "set" methods you can get and set seconds, minutes, hours, day of the month, day of the week, months, and years separately. There is a <code>getDay</code> method that returns the day of the week, but no corresponding <code>setDay</code> method, because the day of the week is set automatically. These methods use integers to represent these values as follows:</p> - -<ul> - <li>Seconds and minutes: 0 to 59</li> - <li>Hours: 0 to 23</li> - <li>Day: 0 (Sunday) to 6 (Saturday)</li> - <li>Date: 1 to 31 (day of the month)</li> - <li>Months: 0 (January) to 11 (December)</li> - <li>Year: years since 1900</li> -</ul> - -<p>For example, suppose you define the following date:</p> - -<pre class="brush: js">var Xmas95 = new Date('December 25, 1995'); -</pre> - -<p>Then <code>Xmas95.getMonth()</code> returns 11, and <code>Xmas95.getFullYear()</code> returns 1995.</p> - -<p>The <code>getTime</code> and <code>setTime</code> methods are useful for comparing dates. The <code>getTime</code> method returns the number of milliseconds since January 1, 1970, 00:00:00 for a <code>Date</code> object.</p> - -<p>For example, the following code displays the number of days left in the current year:</p> - -<pre class="brush: js">var today = new Date(); -var endYear = new Date(1995, 11, 31, 23, 59, 59, 999); // Set day and month -endYear.setFullYear(today.getFullYear()); // Set year to this year -var msPerDay = 24 * 60 * 60 * 1000; // Number of milliseconds per day -var daysLeft = (endYear.getTime() - today.getTime()) / msPerDay; -var daysLeft = Math.round(daysLeft); //returns days left in the year -</pre> - -<p>This example creates a <code>Date</code> object named <code>today</code> that contains today's date. It then creates a <code>Date</code> object named <code>endYear</code> and sets the year to the current year. Then, using the number of milliseconds per day, it computes the number of days between <code>today</code> and <code>endYear</code>, using <code>getTime</code> and rounding to a whole number of days.</p> - -<p>The <code>parse</code> method is useful for assigning values from date strings to existing <code>Date</code> objects. For example, the following code uses <code>parse</code> and <code>setTime</code> to assign a date value to the <code>IPOdate</code> object:</p> - -<pre class="brush: js">var IPOdate = new Date(); -IPOdate.setTime(Date.parse('Aug 9, 1995')); -</pre> - -<h3 id="Example">Example</h3> - -<p>In the following example, the function <code>JSClock()</code> returns the time in the format of a digital clock.</p> - -<pre class="brush: js">function JSClock() { - var time = new Date(); - var hour = time.getHours(); - var minute = time.getMinutes(); - var second = time.getSeconds(); - var temp = '' + ((hour > 12) ? hour - 12 : hour); - if (hour == 0) - temp = '12'; - temp += ((minute < 10) ? ':0' : ':') + minute; - temp += ((second < 10) ? ':0' : ':') + second; - temp += (hour >= 12) ? ' P.M.' : ' A.M.'; - return temp; -} -</pre> - -<p>The <code>JSClock</code> function first creates a new <code>Date</code> object called <code>time</code>; since no arguments are given, time is created with the current date and time. Then calls to the <code>getHours</code>, <code>getMinutes</code>, and <code>getSeconds</code> methods assign the value of the current hour, minute, and second to <code>hour</code>, <code>minute</code>, and <code>second</code>.</p> - -<p>The next four statements build a string value based on the time. The first statement creates a variable <code>temp</code>, assigning it a value using a conditional expression; if <code>hour</code> is greater than 12, (<code>hour - 12</code>), otherwise simply hour, unless hour is 0, in which case it becomes 12.</p> - -<p>The next statement appends a <code>minute</code> value to <code>temp</code>. If the value of <code>minute</code> is less than 10, the conditional expression adds a string with a preceding zero; otherwise it adds a string with a demarcating colon. Then a statement appends a seconds value to <code>temp</code> in the same way.</p> - -<p>Finally, a conditional expression appends "P.M." to <code>temp</code> if <code>hour</code> is 12 or greater; otherwise, it appends "A.M." to <code>temp</code>.</p> - -<p>{{PreviousNext("Web/JavaScript/Guide/Expressions_and_Operators", "Web/JavaScript/Guide/Text_formatting")}}</p> diff --git a/files/id/web/javascript/panduan/pengenalan/index.html b/files/id/web/javascript/panduan/pengenalan/index.html deleted file mode 100644 index 19523a0821..0000000000 --- a/files/id/web/javascript/panduan/pengenalan/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: Perkenalan -slug: Web/JavaScript/Panduan/pengenalan -tags: - - 'I10n:priority' - - JavaScript - - Pedoman - - Pemula - - Perkenalan -translation_of: Web/JavaScript/Guide/Introduction ---- -<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}</div> - -<p class="summary">Bab ini mengenalkan dan membahas konsep yang mendasar di javascript.</p> - -<h2 id="Apa_yang_perlu_anda_ketahui">Apa yang perlu anda ketahui</h2> - -<p>Pada pedoman ini kami anggap Anda memiliki pengetahuan dasar dari:</p> - -<ul> - <li>Pemahaman umum dari internet dan World Wide Web ({{Glossary("WWW")}}).</li> - <li>Mengetahui dan memahami bahasa markup atau HyperText Markup Language ({{Glossary("HTML")}}).</li> - <li>Memiliki pengalaman programming. Jika Anda baru belajar programming, silakan coba salah satu tutorial yang terdapat di halaman utama tentang <a href="/id/docs/Web/JavaScript">JavaScript</a>.</li> -</ul> - -<h2 id="Tempat_untuk_mencari_informasi_JavaScript">Tempat untuk mencari informasi JavaScript </h2> - -<p>Dokumentasi JavaScript di MDN menyediakan materi sebagai berikut:</p> - -<ul> - <li><a href="/id/Learn">Belajar Pengembangan Web</a> menyajikan informasi untuk pemula serta mengenalkan konsep dasar programming dan internet.</li> - <li><a href="/id/docs/Web/JavaScript/Guide">Panduan JavaScript</a> (pedoman ini) menyajikan gambaran tentang bahasa JavaScript dan objeknya.</li> - <li><a href="/id/docs/Web/JavaScript/Reference">Referensi JavaScript</a> menyajikan material referensi yang detail untuk JavaScript.</li> -</ul> - -<p>Jika Anda baru mengenal JavaScript, mulailah dari <a href="/id/Learn">area belajar</a> dan <a href="/id/docs/Web/JavaScript/Guide">Paduan JavaScript</a>. Ketika Anda sudah mendapatkan pemahaman dasarnya, Anda bisa menggunakan <a href="/id/docs/Web/JavaScript/Reference">Referensi JavaScript </a>untuk melihat lebih detil objek dan statement.</p> - -<h2 id="Apa_itu_JavaScript">Apa itu JavaScript?</h2> - -<p>JavaScript adalah bahasa scripting <em>cross-platform</em> yang berorientasi objek yang digunakan untuk membuat bagian interaktif dari halaman-halaman web (misal: animasi kompleks, tombol yang dapat di-klik, menu pop-up, dll). Terdapat juga versi <em>server-side</em> yang lebih lanjut dari JavaScript seperti Node.Js yang mana dapat memberikan Anda fungsionalitas lebih pada sebuah website (seperti kolaborasi realtime di antara beberapa komputer). Di dalam <em>host environment </em>(contoh, sebuah <em>web browser</em>), JavaScript dapat dihubungkan ke objek-objek dari <em>environment</em> tersebut untuk menyediakan kendali programmatis terhadapnya. </p> - -<p>JavaScript memuat satu library standar yang memuat objek-objek, seperti <code>Array</code>, <code>Date</code>, dan <code>Math</code>, juga set inti dari elemen-elemen bahasa ini seperti operator, struktur kontrol, dan statement. Inti dari JavaScript dapat dikembangkan untuk kegunaan yang beragam dengan cara menambahkan objek-objek tambahan; sebagai contoh:</p> - -<ul> - <li>JavaScript<em> client-side</em> memperluas inti bahasa ini dengan cara menyediakan objek-objek untuk mengontrol browser beserta DOM-nya (Document Object Model). Misal, ekstensi pada sisi klien memungkinkan sebuah aplikasi untuk menambahkan elemen-elemen pada sebuah form HTML dan merespon event dari user seperti klik mouse, input form, dan navigasi laman.</li> - <li>JavaScript<em> server-side</em> memperluas inti bahasa ini dengan cara menyediakan objek-objek yang relevan untuk menjalankan JavaScript pada sebuah server. Misal, extensi <em>server-side</em> memungkinkan aplikasi untuk berkomunikasi dengan database, menyediakan informasi yang berkelanjutan dari satu permintaan ke permintaan yang lain dari suatu aplikasi, atau melakukan manipulasi file di server.</li> -</ul> - -<h2 id="JavaScript_and_Java" name="JavaScript_and_Java">JavaScript dan Java</h2> - -<p>JavaScript dan Java memang memiliki kemiripan pada beberapa hal, namun pada dasarnya saling berbeda. JavaScript menyerupai Java namum tidak memiliki <em>static typing</em> dan <em>strong type checking</em>. JavaScript mengikuti sebagian besar expresi <em>syntax </em>Java, konvensi penamaan serta konstruksi <em>control-flow</em> dasar, yang mana menjadi alasan untuk mengganti namanya dari LiveScript ke JavaScript.</p> - -<p>Berbeda dengan sistem <em>compile-time</em> <em>class</em> Java yang dibangun melalui deklarasi, Javascript mendukung sistem <em>runtime </em>yang berbasis pada sebagian kecil tipe data yang mewakili nilai numerik, Boolean, dan string. Javascript memiliki model objek berbasis prototipe ketimbang model objek berbasis kelas yang lebih umum. Model berbasis prototipe menyediakan <em>inheritance </em>dinamis; yaitu, apa yang diturunkan/diwariskan dapat berbeda pada setiap objek. Javascript juga mendukung fungsi tanpa persyaratan deklaratif khusus. Fungsi bisa berupa properti objek, yang dijalankan sebagai tipe metode yang longgar.</p> - -<p>JavaScript merupakan bahasa dengan bentuk yang sangat bebas dibandingkan dengan Java. Anda tidak perlu mendeklarasikan semua variabel, kelas, dan metode. Anda tidak perlu khawatir apakah metode itu public, private, atau protected, dan Anda juga tidak perlu mengimplementasikan <em>interface</em>. Variabel, parameter, dan tipe kembalian fungsi juga tidak ditulis secara eksplisit.</p> - -<p>Java merupakan bahasa berbasis kelas yang didesain untuk eksekusi yang cepat dan penulisan yang aman. Penulisan yang aman, misalnya, Anda tidak bisa mengubah integer Java menjadi referensi objek atau mengakses private memori dengan membobol <em>bytecode</em>. Model berbasis kelas Java bermaksud bahwa program secara eksklusif terdiri atas sejumlah kelas beserta metode-metodenya. Pewarisan kelas dan penulisan ketat milik Java umumnya membutuhkan hirarki objek yang juga sangat kekat. Syarat-syarat tersebut menjadikan pemrograman Java lebih kompleks ketimbang pemrograman Javascript.</p> - -<p>Sebaliknya, JavaScript mewarisi inti dari baris bahasa yang bertipe dinamis dan lebih sederhana sepeti HyperTalk dan dBASE. Bahasa-bahasa scripting tersebut menawarkan fungsionalitas pemrograman ke pengguna yang lebih luas karena <em>syntax</em>-nya yang lebih mudah, berfokus pada fungsi <em>built-in</em>, dan persyaratan yang minimalis untuk membuat objek.</p> - -<table class="standard-table"> - <caption>JavaScript dibandingkan Java</caption> - <thead> - <tr> - <th scope="col">JavaScript</th> - <th scope="col">Java</th> - </tr> - </thead> - <tbody> - <tr> - <td>Berorientasi objek. Tak ada perbedaan antar tipe objek. <em>Inheritance/ </em>pewarisan melalui mekanisme prototipe, serta properti dan metode bisa ditambahkan kepada objek apapun secara dinamis.</td> - <td>Berbasis kelas. Objek dibagi ke dalam kelas dan instansi dengan semua pewarisan melalui hirarki kelas. Kelas dan instansi tidak dapat memiliki properti atau metode yang ditambahkan secara dinamis.</td> - </tr> - <tr> - <td>Tipe data variabel tidak dideklarasi (<em>dynamic typing</em>, <em>loosely typed</em>).</td> - <td>Tipe data variabel harus dideklarasi (<em>static-typing</em>, <em>strongly typed</em>).</td> - </tr> - <tr> - <td>Tidak bisa menulis ke hard disk secara otomatis.</td> - <td>Bisa menulis ke hard disk secara otomatis.</td> - </tr> - </tbody> -</table> - -<p>Untuk informasi lebih lanjut perbedaan antara JavaScript dan Java, lihat bagian <a href="/id/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Detil dari model objek</a>.</p> - -<h2 id="JavaScript_and_the_ECMAScript_Specification" name="JavaScript_and_the_ECMAScript_Specification">JavaScript dan spesifikasi ECMAScript</h2> - -<p>Javascript distandarisasi melalui <a class="external" href="http://www.ecma-international.org/">Ecma International</a> — asosiasi Eropa yang men-standarisasi sistem informasi dan komunikasi (ECMA merupakan singkatan yang dari <em>European Computer Manufacturers Association</em>) yang mengurusi standarisasi bahasa pemrograman internasional berbasis JavaScript. Versi standarisasi JavaScript ini, yang disebut sebagai ECMAScript, akan berperilaku sama pada setiap aplikasi yang mengikutinya. Perusahaan-perusahaan dapat menggunakan bahasa standar terbuka untuk mengembangkan implementasi JavaScript mereka. Standar ECMAScript didokumentasikan dalam spesifikasi ECMA-262. Kunjungi <a href="/id/docs/Web/JavaScript/New_in_JavaScript">Terbaru di JavaScript</a> untuk mempelajari lebih lanjut tentang berbagai versi dari JavaScript dan spesifikasi edisi ECMAScript.</p> - -<p>Standar ECMA-262 juga disetujui oleh <a class="external" href="http://www.iso.ch/">ISO</a> (International Organization for Standardization) sebagai ISO-16262. Anda juga dapat menemukan spesifikasinya di <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">website Ecma International</a>. Spesifikasi ECMAScript tidak memaparkan Document Object Model yang distandarisasi oleh <a class="external" href="http://www.w3.org/">World Wide Web Consortium (W3C)</a> bersama <a href="https://whatwg.org">WHATWG (Web Hypertext Application Technology Working Group)</a>. DOM mendefinisikan cara dimana dokumen objek HTML diekspos ke script Anda. Untuk mendapatkan pemahaman yang lebih baik tentang berbagai teknologi yang digunakan ketika memrogram menggunakan JavaScript, lihat artikel <a href="/id/docs/Web/JavaScript/JavaScript_technologies_overview">ikhtisar teknologi JavaScript</a>.</p> - -<h3 id="JavaScript_Documentation_versus_the_ECMAScript_Specification" name="JavaScript_Documentation_versus_the_ECMAScript_Specification">Perbandingan dokumentasi JavaScript dengan spesifikasi ECMAScript</h3> - -<p>Spesifikasi ECMAScript adalah seperangkat persyaratan untuk menerapkan ECMAScript; berguna jika Anda ingin menerapkan fitur bahasa yang sesuai standar dalam penerapan atau mesin ECMAScript Anda (seperti SpiderMonkey di Firefox, atau V8 di Chrome).</p> - -<p>Dokumen ECMAScript tidak dimaksudkan untuk membantu <em>script programmer</em>; gunakanlah dokumentasi JavaScript untuk informasi dalam penulisan script.</p> - -<p>Spesifikasi ECMAScript menggunakan terminologi dan <em>syntax </em>yang mungkin asing bagi programmer JavaScript. Meskpun deskripsi dari bahasa tersebut dapat berbeda dengan ECMAScript, bahasanya sendiri tetap sama. JavaScript mendukung semua fungsionalitas yang diuraikan dalam spesifikasi ECMAScript.</p> - -<p>Dokumentasi JavaScript menggambarkan aspek bahasa yang sesuai bagi seorang programmer JavaScript.</p> - -<h2 id="Memulai_Javascript">Memulai Javascript</h2> - -<p>Memulai JavaScript itu mudah: semua yang dibutuhkan hanyalah Web browser modern untuk menjalankannya. Panduan ini mencakup beberapa fitur JavaScript yang hanya tersedia pada versi terakhir Firefox, sehingga disarankan untuk menggunakan Firefox versi terbaru.</p> - -<p>Terdapat dua alat yang dipasang ke dalam Firefox yang berguna dalam bereksperimen dengan JavaScript: Web Console dan Scratchpad.</p> - -<h3 id="Web_Console">Web Console</h3> - -<p><a href="/id/docs/Tools/Web_Console">Web Consol / Konsol Web</a> memperlihatkan kepada Anda tentang informasi laman Web yang sedang di-load saat ini, dan juga mencakup <a href="/id/docs/Tools/Web_Console#The_command_line_interpreter">commandline / baris perintah</a> yang dapat Anda gunakan untuk mengeksekusi ekspresi JavaScript pada laman saat ini.</p> - -<p>Untuk membuka Konsol Web, tekan (Ctrl + Shift + K) pada Windows dan Linux atau tekan (Cmd + Option + K) pada Mac, pilih "<em>Web Console</em>" dari menu "<em>Developer</em>", yang berada di bawah menu "<em>Tools</em>" di Firefox. Konsol akan muncul di bagian bawah jendela browser. Di bagian bawah konsol tersebut adalah command line yang dapat Anda gunakan untuk memasukkan JavaScript, dan outputnya akan muncul pada panel di atasnya.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16569/2019-04-04_00-15-29.png" style="display: block; height: 1824px; margin-left: auto; margin-right: auto; width: 2784px;"> Konsol tersebut bekerja persis seperti eval: expresi terakhir yang dienter akan dikembalikan. Demi kesederhanaan, bisa dibayangkan jika setiap saat sesuatu dimasukkan ke dalam konsol, ia akan selalu dikelilingi oleh console.log sekitar eval seperti ini.</p> - -<pre class="brush: js">function greetMe(yourName) { - alert('Hello ' + yourName); -} -<code>console.log(eval('3 + 5'));</code></pre> - -<p> </p> - -<h3 id="Scratchpad">Scratchpad</h3> - -<p>Konsol Web bagus untuk menjalankan satu baris kode JavaScript, meskipun Anda juga dapat menjalankan banyak baris, tetap saja akan terasa kurang nyaman, dan Anda juga tidak bisa menyimpan sampel kode Anda menggunakan Konsol Web. Jadi untuk contoh yang lebih kompleks, <a href="/id/docs/Tools/Scratchpad">Scratchpad</a> adalah solusinya.</p> - -<p>Untuk membuka Scratchpad tekan (Shift + F4), pilih "<em>Scratchpad</em>" dari menu "<em>Developer</em>", yang ada di bawah menu pada Firefox. Selanjutnya akan muncul di window yang terpisah dan merupakan editor yang dapat Anda gunakan untuk menulis dan menjalankan JavaScript di browser. Anda juga dapat menyimpan dan membuka kode dari disk.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13468/scratchpad.png" style="display: block; height: 375px; margin-left: auto; margin-right: auto; width: 631px;"></p> - -<h3 id="Hello_world">Hello world</h3> - -<p>Untuk mulai menulis JavaScript, buka Scratchpad dan tulislah kode JavaScript "Hello world" pertama Anda:</p> - -<pre class="brush: js">(function(){ - "use strict"; - /* Start of your code */ - function greetMe(yourName) { - alert('Hello ' + yourName); - } - - greetMe('World'); - /* End of your code */ -})(); -</pre> - -<p>Pilih kode diatas dan tekan Ctrl+R untuk melihatnya berjalan di browser Anda! Di laman-laman berikutnya, panduan ini akan memperkenalkan Anda dengan syntax dan fitur-fitur bahasa JavaScript, sehingga Anda dapat menulis aplikasi yang lebih kompleks. Tapi untuk saat ini, ingatlah untuk selalu memasukkan <code>(function(){"use strict";</code> sebelum kode Anda, dan tambahkan <code>})();</code> di akhir kode Anda. Anda akan mempelajari apa artinya itu, tetapi untuk sekarang mereka bisa dianggap melakukan:</p> - -<ol> - <li>Meningkatkan performa secara masif</li> - <li>Mencegah semantik ceroboh dalam JavaScript yang menjatuhkan pemula</li> - <li>Mencegah <em>code snippets</em> yang dieksekusi dalam konsol untuk berinteraksi satu sama lain (misalnya sesuatu yang dibuat dalam suatu eksekusi konsol digunakan untuk eksekusi konsol yang lain).</li> -</ol> - -<p>{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}</p> diff --git a/files/id/web/javascript/panduan/tentang/index.html b/files/id/web/javascript/panduan/tentang/index.html deleted file mode 100644 index c7f08f0eb5..0000000000 --- a/files/id/web/javascript/panduan/tentang/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: Tentang Panduan Ini -slug: Web/JavaScript/Panduan/Tentang -tags: - - JavaScript - - Panduan - - dasar -translation_of: Web/JavaScript/Guide/Introduction -translation_of_original: Web/JavaScript/Guide/About ---- -<p>JavaScript adalah bahasa yang cross-platform yaitu berarti JavaScript dapat dijalankan di banyak platform seperti Linux, Windows, Mac OS, Android, Firefox OS dan lain - lain. Panduan ini akan memberikan segala pengetahuan dasar yang perlu anda ketahui dalam penggunaan JavaScript.</p> - -<h2 id="Fitur_baru_pada_versi_JavaScript">Fitur baru pada versi JavaScript</h2> - -<p> </p> - -<ul> - <li><a class="new" href="/id/docs/Web/JavaScript/New_in_JavaScript/1.2" rel="nofollow">/id/docs/Web/JavaScript/New_in_JavaScript/1.2</a></li> - <li><a class="new" href="/id/docs/Web/JavaScript/New_in_JavaScript/1.3" rel="nofollow">/id/docs/Web/JavaScript/New_in_JavaScript/1.3</a></li> - <li><a class="new" href="/id/docs/Web/JavaScript/New_in_JavaScript/1.4" rel="nofollow">/id/docs/Web/JavaScript/New_in_JavaScript/1.4</a></li> - <li><a class="new" href="/id/docs/Web/JavaScript/New_in_JavaScript/1.5" rel="nofollow">/id/docs/Web/JavaScript/New_in_JavaScript/1.5</a></li> - <li><a class="new" href="/id/docs/Web/JavaScript/New_in_JavaScript/1.6" rel="nofollow">/id/docs/Web/JavaScript/New_in_JavaScript/1.6</a></li> - <li><a class="new" href="/id/docs/Web/JavaScript/New_in_JavaScript/1.7" rel="nofollow">/id/docs/Web/JavaScript/New_in_JavaScript/1.7</a></li> - <li><a class="new" href="/id/docs/Web/JavaScript/New_in_JavaScript/1.8" rel="nofollow">/id/docs/Web/JavaScript/New_in_JavaScript/1.8</a></li> - <li><a class="new" href="/id/docs/Web/JavaScript/New_in_JavaScript/1.8.1" rel="nofollow">/id/docs/Web/JavaScript/New_in_JavaScript/1.8.1</a></li> - <li><a class="new" href="/id/docs/Web/JavaScript/New_in_JavaScript/1.8.5" rel="nofollow">/id/docs/Web/JavaScript/New_in_JavaScript/1.8.5</a></li> -</ul> - -<p> </p> - -<h2 id="Apa_yang_perlu_anda_pelajari_terlebih_dahulu">Apa yang perlu anda pelajari terlebih dahulu ?</h2> - -<p>Sebelum mempelajari panduan ini anda harus mempunyai pengetahuan dasar tentang:</p> - -<ul> - <li>Pengetahuan umum tentang internet dan World Wide Web (<a href="http://id.wikipedia.org/wiki/World_Wide_Web">www</a>) yang bisa anda dapatkan di <a href="http://id.wikipedia.org/wiki/Internet">Wikipedia Indonesia</a>.</li> - <li>Pengetahuan yang mantap tentang Hyper Text Markup Language (<a href="/en/HTML" title="en/HTML">HTML</a>) dan cara penggunaannya, bisa anda pelajari di <a href="http://www.w3schools.com/html/default.asp">w3schools</a>.</li> - <li>Pengalaman programming khususnya JavaScript, jika anda benar - benar sedang memulai dari awal cobalah membaca tutorial pada link berikut ini<a href="/en-US/docs/JavaScript" title="/en-US/docs/"> JavaScript</a></li> -</ul> - -<h2 id="JavaScript_versions">JavaScript versions</h2> - -<table class="standard-table"> - <caption>Table 1 JavaScript and Navigator versions</caption> - <thead> - <tr> - <th scope="col">JavaScript version</th> - <th scope="col">Navigator version</th> - </tr> - </thead> - <tbody> - <tr> - <td>JavaScript 1.0</td> - <td>Navigator 2.0</td> - </tr> - <tr> - <td>JavaScript 1.1</td> - <td>Navigator 3.0</td> - </tr> - <tr> - <td>JavaScript 1.2</td> - <td>Navigator 4.0-4.05</td> - </tr> - <tr> - <td>JavaScript 1.3</td> - <td>Navigator 4.06-4.7x</td> - </tr> - <tr> - <td>JavaScript 1.4</td> - <td> </td> - </tr> - <tr> - <td>JavaScript 1.5</td> - <td>Navigator 6.0<br> - Mozilla (open source browser)</td> - </tr> - <tr> - <td>JavaScript 1.6</td> - <td><a href="/en/Firefox_1.5_for_developers" title="en/Firefox_1.5_for_developers">Firefox 1.5</a>, other Mozilla 1.8-based products</td> - </tr> - <tr> - <td>JavaScript 1.7</td> - <td><a href="/en/Firefox_2_for_developers" title="en/Firefox_2_for_developers">Firefox 2</a>, other Mozilla 1.8.1-based products</td> - </tr> - <tr> - <td>JavaScript 1.8</td> - <td><a href="/en/Firefox_3_for_developers" title="en/Firefox_3_for_developers">Firefox 3</a>, other Gecko 1.9-based products</td> - </tr> - </tbody> -</table> - -<h2 id="Dimana_saya_mendapatkan_informasi_tentang_JavaScript">Dimana saya mendapatkan informasi tentang JavaScript ?</h2> - -<p>Dokumentasi JavaScript terdapat pada buku dibawah ini:</p> - -<ul> - <li><a href="/en/JavaScript/Guide" title="en/Core_JavaScript_1.5_Guide">JavaScript Guide</a> (this guide) provides information about JavaScript language and its objects.</li> - <li><a href="/en/JavaScript/Reference" title="en/JavaScript/Reference">JavaScript Reference</a> provides reference material for JavaScript language.</li> -</ul> - -<p>Untuk yang baru belajar bacalah <a href="/en/JavaScript/Guide" title="en/Core_JavaScript_1.5_Guide">JavaScript Guide</a>. Atau anda ingin mendapat pemahaman yang kuat bacalah <a href="/en/JavaScript/Reference" title="en/JavaScript/Reference">JavaScript Reference</a> untuk mendapatkan detail dari masing - masing object dan statements.</p> - -<h2 id="Tips_untuk_belajar_JavaScript">Tips untuk belajar JavaScript</h2> - -<p>Untuk memulai belajar JavaScript sangatlah mudah, anda hanya butuh web browser versi terbaru seperti <a href="https://www.mozilla.org/id/firefox/new/">Mozilla Firefox</a>. Karena di dalam panduan ini terdapat beberapa fitur JavaScript yang hanya bisa dijalankan pada web browser firefox versi terbaru (dan web browser lain yang didukung Gecko), jadi kami menyarankan anda selalu update Mozilla Firefox terbaru.</p> - -<p>Ada dua tool yang tersedia di dalam Firefox dan sangat berguna untuk berEksperimen dengan JavaScript yaitu Web Console dan Scratchpad.</p> - -<h3 id="Web_Console">Web Console</h3> - -<p><a href="/en-US/docs/Tools/Web_Console">Web Console</a> memberikan anda informasi tentang halaman web yang sedang anda buka, dan juga terdapat <a href="/en-US/docs/Tools/Web_Console#The_command_line_interpreter">command line</a> yang membuat anda bisa menjalankan JavaScript expression di web page yang sedang anda buka.</p> - -<p>Untuk menggunakan Web Console, pilih "Web Console" dari menu "Web Developer" yang terdapat di dalam menu "Tools" atau "Peralatan" dalam bahasa indonesia. Web Console akan muncul pada bagian bawah browser dan anda bisa menjalankan Script anda pada Text Input dan hasilnya akan muncul pada box seperti gambar dibawah ini.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/7363/web-console-commandline.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<h3 id="Scratchpad">Scratchpad</h3> - -<p>Web Console biasa digunakan untuk single lines Script, ketika anda ingin mencoba Script multiple lines kami sarankan menggunakan Scratchpad, karena selain tidak efective juga Web Console tidak bisa menyimpan perubahan yang anda lakukan pada Script, namun Scratchpad melakukan itu dengan sangat baik.</p> - -<p>Untuk menggunakan Scratchpad, pilih "Scratchpad" pada menu "Web Developer" di dalam menu "Tools" atau "Pengaturan" dalam bahasa indonesia. Anda dapat menyimpan dan menload Script dari dari hardisk ataupun flashdisk.</p> - -<p>Ketika anda mengklik tombol "Inspect" maka script anda akan tereksekusi dan hasilnya akan dikembalikan pada Script dalam bentuk komentar.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/7365/scratchpad.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<h2 id="Document_conventions">Document conventions</h2> - -<p>Applikasi JavaScript berjalan di banyak Operating System (OS) dan informasi pada panduan ini adalah untuk semua versi OS. File dan lokasi Folder pada Unix dan Windows dipisahkan oleh backslashes (/)</p> - -<p>Panduan ini menggunakan uniform resource locators (URLs) of the following form:</p> - -<p><code>http://<em>server</em>.<em>domain</em>/<em>path</em>/<em>file</em>.html</code></p> - -<p>In these URLs, <em>server</em> represents the name of the server on which you run your application, such as <code>research1</code> or <code>www</code>; <em>domain</em> represents your Internet domain name, such as <code>netscape.com</code> or <code>uiuc.edu</code>; <em>path</em> represents the directory structure on the server; and <em>file</em><code>.html</code> represents an individual file name. In general, items in italics in URLs are placeholders and items in normal monospace font are literals. If your server has Secure Sockets Layer (SSL) enabled, you would use <code>https</code> instead of <code>http</code> in the URL.</p> - -<p>This guide uses the following font conventions:</p> - -<ul> - <li><code>The monospace font</code> is used for sample code and code listings, API and language elements (such as method names and property names), file names, path names, directory names, HTML tags, and any text that must be typed on the screen. (<code><em>Monospace italic font</em></code> is used for placeholders embedded in code.)</li> - <li><em>Italic type</em> is used for book titles, emphasis, variables and placeholders, and words used in the literal sense.</li> - <li><strong>Boldface</strong> type is used for glossary terms.</li> -</ul> - -<div> </div> diff --git a/files/id/web/javascript/panduan/values,_variables,_and_literals/index.html b/files/id/web/javascript/panduan/values,_variables,_and_literals/index.html deleted file mode 100644 index 41900a1603..0000000000 --- a/files/id/web/javascript/panduan/values,_variables,_and_literals/index.html +++ /dev/null @@ -1,648 +0,0 @@ ---- -title: Tata Bahasa dan Tipe -slug: 'Web/JavaScript/Panduan/Values,_variables,_and_literals' -tags: - - JavaScript - - Panduan -translation_of: Web/JavaScript/Guide/Grammar_and_types ---- -<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}</div> - -<p class="summary">Pada bagian ini membahas tata bahasa dasar Javascript, deklarasi variabel, tipe data dan literal.</p> - -<h2 id="Dasar"><strong style="font-size: 2.14285714285714rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">Dasar</strong></h2> - -<p>Sebagian besar sintak JavaScript terinspirasi dari Java, namun juga dipengaruhi oleh Awk, Perl dan Python.</p> - -<p><font><font>JavaScript bersifat </font></font><strong><font><font>case-sensitive</font></font></strong><font><font> dan menggunakan </font><font>set karakter </font></font><strong><font><font>Unicode</font></font></strong><font><font>.</font></font></p> - -<p>Dalam JavaScript, instruksi disebut {{Glossary ("Statement", "pernyataan")}} dan dipisahkan oleh titik koma (;). Spasi, tab dan karakter baris baru disebut whitespace.Teks sumber skrip JavaScript dipindai dari kiri ke kanan dan diubah menjadi urutan elemen masukan yang merupakan token, karakter kontrol, terminator baris, komentar atau whitespace. ECMAScript juga mendefinisikan kata kunci dan literal tertentu dan memiliki aturan untuk penyisipan titik koma secara otomatis <a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">(ASI)</a> untuk mengakhiri pernyataan. Namun, dianjurkan untuk selalu menambahkan titik koma untuk mengakhiri pernyataan anda; Itu akan terhindar dari efek samping. Untuk informasi lebih lanjut, lihat referensi rinci tentang <a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference/Lexical_grammar">tata bahasa eksikal</a> JavaScript.</p> - -<h2 id="Komentar"><br> - <strong style="color: #4d4e53; font-size: 2.14286rem; letter-spacing: -1px;">Komentar</strong></h2> - -<p>Sintak komentar pada JavaScript sama dengan C++ dan dalam banyak bahasa pemrograman lainnya:</p> - -<pre><code>// komentar satu baris - -/* Ini lebih panjang - komentar beberapa baris - */ - -/* Anda tidak bisa menggunakannya, /* komentar bersarang */ Sintak bermasalah */</code></pre> - -<h2 id="Deklarasi">Deklarasi</h2> - -<p>Ada tiga macam deklarasi pada JavaScript.</p> - -<dl> - <dt><a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference/Statements/var" title="The variable statement declares a variable, optionally initializing it to a value."><code>var</code></a></dt> - <dd>Mendeklarasikan sebuah variabel, opsional menginisialisasi sebuah nilai.</dd> - <dt><a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference/Statements/let" title="The let statement declares a block scope local variable, optionally initializing it to a value."><code>let</code></a></dt> - <dd>Mendeklarasikan lingkup-blok, variabel lokal, opsional menginisialisasi sebuah nilai.</dd> - <dt><a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference/Statements/const" title="This declaration creates a constant whose scope can be either global or local to the function in which it is declared. An initializer for a constant is required; that is, you must specify its value in the same statement in which it's declared (which makes sense, given that it can't be changed later)."><code>const</code></a></dt> - <dd>Mendeklarasikan sebuah lingkup-blok, baca-saja dinamakan konstanta.</dd> -</dl> - -<h2 id="Variabel"><strong>Variabel</strong></h2> - -<p>Anda menggunakan variabel sebagai nama simbolik dalam aplikasi Anda. Nama variabel, disebut {{Glossary("Identifier", "Pengidentifikasi")}}, sesuai dengan peraturan tertentu.</p> - -<p>Pengindetifikasi pada JavaScript harus dimulai dengan huruf, garis bawah (_), atau tanda dolar ($); Karakter selanjutnya bisa berupa digit (0-9). karena JavaScript sensitif huruf (case-sensitive), Huruf termasuk karakter "A" sampai "Z" (huruf besar) dan huruf "a" sampai "z" (huruf kecil) .</p> - -<p>Anda dapat menggunakan sebagian besar huruf ISO 8859-1 atau Unicode seperti å dan ü dalam pengidentifikasi (untuk lebih jelasnya lihat <a href="https://mathiasbynens.be/notes/javascript-identifiers-es6">postingan blog ini</a>). Anda juga dapat menggunakan urutan <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#String_literals">rangkaian pelolosan/escape Unicode</a> sebagai karakter dalam pengidentifikasi.</p> - -<p><font><font>Beberapa contoh nama legal adalah </font></font><code>Number_hits</code><font><font>, </font></font><code>temp99</code><font><font>, $credit, dan </font></font><code>_name</code><font><font>.</font></font></p> - -<h3 id="Mendeklarasikan_variabel"><font><font>Mendeklarasikan variabel</font></font></h3> - -<p><font><font>Anda bisa mendeklarasikan sebuah variabel dalam tiga cara:</font></font></p> - -<ul> - <li><font><font>Dengan kata kunci </font></font><a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference/Statements/var">var</a>.<font><font> </font><font>Misalnya </font></font><code>var x = 42</code><font><font>,. </font><font>Sintaks ini dapat digunakan untuk mendeklarasikan variabel lokal dan global.</font></font></li> - <li><font><font>Cukup menugaskan sebuah nilai. </font><font>Misalnya </font></font><code>x = 42</code><font><font>. </font><font>Ini selalu mendeklarasikan variabel global, jika dinyatakan di luar fungsi apa pun. </font><font>Ini menghasilkan peringatan JavaScript yang ketat/strict. </font><font>Anda sebaiknya tidak menggunakan varian ini.</font></font></li> - <li><font><font>Dengan kata kunci </font></font><a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference/Statements/let">let</a><font><font>. </font><font>Misalnya </font></font><code>let y = 13</code><font><font>. </font><font>Sintaks ini dapat digunakan untuk mendeklarasikan variabel lokal lingkup-blok. </font><font>Lihat </font></font><font><font><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_scope">Lingkup variabel</a></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_scope"><font><font> </font></font></a><font><font>di bawah ini.</font></font></li> -</ul> - -<h3 id="Mengevaluasi_variabel"><font><font>Mengevaluasi variabel</font></font></h3> - -<p><font><font>Variabel yang dideklarasikan dengan menggunakan pernyataan </font></font><code>var </code>atau<code> let</code> <font><font>tanpa penetapan nilai yang ditentukan memiliki nilai </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a>.</p> - -<p><font><font>Upaya untuk mengakses variabel yang tidak dideklarasikan akan menuju kepada pelemparan eksepsi </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError">ReferenceError</a><font><font>:</font></font></p> - -<pre><code>var a; -console.log('Nilai dari a adalah ' + a); // Nilai dari a adalah undefined - -console.log('Nilai dari b adalah ' + b); // Nilai dari b adalah undefined -var b; - -console.log('Nilai dari c adalah ' + c); // Tidak tertangkap ReferenceError: c tidak di definisikan - -let x; -console.log('Nilai dari x adalah ' + x); // Nilai dari x adalah undefined - -console.log('Nilai dari y adalah ' + y); // Tidak tertangkap ReferenceError: y tidak di definisikan -let y;</code></pre> - -<p><font><font>Anda dapat menggunakan </font></font><code>undefined </code><font><font>untuk menentukan apakah sebuah variabel memiliki nilai. </font><font>Dalam kode berikut, variabel </font></font><code>input </code><font><font>tidak diberi nilai, dan pernyataan </font></font><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if</a> </code><font><font>dievaluasi </font></font><code>true</code><font><font>.</font></font></p> - -<pre><code>var input; -if (input === undefined) { - lakukanIni(); -} else { - lakukanItu(); -}</code></pre> - -<p><font><font>Nilai </font></font><code>undefined </code><font><font>berperilaku sebagai </font></font><code>false </code><font><font>bila digunakan dalam konteks boolean. </font><font>Misalnya, kode berikut menjalankan fungsi <code>fungsiSaya</code></font></font><code> </code><font><font>karena elemen </font></font><code>myArray </code><font><font>undefined:</font></font></p> - -<pre><code>var myArray = []; -if (!myArray[0]) fungsiSaya();</code></pre> - -<p><font><font>Nilai </font></font><code>undefined </code><font><font>mengkonversi ke </font></font><code>NaN </code><font><font>bila digunakan dalam konteks numerik.</font></font></p> - -<pre><code>var a; -a + 2; // Dievaluasi ke NaN</code></pre> - -<p><font><font>Ketika Anda mengevaluasi sebuah variabel </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null">null</a><font><font>, nilai null berperilaku seperti 0 dalam konteks numerik dan sebagai false dalam konteks boolean. </font><font>Sebagai contoh:</font></font></p> - -<pre><code>var n = null; -console.log(n * 32); // Akan log 0 ke konsol</code></pre> - -<h3 id="Lingkup_variabel"><font><font>Lingkup variabel</font></font></h3> - -<p><font><font>Bila Anda mendeklarasikan variabel di luar fungsi apa pun, ini disebut </font><font>variabel </font></font><em><font><font>global</font></font></em><font><font> , karena tersedia pada kode lain dalam dokumen tersebut. </font><font>Ketika Anda mendeklarasikan sebuah variabel dalam suatu fungsi, itu disebut </font><font>variabel </font></font><em><font><font>lokal</font></font></em><font><font> , karena hanya tersedia di dalam fungsi itu.</font></font></p> - -<p><font><font>JavaScript sebelum ECMAScript 2015 tidak memiliki </font><font>lingkup </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Block_statement"><font><font>pernyataan blok</font></font></a><font><font> ; </font><font>Sebaliknya, variabel yang dinyatakan dalam blok bersifat lokal terhadap </font></font><em><font><font>fungsi (atau lingkup global)</font></font></em><font><font> yang berada di blok. </font><font>Misalnya kode berikut akan log </font></font><code>5</code><font><font>, karena ruang lingkupnya </font></font><code>x </code><font><font>adalah fungsi (atau konteks global) yang </font></font><code>x </code><font><font>dideklarasikan, bukan bloknya, yang dalam hal ini adalah sebuah pernyataan </font></font><code>if</code><font><font>.</font></font></p> - -<pre><code>if (true) { - var x = 5; -} -console.log(x); // x is 5</code></pre> - -<p><font><font>Perilaku ini berubah, saat menggunakan deklarasi </font></font><code>let </code><font><font>yang diperkenalkan di ECMAScript 2015.</font></font></p> - -<pre><code>if (true) { - let y = 5; -} -console.log(y); // ReferenceError: y tidak di definisikan</code></pre> - -<h3 id="Hoisting_variabel"><font><font>Hoisting variabel</font></font></h3> - -<p><font><font>Hal lain yang tidak biasa tentang variabel dalam JavaScript adalah Anda bisa merujuk ke variabel yang dideklarasikan nanti, tanpa mendapatkan eksepsi. </font><font>Konsep ini dikenal sebagai </font></font><strong><font><font>hoisting</font></font></strong><font><font>; </font><font>Variabel dalam JavaScript dalam arti "dikibarkan" atau diangkat ke atas fungsi atau pernyataan. </font><font>Bagaimanapun, variabel yang dikibarkan akan memberikan nilai </font></font><code>undefined</code><font><font>. </font><font>Jadi, bahkan jika Anda mendeklarasikan dan menginisialisasi setelah Anda menggunakan atau merujuk ke variabel ini, itu akan tetap memberikan undefined.</font></font></p> - -<pre><code>/** - * Contoh 1 - */ -console.log(x === undefined); // true -var x = 3; - -/** - * Contoh 2 - */ -// Akan memberikan nilai undefined -var myvar = 'my value'; - -(function() { - console.log(myvar); // undefined - var myvar = 'local value'; -})();</code></pre> - -<p><font><font>Contoh di atas akan dinterprestasikan sama dengan:</font></font></p> - -<pre><code>/** - * Contoh 1 - */ -var x; -console.log(x === undefined); // true -x = 3; - -/** - * Example 2 - */ -var myvar = 'my value'; - -(function() { - var myvar; - console.log(myvar); // undefined - myvar = 'nilai lokal'; -})();</code></pre> - -<p><font><font>Karena hoisting, semua pernyataan </font></font><code>var </code><font><font>dalam suatu fungsi harus ditempatkan sedekat mungkin ke atas fungsi. </font><font>Praktik terbaik ini meningkatkan kejelasan kode.</font></font></p> - -<p><font><font>Dalam ECMAScript 2015, variabel </font></font><code>let (const)</code> <strong><font><font>tidak akan hoist </font></font></strong><font><font>ke bagian atas blok. </font><font>Bagaimanapun, referensi variabel di blok sebelum deklarasi variabel menghasilkan sebuah </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError" title="Objek ReferenceError mewakili kesalahan saat variabel yang tidak ada direferensikan."><code>ReferenceError</code></a><font><font>. </font><font>Variabel ini berada dalam "zona mati temporal" dari awal blok sampai deklarasi diproses.</font></font></p> - -<pre><code>console.log(x); // ReferenceError -let x = 3;</code></pre> - -<h3 id="Hoisting_fungsi"><font><font>Hoisting fungsi</font></font></h3> - -<p><font><font>Untuk fungsi, hanya deklarasi fungsi yang diangkat ke atas dan bukan ekspresi fungsi.</font></font></p> - -<pre><code>/* Deklarasi fungsi */ - -foo(); // "bar" - -function foo() { - console.log('bar'); -} - - -/* Ekspresi fungsi */ - -baz(); // TypeError: baz adalah bukan fungsi - -var baz = function() { - console.log('bar2'); -};</code></pre> - -<h3 id="Variabel_global"><font><font>Variabel global</font></font></h3> - -<p><font><font>Variabel global sebenarnya adalah properti dari </font></font><em><font><font>objek global</font></font></em><font><font> . </font><font>Di halaman web objek global itu </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window">window</a><font><font>, sehingga Anda bisa mengatur dan mengakses variabel global dengan menggunakan </font><font>sintaks </font></font><code>window.<em>variable</em></code></p> - -<p><font><font>Akibatnya, Anda dapat mengakses variabel global yang dideklarasikan dalam satu window atau frame dari window atau frame lain dengan menentukan nama window atau frame. </font><font>Misalnya, jika variabel yang disebut </font></font><code>phoneNumber </code><font><font>dinyatakan dalam dokumen, Anda dapat merujuk variabel ini dari iframe as </font></font><code>parent.phoneNumber</code><font><font>.</font></font></p> - -<h3 id="Konstanta"><font><font>Konstanta</font></font></h3> - -<p><font><font>Anda bisa membuat variabel baca-saja, dinamai dengan kata kunci </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const" title="Deklarasi ini menciptakan sebuah konstanta yang ruang lingkupnya bisa bersifat global atau lokal terhadap fungsi di mana ia dideklarasikan. Penginisialisasi untuk konstanta diperlukan; Artinya, Anda harus menentukan nilainya dalam pernyataan yang sama dengan pernyataannya (yang masuk akal, mengingat hal itu tidak dapat diubah nanti)."><code>const</code></a><font><font>. </font><font>Sintaksis dari pengenal konstanta sama dengan pengenal variabel: ia harus dimulai dengan huruf, garis bawah atau tanda dolar ($) dan dapat berisi karakter abjad, numerik, atau garis bawah.</font></font></p> - -<pre><code>const PI = 3.14;</code></pre> - -<p><font><font>Konstanta tidak dapat mengubah nilai melalui penugasan atau dinyatakan ulang saat naskah dijalankan. </font><font>Ini harus diinisialisasi ke sebuah nilai.</font></font></p> - -<p><font><font>Aturan lingkup untuk konstanta sama dengan variabel lingkup-blok </font></font><code>let</code> <font><font>. Jika kata kunci </font></font><code>const </code><font><font>dihilangkan, pengenal dianggap mewakili variabel.</font></font></p> - -<p><font><font>Anda tidak dapat mendeklarasikan konstanta dengan nama yang sama dengan fungsi atau variabel dalam lingkup yang sama. </font><font>Sebagai contoh:</font></font></p> - -<pre><code>// INI AKAN MENYEBABKAN ERROR -function f() {}; -const f = 5; - -// INI AKAN MENYEBABKAN ERROR JUGA -function f() { - const g = 5; - var g; - - //pernyataan -}</code></pre> - -<p><font><font>Namun, properti objek yang ditugaskan pada konstanta tidak terlindungi, jadi pernyataan berikut dijalankan tanpa masalah.</font></font></p> - -<pre><code>const MY_OBJECT = {'key': 'value'}; -MY_OBJECT.key = 'otherValue';</code></pre> - -<h2 id="Struktur_dan_tipe_data"><font><font>Struktur dan tipe data</font></font></h2> - -<h3 id="Tipe_data"><font><font>Tipe data</font></font></h3> - -<p><font><font>Standar ECMAScript terbaru mendefinisikan tujuh tipe data:</font></font></p> - -<ul> - <li><font><font>Enam tipe data yang </font></font>{{Glossary("Primitive", "primitif")}}<font><font> :</font></font> - - <ul> - <li>{{Glossary("Boolean")}}.<font><font> </font></font><code>true </code><font><font>Dan </font></font><code>false</code><font><font>.</font></font></li> - <li>{{Glossary("null")}}.<font><font> </font><font>Kata kunci khusus yang menunjukkan nilai null. </font><font>Karena JavaScript adalah huruf-sensitif/case-sensitive, </font></font><code>null</code><font><font> ini tidak sama dengan </font></font><code>Null</code><font><font>, </font></font><code>NULL</code><font><font>, atau varian lainnya.</font></font></li> - <li>{{Glossary("undefined")}}<font><font>. </font><font>Properti tingkat atas yang nilainya tidak terdefinisi.</font></font></li> - <li>{{Glossary("Number")}}<font><font>. </font></font><code>42 </code><font><font>Atau </font></font><code>3.14159</code><font><font>.</font></font></li> - <li>{{Glossary("String")}}<font><font>. </font><font>"howdy"</font></font></li> - <li>{{Glossary("Symbol")}} <font><font>(baru dalam ECMAScript 2015). </font><font>Tipe data yang halnya unik dan tidak dapat diubah.</font></font></li> - </ul> - </li> - <li><font><font>Dan </font></font>{{Glossary("Object")}}</li> -</ul> - -<p><font><font>Meskipun tipe data ini jumlahnya relatif kecil, namun memungkinkan Anda untuk melakukan fungsi-fungsi yang berguna dengan aplikasi Anda. </font></font> {{jsxref("Object", "Objects")}} dan {{jsxref("Function", "functions")}} <font><font>merupakan unsur fundamental lainnya dalam bahasa ini. </font><font>Anda bisa memikirkan objek sebagai wadah bernama untuk nilai, dan fungsi sebagai prosedur yang dapat dilakukan aplikasi Anda.</font></font></p> - -<h3 id="Konversi_tipe_data"><font><font>Konversi tipe data</font></font></h3> - -<p><font><font>JavaScript adalah bahasa yang diketik secara dinamis. </font><font>Itu berarti Anda tidak perlu menentukan tipe data variabel saat Anda menyatakannya, dan tipe data akan dikonversi secara otomatis sesuai kebutuhan selama eksekusi skrip. </font><font>Jadi, misalnya, Anda bisa mendefinisikan variabel sebagai berikut:</font></font></p> - -<pre><code>var jawaban = 42;</code></pre> - -<p><font><font>Dan nanti, Anda bisa menetapkan variabel yang sama dengan nilai string, misalnya:</font></font></p> - -<pre><code>jawaban = 'Thanks for all the fish...';</code></pre> - -<p><font><font>Karena JavaScript diketik secara dinamis, penugasan ini tidak menyebabkan pesan kesalahan.</font></font></p> - -<p><font><font>Dalam ekspresi yang melibatkan nilai numerik dan string dengan operator +, JavaScript mengubah nilai numerik menjadi string. </font><font>Misalnya, perhatikan pernyataan berikut:</font></font></p> - -<pre><code>x = 'Jawabannya adalah ' + 42 // "Jawabannya adalah 42" -y = 42 + ' Adalah jawabannya' // "42 Adalah jawabannya"</code></pre> - -<p><font><font>Dalam pernyataan yang melibatkan operator lain, JavaScript tidak mengubah nilai numerik menjadi string. </font><font>Sebagai contoh:</font></font></p> - -<pre><code>'37' - 7 // 30 -'37' + 7 // "377"</code></pre> - -<h3 id="Mengubah_string_menjadi_angka"><font><font>Mengubah string menjadi angka</font></font></h3> - -<p><font><font>Dalam kasus yang sebuah nilai mewakili bilangan ada dalam memori sebagai string, ada metode untuk konversi.</font></font></p> - -<ul> - <li id="parseInt()_and_parseFloat()">{{jsxref("parseInt", "parseInt()")}}</li> - <li>{{jsxref("parseFloat", "parseFloat()")}}</li> -</ul> - -<p><code>parseInt </code><font><font>Hanya akan memberikan bilangan bulat, jadi penggunaannya berkurang untuk desimal. </font><font>Selain itu, praktik terbaik untuk </font></font><code>parseInt </code><font><font>selalu menyertakan parameter radix. </font><font>Parameter radix digunakan untuk menentukan sistem numerik yang akan digunakan.</font></font></p> - -<p><font><font>Metode alternatif untuk mengambil nomor dari string adalah dengan operator </font></font><code>+</code><font><font> (unary plus):</font></font></p> - -<pre><code>'1.1' + '1.1' = '1.11.1' -(+'1.1') + (+'1.1') = 2.2 -// Catatan: kurung siku buka tutup ditambahkan untuk kejelasan, tidak diminta.</code></pre> - -<h2 id="Literal"><font><font>Literal</font></font></h2> - -<p><font><font>Anda menggunakan literal untuk mewakili nilai dalam JavaScript. </font><font>Ini adalah nilai tetap, bukan variabel, yang Anda </font><font>berikan </font></font><em><font><font>secara literal </font></font></em><font><font>dalam skrip Anda. </font><font>Bagian ini menjelaskan jenis literal berikut:</font></font></p> - -<ul> - <li>{{anch("Literal array")}}</li> - <li>{{anch("Literal boolean")}}</li> - <li>{{anch("Literal floating-point")}}</li> - <li>{{anch("Literal integer")}}</li> - <li>{{anch("Literal_object")}}</li> - <li>{{anch("Literal RegExp")}}</li> - <li>{{anch("Literal string")}}</li> -</ul> - -<h3 id="Literal_array"><font><font>Literal array</font></font></h3> - -<p><font><font>Sebuah literal array adalah daftar dari nol atau lebih ekspresi, yang masing-masing mewakili elemen array, dilampirkan dalam tanda kurung siku (</font></font><code>[]</code><font><font>). Bila Anda membuat array menggunakan literal array, ini diinisialisasi dengan nilai yang ditentukan sebagai elemennya, dan panjangnya diatur ke jumlah argumen yang ditentukan.</font></font></p> - -<p><font><font>Contoh berikut membuat array </font></font><code>coffees </code><font><font>dengan tiga elemen dan panjang tiga:</font></font></p> - -<pre><code>var coffees = ['French Roast', 'Colombian', 'Kona'];</code></pre> - -<p><strong><font><font>Catatan:</font></font></strong><font><font> Sebuah literal array adalah tipe dari object initializer. Lihat </font></font><a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Guide/Working_with_Objects#Using_object_initializers"><font><font>Menggunakan Penginisialisasi Objek</font></font></a><font><font>.</font></font></p> - -<p><font><font>Jika sebuah array dibuat menggunakan literal dalam skrip tingkat-atas, JavaScript menginterpretasikan array setiap kali mengevaluasi ekspresi yang berisi literal array. </font><font>Selain itu, literal yang digunakan dalam suatu fungsi dibuat setiap kali fungsi dipanggil.</font></font></p> - -<p><font><font>Array literal juga objek Array</font></font><font><font>. </font><font>Lihat </font></font><code><a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference/Global_Objects/Array" title="Objek JavaScript Array adalah objek global yang digunakan dalam konstruksi array; Yang tingkat tinggi, daftar-seperti objek.">Array</a> </code><font><font>dan </font></font><a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Guide/Indexed_collections"><font><font>Koleksi diIndek</font></font></a><font><font> untuk rincian tentang objek </font></font><code>Array</code><font><font>.</font></font></p> - -<h4 id="Ekstra_koma_dalam_literal_array"><font><font>Ekstra koma dalam literal array</font></font></h4> - -<p><font><font>Anda tidak perlu menentukan semua elemen dalam literal array. Jika Anda memasukkan dua koma berturut-turut, array dibuat </font></font><code>undefined </code><font><font>untuk elemen yang tidak ditentukan. Contoh berikut membuat array </font></font><code>fish</code><font><font>:</font></font></p> - -<pre><code>var fish = ['Lion', , 'Angel'];</code></pre> - -<p><font><font>Array ini memiliki dua elemen dengan nilai dan satu elemen kosong (</font></font><code>fish[0]</code><font><font> adalah "Lion", </font></font><code>fish[1]</code><font><font> adalah </font></font><code>undefined</code><font><font>, dan </font></font><code>fish[2]</code><font><font> merupakan "Angel").</font></font></p> - -<p><font><font>Jika Anda menyertakan koma di akhir daftar elemen, koma diabaikan. </font><font>Pada contoh berikut, panjang array adalah tiga. </font><font>Tidak ada </font></font><code>myList[3]</code><font><font>. </font><font>Semua koma lainnya dalam daftar menunjukkan elemen baru.</font></font></p> - -<p><strong><font><font>Catatan:</font></font></strong><font><font> Koma diakhir dapat membuat kesalahan pada versi browser lama dan merupakan praktik terbaik untuk menghapusnya.</font></font></p> - -<pre><code>var myList = ['home', , 'school', ];</code></pre> - -<p><font><font>Dalam contoh berikut, panjang array adalah empat, dan </font></font><code>myList[0]</code><font><font>dan </font></font><code>myList[2]</code><font><font> hilang.</font></font></p> - -<pre><code>var myList = [ ,'home', , 'school'];</code></pre> - -<p><font><font>Dalam contoh berikut, panjang array adalah empat, dan </font></font><code>myList[1]</code><font><font>dan </font></font><code>myList[3] </code><font><font>hilang. </font><font>Hanya koma terakhir yang diabaikan.</font></font></p> - -<pre><code>var myList = ['home', , 'school', , ];</code></pre> - -<p><font><font>Memahami perilaku ekstra koma penting untuk memahami JavaScript sebagai bahasa, namun saat menulis kode Anda sendiri: secara eksplisit menyatakan elemen yang hilang sebagai </font></font><code>undefined </code><font><font>akan meningkatkan kejelasan dan perawatan kode anda.</font></font></p> - -<h3 id="Literal_boolean">L<font><font>iteral boolean</font></font></h3> - -<p><font><font>Tipe Boolean memiliki dua nilai literal: </font></font><code>true </code><font><font>dan </font></font><code>false</code><font><font>.</font></font></p> - -<p><font><font>Jangan membingungkan nilai Boolean primitif </font></font><code>true </code><font><font>dan </font></font><code>false </code><font><font>dengan nilai true dan false objek Boolean. </font><font>Objek Boolean adalah pembungkus di sekitar tipe data Boolean primitif. </font><font>Lihat </font></font>{{jsxref("Boolean")}} untuk <font><font>informasi lebih lanjut.</font></font></p> - -<h3 id="Integer"><font><font>Integer</font></font></h3> - -<p><font><font>Integer dapat dinyatakan dalam desimal (basis 10), heksadesimal (basis 16), oktal (basis 8) dan biner (basis 2).</font></font></p> - -<ul> - <li><font><font>Literal integer desimal terdiri dari urutan digit tanpa 0 (nol) didepan.</font></font></li> - <li><font><font>Memulakan 0 (nol) pada literal integer, atau Memulakan 0o (atau 0O) mengindikasikan itu adalah oktal. Integer Oktal hanya bisa memasukkan angka 0-7.</font></font></li> - <li><font><font>Memulakan 0x (atau 0X) menunjukkan heksadesimal. </font><font>Integer heksadesimal dapat mencakup angka (0-9) dan huruf a-f dan A-F.</font></font></li> - <li> - <p><font><font>Memulakan 0b (atau 0B) menunjukkan biner. Integer </font><font>biner dapat mencakup angka hanya 0 dan 1.</font></font></p> - </li> -</ul> - -<p><font><font>Beberapa contoh literal bilangan bulat adalah:</font></font></p> - -<pre><code>0, 117 and -345 (desimal, basis 10) -015, 0001 and -0o77 (oktal, basis 8) -0x1123, 0x00111 and -0xF1A7 (heksadesimal, "hex" or basis 16) -0b11, 0b0011 and -0b11 (biner, basis 2)</code></pre> - -<p><font><font>Untuk informasi lebih lanjut, lihat </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Numeric_literals"><font><font>literatur numerik dalam referensi tata bahasa leksikal</font></font></a><font><font> .</font></font></p> - -<h3 id="Literal_floating-point"><font><font>Literal floating-point</font></font></h3> - -<p><font><font>Sebuah literal floating-point dapat memiliki bagian berikut:</font></font></p> - -<ul> - <li><font><font>Sebuah integer desimal yang dapat ditandatangani (didahului dengan "+" atau "-"),</font></font></li> - <li><font><font>Titik desimal ("."),</font></font></li> - <li><font><font>Fraksi (bilangan desimal lain),</font></font></li> - <li><font><font>Eksponen</font></font></li> -</ul> - -<p><font><font>Bagian eksponennya adalah "e" atau "E" diikuti oleh bilangan bulat, yang dapat ditandatangani (didahului dengan "+" atau "-"). </font><font>Literal floating-point harus memiliki setidaknya satu digit dan titik desimal atau "e" (atau "E").</font></font></p> - -<p><font><font>Lebih ringkas lagi, sintaksnya adalah:</font></font></p> - -<pre><code>[(+|-)][angka][.angka][(E|e)[(+|-)]angka]</code></pre> - -<p><font><font>Sebagai contoh:</font></font></p> - -<pre><code>3.1415926 --.123456789 --3.1E+12 -.1e-23</code></pre> - -<h3 id="Literal_objek"><font><font>Literal objek</font></font></h3> - -<p><font><font>Literal objek adalah daftar dari nol atau lebih pasangan nama properti dan nilai objek yang terkait, yang dilampirkan dalam kurung kurawal (</font></font><code>{}</code><font><font>). </font><font>Anda seharusnya tidak menggunakan literal objek di awal sebuah pernyataan. </font><font>Ini akan menyebabkan kesalahan atau tidak berperilaku seperti yang Anda harapkan, karena { akan ditafsirkan sebagai awal dari sebuah blok.</font></font></p> - -<p><font><font>Berikut ini adalah contoh dari literal objek. Elemen pertama dari objek </font></font><code>car </code><font><font>mendefinisikan sebuah properti </font></font><code>myCar</code><font><font>, dan menetapkan sebuah string baru, " </font></font><code>Saturn</code><font><font>"; Elemen kedua, properti </font></font><code>getCar</code><font><font>, segera diberi hasil pemanggilan function </font></font><code>(carTypes("Honda")); </code><font><font>elemen ketiga, properti </font></font><code>special</code><font><font> menggunakan variabel yang ada ( </font></font><code>sales</code><font><font>).</font></font></p> - -<pre><code>var sales = 'Toyota'; - -function carTypes(name) { - if (name === 'Honda') { - return name; - } else { - return "Maaf, kami tidak menjual " + name + "."; - } -} - -var car = { myCar: 'Saturn', getCar: carTypes('Honda'), special: sales }; - -console.log(car.myCar); // Saturn -console.log(car.getCar); // Honda -console.log(car.special); // Toyota</code></pre> - -<p><font><font>Selain itu, Anda dapat menggunakan literal numerik atau string untuk nama properti atau menyarangkan objek di dalam objek yang lain. Contoh berikut menggunakan opsi ini.</font></font></p> - -<pre><code>var car = { manyCars: {a: 'Saab', 'b': 'Jeep'}, 7: 'Mazda' }; - -console.log(car.manyCars.b); // Jeep -console.log(car[7]); // Mazda</code></pre> - -<p><font><font>Nama properti objek bisa berupa string apapun, termasuk string kosong. </font><font>Jika nama properti akan menjadi </font></font>{{Glossary("Identifier","pengidentifikasi")}}<font><font> JavaScript yang tidak valid atau angka</font><font>, maka harus dilampirkan dalam tanda petik. </font><font>Nama properti yang pengidentifikasi tidak valid juga tidak dapat diakses sebagai properti dot (</font></font><code>.</code><font><font>), namun dapat diakses dan ditetapkan dengan notasi seperti array ("</font></font><code>[]</code><font><font>").</font></font></p> - -<pre><code>var namaPropertiTidakBiasa = { - '': 'An empty string', - '!': 'Bang!' -} -console.log(namaPropertiTidakBiasa.''); // SyntaxError: Unexpected string -console.log(namaPropertiTidakBiasa['']); // An empty string -console.log(namaPropertiTidakBiasa.!); // SyntaxError: Unexpected token ! -console.log(namaPropertiTidakBiasa['!']); // Bang!</code></pre> - -<h4 id="Peningkatan_Literal_Objek">Peningkatan Literal Objek</h4> - -<p><font><font>Di ES2015, literal objek diperluas untuk mendukung pengaturan prototipe pada konstruksi, singkatan untuk </font></font><code>foo: penugasan</code><font><font> </font></font><code>foo</code><font><font> , definisikan metode, pembuatan panggilan super, dan komputasi nama properti dengan ekspresi. Bersamaan dengan itu, ini juga membawa literatur dan deklarasi kelas lebih dekat bersama, dan membiarkan desain berbasis objek mendapatkan keuntungan dari beberapa kemudahan yang sama.</font></font></p> - -<pre><code>var obj = { - // __proto__ - __proto__: theProtoObj, - // Shorthand for ‘handler: penangan’ - handler, - // Metode - toString() { - // Pangilan super - return 'd ' + super.toString(); - }, - // Dikalkulasi (dinamis) nama properti - [ 'prop_' + (() => 42)() ]: 42 -};</code></pre> - -<p><font><font>Tolong dicatat:</font></font></p> - -<pre><code>var foo = {a: 'alpha', 2: 'two'}; -console.log(foo.a); // alpha -console.log(foo[2]); // two -//console.log(foo.2); // Error: missing ) after argument list -//console.log(foo[a]); // Error: a is not defined -console.log(foo['a']); // alpha -console.log(foo['2']); // two</code></pre> - -<h3 id="Literal_RegExp"><font><font>Literal RegExp</font></font></h3> - -<p><font><font>Sebuah literal regex adalah pola yang dilampirkan diantara garis miring. Berikut ini adalah contoh literal regex.</font></font></p> - -<pre><code>var re = /ab+c/;</code></pre> - -<h3 id="Literal_string"><font><font>Literal string</font></font></h3> - -<p><font><font>Literal string adalah nol atau lebih karakter yang dilampirkan dengan tanda kutip ganda (</font></font><code>"</code><font><font>) atau tunggal (</font></font><code>'</code><font><font>). </font><font>String harus dibatasi dengan tanda kutip dari jenis yang sama; </font><font>Yaitu kedua tanda kutip tunggal atau kedua tanda petik ganda. </font><font>Berikut ini adalah contoh literal string:</font></font></p> - -<pre><code>'foo' -"bar" -'1234' -'baris satu \n baris lainnya' -"Kucing jhon"</code></pre> - -<p><font><font>Anda dapat memanggil salah satu metode objek String pada nilai literal string-JavaScript secara otomatis mengubah literal string menjadi objek String sementara, memanggil metode tersebut, lalu membuang objek String sementara. </font><font>Anda juga bisa menggunakan </font></font><font><font>properti </font></font><code>String.length</code><font><font> dengan literal string:</font></font></p> - -<pre><code>console.log("Kucing jhon".length) -// </code><span id="result_box" lang="id"><span>Akan mencetak jumlah simbol dalam string termasuk spasi.</span></span><code> -// Dalam hal ini, 11.</code></pre> - -<p><font><font>Di ES2015, template literal juga tersedia. Template string memberikan sintaksis gula untuk pembuatan string. Ini mirip dengan fitur interpolasi string di Perl, Python dan lainnya. Secara o</font><font>psional, tag dapat ditambahkan untuk memungkinkan konstruksi string disesuaikan, menghindari serangan injeksi atau membangun struktur data tingkat tinggi dari konten string.</font></font></p> - -<pre><code>// Literal dasar kreasi string -`Dalam JavaScript '\n' adalah sebuah line-feed.` - -// String beberapa baris -`</code><span id="result_box" lang="id"><span>Dalam template </span></span><span lang="id"><span>string JavaScript dapat berjalan di - beberapa baris, namun string yang dikutip ganda dan tunggal - tidak dapat dilakukan.</span></span><code>` - -// Interpoasi string -var name = 'Bob', time = 'today'; -`Hello ${name}, how are you ${time}?` - -// </code><span id="result_box" lang="id"><span>Membangun prefix permintaan HTTP digunakan untuk menafsirkan penggantian dan konstruksi</span></span><code> -POST`http://foo.org/bar?a=${a}&b=${b} - Content-Type: application/json - X-Credentials: ${credentials} - { "foo": ${foo}, - "bar": ${bar}}`(myOnReadyStateChangeHandler);</code></pre> - -<p><font><font>Anda harus menggunakan literal string kecuali Anda secara khusus perlu menggunakan objek String. Lihat </font></font>{{jsxref("String")}} <code> </code><font><font>untuk rincian tentang objek </font></font><code>String.</code></p> - -<h4 id="Menggunakan_karakter_khusus_dalam_string"><font><font>Menggunakan karakter khusus dalam string</font></font></h4> - -<p><font><font>Selain karakter biasa, Anda juga bisa menyertakan karakter khusus dalam string, seperti yang ditunjukkan pada contoh berikut.</font></font></p> - -<pre><code>'one line \n another line'</code></pre> - -<p><font><font>Tabel berikut mencantumkan karakter khusus yang dapat Anda gunakan dalam string JavaScript.</font></font></p> - -<table> - <caption><font><font>Tabel: karakter khusus JavaScript</font></font></caption> - <thead> - <tr> - <th scope="col"><font><font>Karakter</font></font></th> - <th scope="col"><font><font>Berarti</font></font></th> - </tr> - </thead> - <tbody> - <tr> - <td><code>\0</code></td> - <td><font><font>Null Byte</font></font></td> - </tr> - <tr> - <td><code>\b</code></td> - <td><font><font>backspase</font></font></td> - </tr> - <tr> - <td><code>\f</code></td> - <td>form feed</td> - </tr> - <tr> - <td><code>\n</code></td> - <td><font><font>Baris baru</font></font></td> - </tr> - <tr> - <td><code>\r</code></td> - <td><font><font>Cariage return</font></font></td> - </tr> - <tr> - <td><code>\t</code></td> - <td><font><font>Tab</font></font></td> - </tr> - <tr> - <td><code>\v</code></td> - <td><font><font>Tab vertikal</font></font></td> - </tr> - <tr> - <td><code>\'</code></td> - <td><font><font>Apostrof atau kutipan tunggal</font></font></td> - </tr> - <tr> - <td><code>\"</code></td> - <td><font><font>Kutipan ganda</font></font></td> - </tr> - <tr> - <td><code>\\</code></td> - <td><font><font>Karakter backslash</font></font></td> - </tr> - <tr> - <td><code>\<em>XXX</em></code></td> - <td><font><font>Karakter dengan pengkodean Latin-1 ditentukan oleh hingga tiga digit oktal </font></font><em><font><font>XXX</font></font></em><font><font> antara 0 dan 377. Misalnya, \251 adalah urutan oktal untuk simbol hak cipta.</font></font></td> - </tr> - <tr> - </tr> - <tr> - <td><code>\x<em>XX</em></code></td> - <td><font><font>Karakter dengan pengkodean Latin-1 yang ditentukan oleh dua digit heksadesimal </font></font><em><font><font>XX</font></font></em><font><font> antara 00 dan FF. </font><font>Misalnya, \xA9 adalah urutan heksadesimal untuk simbol hak cipta.</font></font></td> - </tr> - <tr> - </tr> - <tr> - <td><code>\u<em>XXXX</em></code></td> - <td><font><font>Karakter Unicode ditentukan oleh empat digit heksadesimal </font></font><em><font><font>XXXX</font></font></em><font><font> . </font><font>Misalnya, \u00A9 adalah urutan Unicode untuk simbol hak cipta. </font><font>Lihat </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#String_literals"><font><font>rangkaian pelolosan Unicode</font></font></a><font><font>.</font></font></td> - </tr> - <tr> - <td><code>\u<em>{XXXXX}</em></code></td> - <td><font><font>Kode Unicode lolos. </font><font>Misalnya, \u {2F804} sama dengan Unicode sederhana yang lolos \uD87E \uDC04.</font></font></td> - </tr> - </tbody> -</table> - -<h4 id="Karakter_pelolosan"><font><font>Karakter pelolosan</font></font></h4> - -<p><font><font>Untuk karakter yang tidak tercantum dalam tabel, tanda garis miring terbalik sebelumnya diabaikan, namun penggunaan ini tidak berlaku lagi dan harus dihindari.</font></font></p> - -<p><font><font>Anda dapat memasukkan tanda petik di dalam string sebelum mendahului dengan garis miring terbalik. </font><font>Ini dikenal sebagai </font></font><em><font><font>pelolosan</font></font></em><font><font> dari tanda petik. </font><font>Sebagai contoh:</font></font></p> - -<pre><code>var quote = "He read \"The Cremation of Sam McGee\" by R.W. Service."; -console.log(quote);</code></pre> - -<p><font><font>Hasil dari ini adalah:</font></font></p> - -<pre><code>He read "The Cremation of Sam McGee" by R.W. Service.</code></pre> - -<p><font><font>Untuk menyertakan garis miring terbalik di dalam string, Anda harus melepaskan diri dari karakter garis miring terbalik. </font><font>Misalnya, untuk menetapkan path file </font></font><code>c:\temp</code><font><font> ke string, gunakan yang berikut ini:</font></font></p> - -<pre><code>var home = 'c:\\temp';</code></pre> - -<p><font><font>Anda juga bisa meloloskan dari baris istirahat sebelumnya mendahului mereka dengan garis miring terbalik. </font><font>Garis miring terbalik dan baris istirahat keduanya terlepas dari nilai string.</font></font></p> - -<pre><code>var str = 'this string \ -is broken \ -across multiple \ -lines.' -console.log(str); // this string is broken across multiplelines.</code></pre> - -<p><font><font>Meskipun JavaScript tidak memiliki sintaks "heredoc", Anda bisa mendekat dengan menambahkan pelolosan baris istirahat dan baris istirahat pada akhir setiap baris:</font></font></p> - -<pre><code>var poem = -'Roses are red,\n\ -Violets are blue.\n\ -Sugar is sweet,\n\ -and so is foo.'</code></pre> - -<p><font><font>ECMAScript 2015 memperkenalkan tipe literal baru, yaitu </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/template_strings" rel="noreferrer"><strong><font><font>template literal</font></font></strong></a><font><font> . </font><font>Hal ini memungkinkan banyak fitur baru termasuk string beberapa baris!</font></font></p> - -<p> </p> - -<pre dir="rtl"><code>var poem = -`Roses are red, -Violets are blue. -Sugar is sweet, -and so is foo.`</code></pre> - -<p> </p> - -<h2 id="Informasi_lebih_lanjut"><font><font>Informasi lebih lanjut</font></font></h2> - -<p><font><font>Bab ini berfokus pada sintaks dasar untuk deklarasi dan tipe. </font><font>Untuk mempelajari lebih lanjut tentang konstruksi bahasa JavaScript, lihat juga bab-bab berikut dalam panduan ini:</font></font></p> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling"><font><font>Kontrol aliran dan error handling</font></font></a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration"><font><font>Loop dan iterasi</font></font></a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions"><font><font>Fungsi</font></font></a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators"><font><font>Ekspresi dan operator</font></font></a></li> -</ul> - -<p><font><font>Pada bab berikutnya, kita akan melihat konstruksi aliran kontrol dan penanganan kesalahan.</font></font></p> diff --git a/files/id/web/javascript/panduan/working_with_objects/index.html b/files/id/web/javascript/panduan/working_with_objects/index.html deleted file mode 100644 index 4449732e61..0000000000 --- a/files/id/web/javascript/panduan/working_with_objects/index.html +++ /dev/null @@ -1,492 +0,0 @@ ---- -title: Bekerja dengan objek -slug: Web/JavaScript/Panduan/Working_with_Objects -tags: - - 'I10n:priority' - - JavaScript - - Konstruktor - - Membandingkan objek - - Objek - - Panduan - - Pemula - - dokumen -translation_of: Web/JavaScript/Guide/Working_with_Objects ---- -<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}</div> - -<p class="summary">JavaScript dirancang berdasarkan paradigma berbasis objek sederhana. Objek adalah kumpulan dari properti, dan properti adalah sepasang hubungan antara nama (atau kunci) dan nilai. Nilai properti bisa berupa fungsi, Dalam hal ini properti itu disebut metode. Selain objek yang sudah di tentukan pada peramban, Kamu bisa menentukan objekmu sendiri. Bab ini menjelaskan cara memakai objek, properti, fungsi, dan metode, serta bagaimana cara membuat objekmu sendiri.</p> - -<h2 id="Ikhtisar_objek">Ikhtisar objek</h2> - -<p>Objek di JavaScript sama seperti kebanyakan bahasa pemrograman lainnya, bisa dibandingkan dengan objek dalam kehidupan nyata. Konsep objek dalam JavaScript dapat dipahami dengan kehidupan nyata, objek nyata.</p> - -<p>Di JavaScript, objek adalah entitas yang mandiri dengan properti dan tipe. Bandingkan dengan cangkir, misalnya. Sebuah cangkir adalah objek dengan banyak properti. Cangkir punya warna, desain, berat, materi bahan, dll. Dengan cara sama, objek JavaScript juga punya banyak properti yang menjelaskan karakteristiknya.</p> - -<h2 id="Objek_dan_properti">Objek dan properti</h2> - -<p>Objek JavaScript punya banyak properti yang terkait dengannya. Properti dari objek dapat didefinisikan sebagai variabel yang dilampirkan pada objek itu. Properti dari objek pada dasarnya sama dengan variabel JavaScript biasa, kecuali lampiran pada objek. Properti objek menentukan karakteristik objek itu. Kamu mengakses properti objek dengan sebuah notasi titik sederhana:</p> - -<pre class="brush: js">objectName.propertyName -</pre> - -<p>Seperti semua variabel JavaScript, baik nama objek (bisa jadi variabel normal) maupun nama properti peka terhadap besar huruf. Kamu bisa mendefinisi properti dengan mengassign nilai. Contohnya, ayo buat objek bernama <code>myCar</code> dan dan berikan dia properti bernama <code>make</code>, <code>model</code>, dan <code>year</code> sebagai berikut:</p> - -<pre class="brush: js">var <code>myCar </code>= new Object(); -<code>myCar</code>.make = 'Ford'; -<code>myCar</code>.model = 'Mustang'; -<code>myCar</code>.year = 1969; -</pre> - -<p>Nilai properti objek yang tidak diassign adalah {{jsxref("undefined")}} (dan bukan {{jsxref("null")}}).</p> - -<pre class="brush: js">myCar.color; // undefined</pre> - -<p>Properti dari objek JavaScript juga bisa diakses atau diset menggunakan notasi kurung siku (untuk lebih detil lihat <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors">aksesor properti</a>). Terkadang objek disebut <em>associative array</em>, karena tiap properti dikaitkan dengan nilai string yang bisa digunakan untuk mengaksesnya. Jadi, contohnya, kamu bisa mengakses properti dari objek <code>myCar</code> seperti berikut:</p> - -<pre class="brush: js">myCar['make'] = 'Ford'; -myCar['model'] = 'Mustang'; -myCar['year'] = 1969; -</pre> - -<p>Nama properti objek bisa berupa string dari JavaScript yang valid, atau apapun yang dapat diubah menjadi string, termasuk string kosong. Namun, nama properti apapun yang tidak valid sebagai identitas di JavaScript (contohnya, nama properti yang memiliki spasi atau tanda hubung, atau yang dimulai dengan angka) hanya bisa diakses menggunakan notasi kurung siku. Notasi ini juga sangat berguna ketika nama properti harus ditentukan secara dinamis (ketika nama properti belum ditentukan hingga runtime). Contohnya sebagai berikut:</p> - -<pre class="brush: js">// empat variabel dibuat dan diberi nilai sekali jalan, -// dipisahkan oleh koma -var myObj = new Object(), - str = 'myString', - rand = Math.random(), - obj = new Object(); - -myObj.type = 'Syntax titik'; -myObj['date created'] = 'String dengan spasi'; -myObj[str] = 'Nilai string'; -myObj[rand] = 'Angka Random'; -myObj[obj] = 'Objek'; -myObj[''] = 'Bahkan string kosong'; - -console.log(myObj); -</pre> - -<p>Tolong dicatat bahwa semua kunci di dalam notasi kurung siku diubah ke dalam tipe String, karena objek JavaScript hanya bisa punya tipe String sebagai tipe kunci. Contohnya, dalam kode di atas, ketika kunci <code>obj</code> ditambahkan dalam <code>myObj</code>, JavaScript akan memanggil method <code>obj.toString()</code> , dan menggunakan hasil string ini sebagai kunci baru.</p> - -<p>Kamu juga bisa mengakses properti menggunakan nilai string yang disimpan dalam variabel:</p> - -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> propertyName <span class="operator token">=</span> <span class="string token">'make'</span><span class="punctuation token">;</span> -myCar<span class="punctuation token">[</span>propertyName<span class="punctuation token">]</span> <span class="operator token">=</span> <span class="string token">'Ford'</span><span class="punctuation token">;</span> - -propertyName <span class="operator token">=</span> <span class="string token">'model'</span><span class="punctuation token">;</span> -myCar<span class="punctuation token">[</span>propertyName<span class="punctuation token">]</span> <span class="operator token">=</span> <span class="string token">'Mustang'</span><span class="punctuation token">;</span></code></pre> - -<p>Kamu bisa menggunakan notasi kurung siku dengan <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code> untuk mengiterasi ulang semua kumpulan properti yang terdaftar dari sebuah objek. Untuk mengilustrasikan cara kerjanya, fungsi berikut ini menampilkan properti dari objek ketika kamu memasukkan objek dan nama objek sebagai argumen pada fungsi:</p> - -<pre class="brush: js">function showProps(obj, objName) { - var result = ''; - for (var i in obj) { - // obj.hasOwnProperty() digunakan untuk menyaring properti dari rantai prototipe objek - if (obj.hasOwnProperty(i)) { - result += objName + '.' + i + ' = ' + obj[i] + '\n'; - } - } - return result; -} -</pre> - -<p>Jadi memanggil fungsi <code>showProps(mobilKu, "mobilKu")</code> akan mengembalikan:</p> - -<pre class="brush: js line-numbers language-js"><code class="language-js">myCar<span class="punctuation token">.</span>make <span class="operator token">=</span> Ford -myCar<span class="punctuation token">.</span>model <span class="operator token">=</span> Mustang -myCar<span class="punctuation token">.</span>year <span class="operator token">=</span> <span class="number token">1969</span></code></pre> - -<h2 id="Mengenumerasi_properti_dari_objek">Mengenumerasi properti dari objek</h2> - -<p>Mulai <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla" title="en-US/docs/JavaScript/ECMAScript 5 support in Mozilla">ECMAScript 5</a>, ada tiga cara asli untuk mendaftarkan/melintasi properti objek:</p> - -<ul> - <li>Perulangan <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in" title="en-US/docs/JavaScript/Reference/Statements/for...in">for...in</a></code><br> - Metode ini melintasi semua kumpulan properti yang terdaftar dari objek dan rantai prototipenya.</li> - <li>{{jsxref("Object.keys", "Object.keys(o)")}}<br> - Metode ini mengembalikan array dengan semua milik (tidak di rantai prototip) nama-nama ("kunci") properti terhitung dari objek <code>o</code>.</li> - <li>{{jsxref("Object.getOwnPropertyNames", "Object.getOwnPropertyNames(o)")}}<br> - Metode ini mengembalikan sebuah array berisikan semua nama-nama properti (kumpulan terhitung atau tidak) dari sebuah objek <code>o</code>.</li> -</ul> - -<p>Sebelum ECMAScript 5, tidak ada cara asli untuk mendaftarkan semua properti-properti dari suatu objek. Namun, ini dapat dicapai dengan fungsi berikut:</p> - -<pre class="brush: js">function listAllProperties(o) { - var objectToInspect; - var result = []; - - for(objectToInspect = o; objectToInspect !== null; objectToInspect = Object.getPrototypeOf(objectToInspect)) { - result = result.concat(Object.getOwnPropertyNames(objectToInspect)); - } - - return result; -} -</pre> - -<p>Ini dapat berguna untuk memperlihatkan properti-properti tersembunyi" (properti-properti dalam rantai prototip yang tidak dapat diakses melalui objek, karena properti lain memiliki nama yang sama di rantai prototip sebelumnya). Mendaftarkan properti-properti yang dapat diakses hanya dapat dilakukan dengan menghapus duplikat di dalam array.</p> - -<h2 id="Membuat_objek_baru">Membuat objek baru</h2> - -<p>JavaScript mempunyai sejumlah objek yang telah ditetapkan. Selain itu, kamu dapat membuat objek sendiri. Kamu bisa membuat sebuah objek menngunakan sebuah <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">object initializer</a>. Sebagai alternatif, kamu bisa membuat sebuah fungsi konstruktor lalu menginstanisasi sebuah pemanggilan objek bersama dengan operator <code>new</code>.</p> - -<h3 id="Menggunakan_object_initializer">Menggunakan object initializer</h3> - -<p>Selain membuat objek menggunakan fungsi konstruktor, kamu bisa membuat objek memakai <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">object initializer</a>. Kadang pemakaian object initializer disamakan dengan pembuatan objek dengan notasi literal. "Object initializer" sama dengan terminologi dalam C++.</p> - -<p>Syntax untuk objek yang menggunakan object initializer ialah:</p> - -<pre class="brush: js">var obj = { property_1: value_1, // property_# bisa berupa identifier... - 2: value_2, // atau angka... - // ..., - 'property n': value_n }; // atau string -</pre> - -<p>Di mana <code>obj</code> adalah nama objek baru, setiap <code>property_<em>i</em></code> adalah identifier (baik nama, angka, atau string literal), dan setiap <code>value_<em>i</em></code> adalah expresi yang nilainya diassign ke <code>property_<em>i</em></code>. <code>obj</code> dan assignment adalah opsional, jika kamu tidak butuh rujukan ke objek ini, kamu tak usah mengassign dia ke variabel. (Ingat bahwa kamu harus membungkus literal objek dalam tanda kurung jika objeknya muncul dalam statement diharapkan, supaya bisa membedakan mana literal dan mana statement blok.)</p> - -<p>Object initializer adalah expresi, dan setiap object initializer mengembalikan objek baru. Objek baru dibuat saat ia muncul dalam statement yang dieksekusi. Object initializer yang identik membuat objek berbeda yang tidak akan sama bila dibandingkan. Objek dibuat seolah-olah ada panggilan <code>new Object()</code>; yaitu, objek yang dibuat dari expresi literal objek adalah instance dari <code>Object</code>.</p> - -<p>Statement berikut membuat objek dan mengassign dia ke variabel <code>x</code> jika dan hanya jika expresi <code>cond</code> benar:</p> - -<pre class="brush: js">if (cond) var x = {greeting: 'hi there'}; -</pre> - -<p>Contoh berikut membuat <code>myHonda</code> dengan tiga properti. Ingat bahwa properti <code>engine</code> juga adalah objek yang punya properti sendiri.</p> - -<pre class="brush: js">var myHonda = {color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}}; -</pre> - -<p>Kamu juga bisa menggunakan object initializer untuk membuat array. Lihat <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Array_literals">literal array</a>.</p> - -<h3 id="Menggunakan_fungsi_konstruktor">Menggunakan fungsi konstruktor</h3> - -<p>Kamu bisa membuat objek dengan dua langkah alternatif ini:</p> - -<ol> - <li>Definisikan tipe objek dengan menulis fungsi konstruktor. Ada konvensi dengan alasan bagus untuk menggunakan huruf kapital inisial.</li> - <li>Membuat instance objek dengan <code>new</code>.</li> -</ol> - -<p>Untuk mendefinisi tipe objek, buat fungsi untuk tipe objek tersebut yang menspesifikasi nama, properti, dan metodenya. Misalnya, kamu ingin membuat tipe objek untuk mobil. Kamu ingin jenis objek ini disebut <code>Car</code>, dan kamu ingin punya properti pembuat, model, dan tahun. Untuk melakukan ini, kamu akan menulis fungsi berikut:</p> - -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">Car</span><span class="punctuation token">(</span><span class="parameter token">make<span class="punctuation token">,</span> model<span class="punctuation token">,</span> year</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">this</span><span class="punctuation token">.</span>make <span class="operator token">=</span> make<span class="punctuation token">;</span> - <span class="keyword token">this</span><span class="punctuation token">.</span>model <span class="operator token">=</span> model<span class="punctuation token">;</span> - <span class="keyword token">this</span><span class="punctuation token">.</span>year <span class="operator token">=</span> year<span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> - -<p>Perhatikan penggunaan <code>this</code> untuk mengassign nilai ke properti objek berdasarkan nilai yang diteruskan kepada fungsi.</p> - -<p>Sekarang kamu bisa membuat objek <code>myCar</code> sebagai berikut:</p> - -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> mycar <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Car</span><span class="punctuation token">(</span><span class="string token">'Eagle'</span><span class="punctuation token">,</span> <span class="string token">'Talon TSi'</span><span class="punctuation token">,</span> <span class="number token">1993</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> - -<p>Statement ini membuat <code>myCar</code> dan mengassign ia nilai spesifik untuk propertinya. Lalu nilai dari <code>myCar.make</code> ialah string "Eagle", <code>myCar.year</code> ialah integer 1993, dan seterusnya.</p> - -<p>Kamu bisa membuat sejumlah objek <code>Car</code> dengan memanggil <code>new</code>. Sebagai contoh.</p> - -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> kenscar <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Car</span><span class="punctuation token">(</span><span class="string token">'Nissan'</span><span class="punctuation token">,</span> <span class="string token">'300ZX'</span><span class="punctuation token">,</span> <span class="number token">1992</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> vpgscar <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Car</span><span class="punctuation token">(</span><span class="string token">'Mazda'</span><span class="punctuation token">,</span> <span class="string token">'Miata'</span><span class="punctuation token">,</span> <span class="number token">1990</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> - -<p>Objek bisa punya properti yang merupakan objek lain. Misalnya, kamu mendefinisi objek <code>person</code> sebagai berikut:</p> - -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">Person</span><span class="punctuation token">(</span><span class="parameter token">name<span class="punctuation token">,</span> age<span class="punctuation token">,</span> sex</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">this</span><span class="punctuation token">.</span>name <span class="operator token">=</span> name<span class="punctuation token">;</span> - <span class="keyword token">this</span><span class="punctuation token">.</span>age <span class="operator token">=</span> age<span class="punctuation token">;</span> - <span class="keyword token">this</span><span class="punctuation token">.</span>sex <span class="operator token">=</span> sex<span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> - -<p>dan kemudian menginstantiasi dua objek <code>person</code> baru sebagai berikut:</p> - -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> rand <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Person</span><span class="punctuation token">(</span><span class="string token">'Rand McKinnon'</span><span class="punctuation token">,</span> <span class="number token">33</span><span class="punctuation token">,</span> <span class="string token">'M'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> ken <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Person</span><span class="punctuation token">(</span><span class="string token">'Ken Jones'</span><span class="punctuation token">,</span> <span class="number token">39</span><span class="punctuation token">,</span> <span class="string token">'M'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> - -<p>Kemudian, kamu bisa menulis ulang definisi <code>Car</code> untuk memasukkan properti <code>owner</code> yang mengambil objek <code>person</code> sebagai berikut:</p> - -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">Car</span><span class="punctuation token">(</span><span class="parameter token">make<span class="punctuation token">,</span> model<span class="punctuation token">,</span> year<span class="punctuation token">,</span> owner</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">this</span><span class="punctuation token">.</span>make <span class="operator token">=</span> make<span class="punctuation token">;</span> - <span class="keyword token">this</span><span class="punctuation token">.</span>model <span class="operator token">=</span> model<span class="punctuation token">;</span> - <span class="keyword token">this</span><span class="punctuation token">.</span>year <span class="operator token">=</span> year<span class="punctuation token">;</span> - <span class="keyword token">this</span><span class="punctuation token">.</span>owner <span class="operator token">=</span> owner<span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> - -<p>Untuk menginstantiasi objek baru, gunakan ini:</p> - -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> car1 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Car</span><span class="punctuation token">(</span><span class="string token">'Eagle'</span><span class="punctuation token">,</span> <span class="string token">'Talon TSi'</span><span class="punctuation token">,</span> <span class="number token">1993</span><span class="punctuation token">,</span> rand<span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> car2 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Car</span><span class="punctuation token">(</span><span class="string token">'Nissan'</span><span class="punctuation token">,</span> <span class="string token">'300ZX'</span><span class="punctuation token">,</span> <span class="number token">1992</span><span class="punctuation token">,</span> ken<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> - -<p>Perhatikan bahwa ketimbang meneruskan nilai string atau integer literal ketika membuat objek baru, statement diatas meneruskan objek <code>rand</code> dan <code>ken</code> sebagai argumen untuk pemilik. Lalu jika kamu mau mencari nama pemilik car2, kamu bisa mengakses properti berikut:</p> - -<pre class="brush: js">car2.owner.name -</pre> - -<p>Ingat bahwa kamu selalu bisa menambah properti ke objek yang sudah dibuat sebelumnya. Contohnya statement</p> - -<pre class="brush: js">car1.color = 'black'; -</pre> - -<p>menambah properti <code>color</code> pada car1, dan mengassign nilai "black". Ini tak mempengaruhi objek lain. Untuk menambah properti baru ke semua objek dari tipe yang sama, kamu harus menambah properti pada definisi tipe objek <code>Car</code>.</p> - -<h3 id="Menggunakan_metode_Object.create">Menggunakan metode <code>Object.create</code></h3> - -<p>Objek bisa juga dibuat menggunakan metode {{jsxref("Object.create()")}}. Metode ini bisa sangat berguna, karena ia memungkinkan kamu memilih prototipe objek untuk objek yang mau kamu buat, tanpa harus mendefinisi fungsi konstruktor.</p> - -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="comment token">// Enkapsulasi metode dan properti Animal</span> -<span class="keyword token">var</span> Animal <span class="operator token">=</span> <span class="punctuation token">{</span> - type<span class="punctuation token">:</span> <span class="string token">'Invertebrates'</span><span class="punctuation token">,</span> <span class="comment token">// Nilai properti default</span> - <span class="function function-variable token">displayType</span><span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="comment token">// Method which will display type of Animal</span> - console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>type<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> -<span class="punctuation token">}</span><span class="punctuation token">;</span> - -<span class="comment token">// Create new animal type called animal1 </span> -<span class="keyword token">var</span> animal1 <span class="operator token">=</span> Object<span class="punctuation token">.</span><span class="function token">create</span><span class="punctuation token">(</span>Animal<span class="punctuation token">)</span><span class="punctuation token">;</span> -animal1<span class="punctuation token">.</span><span class="function token">displayType</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Output:Invertebrates</span> - -<span class="comment token">// Create new animal type called Fishes</span> -<span class="keyword token">var</span> fish <span class="operator token">=</span> Object<span class="punctuation token">.</span><span class="function token">create</span><span class="punctuation token">(</span>Animal<span class="punctuation token">)</span><span class="punctuation token">;</span> -fish<span class="punctuation token">.</span>type <span class="operator token">=</span> <span class="string token">'Fishes'</span><span class="punctuation token">;</span> -fish<span class="punctuation token">.</span><span class="function token">displayType</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Output:Fishes</span></code></pre> - -<h2 id="Warisan">Warisan</h2> - -<p>Semua objek di javascript diwariskan setidaknya dari satu objek lain. Objek yang diwariskan disebut prototipe, dan properti warisan bisa ditemukan dalam objek <code>prototype</code> dari konstruktor. Lihat <a href="/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Rantai warisan dan prototype</a> untuk informasi lebih lanjut.</p> - -<h2 id="Mengindex_properti_objek">Mengindex properti objek</h2> - -<p>Kamu dapat merujuk ke properti dari objek menggunakan nama propertinya ataupun index urutannya. Jika kamu awalnya mendefinisi properti memakai namanya, kamu harus selalu merujuknya dengan namanya, dan jika kamu awalnya mendefinisikan properti memakai index, kamu harus selalu merujuknya dengan indexnya.</p> - -<p>Pembatasan ini berlaku ketika kamu membuat objek dan propertinya dengan fungsi konstruktor (seperti yang kita lakukan sebelumnya dengan jenis objek <code>Car</code>) dan ketika kamu mendefinisi properti individual secara explisit (misalnya, <code>myCar.color = "ref"</code>). Jika kamu awalnya mendefinisi properti objek dengan index, seperti <code>myCar[5] = "25 mpg"</code>, maka kamu merujuk ke properti tersebut dengan <code>myCar[5]</code>.</p> - -<p>Pengecualian dalam aturan ini adalah objek mirip-array pantulan dari HTML, seperti objek mirip-array <code>forms</code>. Kamu selalu dapat merujuk ke objek dalam objek mirip-array ini menggunakan nomor urutan mereka (berdasarkan di mana mereka muncul dalam dokumen) atau nama mereka (jika didefinisi). Misalnya, jika tag <code><FORM></code> kedua dalam dokumen punya atribut <code>NAME</code> "myForm", kamu dapat merujuk ke form tersebut sebagai <code>document.forms[1]</code> atau <code>document.forms["myForm"]</code> atau <code>document.forms.myForm</code>.</p> - -<h2 id="Mendefinisi_properti_untuk_tipe_objek">Mendefinisi properti untuk tipe objek</h2> - -<p>Kamu dapat menambah properti ke tipe objek yang didefinisi sebelumnya menggunakan properti <code>prototype</code>. Ini mendefinisi properti yang dibagikan semua objek dari tipe yang dispesifikasi, bukan cuma satu instance objek. Kode berikut menambahkan sebuah properti <code>color</code> ke semua objek dari tipe objek <code>Car</code>, dan kemudian mengassign nilai ke properti <code>color</code> dari objek <code>car1</code>.</p> - -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="class-name token">Car</span><span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>color <span class="operator token">=</span> <span class="keyword token">null</span><span class="punctuation token">;</span> -car1<span class="punctuation token">.</span>color <span class="operator token">=</span> <span class="string token">'black'</span><span class="punctuation token">;</span></code></pre> - -<p>Lihat <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype" title="en-US/docs/JavaScript/Reference/Global Objects/Function/prototype">properti <code>prototipe</code></a> dari objek <code>Function</code> dalam <a href="/en-US/docs/Web/JavaScript/Reference">referensi JavaScript</a> untuk informasi lebih lanjut.</p> - -<h2 id="Mendefiniskan_metode">Mendefiniskan metode</h2> - -<p><em>Metode</em> ialah fungsi yang terasosiasi dengan objek, atau sederhananya, metode ialah properti dari objek berupa fungsi. Metode didefinisi sebagai cara fungsi nornal didefinisi, kecuali mereka harus diassign sebagai properti objek. Lihat juga <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">definisi metode</a> untuk lebih detil. Contohnya:</p> - -<pre class="brush: js">objectName.methodname = functionName; - -var myObj = { - myMethod: function(params) { - // ...do something - } - - // OR THIS WORKS TOO - - myOtherMethod(params) { - // ...do something else - } -}; -</pre> - -<p>Di mana <code>objectName</code> adalah metode yang sudah ada, <code>methodname</code> ialah nama yang kamu assign ke metode, dan <code>functionName</code> adalah nama fungsi.</p> - -<p>Lalu kamu bisa memanggil metode dalam kontex objek sebagai berikut:</p> - -<pre class="brush: js">object.methodname(params); -</pre> - -<p>Kamu bisa mendefinisi metode untuk tipe objek dengan memasukkan sebuah definisi metode dalam fungsi konstruktor objek. Kamu bisa mendefinisi fungsi yang akan memformat dan menampilkan properti objek <code>Car</code> sebelumnya; contohnya,</p> - -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">displayCar</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> result <span class="operator token">=</span> <span class="template-string token"><span class="string token">`A Beautiful </span><span class="interpolation token"><span class="interpolation-punctuation punctuation token">${</span><span class="keyword token">this</span><span class="punctuation token">.</span>year<span class="interpolation-punctuation punctuation token">}</span></span><span class="string token"> </span><span class="interpolation token"><span class="interpolation-punctuation punctuation token">${</span><span class="keyword token">this</span><span class="punctuation token">.</span>make<span class="interpolation-punctuation punctuation token">}</span></span><span class="string token"> </span><span class="interpolation token"><span class="interpolation-punctuation punctuation token">${</span><span class="keyword token">this</span><span class="punctuation token">.</span>model<span class="interpolation-punctuation punctuation token">}</span></span><span class="string token">`</span></span><span class="punctuation token">;</span> - <span class="function token">pretty_print</span><span class="punctuation token">(</span>result<span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> - -<p>Di mana <code>pretty_print</code> adalah fungsi untuk menampilkan garis horizontal dan string. Perhatikan penggunaan <code>this</code> untuk merujuk ke objek yang punya metode tersebut.</p> - -<p>Kamu bisa menjadikan fungsi ini metode <code>Car</code> dengan menambah statement</p> - -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">this</span><span class="punctuation token">.</span>displayCar <span class="operator token">=</span> displayCar<span class="punctuation token">;</span></code></pre> - -<p>ke definisi objek. Jadi definisi penuh dari <code>Car</code> sekarang akan terlihat seperti</p> - -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">Car</span><span class="punctuation token">(</span><span class="parameter token">make<span class="punctuation token">,</span> model<span class="punctuation token">,</span> year<span class="punctuation token">,</span> owner</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">this</span><span class="punctuation token">.</span>make <span class="operator token">=</span> make<span class="punctuation token">;</span> - <span class="keyword token">this</span><span class="punctuation token">.</span>model <span class="operator token">=</span> model<span class="punctuation token">;</span> - <span class="keyword token">this</span><span class="punctuation token">.</span>year <span class="operator token">=</span> year<span class="punctuation token">;</span> - <span class="keyword token">this</span><span class="punctuation token">.</span>owner <span class="operator token">=</span> owner<span class="punctuation token">;</span> - <span class="keyword token">this</span><span class="punctuation token">.</span>displayCar <span class="operator token">=</span> displayCar<span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> - -<p>Maka kamu bisa memanggil metode <code>displayCar</code> untuk masing-masig objek sebagai berikut:</p> - -<pre class="brush: js line-numbers language-js"><code class="language-js">car1<span class="punctuation token">.</span><span class="function token">displayCar</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -car2<span class="punctuation token">.</span><span class="function token">displayCar</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> - -<h2 id="Menggunakan_this_untuk_referensi_Objek">Menggunakan <code>this</code> untuk referensi Objek</h2> - -<p>JavaScript punya katakunci spesial <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code>, kamu bisa memakainya dalam metode untuk merujuk ke objek saat ini. Misalnya, kamu punya fungsi yang disebut <code>validate</code> yang memvalidasi properti <code>value</code>, yang diberikan objek dan nilai atas dan bawah:</p> - -<pre class="brush: js">function validate(obj, lowval, hival) { - if ((obj.value < lowval) || (obj.value > hival)) { - alert('Invalid Value!'); - } -} -</pre> - -<p>Kemudian kamu bisa panggil <code>validate</code> di penangan event <code>onchange</code> setiap elemen form, gunakan <code>this</code> untuk meneruskan elemen. Seperti contoh berikut:</p> - -<pre class="brush: html"><input type="text" name="age" size="3" - onChange="validate(this, 18, 99)"> -</pre> - -<p>Secara umum, <code>this</code> merujuk ke pemanggilan objek dalam metode.</p> - -<p>Ketika dikombinasikan dengan properti <code>form</code>, <code>this</code> bisa mengacu ke induk objek form saat ini. Dalam contoh berikut, form <code>myForm</code> berisi objek <code>Text</code> dan sebuah tombol. Ketika pengguna mengklik tombol, nilai objek <code>Text</code> diset ke nama form tersebut. Penangan event <code>onclick</code> tombol menggunakan <code>this.form</code> untuk merujuk ke induk form, <code>myForm</code>.</p> - -<pre class="brush: html"><form name="myForm"> -<p><label>Form name:<input type="text" name="text1" value="Beluga"></label> -<p><input name="button1" type="button" value="Show Form Name" - onclick="this.form.text1.value = this.form.name"> -</p> -</form></pre> - -<h2 id="Mendefinisikan_getter_dan_setter">Mendefinisikan getter dan setter</h2> - -<p><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">Getter</a> ialah metode yang mendapat nilai dari properti spesifik. <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">Setter</a> ialah metode yang mengatur nilai properti spesifik. Kamu bisa mendefinisi getter dan setter objek inti apapun yang sudah ditetapkan atau objek yang ditetapkan pengguna yang mendukung penambahan peroperti-properti baru. Syntax untuk mendefinisi getter dan setter menggunakan syntax literal objek.</p> - -<p>Berikut ilustrasi cara getter dan setter bisa bekerja untuk objek <code>o</code> yang sudah didefinisi user.</p> - -<pre class="brush: js">var o = { - a: 7, - get b() { - return this.a + 1; - }, - set c(x) { - this.a = x / 2; - } -}; - -console.log(o.a); // 7 -console.log(o.b); // 8 -o.c = 50; -console.log(o.a); // 25 -</pre> - -<p>Properti objek <code>o</code> adalah:</p> - -<ul> - <li><code>o.a</code> — angka</li> - <li><code>o.b</code> — getter yang mengembalikan <code>o.a</code> tambah 1</li> - <li><code>o.c</code> — setter yang mengeset nilai <code>o.a</code> setengah dari nilai <code>o.c</code> yang diset.</li> -</ul> - -<p>Harap diingat bahwa nama fungsi dari getter dan setter yang didefisini dalam literal objek menggunakan "[gs]et <em>property</em>()" (dibandingkan dengan <code>__define[GS]etter__</code> ) bukanlah nama getter mereka sendiri, meski syntax <code>[gs]et <em>propertyName</em>(){ }</code> membuatmu berpikir lain. Untuk menamai fungsi dalam getter atau setter menggunakan syntax "[gs]et <em>property</em>()", definiskan fungsi, dengan nama explisit, secara terprogram menggunakan <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty" title="en-US/docs/Core JavaScript 1.5 Reference/Global -Objects/Object/defineProperty">Object.defineProperty</a></code> (atau pengganti legacy <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineGetter" title="en-US/docs/Core JavaScript 1.5 Reference/Global -Objects/Object/defineGetter">Object.prototype.__defineGetter__</a></code>).</p> - -<p>Kode berikut mengilustrasikan cara getter dan setter bisa memperluas prototipe {{jsxref("Date")}} untuk menambah properti <code>year</code> ke semua instance dari kelas <code>Date</code> yang sudah didefinisi. Ia menggunakan metode kelas <code>Date</code> yang sudah ada, <code>getFullYear</code> dan <code>setFullYear</code> untuk mendukung properti getter dan setter <code>year</code>.</p> - -<p>Statement ini mendefinisi getter dan setter untuk properti tahun:</p> - -<pre class="brush: js">var d = Date.prototype; -Object.defineProperty(d, 'year', { - get: function() { return this.getFullYear(); }, - set: function(y) { this.setFullYear(y); } -}); -</pre> - -<p>Statement ini menggunakan getter dan setter dalam objek <code>Date</code>:</p> - -<pre class="brush: js">var now = new Date(); -console.log(now.year); // 2000 -now.year = 2001; // 987617605170 -console.log(now); -// Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001 -</pre> - -<p>Secara pinsip, getter dan setter bisa</p> - -<ul> - <li>didefinisi menggunakan <a href="#Object_initializers">object initializers</a>, atau</li> - <li>ditambahkan kemudian ke objek apapun kapanpun menggunakan metode penambahan getter atau setter.</li> -</ul> - -<p>Ketika mendefiniisi getter dan setter menggunakan <a href="#Object_initializers">object initializer</a> yang harus kamu lakukan adalah memprefix metode getter dengan <code>get</code> dan metode setter dengan <code>set</code>. Tentunya, metode getter tidak boleh mengharapkan parameter, lalu metode setter mengharapkan hanya satu parameter (nilai baru untuk diset). Contohnya:</p> - -<pre class="brush: js">var o = { - a: 7, - get b() { return this.a + 1; }, - set c(x) { this.a = x / 2; } -}; -</pre> - -<p>Getter dan setter juga bisa ditambah ke objek kapanpun setelah membuat objek menggunakan metode <code>Object.defineProperties</code>. Parameter pertama metode ini ialah object tempat kamu mendefinisi getter atau setter. Parameter kedua ialah objek yang nama propertinya berupa nama getter atau setter,dan yang nilai propertinya berupa objek yang mendefinisi fungsi getter atau setter. Berikut adalah contoh mendefinisi getter dan setter yang sama yang digunakan dalam contoh sebelumnya:</p> - -<pre class="brush: js">var o = { a: 0 }; - -Object.defineProperties(o, { - 'b': { get: function() { return this.a + 1; } }, - 'c': { set: function(x) { this.a = x / 2; } } -}); - -o.c = 10; // Menjalankan setter, yang mengassign 10 / 2 (5) ke properti 'a' -console.log(o.b); // Menjalankan getter, yang menghasilkan a + 1 atau 6 -</pre> - -<p>Yang manapun dari dua form ini yang dipilih tergantung dari gaya pemrograman dan tugas di tangan. Jika kamu sudah memilih object initializer ketika mendefinisi prototipe kamu mungkin akan sering memilih form pertama. Form ini lebih compact dan natural. Namun, kalau kamu harus menambah getter dan setter nanti — karena kamu tak menulis prototipenya atau object khusus — maka form kedua menjadi satu-satunya solusi. Form kedua mungkin paling baik mewakiliki sifat dinamis JavaScript — tapi ia bisa membuat kode sulit dibaca dan dipahami.</p> - -<h2 id="Menghapus_properti">Menghapus properti</h2> - -<p>Kamu bisa menghapus properti yang bukan warisan menggunakan operator <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code>. Kode berikut menampilkan cara menghapus properti.</p> - -<pre class="brush: js">// Membuat objek baru, myobj, dengan dua properti, a dan b. -var myobj = new Object; -myobj.a = 5; -myobj.b = 12; - -// Mengapus properti a, menyisakan myobj hanya dengan properti b. -delete myobj.a; -console.log ('a' in myobj); // menghasilkan "false" -</pre> - -<p>Kamu juga bisa memakai <code>delete</code> untuk menghapus variabel global jika katakunci <code>var</code> tidak dipakai untuk mendeklarasi variabel itu:</p> - -<pre class="brush: js">g = 17; -delete g; -</pre> - -<h2 id="Membandingkan_objek">Membandingkan objek</h2> - -<p>Dalam JavaScript objek ialah tipe referensi. Dua objek berbeda tak akan pernah sama, meski mereka punya properti yang sama. Hanya membandingkan referensi objek yang sama dengannya menghasilkan true.</p> - -<pre class="brush: js">// Dua variabel, dua objek berbeda dengan properti yang sama -var fruit = {name: 'apple'}; -var fruitbear = {name: 'apple'}; - -fruit == fruitbear; // mengembalikan false -fruit === fruitbear; // mengembalikan false</pre> - -<pre class="brush: js">// Dua variabel, objek tunggal -var fruit = {name: 'apple'}; -var fruitbear = fruit; // assign referensi objek buah ke fruitbear - -// di sini fruit dan fruitbear menunjuk ke objek yang sama -fruit == fruitbear; // mengembalikan true -fruit === fruitbear; // mengembalikan true -</pre> - -<pre class="brush: js">fruit.name = 'grape'; -console.log(fruitbear); // menghasilkan { name: "grape" } ketimbang { name: "apple" } -</pre> - -<p>Untuk informasi lebih tentang operator pembandingan, lihat <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">Operator pembandingan</a>.</p> - -<h2 id="Lihat_juga">Lihat juga</h2> - -<ul> - <li>Untuk mempelajari lebih dalam, baca <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">detil model objek javaScript</a>.</li> - <li>Untuk belejar tentang kelas ECMAScript 2015 (cara baru membuat objek), baca bab <a href="/en-US/docs/Web/JavaScript/Reference/Classes">kelas JavaScript</a>.</li> -</ul> - -<p>{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}</p> |