diff options
Diffstat (limited to 'files/id/web/javascript')
110 files changed, 20619 insertions, 0 deletions
diff --git a/files/id/web/javascript/a_re-introduction_to_javascript/index.html b/files/id/web/javascript/a_re-introduction_to_javascript/index.html new file mode 100644 index 0000000000..5b7ef3b14e --- /dev/null +++ b/files/id/web/javascript/a_re-introduction_to_javascript/index.html @@ -0,0 +1,862 @@ +--- +title: Sebuah pengenalan ulang pada bahasa JavaScript (tutorial JS) +slug: Web/JavaScript/A_re-introduction_to_JavaScript +translation_of: Web/JavaScript/A_re-introduction_to_JavaScript +--- +<div>{{jsSidebar}}</div> + +<h2 id="Pengantar">Pengantar</h2> + +<p>Mengapa melakukan pengenalan ulang? Karena bahasa {{Glossary("JavaScript")}} terkenal dengan cap buruk sebagai <a href="http://javascript.crockford.com/javascript.html">bahasa pemprograman yang paling sering membuat kesalahpahaman di dunia</a>. Sering kali JavaScript diejek sebagai sebuah mainan (layaknya mobil-mobilan) karena terlihat sederhana, tetapi dibalik kesederhanaannya tersebut, terdapat beberapa fitur yang sangat andal. Saat ini JavaScript digunakan oleh aplikasi-aplikasi terkenal dalam jumlah<em> </em>yang luar biasa banyaknya, memiliki pengetahuan yang mendalam tentang teknologi ini adalah salah satu skill penting bagi para pengembang <em>web </em>atau <em>mobile</em>.</p> + +<p>Ada baiknya kita memulai pengenalan ini dengan mengetahui sekilas gambaran sejarah dari bahasa pemograman ini. JavaScript dibuat pada tahun 1995 oleh Brendan Eich ketika dia menjadi seorang insinyur perangkat lunak di Netscape. JavaScript dirilis bersamaan dengan Netscape 2 di permulaan tahun 1996. Awalnya JavaScript dinamakan LiveScript, tetapi diganti menjadi JavaScript karena memanfaatkan ketenaran bahasa pemograman Java dari Sun Microsystem, walaupun keduanya memiliki sedikit sekali kesamaan. Hal inilah yang menjadi sumber kebingungan sejak saat itu.</p> + +<p>Beberapa bulan kemudian, Microsoft merilis JScript yang tertanam di dalam Internet Explore 3. Sebagian besar JScript kompatible dan mirip dengan JavaScript. Beberapa bulan setelahnya Netscape mengajukan JavaScript ke <a href="http://www.ecma-international.org/">Ecma International, </a>Organisasi Eropa yang melakukan standarisasi sistem informasi dan komunikasi, yang kemudian menghasilkan edisi pertama dari standar {{Glossary("ECMAScript")}} pada tahun itu. Standar ini memperoleh pembaharuan yang signifikan pada <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript edisi ke-3 </a>pada tahun 1999, dan sejak saat itu standar tersebut tidak terlalu banyak mengalami perubahan. Edisi ke-4 ECMAScript diabaikan dengan alasan perbedaan pandangan terhadap kompleksitas bahasa. Beberapa bagian dari edisi ECMAScript ke-4 membentuk dasar ECMAScript edisi ke-5, yang dipublikasi pada tahun 2009 and edisi ECMAScript ke-6 dirilis pada bulan Juni tahun 2015.</p> + +<div class="note"> +<p>Karena lebih familiar, mulai dari sini kita akan mengacu ECMAScript sebagai "JavaScript".</p> +</div> + +<p>Tidak seperti kebanyakan bahasa pemograman, JavaScript tidak mempunyai konsep input atau output (I/O). Didesain untuk dapat dieksekusi sebagai bahasa <em>scripting </em>pada lingkungan pengguna dan mekanisme komunikasi dengan dunia luar diserahkan kepada lingkungan pengguna. Browser adalah lingkungan pengguna yang sangat umum, tetapi Interpreter JavaScript dapat juga ditemukan ditempat lain, termasuk Adobe Acrobat, Adobe Photshop, SVG images, Yahoo Widget engine, lingkungan server seperti <a href="http://nodejs.org/">Node.js</a>, database NoSQL seperti <a href="http://couchdb.apache.org/">Apache CouchDB</a>, komputer tertanam, lingkungan desktop seperti GNOME (salah satu antarmuka yang paling terkenal pada sustem operasi GNU/Linux), dan masih banyak lagi yang lainnya.<br> + </p> + +<h2 id="Ikhtisar"><span class="short_text" id="result_box" lang="id"><span>Ikhtisar</span></span></h2> + +<p>JavaScript adalah bahasa pemograman dinamis berorientasi objek dengan types dan operator, objek bawaan standar (objek literal), dan methods. Syntax JavaScript dipengaruhi oleh bahasa Java dan C - sangat banyak struktur dalam bahasa tersebut yang digunakan dalam JavaScript. Perbedaan yang paling mendasar adalah JavaScript tidak mempunyai kelas, melainkan fungsionalitas kelas yang dicapai dengan obyek prototipe (Lebih lanjut tentang ES6 {{jsxref("Classes")}}). Perbedaan utama lainnya adalah fungsi sebagai objek, yaitu fungsi mempunyai kapasitas untuk menahan kode yang dapat dieksekusi dan dilewatkan seperti objek yang lain.</p> + +<p>Mari mulai dengan melihat blok pembangun dari bahasa pemograman: types (tipe-tipe data). Program pada JavaScript memanipulasi nilai dan nilai tersebut termasuk ke dalam sebuah tipe. Beberapa tipe dalam JavaScript adalah:<br> + </p> + +<ul> + <li>{{jsxref("Number")}}</li> + <li>{{jsxref("String")}}</li> + <li>{{jsxref("Boolean")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("objek")}}</li> + <li>{{jsxref("Symbol")}} (Baru ditambahkan pada ES6)</li> +</ul> + +<p>...ooo, ada lagi {{jsxref("undefined")}} and {{jsxref("null")}} keduanya mempunyai karakteristik yang sedikit ganjil, {{jsxref("Array")}} merupakan objek spesial, {{jsxref("Date")}} dan {{jsxref("RegExp")}} merupakan objek yang dapat digunakan langsung dan untuk lebih tepatnya, fungsi termasuk dalam objek spesial. Jadi, diagramnya kira-kira seperti ini:</p> + +<ul> + <li>{{jsxref("Number")}}</li> + <li>{{jsxref("String")}}</li> + <li>{{jsxref("Boolean")}}</li> + <li>{{jsxref("Symbol")}} (new in Edition 6)</li> + <li>{{jsxref("objek")}} + <ul> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Date")}}</li> + <li>{{jsxref("RegExp")}}</li> + </ul> + </li> + <li>{{jsxref("null")}}</li> + <li>{{jsxref("undefined")}}</li> +</ul> + +<p>Ada beberapa tipe {{jsxref("Error")}} bawaan juga, akan lebih memudahkan jika kita mempelajari terlebih dahulu diagram pertama, bagaimanapun juga kita akan membahas tipe - tipe yang telah dituliskan diatas.</p> + +<h2 id="Numbers">Numbers</h2> + +<p>Menurut spesifikasi, tipe nomer pada JavaScript menggunakan "format IEEE 754 64-bit double-presisi". Hal ini menyebabkan beberapa konsekuensi, diantaranya tidak adanya tipe integer pada JavaScript. Jadi programmer harus agak teliti dengan operasi aritmatika jika sebelumnya berangkat dari C atau Java.<br> + <br> + Perlu juga memperhatikan kasus seperti berikut:</p> + +<pre class="brush: js notranslate">0.1 + 0.2 == 0.30000000000000004 +</pre> + +<p>Dalam praktiknya, nilai integer diperlakukan sebagai int 32-bit, dan beberapa implementasi bahkan menyimpannya demikian (dalam int 32-bit) kecuali diinstruksikan agar nilai tersebut valid sebagai tipe Number namun tidak dalam integer 32-bit. Hal ini mungkin saja penting untuk operasi yang mementingkan ukuran bit.</p> + +<p>Standar<a href="/en-US/docs/Web/JavaScript/Reference/Operators#Arithmetic_operators"> operasi aritmatika</a> tersedia, seperti penjumlahan, pengurangan, modulus, dan lain-lain. Ada juga Object bawaan yang kami lupa menyebutkannya di awal disebut {{jsxref("Math")}} yang menyediakan fungsi matematika dan konstan:</p> + +<pre class="brush: js notranslate">Math.sin(3.5); +var circumference = Math.PI * (r + r); +</pre> + +<p>Anda dapat mengonversi sebuah string ke integer dengan menggunakan fungsi bawaan {{jsxref("Global_objeks/parseInt", "parseInt()")}}. Basis konversi dapat ditambahkan sebagai argumen kedua (tidak wajib), namun sebaiknya ditambahkan:</p> + +<pre class="brush: js notranslate">parseInt("123", 10); // 123 +parseInt("010", 10); // 10 +</pre> + +<p>Pada peramban kuno, string yang diawali dengan "0" diasumsikan sebagai octal (radix 8), namun hal ini tidak lagi menjadi masalah sejak 2013 dan seterusnya. Kecuali Anda sudah yakin mengenai format string-nya, Anda akan mendapatkan hasil mengejutkan pada peramban kuno tersebut:</p> + +<pre class="brush: js notranslate">parseInt("010"); // 8 +parseInt("0x10"); // 16 +</pre> + +<p>Di sini, kita melihat fungsi {{jsxref("Global_objeks/parseInt", "parseInt()")}} memperlakukan string pertama sebagai oktal karena diawali dengan "0", dan string kedua sebagai hexadecimal karena diawali dengan "0x". <em>Notasi heksadesimal masih ada</em>; hanya oktal yang telah dihapus.</p> + +<p>If you want to convert a binary number to an integer, just change the base:</p> + +<pre class="brush: js notranslate">parseInt("11", 2); // 3 +</pre> + +<p>Similarly, you can parse floating point numbers using the built-in {{jsxref("Global_objeks/parseFloat", "parseFloat()")}} function. Unlike its {{jsxref("Global_objeks/parseInt", "parseInt()")}} cousin, <code>parseFloat()</code> always uses base 10.</p> + +<p>You can also use the unary <code>+</code> operator to convert values to numbers:</p> + +<pre class="brush: js notranslate">+ "42"; // 42 ++ "010"; // 10 ++ "0x10"; // 16 +</pre> + +<p>A special value called {{jsxref("NaN")}} (short for "Not a Number") is returned if the string is non-numeric:</p> + +<pre class="brush: js notranslate">parseInt("hello", 10); // NaN +</pre> + +<p><code>NaN</code> is toxic: if you provide it as an input to any mathematical operation the result will also be <code>NaN</code>:</p> + +<pre class="brush: js notranslate">NaN + 5; // NaN +</pre> + +<p>You can test for <code>NaN</code> using the built-in {{jsxref("Global_objeks/isNaN", "isNaN()")}} function:</p> + +<pre class="brush: js notranslate">isNaN(NaN); // true +</pre> + +<p>JavaScript also has the special values {{jsxref("Infinity")}} and <code>-Infinity</code>:</p> + +<pre class="brush: js notranslate"> 1 / 0; // Infinity +-1 / 0; // -Infinity +</pre> + +<p>You can test for <code>Infinity</code>, <code>-Infinity</code> and <code>NaN</code> values using the built-in {{jsxref("Global_objeks/isFinite", "isFinite()")}} function:</p> + +<pre class="brush: js notranslate">isFinite(1/0); // false +isFinite(-Infinity); // false +isFinite(NaN); // false +</pre> + +<div class="note">The {{jsxref("Global_objeks/parseInt", "parseInt()")}} and {{jsxref("Global_objeks/parseFloat", "parseFloat()")}} functions parse a string until they reach a character that isn't valid for the specified number format, then return the number parsed up to that point. However the "+" operator simply converts the string to <code>NaN</code> if there is an invalid character contained within it. Just try parsing the string "10.2abc" with each method by yourself in the console and you'll understand the differences better.</div> + +<h2 id="Strings">Strings</h2> + +<p>Strings in JavaScript are sequences of <a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Unicode">Unicode characters</a>. This should be welcome news to anyone who has had to deal with internationalization. More accurately, they are sequences of UTF-16 code units; each code unit is represented by a 16-bit number. Each Unicode character is represented by either 1 or 2 code units.</p> + +<p>If you want to represent a single character, you just use a string consisting of that single character.</p> + +<p>To find the length of a string (in code units), access its <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/length">length</a></code> property:</p> + +<pre class="brush: js notranslate">"hello".length; // 5 +</pre> + +<p>There's our first brush with JavaScript objeks! Did we mention that you can use strings like {{jsxref("objek", "objeks", "", 1)}} too? They have {{jsxref("String", "methods", "#Methods", 1)}} as well that allow you to manipulate the string and access information about the string:</p> + +<pre class="brush: js notranslate">"hello".charAt(0); // "h" +"hello, world".replace("hello", "goodbye"); // "goodbye, world" +"hello".toUpperCase(); // "HELLO" +</pre> + +<h2 id="Other_types">Other types</h2> + +<p>JavaScript distinguishes between {{jsxref("null")}}, which is a value that indicates a deliberate non-value (and is only accessible through the <code>null</code> keyword), and {{jsxref("undefined")}}, which is a value of type <code>undefined</code> that indicates an uninitialized value — that is, a value hasn't even been assigned yet. We'll talk about variables later, but in JavaScript it is possible to declare a variable without assigning a value to it. If you do this, the variable's type is <code>undefined</code>. <code>undefined</code> is actually a constant.</p> + +<p>JavaScript has a boolean type, with possible values <code>true</code> and <code>false</code> (both of which are keywords.) Any value can be converted to a boolean according to the following rules:</p> + +<ol> + <li><code>false</code>, <code>0</code>, empty strings (<code>""</code>), <code>NaN</code>, <code>null</code>, and <code>undefined</code> all become <code>false.</code></li> + <li>All other values become <code>true.</code></li> +</ol> + +<p>You can perform this conversion explicitly using the <code>Boolean()</code> function:</p> + +<pre class="brush: js notranslate">Boolean(""); // false +Boolean(234); // true +</pre> + +<p>However, this is rarely necessary, as JavaScript will silently perform this conversion when it expects a boolean, such as in an <code>if</code> statement (see below.) For this reason, we sometimes speak simply of "true values" and "false values," meaning values that become <code>true</code> and <code>false</code>, respectively, when converted to booleans. Alternatively, such values can be called "truthy" and "falsy", respectively.</p> + +<p>Boolean operations such as <code>&&</code> (logical <em>and</em>), <code>||</code> (logical <em>or</em>), and <code>!</code> (logical <em>not</em>) are supported; see below.</p> + +<h2 id="Variables">Variables</h2> + +<p>New variables in JavaScript are declared using the <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/var" title="/en/JavaScript/Reference/Statements/var">var</a></code> keyword:</p> + +<pre class="brush: js notranslate">var a; +var name = "simon"; +</pre> + +<p>If you declare a variable without assigning any value to it, its type is <code>undefined</code>.</p> + +<p>An important difference between JavaScript and other languages like Java is that in JavaScript, blocks do not have scope; only functions have scope. So if a variable is defined using <code>var</code> in a compound statement (for example inside an <code>if</code> control structure), it will be visible to the entire function. However, starting with ECMAScript Edition 6, <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a></code> and <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a></code> declarations allow you to create block-scoped variables.</p> + +<h2 id="Operators">Operators</h2> + +<p>JavaScript's numeric operators are <code>+</code>, <code>-</code>, <code>*</code>, <code>/</code> and <code>%</code> — which is the remainder operator (<a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder_%28%29">which is not the same as modulo</a>.) Values are assigned using <code>=</code>, and there are also compound assignment statements such as <code>+=</code> and <code>-=</code>. These extend out to <code>x = x <em>operator</em> y</code>.</p> + +<pre class="brush: js notranslate">x += 5 +x = x + 5 +</pre> + +<p>You can use <code>++</code> and <code>--</code> to increment and decrement respectively. These can be used as prefix or postfix operators.</p> + +<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Addition" title="/en/JavaScript/Reference/Operators/String_Operators"><code>+</code> operator</a> also does string concatenation:</p> + +<pre class="brush: js notranslate">"hello" + " world"; // "hello world" +</pre> + +<p>If you add a string to a number (or other value) everything is converted in to a string first. This might catch you up:</p> + +<pre class="brush: js notranslate">"3" + 4 + 5; // "345" + 3 + 4 + "5"; // "75" +</pre> + +<p>Adding an empty string to something is a useful way of converting it to a string itself.</p> + +<p><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators" title="/en/JavaScript/Reference/Operators/Comparison_Operators">Comparisons</a> in JavaScript can be made using <code><</code>, <code>></code>, <code><=</code> and <code>>=</code>. These work for both strings and numbers. Equality is a little less straightforward. The double-equals operator performs type coercion if you give it different types, with sometimes interesting results:</p> + +<pre class="brush: js notranslate">123 == "123"; // true +1 == true; // true +</pre> + +<p>To avoid type coercion and make sure your comparisons are always accurate, you should always use the triple-equals operator:</p> + +<pre class="brush: js notranslate">123 === "123"; // false +1 === true; // false +</pre> + +<p>There are also <code>!=</code> and <code>!==</code> operators.</p> + +<p>JavaScript also has <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="/en/JavaScript/Reference/Operators/Bitwise_Operators">bitwise operations</a>. If you want to use them, they're there.</p> + +<h2 id="Control_structures">Control structures</h2> + +<p>JavaScript has a similar set of control structures to other languages in the C family. Conditional statements are supported by <code>if</code> and <code>else</code>; you can chain them together if you like:</p> + +<pre class="brush: js notranslate">var name = "kittens"; +if (name == "puppies") { + name += "!"; +} else if (name == "kittens") { + name += "!!"; +} else { + name = "!" + name; +} +name == "kittens!!" +</pre> + +<p>JavaScript has <code>while</code> loops and <code>do-while</code> loops. The first is good for basic looping; the second for loops where you wish to ensure that the body of the loop is executed at least once:</p> + +<pre class="brush: js notranslate">while (true) { + // an infinite loop! +} + +var input; +do { + input = get_input(); +} while (inputIsNotValid(input)) +</pre> + +<p>JavaScript's <code>for</code> loop is the same as that in C and Java: it lets you provide the control information for your loop on a single line.</p> + +<pre class="brush: js notranslate">for (var i = 0; i < 5; i++) { + // Will execute 5 times +} +</pre> + +<p>The <code>&&</code> and <code>||</code> operators use short-circuit logic, which means whether they will execute their second operand is dependent on the first. This is useful for checking for null objeks before accessing their attributes:</p> + +<pre class="brush: js notranslate">var name = o && o.getName(); +</pre> + +<p>Or for setting default values:</p> + +<pre class="brush: js notranslate">var name = otherName || "default"; +</pre> + +<p>JavaScript has a ternary operator for conditional expressions:</p> + +<pre class="brush: js notranslate">var allowed = (age > 18) ? "yes" : "no"; +</pre> + +<p>The <code>switch</code> statement can be used for multiple branches based on a number or string:</p> + +<pre class="brush: js notranslate">switch(action) { + case 'draw': + drawIt(); + break; + case 'eat': + eatIt(); + break; + default: + doNothing(); +} +</pre> + +<p>If you don't add a <code>break</code> statement, execution will "fall through" to the next level. This is very rarely what you want — in fact it's worth specifically labeling deliberate fallthrough with a comment if you really meant it to aid debugging:</p> + +<pre class="brush: js notranslate">switch(a) { + case 1: // fallthrough + case 2: + eatIt(); + break; + default: + doNothing(); +} +</pre> + +<p>The default clause is optional. You can have expressions in both the switch part and the cases if you like; comparisons take place between the two using the <code>===</code> operator:</p> + +<pre class="brush: js notranslate">switch(1 + 3) { + case 2 + 2: + yay(); + break; + default: + neverhappens(); +} +</pre> + +<h2 id="objeks">objeks</h2> + +<p>JavaScript objeks can be thought of as simple collections of name-value pairs. As such, they are similar to:</p> + +<ul> + <li>Dictionaries in Python.</li> + <li>Hashes in Perl and Ruby.</li> + <li>Hash tables in C and C++.</li> + <li>HashMaps in Java.</li> + <li>Associative arrays in PHP.</li> +</ul> + +<p>The fact that this data structure is so widely used is a testament to its versatility. Since everything (bar core types) in JavaScript is an objek, any JavaScript program naturally involves a great deal of hash table lookups. It's a good thing they're so fast!</p> + +<p>The "name" part is a JavaScript string, while the value can be any JavaScript value — including more objeks. This allows you to build data structures of arbitrary complexity.</p> + +<p>There are two basic ways to create an empty objek:</p> + +<pre class="brush: js notranslate">var obj = new objek(); +</pre> + +<p>And:</p> + +<pre class="brush: js notranslate">var obj = {}; +</pre> + +<p>These are semantically equivalent; the second is called objek literal syntax, and is more convenient. This syntax is also the core of JSON format and should be preferred at all times.</p> + +<p>objek literal syntax can be used to initialize an objek in its entirety:</p> + +<pre class="brush: js notranslate">var obj = { + name: "Carrot", + "for": "Max", + details: { + color: "orange", + size: 12 + } +} +</pre> + +<p>Attribute access can be chained together:</p> + +<pre class="brush: js notranslate">obj.details.color; // orange +obj["details"]["size"]; // 12 +</pre> + +<p>The following example creates an objek prototype, Person, and instance of that prototype, You.</p> + +<pre class="brush: js notranslate">function Person(name, age) { + this.name = name; + this.age = age; +} + +// Define an objek +var You = new Person("You", 24); +// We are creating a new person named "You" +// (that was the first parameter, and the age..) +</pre> + +<p>Once created, an objek's properties can again be accessed in one of two ways:</p> + +<pre class="brush: js notranslate">obj.name = "Simon"; +var name = obj.name; +</pre> + +<p>And...</p> + +<pre class="brush: js notranslate">obj["name"] = "Simon"; +var name = obj["name"]; +</pre> + +<p>These are also semantically equivalent. The second method has the advantage that the name of the property is provided as a string, which means it can be calculated at run-time. However, using this method prevents some JavaScript engine and minifier optimizations being applied. It can also be used to set and get properties with names that are <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords" title="/en/JavaScript/Reference/Reserved_Words">reserved words</a>:</p> + +<pre class="brush: js notranslate">obj.for = "Simon"; // Syntax error, because 'for' is a reserved word +obj["for"] = "Simon"; // works fine +</pre> + +<div class="note"> +<p>Starting in ECMAScript 5, reserved words may be used as objek property names "in the buff". This means that they don't need to be "clothed" in quotes when defining objek literals. See the ES5 <a href="http://es5.github.io/#x7.6.1">Spec</a>.</p> +</div> + +<p>For more on objeks and prototypes see: <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype">objek.prototype</a>.</p> + +<h2 id="Arrays">Arrays</h2> + +<p>Arrays in JavaScript are actually a special type of objek. They work very much like regular objeks (numerical properties can naturally be accessed only using <code>[]</code> syntax) but they have one magic property called '<code>length</code>'. This is always one more than the highest index in the array.</p> + +<p>One way of creating arrays is as follows:</p> + +<pre class="brush: js notranslate">var a = new Array(); +a[0] = "dog"; +a[1] = "cat"; +a[2] = "hen"; +a.length; // 3 +</pre> + +<p>A more convenient notation is to use an array literal:</p> + +<pre class="brush: js notranslate">var a = ["dog", "cat", "hen"]; +a.length; // 3 +</pre> + +<p>Note that <code>array.length</code> isn't necessarily the number of items in the array. Consider the following:</p> + +<pre class="brush: js notranslate">var a = ["dog", "cat", "hen"]; +a[100] = "fox"; +a.length; // 101 +</pre> + +<p>Remember — the length of the array is one more than the highest index.</p> + +<p>If you query a non-existent array index, you'll get a value of <code>undefined</code> returned:</p> + +<pre class="brush: js notranslate">typeof a[90]; // undefined +</pre> + +<p>If you take the above into account, you can iterate over an array using the following:</p> + +<pre class="brush: js notranslate">for (var i = 0; i < a.length; i++) { + // Do something with a[i] +} +</pre> + +<p>You can iterate over an array using a <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in" title="/en/JavaScript/Reference/Statements/for...in">for...in</a></code> loop. Note that if someone added new properties to <code>Array.prototype</code>, they will also be iterated over by this loop. Therefore this method is "not" recommended.</p> + +<p>Another way of iterating over an array that was added with ECMAScript 5 is <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach">forEach()</a>:</p> + +<pre class="brush: js notranslate" style="font-size: 14px;">["dog", "cat", "hen"].forEach(function(currentValue, index, array) { + // Do something with currentValue or array[index] +}); +</pre> + +<p>If you want to append an item to an array simply do it like this:</p> + +<pre class="brush: js notranslate">a.push(item);</pre> + +<p>Arrays come with a number of methods. See also the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">full documentation for array methods</a>.</p> + +<table> + <thead> + <tr> + <th scope="col">Method name</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>a.toString()</code></td> + <td>Returns a string with the <code>toString()</code> of each element separated by commas.</td> + </tr> + <tr> + <td><code>a.toLocaleString()</code></td> + <td>Returns a string with the <code>toLocaleString()</code> of each element separated by commas.</td> + </tr> + <tr> + <td><code>a.concat(item1[, item2[, ...[, itemN]]])</code></td> + <td>Returns a new array with the items added on to it.</td> + </tr> + <tr> + <td><code>a.join(sep)</code></td> + <td>Converts the array to a string — with values delimited by the <code>sep</code> param</td> + </tr> + <tr> + <td><code>a.pop()</code></td> + <td>Removes and returns the last item.</td> + </tr> + <tr> + <td><code>a.push(item1, ..., itemN)</code></td> + <td>Adds one or more items to the end.</td> + </tr> + <tr> + <td><code>a.reverse()</code></td> + <td>Reverses the array.</td> + </tr> + <tr> + <td><code>a.shift()</code></td> + <td>Removes and returns the first item.</td> + </tr> + <tr> + <td><code>a.slice(start[, end])</code></td> + <td>Returns a sub-array.</td> + </tr> + <tr> + <td><code>a.sort([cmpfn])</code></td> + <td>Takes an optional comparison function.</td> + </tr> + <tr> + <td><code>a.splice(start, delcount[, item1[, ...[, itemN]]])</code></td> + <td>Lets you modify an array by deleting a section and replacing it with more items.</td> + </tr> + <tr> + <td><code>a.unshift(item1[, item2[, ...[, itemN]]])</code></td> + <td>Prepends items to the start of the array.</td> + </tr> + </tbody> +</table> + +<h2 id="Functions">Functions</h2> + +<p>Along with objeks, functions are the core component in understanding JavaScript. The most basic function couldn't be much simpler:</p> + +<pre class="brush: js notranslate">function add(x, y) { + var total = x + y; + return total; +} +</pre> + +<p>This demonstrates a basic function. A JavaScript function can take 0 or more named parameters. The function body can contain as many statements as you like, and can declare its own variables which are local to that function. The <code>return</code> statement can be used to return a value at any time, terminating the function. If no return statement is used (or an empty return with no value), JavaScript returns <code>undefined</code>.</p> + +<p>The named parameters turn out to be more like guidelines than anything else. You can call a function without passing the parameters it expects, in which case they will be set to <code>undefined</code>.</p> + +<pre class="brush: js notranslate">add(); // NaN +// You can't perform addition on undefined +</pre> + +<p>You can also pass in more arguments than the function is expecting:</p> + +<pre class="brush: js notranslate">add(2, 3, 4); // 5 +// added the first two; 4 was ignored +</pre> + +<p>That may seem a little silly, but functions have access to an additional variable inside their body called <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments" title="/en/JavaScript/Reference/Functions_and_function_scope/arguments"><code>arguments</code></a>, which is an array-like objek holding all of the values passed to the function. Let's re-write the add function to take as many values as we want:</p> + +<pre class="brush: js notranslate">function add() { + var sum = 0; + for (var i = 0, j = arguments.length; i < j; i++) { + sum += arguments[i]; + } + return sum; +} + +add(2, 3, 4, 5); // 14 +</pre> + +<p>That's really not any more useful than writing <code>2 + 3 + 4 + 5</code> though. Let's create an averaging function:</p> + +<pre class="brush: js notranslate">function avg() { + var sum = 0; + for (var i = 0, j = arguments.length; i < j; i++) { + sum += arguments[i]; + } + return sum / arguments.length; +} + +avg(2, 3, 4, 5); // 3.5 +</pre> + +<p>This is pretty useful, but introduces a new problem. The <code>avg()</code> function takes a comma separated list of arguments — but what if you want to find the average of an array? You could just rewrite the function as follows:</p> + +<pre class="brush: js notranslate">function avgArray(arr) { + var sum = 0; + for (var i = 0, j = arr.length; i < j; i++) { + sum += arr[i]; + } + return sum / arr.length; +} + +avgArray([2, 3, 4, 5]); // 3.5 +</pre> + +<p>But it would be nice to be able to reuse the function that we've already created. Luckily, JavaScript lets you call a function and call it with an arbitrary array of arguments, using the {{jsxref("Function.apply", "apply()")}} method of any function objek.</p> + +<pre class="brush: js notranslate">avg.apply(null, [2, 3, 4, 5]); // 3.5 +</pre> + +<p>The second argument to <code>apply()</code> is the array to use as arguments; the first will be discussed later on. This emphasizes the fact that functions are objeks too.</p> + +<p>JavaScript lets you create anonymous functions.</p> + +<pre class="brush: js notranslate">var avg = function() { + var sum = 0; + for (var i = 0, j = arguments.length; i < j; i++) { + sum += arguments[i]; + } + return sum / arguments.length; +}; +</pre> + +<p>This is semantically equivalent to the <code>function avg()</code> form. It's extremely powerful, as it lets you put a full function definition anywhere that you would normally put an expression. This enables all sorts of clever tricks. Here's a way of "hiding" some local variables — like block scope in C:</p> + +<pre class="brush: js notranslate">var a = 1; +var b = 2; + +(function() { + var b = 3; + a += b; +})(); + +a; // 4 +b; // 2 +</pre> + +<p>JavaScript allows you to call functions recursively. This is particularly useful for dealing with tree structures, such as those found in the browser DOM.</p> + +<pre class="brush: js notranslate">function countChars(elm) { + if (elm.nodeType == 3) { // TEXT_NODE + return elm.nodeValue.length; + } + var count = 0; + for (var i = 0, child; child = elm.childNodes[i]; i++) { + count += countChars(child); + } + return count; +} +</pre> + +<p>This highlights a potential problem with anonymous functions: how do you call them recursively if they don't have a name? JavaScript lets you name function expressions for this. You can use named IIFEs (Immediately Invoked Function Expressions) as shown below:</p> + +<pre class="brush: js notranslate">var charsInBody = (function counter(elm) { + if (elm.nodeType == 3) { // TEXT_NODE + return elm.nodeValue.length; + } + var count = 0; + for (var i = 0, child; child = elm.childNodes[i]; i++) { + count += counter(child); + } + return count; +})(document.body); +</pre> + +<p>The name provided to a function expression as above is only available to the function's own scope. This allows more optimizations to be done by the engine and results in more readable code. The name also shows up in the debugger and some stack traces, which can save you time when debugging.</p> + +<p>Note that JavaScript functions are themselves objeks — like everything else in JavaScript — and you can add or change properties on them just like we've seen earlier in the objeks section.</p> + +<h2 id="Custom_objeks">Custom objeks</h2> + +<div class="note">For a more detailed discussion of objek-oriented programming in JavaScript, see <a href="/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript" title="https://developer.mozilla.org/en/Introduction_to_Object-Oriented_JavaScript">Introduction to objek Oriented JavaScript</a>.</div> + +<p>In classic objek Oriented Programming, objeks are collections of data and methods that operate on that data. JavaScript is a prototype-based language that contains no class statement, as you'd find in C++ or Java (this is sometimes confusing for programmers accustomed to languages with a class statement.) Instead, JavaScript uses functions as classes. Let's consider a person objek with first and last name fields. There are two ways in which the name might be displayed: as "first last" or as "last, first". Using the functions and objeks that we've discussed previously, we could display the data like this:</p> + +<pre class="example-bad brush: js notranslate">function makePerson(first, last) { + return { + first: first, + last: last + }; +} +function personFullName(person) { + return person.first + ' ' + person.last; +} +function personFullNameReversed(person) { + return person.last + ', ' + person.first; +} + +s = makePerson("Simon", "Willison"); +personFullName(s); // "Simon Willison" +personFullNameReversed(s); // "Willison, Simon" +</pre> + +<p>This works, but it's pretty ugly. You end up with dozens of functions in your global namespace. What we really need is a way to attach a function to an objek. Since functions are objeks, this is easy:</p> + +<pre class="brush: js notranslate">function makePerson(first, last) { + return { + first: first, + last: last, + fullName: function() { + return this.first + ' ' + this.last; + }, + fullNameReversed: function() { + return this.last + ', ' + this.first; + } + }; +} + +s = makePerson("Simon", "Willison") +s.fullName(); // "Simon Willison" +s.fullNameReversed(); // "Willison, Simon" +</pre> + +<p>There's something here we haven't seen before: the <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this" title="/en/JavaScript/Reference/Operators/this">this</a></code> keyword. Used inside a function, <code>this</code> refers to the current objek. What that actually means is specified by the way in which you called that function. If you called it using <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Accessing_properties" title="/en/JavaScript/Reference/Operators/Member_Operators">dot notation or bracket notation</a> on an objek, that objek becomes <code>this</code>. If dot notation wasn't used for the call, <code>this</code> refers to the global objek.</p> + +<p>Note that <code>this</code> is a frequent cause of mistakes. For example:</p> + +<pre class="brush: js notranslate">s = makePerson("Simon", "Willison"); +var fullName = s.fullName; +fullName(); // undefined undefined +</pre> + +<p>When we call <code>fullName()</code> alone, without using <code>s.fullName()</code>, <code>this</code> is bound to the global objek. Since there are no global variables called <code>first</code> or <code>last</code> we get <code>undefined</code> for each one.</p> + +<p>We can take advantage of the <code>this</code> keyword to improve our <code>makePerson</code> function:</p> + +<pre class="brush: js notranslate">function Person(first, last) { + this.first = first; + this.last = last; + this.fullName = function() { + return this.first + ' ' + this.last; + }; + this.fullNameReversed = function() { + return this.last + ', ' + this.first; + }; +} +var s = new Person("Simon", "Willison"); +</pre> + +<p>We have introduced another keyword: <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new" title="/en/JavaScript/Reference/Operators/new">new</a></code>. <code>new</code> is strongly related to <code>this</code>. It creates a brand new empty objek, and then calls the function specified, with <code>this</code> set to that new objek. Notice though that the function specified with <code>this</code> does not return a value but merely modifies the <code>this</code> objek. It's new that returns the <code>this</code> objek to the calling site. Functions that are designed to be called by <code>new</code> are called constructor functions. Common practice is to capitalize these functions as a reminder to call them with <code>new</code>.</p> + +<p>The improved function still has the same pitfall with calling <code>fullName()</code> alone.</p> + +<p>Our person objeks are getting better, but there are still some ugly edges to them. Every time we create a person objek we are creating two brand new function objeks within it — wouldn't it be better if this code was shared?</p> + +<pre class="brush: js notranslate">function personFullName() { + return this.first + ' ' + this.last; +} +function personFullNameReversed() { + return this.last + ', ' + this.first; +} +function Person(first, last) { + this.first = first; + this.last = last; + this.fullName = personFullName; + this.fullNameReversed = personFullNameReversed; +} +</pre> + +<p>That's better: we are creating the method functions only once, and assigning references to them inside the constructor. Can we do any better than that? The answer is yes:</p> + +<pre class="brush: js notranslate">function Person(first, last) { + this.first = first; + this.last = last; +} +Person.prototype.fullName = function() { + return this.first + ' ' + this.last; +}; +Person.prototype.fullNameReversed = function() { + return this.last + ', ' + this.first; +}; +</pre> + +<p><code>Person.prototype</code> is an objek shared by all instances of <code>Person</code>. It forms part of a lookup chain (that has a special name, "prototype chain"): any time you attempt to access a property of <code>Person</code> that isn't set, JavaScript will check <code>Person.prototype</code> to see if that property exists there instead. As a result, anything assigned to <code>Person.prototype</code> becomes available to all instances of that constructor via the <code>this</code> objek.</p> + +<p>This is an incredibly powerful tool. JavaScript lets you modify something's prototype at any time in your program, which means you can add extra methods to existing objeks at runtime:</p> + +<pre class="brush: js notranslate">s = new Person("Simon", "Willison"); +s.firstNameCaps(); // TypeError on line 1: s.firstNameCaps is not a function + +Person.prototype.firstNameCaps = function firstNameCaps() { + return this.first.toUpperCase() +}; +s.firstNameCaps(); // "SIMON" +</pre> + +<p>Interestingly, you can also add things to the prototype of built-in JavaScript objeks. Let's add a method to <code>String</code> that returns that string in reverse:</p> + +<pre class="brush: js notranslate">var s = "Simon"; +s.reversed(); // TypeError on line 1: s.reversed is not a function + +String.prototype.reversed = function reversed() { + var r = ""; + for (var i = this.length - 1; i >= 0; i--) { + r += this[i]; + } + return r; +}; + +s.reversed(); // nomiS +</pre> + +<p>Our new method even works on string literals!</p> + +<pre class="brush: js notranslate">"This can now be reversed".reversed(); // desrever eb won nac sihT +</pre> + +<p>As mentioned before, the prototype forms part of a chain. The root of that chain is <code>objek.prototype</code>, whose methods include <code>toString()</code> — it is this method that is called when you try to represent an objek as a string. This is useful for debugging our <code>Person</code> objeks:</p> + +<pre class="brush: js notranslate">var s = new Person("Simon", "Willison"); +s; // [objek objek] + +Person.prototype.toString = function() { + return '<Person: ' + this.fullName() + '>'; +} + +s.toString(); // "<Person: Simon Willison>" +</pre> + +<p>Remember how <code>avg.apply()</code> had a null first argument? We can revisit that now. The first argument to <code>apply()</code> is the objek that should be treated as '<code>this</code>'. For example, here's a trivial implementation of <code>new</code>:</p> + +<pre class="brush: js notranslate">function trivialNew(constructor, ...args) { + var o = {}; // Create an objek + constructor.apply(o, args); + return o; +} +</pre> + +<p>This isn't an exact replica of <code>new</code> as it doesn't set up the prototype chain (it would be difficult to illustrate). This is not something you use very often, but it's useful to know about. In this snippet, <code>...args</code> (including the ellipsis) is called the "<a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest arguments</a>" — as the name implies, this contains the rest of the arguments.</p> + +<p>Calling</p> + +<pre class="brush: js notranslate">var bill = trivialNew(Person, "William", "Orange");</pre> + +<p>is therefore almost equivalent to</p> + +<pre class="brush: js notranslate">var bill = new Person("William", "Orange");</pre> + +<p><code>apply()</code> has a sister function named <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call" title="/en/JavaScript/Reference/Global_Objects/Function/call"><code>call</code></a>, which again lets you set <code>this</code> but takes an expanded argument list as opposed to an array.</p> + +<pre class="brush: js notranslate">function lastNameCaps() { + return this.last.toUpperCase(); +} +var s = new Person("Simon", "Willison"); +lastNameCaps.call(s); +// Is the same as: +s.lastNameCaps = lastNameCaps; +s.lastNameCaps(); +</pre> + +<h3 id="Inner_functions">Inner functions</h3> + +<p>JavaScript function declarations are allowed inside other functions. We've seen this once before, with an earlier <code>makePerson()</code> function. An important detail of nested functions in JavaScript is that they can access variables in their parent function's scope:</p> + +<pre class="brush: js notranslate">function betterExampleNeeded() { + var a = 1; + function oneMoreThanA() { + return a + 1; + } + return oneMoreThanA(); +} +</pre> + +<p>This provides a great deal of utility in writing more maintainable code. If a function relies on one or two other functions that are not useful to any other part of your code, you can nest those utility functions inside the function that will be called from elsewhere. This keeps the number of functions that are in the global scope down, which is always a good thing.</p> + +<p>This is also a great counter to the lure of global variables. When writing complex code it is often tempting to use global variables to share values between multiple functions — which leads to code that is hard to maintain. Nested functions can share variables in their parent, so you can use that mechanism to couple functions together when it makes sense without polluting your global namespace — "local globals" if you like. This technique should be used with caution, but it's a useful ability to have.</p> + +<h2 id="Closures">Closures</h2> + +<p>This leads us to one of the most powerful abstractions that JavaScript has to offer — but also the most potentially confusing. What does this do?</p> + +<pre class="brush: js notranslate">function makeAdder(a) { + return function(b) { + return a + b; + }; +} +var x = makeAdder(5); +var y = makeAdder(20); +x(6); // ? +y(7); // ? +</pre> + +<p>The name of the <code>makeAdder()</code> function should give it away: it creates a new 'adder' functions, which when called with one argument adds it to the argument that they were created with.</p> + +<p>What's happening here is pretty much the same as was happening with the inner functions earlier on: a function defined inside another function has access to the outer function's variables. The only difference here is that the outer function has returned, and hence common sense would seem to dictate that its local variables no longer exist. But they <em>do</em> still exist — otherwise the adder functions would be unable to work. What's more, there are two different "copies" of <code>makeAdder()</code>'s local variables — one in which <code>a</code> is 5 and one in which <code>a</code> is 20. So the result of those function calls is as follows:</p> + +<pre class="brush: js notranslate">x(6); // returns 11 +y(7); // returns 27 +</pre> + +<p>Here's what's actually happening. Whenever JavaScript executes a function, a 'scope' objek is created to hold the local variables created within that function. It is initialized with any variables passed in as function parameters. This is similar to the global objek that all global variables and functions live in, but with a couple of important differences: firstly, a brand new scope objek is created every time a function starts executing, and secondly, unlike the global objek (which is accessible as <code>this</code> and in browsers as <code>window</code>) these scope objeks cannot be directly accessed from your JavaScript code. There is no mechanism for iterating over the properties of the current scope objek, for example.</p> + +<p>So when <code>makeAdder()</code> is called, a scope objek is created with one property: <code>a</code>, which is the argument passed to the <code>makeAdder()</code> function. <code>makeAdder()</code> then returns a newly created function. Normally JavaScript's garbage collector would clean up the scope objek created for <code>makeAdder()</code> at this point, but the returned function maintains a reference back to that scope objek. As a result, the scope objek will not be garbage collected until there are no more references to the function objek that <code>makeAdder()</code> returned.</p> + +<p>Scope objeks form a chain called the scope chain, similar to the prototype chain used by JavaScript's objek system.</p> + +<p>A <strong>closure</strong> is the combination of a function and the scope objek in which it was created. Closures let you save state — as such, they can often be used in place of objeks. You can find <a href="http://stackoverflow.com/questions/111102/how-do-javascript-closures-work">several excellent introductions to closures</a>.</p> diff --git a/files/id/web/javascript/data_structures/index.html b/files/id/web/javascript/data_structures/index.html new file mode 100644 index 0000000000..3521bbc640 --- /dev/null +++ b/files/id/web/javascript/data_structures/index.html @@ -0,0 +1,267 @@ +--- +title: JavaScript data types and data structures +slug: Web/JavaScript/Data_structures +tags: + - JavaScript + - Tipe +translation_of: Web/JavaScript/Data_structures +--- +<p><span style="display: none;"> </span><span style="display: none;"> </span> {{jsSidebar("More")}}</p> + +<p>Semua bahasa pemrograman memiliki struktur data bawaan, namun hal tersebut sering dijumpai berbeda antara satu bahasa dengan bahasa lainya. Artikel ini mencoba untuk membuat daftar struktur data bawaan yang tersedia di JavaScript dan sifat-sifat apa saja yang dimiliki. Struktur data bawaan dapat digunakan untuk membangun struktur data lainnya. Bila memungkinkan, perbandingan dengan bahasa lainya akan diambil.</p> + +<h2 id="Dynamic_typing">Dynamic typing</h2> + +<p>JavaScript adalah salah satu bahasa pemrograman yang tidak mengutamakan tipe data. Tidak perlu mendeklarasikan jenis data dari suatu variabel setiap saat. Tipe data akan dideklarasikan secara otomatis diawal program dijalankan. Dengan kata lain memungkinkan untuk menggunakan nama peubah yang sama dengan jenis data yang berbeda:</p> + +<pre class="brush: js">var foo = 42; // foo saat ini adalah angka +foo = 'bar'; // foo saat ini adalah string +foo = true; // foo saat ini adalah boolean +</pre> + +<h2 id="Tipe_Data">Tipe Data</h2> + +<p>Standar ECMAScript terakhir menjelaskan tujuh tipe data:</p> + +<ul> + <li>Enam tipe adalah {{Glossary("Primitive", "primitives")}}: + <ul> + <li>{{Glossary("Boolean")}}</li> + <li>{{Glossary("Null")}}</li> + <li>{{Glossary("Undefined")}}</li> + <li>{{Glossary("Number")}}</li> + <li>{{Glossary("String")}}</li> + <li>{{Glossary("Symbol")}} (baru di ECMAScript 6)</li> + </ul> + </li> + <li>dan {{Glossary("Object")}}</li> +</ul> + +<h2 id="Nilai_Primitif">Nilai Primitif</h2> + +<p>Semua tipe kecuali objek menentukan nilai tetap (nilai, yang tidak dapat diubah). Misalnya dan tidak seperti C, Strings tidak dapat diubah. Di JavaScript, string termasuk sebagai nilai primitif.</p> + +<h3 id="Undefined">Undefined</h3> + +<p>Variabel yang nilainya tidak ditetapkan (tidak diisi) memiliki nilai <code>undefined</code>. Lihat {{jsxref("undefined")}} dan {{Glossary("Undefined")}} untuk lebih lanjut.</p> + +<h3 id="Null">Null</h3> + +<p>Null hanya memiliki sebuah nilai dan terdiri nilai itu sendiri: <code>null</code>. Lihat {{jsxref("null")}} dan {{Glossary("Null")}} untuk lebih lanjut.</p> + +<h3 id="Boolean">Boolean</h3> + +<p>Merepresentasikan entitas logika dan hanya memiliki dua nilai atau kemungkinan, yaitu: <code>true</code> dan <code>false</code>.</p> + +<h3 id="Number">Number</h3> + +<p>Berdasarkan standar ECMAScript, dikatakan bahwa hanya ada satu tipe nomor, yaitu <a href="https://en.wikipedia.org/wiki/Double-precision_floating-point_format">double-precision 64-bit binary format IEEE 754 value</a> (nomor diantara -(2<sup>53</sup> -1) dan (2<sup>53</sup> -1) ). Tidak ada penomoran bilangan bulat yang spesifik. Sebagai tambahan untuk menampilkan bilangan floating-point (bilangan pecahan float), tipe nomor memiliki tiga simbol, yaitu: <code>+Infinity</code>, <code>-Infinity</code>, dan <code>NaN</code> <em>(Not-a-Number)</em></p> + +<p>Untuk memeriksa nomor paling besar atau paling kecil diantara +/-Infinity diatas, dapat menggunakan konstanta {{jsxref("Number.MAX_VALUE")}} atau {{jsxref("Number.MIN_VALUE")}}. Semenjak standar ECMAScript 2015, untuk memeriksa nilai <em>double-precision floating-point</em> dapat menggunakan {{jsxref("Number.isSafeInteger()")}} yang setara dengan {{jsxref("Number.MAX_SAFE_INTEGER")}} dan {{jsxref("Number.MIN_SAFE_INTEGER")}}. Lebih dari batas tersebut, bilangan bulat di JavaScript tidak aman dan akan digantikan dengan perkiraan <em>double-precision floating-point</em>.</p> + +<p>Angka 0 merupakan bilangan bulat integer yang memiliki dua representasi, yaitu +0 dan -0 dan pada kenyataannya tidak berpengaruh dalam perhitungan karena jika keduanya dibandingkan akan bernilai benar: <code>+0 === -0 //-->(true)</code> dan akan diberitahu jika pembagi merupakan nol:</p> + +<pre class="brush: js">> 42 / +0 +Infinity +> 42 / -0 +-Infinity +</pre> + +<p>Meskipun angka sering hanya mewakili nilainya, JavaScript menyediakan beberapa <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">operator biner (bitwise)</a> yang dapat digunakan untuk <a class="external" href="http://en.wikipedia.org/wiki/Mask_%28computing%29">bit masking</a>, yaitu mewakili beberapa nilai Boolean dalam sebuah nomor. Namun, ini biasanya dianggap sebagai praktik yang buruk, karena JavaScript menawarkan cara lain untuk mewakili satu set Boolean (seperti array Boolean atau objek dengan nilai Boolean yang ditetapkan untuk properti bernama). Bit masking juga cenderung membuat kode lebih sulit dibaca, dipahami, dan dirawat. Mungkin diperlukan untuk digunakan di lingkungan yang sangat terbatas, seperti saat mencoba mengatasi kompresi atau dalam kasus ekstrim ketika setiap bit di atas jumlah jaringan. Teknik ini hanya harus dipertimbangkan ketika tidak ada cara terakhir yang dapat diambil untuk mengoptimalkan ukuran.</p> + +<h3 id="String">String</h3> + +<p>Tipe {{jsxref("Global_Objects/String", "String")}} digunakan untuk menampilkan data tulisan (teks). Terdiri dari beberapa bagian karakter yang dibentuk dari bilangan <em>16-bit unsigned integer</em>. Setiap karakter pada String menempati posisi pada String. Karakter pertama pada string berindeks <code>0</code>, kemudian <code>1</code>, lalu <code>2</code>, ..., hingga karakter terakhir dari String. Panjang String merupakan jumlah karakter pembentuknya.</p> + +<p>Berbeda dengan bahasa pemrogramman C, JavaScript string tidak dapat diubah. Dengan kata lain sekali String dibuat, maka tidak mungkin untuk mengubahnya. Namun memungkinkan untuk membuat String baru berdasarkan operasi string sebelumnya. Contoh:</p> + +<ul> + <li><em>Substring </em>dari string asal dengan mengambil karakter atau menggunakan {{jsxref("String.substr()")}}.</li> + <li>Penggabungan dua string menggunakan operator + atau menggunakan {{jsxref("String.concat()")}}.</li> +</ul> + +<h4 id="Hati-hati_pada_stringly-typing_kode!">Hati-hati pada "<em>stringly-typing</em>" kode!</h4> + +<p>String dapat digunakan untuk menampilkan data kompleks (rumit). Keuntungan untuk jangka pendek:</p> + +<ul> + <li>Mudah untuk membangun string rumit dengan <em>concatenation</em>.</li> + <li>String mudah untuk proses debug, karena apa yang dicetak sama dengan isi string tersebut.</li> + <li>String banyak diterapkan di API (bidang input, isi penyimpanan lokal, tanggapan {{ domxref("XMLHttpRequest") }} saat menggunakan <code>responseText</code>, dan sebagainya) dan juga pekerjaan berbasis string.</li> +</ul> + +<p>Dengan adanya konversi, string dapat menampung semua tipe data, dan hentu bukan hal yang baik. Sebagai contoh, dengan <em>separator</em> (pemisah), string dapat meniru list (pada JavaScript disebut sebagai array). Sayangnya saat pemisah digunakan di salahsatu bagian "list" maka strukturnya akan rusak. <em>Escape character</em> menjadi salahsatu cara untuk menangani hal tersebut. Hal tersebut membutuhkan konversi mahal dan hanya menambah beban pemeliharaan.</p> + +<p>Gunakan string untuk data teks. <em>Parse </em>string dan gunakan abstraksi yang tepat jika untuk menampilkan data yang rumit.</p> + +<h3 id="Symbol">Symbol</h3> + +<p>Baru diperkenalkan sejak JavaScript ECMAScript 2015. Simbol memiliki ciri khas (unik) dan nilai primitif tetap (immutable) serta dapat digunakan sebagai kunci dari properti sebuah Objek. Pada beberapa bahasa pemrogramman, Simbol disebut sebagai atom. Untuk lebih jelasnya, lihat pustaka {{Glossary("Symbol")}} dan pembungkus {{jsxref("Symbol")}} objek di JavaScript.</p> + +<h2 id="Objek">Objek</h2> + +<p>Pada ilmu komputer, objek adalah nilai pada memori yang dimungkinkan dialamatkan oleh {{Glossary("Identifier", "identifier")}}.</p> + +<h3 id="Properties">Properties</h3> + +<p>Pada JavaScript, objek dapat digambarkan sebagai kumpulan properti. Dengan adanya sintaks objek literal, set properti dibatasi; kemudian properti dapat ditambahkan atau dihapus. Nilai dari properti dapat berupa "nilai" atau tipe data lain, termasuk objek itu sendiri, yang memungkinkan untuk membangun struktur data yang rumit. Properti diidentifikasi menggunakan nilai kunci. Kunci dapat berupa String ataupun Simbol.</p> + +<p>Terdapat dua tipe objek properti yang memiliki attribut: <em>data property</em> dan <em>accessor property</em>.</p> + +<h4 id="Data_Property">Data Property</h4> + +<p>mengkaitkan kunci dengan nilai dan memiliki beberapa atribut:</p> + +<p> </p> + +<table> + <tbody> + <tr> + <th>Attribut</th> + <th>Tipe</th> + <th>Keterangan</th> + <th>Nilai bawaan</th> + </tr> + <tr> + <td>[[Value]]</td> + <td>Semua jenis JavaScript</td> + <td>Nilai yang diterima dengan mengambil akses properti.</td> + <td>undefined</td> + </tr> + <tr> + <td>[[Writable]]</td> + <td>Boolean</td> + <td>Jika <code>false</code>, maka propeti [[Value]] tidak dapat diubah.</td> + <td>false</td> + </tr> + <tr> + <td>[[Enumerable]]</td> + <td>Boolean</td> + <td>Jika <code>true</code>, properti dapat terbaca saat <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> loops. Lihat juga <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></td> + <td>false</td> + </tr> + <tr> + <td>[[Configurable]]</td> + <td>Boolean</td> + <td>Jika <code>false</code>, properti tidak dapat dihapus, tidak dapat diubah menjadi aksesor propeti, juga atribut selain [[Value]] dan [[Writable]] tidak dapat diubah.</td> + <td>false</td> + </tr> + </tbody> +</table> + +<p> </p> + +<table> + <caption>Atribut usang (as of ECMAScript 3, renamed in ECMAScript 5)</caption> + <tbody> + <tr> + <th>Atribut</th> + <th>Tipe</th> + <th>Keterangan</th> + </tr> + <tr> + <td>Read-only</td> + <td>Boolean</td> + <td>Diubah di ES5 menjadi atribut [[Writable]].</td> + </tr> + <tr> + <td>DontEnum</td> + <td>Boolean</td> + <td>Diubah di ES5 menjadi atribut [[Enumerable]].</td> + </tr> + <tr> + <td>DontDelete</td> + <td>Boolean</td> + <td>Diubah di ES5 menjadi atribut [[Configurable]].</td> + </tr> + </tbody> +</table> + +<p> </p> + +<div class="note"> +<p><strong>Note: </strong>Biasanya atribut digunakan oleh JavaScript engine, sehingga tidak dapat diakses secara langsung (lihat <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty()</a>). Itulah mengapa atribut ditulis dengan kurung siku ganda.</p> +</div> + +<p> </p> + +<h3 id="Normal_objects_and_functions">"Normal" objects, and functions</h3> + +<p>A JavaScript object is a mapping between keys and values. Keys are strings (or {{jsxref("Symbol")}}s) and values can be anything. This makes objects a natural fit for <a href="http://en.wikipedia.org/wiki/Hash_table">hashmaps</a>.</p> + +<p>Functions are regular objects with the additional capability of being callable.</p> + +<h3 id="Dates">Dates</h3> + +<p>When representing dates, the best choice is to use the built-in <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date"><code>Date</code> utility</a> in JavaScript.</p> + +<h3 id="Indexed_collections_Arrays_and_typed_Arrays">Indexed collections: Arrays and typed Arrays</h3> + +<p><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="Array">Arrays</a> are regular objects for which there is a particular relationship between integer-key-ed properties and the 'length' property. Additionally, arrays inherit from <code>Array.prototype</code> which provides to them a handful of convenient methods to manipulate arrays. For example, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf" title="en/JavaScript/Reference/Global_Objects/Array/indexOf">indexOf</a></code> (searching a value in the array) or <code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/push" title="en/JavaScript/Reference/Global_Objects/Array/push">push</a></code>(adding an element to the array), etc. This makes Arrays a perfect candidate to represent lists or sets.</p> + +<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays">Typed Arrays</a> are new to JavaScript with ECMAScript 2015 and present an array-like view of an underlying binary data buffer. The following table helps you to find the equivalent C data types:</p> + +<p>{{page("/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray", "TypedArray_objects", "", 0, 3)}}</p> + +<h3 id="Keyed_collections_Maps_Sets_WeakMaps_WeakSets">Keyed collections: Maps, Sets, WeakMaps, WeakSets</h3> + +<p>These data structures take object references as keys and are introduced in ECMAScript Edition 6. {{jsxref("Set")}} and {{jsxref("WeakSet")}} represent a set of objects, while {{jsxref("Map")}} and {{jsxref("WeakMap")}} associate a value to an object. The difference between Maps and WeakMaps is that in the former, object keys can be enumerated over. This allows garbage collection optimizations in the latter case.</p> + +<p>One could implement Maps and Sets in pure ECMAScript 5. However, since objects cannot be compared (in the sense of "less than" for instance), look-up performance would necessarily be linear. Native implementations of them (including WeakMaps) can have look-up performance that is approximately logarithmic to constant time.</p> + +<p>Usually, to bind data to a DOM node, one could set properties directly on the object or use <code>data-*</code> attributes. This has the downside that the data is available to any script running in the same context. Maps and WeakMaps make it easy to privately bind data to an object.</p> + +<h3 id="Structured_data_JSONBagian">Structured data: JSON<a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Data_structures$edit#Structured_data_JSON">Bagian</a></h3> + +<p>JSON (JavaScript Object Notation) is a lightweight data-interchange format, derived from JavaScript but used by many programming languages. JSON builds universal data structures. See {{Glossary("JSON")}} and {{jsxref("JSON")}} for more details.</p> + +<h3 id="More_objects_in_the_standard_libraryBagian">More objects in the standard library<a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Data_structures$edit#More_objects_in_the_standard_library">Bagian</a></h3> + +<p>JavaScript has a standard library of built-in objects. Please have a look at the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects">reference</a>to find out about more objects.</p> + +<h2 id="Determining_types_using_the_typeofoperator">Determining types using the <code>typeof</code>operator</h2> + +<p>The <code>typeof</code> operator can help you to find the type of your variable. Please read the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof">reference page</a> for more details and edge cases.</p> + +<h2 id="Specifications">Specifications</h2> + +<table> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-8', 'Types')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-ecmascript-data-types-and-values', 'ECMAScript Data Types and Values')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-ecmascript-data-types-and-values', 'ECMAScript Data Types and Values')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://github.com/nzakas/computer-science-in-javascript/">Nicholas Zakas collection of common data structure and common algorithms in JavaScript.</a></li> + <li><a href="https://github.com/monmohan/DataStructures_In_Javascript" title="https://github.com/monmohan/DataStructures_In_Javascript">Search Tre(i)es implemented in JavaScript</a></li> +</ul> + +<p> </p> + +<p> </p> diff --git a/files/id/web/javascript/index.html b/files/id/web/javascript/index.html new file mode 100644 index 0000000000..bfc6233ce4 --- /dev/null +++ b/files/id/web/javascript/index.html @@ -0,0 +1,116 @@ +--- +title: JavaScript +slug: Web/JavaScript +tags: + - JavaScript + - belajar +translation_of: Web/JavaScript +--- +<div>{{JsSidebar}}</div> + +<p class="summary"><strong>JavaScript</strong> (<strong>JS</strong>) sangat ringan, terinterpretasi, bahasa pemrogramman dengan <a href="https://en.wikipedia.org/wiki/First-class_functions">first-class functions</a>. Umum dikenal sebagai bahasa scripting untuk halaman web, <a class="external" href="https://en.wikipedia.org/wiki/JavaScript#Uses_outside_Web_pages">Banyak lingkungan non-browser</a> juga menggunakan javascript, seperti <a class="external" href="https://nodejs.org/">node.js</a> dan <a href="https://couchdb.apache.org/">Apache CouchDB</a>. JS merupakan <a class="mw-redirect" href="https://en.wikipedia.org/wiki/Prototype-based_programming" title="Prototype-based programming">prototype-based</a>, multi-paradigm, bahasa scripting dinamis, medukung object-oriented, diperlukan, dan declarative (mis. functional programming) styles. Baca lebih lanjut <a href="/en-US/docs/Web/JavaScript/About_JavaScript">about JavaScript</a>.</p> + +<p>Bagian situs ini didedikasikan untuk bahasa javascript dan bukan bagian yang spesifik dengan halaman web atau lingkungan host lain. Untuk informasi tentang {{Glossary("API","APIs")}} yang spesifik untuk halaman web, Lihat <a href="/id/docs/Web/API">Web APIs</a> dan <a href="/id/docs/Glossary/DOM">DOM</a>.</p> + +<p>Standar untuk JavaScript adalah <a href="/id/docs/Web/JavaScript/Language_Resources">ECMAScript</a>. Seperti pada 2012, semua <a href="http://kangax.github.io/compat-table/es5/">modern browsers</a> mendukung ECMAScript 5.1. Browser lama mendukung setidaknya ECMAScript 3. Juni 17, 2015, <a href="http://www.ecma-international.org">ECMA International</a> mempublikasikan versi major keenam dari ECMAScript, yang secara ofisial disebut ECMAScript 2015, dan umumnya dikaitkan sebagai ECMAScript 6 atau ES6. Sejak ketika standar ECMAScript pada siklus rilis tahunan. Dokumentasi ini mengacu pada draft versi terbaru, saat ini <a href="https://tc39.github.io/ecma262/">ECMAScript 2018</a>.</p> + +<p>Jangan keliru antara JavaScript dengan <a href="https://en.wikipedia.org/wiki/Java_(programming_language)">Bahasa pemrograman java</a>. Keduanya "Java" dan "JavaScript" adalah merek dagang dan merek ini terdaftar oleh Oracle di U.S. dan negara lainnya. Namun, kedua bahasa pemrograman tersebut memiliki sintaks, struktur, dan penggunaan yang berbeda.</p> + +<div class="column-container"> +<div class="column-half"> +<h2 id="Tutorial">Tutorial</h2> + +<p>Belajar cara menulis program di javascript dengan paduan dan tutorial.</p> + +<h3 id="Untuk_Pemula">Untuk Pemula</h3> + +<p>Pergilah ke topik <a href="/id/docs/Learn/JavaScript">Area Pembelajaran JavaScript</a> kami jika Anda ingin belajar JavaScript dan belum memiliki pengalaman dari pemrograman JavaScript. Tersedia modul lengkap sebagai berikut:</p> + +<p><strong><a href="/id/docs/Learn/JavaScript/First_steps">Langkah pertama JavaScript</a></strong><br> + Jawaban beberapa pertanyaan mendasar seperti "apa itu JavaScript?", "Seperti apa tampilannya?", Dan "apa yang bisa dilakukan?", Bersama mendiskusikan fitur utama JavaScript seperti variabel, string, angka dan array.</p> + +<p><strong><a href="/id/docs/Learn/JavaScript/Building_blocks">Bangunan Blok JavaScript</a></strong><br> + Lanjutan jangkauan dari fitur dasar kunci JavaScript, arahkan perhatian pada jenis blok kode yang biasa ditemukan seperti statement kondisional, loop, fungsi, dan events.</p> + +<p><strong><a href="/id/docs/Learn/JavaScript/Objects">Perkenalan Objek JavaScript</a></strong><br> + Sifat JavaScript yang berorientasi objek penting untuk dipahami jika Anda ingin melangkah lebih jauh dengan pengetahuan Anda tentang bahasanya dan menulis kode yang lebih efisien, oleh karena itu kami menyediakan modul ini untuk membantu Anda.</p> + +<h3 id="Pengantar">Pengantar</h3> + +<dl> + <dt><a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Panduan">Paduan JavaScript</a></dt> + <dd>Jika anda baru mengenal javascript, paduan ini akan menuntun anda belajar.</dd> + <dt><a href="https://developer.mozilla.org/id/docs/Web/JavaScript/sekilas_teknologi_JavaScript">Ikhtisar Teknologi JavaScript</a></dt> + <dd>Pengantar javascript pada lingkungan web browser.</dd> + <dt><a href="/id/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">Pengantar JavaScript Berbasis Objek</a></dt> + <dd>Pengantar pada konsep dari bahasa berorientasi object di JavaScript.</dd> +</dl> + +<h3 id="Menengah">Menengah</h3> + +<dl> + <dt><a href="https://developer.mozilla.org/id/docs/Web/JavaScript/A_re-introduction_to_JavaScript">Mengenal kembali JavaScript</a></dt> + <dd>Gambaran bagi mereka yang <em>berfikir</em> mengetahui tentang JavaScript.</dd> +</dl> + +<dl> + <dt><a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Data_structures">Struktur data JavaScript</a></dt> + <dd>Gambaran struktur data yang tersedia di JavaScript.</dd> + <dt><a href="/id/docs/Web/JavaScript/Equality_comparisons_and_sameness">Perbandingan kesetaraan dan kesamaan</a></dt> + <dd>JavaScript menyediakan tiga operasi perbandingan yang berbeda: perbandingan stric <code>===</code>, perbandingan loggar menggunakan <code>==</code>, dan method {{jsxref("Global_Objects/Object/is", "Object.is()")}}.</dd> +</dl> + +<h3 id="Lanjut">Lanjut</h3> + +<dl> + <dt><a href="/id/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Pewarisan dan rantai purwarupa</a></dt> + <dd>Menjelaskan tentang kesalah-pahaman dan meremehkan yang terjadi pada pewarisan berbasis purwarupa.</dd> + <dt><a href="/id/docs/Web/JavaScript/Reference/Strict_mode">Mode Strict</a></dt> + <dd>Mode strict mendefinisikan bahwa anda tidak dapat menggunakan variabel sebelum menginisialisasinya. Ini bentuk batasan dari varian ECMAScript 5, berguna untuk performa yang lebih cepat dan debuging yang lebih mudah.</dd> + <dt><a href="/id/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a></dt> + <dd>JavaScript typed arrays menyediakan mekanisme untuk mengakses data binari mentah(raw).</dd> + <dt><a href="/id/docs/Web/JavaScript/Memory_Management">Pengelolaan Memory</a></dt> + <dd>Siklus memori dan garbage collection di JavaScript.</dd> + <dt><a href="/id/docs/Web/JavaScript/EventLoop">Model konkurensi dan Event Loop</a></dt> + <dd>JavaScript memiliki model konkurensi berbasis pada "event loop".</dd> +</dl> +</div> + +<div class="column-half"> +<h2 id="Referensi">Referensi</h2> + +<p>Jelajahi dokumentasi <a href="/en-US/docs/Web/JavaScript/Reference">Referensi javaScript</a>.</p> + +<dl> + <dt><a href="/id/docs/Web/JavaScript/Reference/Global_Objects">Standard objects</a></dt> + <dd>Mencari tahu tentang standarbuilt-in objects {{jsxref("Array")}}, {{jsxref("Boolean")}}, {{jsxref("Date")}}, {{jsxref("Error")}}, {{jsxref("Function")}}, {{jsxref("JSON")}}, {{jsxref("Math")}}, {{jsxref("Number")}}, {{jsxref("Object")}},{{jsxref("RegExp")}} , {{jsxref("String")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("WeakMap")}} , {{jsxref("WeakSet")}}, dan lainnya.</dd> + <dt><a href="/id/docs/Web/JavaScript/Reference/Operators">Ekspresi dan operator</a></dt> + <dd>Belajar tentang cara kerja operator {{jsxref("Operators/instanceof", "instanceof")}}, {{jsxref("Operators/typeof", "typeof")}}, {{jsxref("Operators/new", "new")}}, {{jsxref("Operators/this", "this")}}, <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">operator precedence</a>, dan banyak lagi.</dd> + <dt><a href="/id/docs/Web/JavaScript/Reference/Statements">Statemen dan pendeklarasian</a></dt> + <dd>Belajar cara menggunakan {{jsxref("Statements/do...while", "do-while")}}, {{jsxref("Statements/for...in", "for-in")}}, {{jsxref("Statements/for...of", "for-of")}}, {{jsxref("Statements/try...catch", "try-catch")}}, {{jsxref("Statements/let", "let")}}, {{jsxref("Statements/var", "var")}}, {{jsxref("Statements/const", "const")}}, {{jsxref("Statements/if...else", "if-else")}}, {{jsxref("Statements/switch", "switch")}}, dan statement Javascript lain dan juga kerja keywords.</dd> + <dt> <a href="/id/docs/Web/JavaScript/Reference/Functions">Fungsi</a></dt> + <dd>Belajar bagaimana menggunakan fugsi untuk digunakan di aplikasi anda.</dd> +</dl> + +<h2 id="Alat_sumber">Alat & sumber</h2> + +<p>Alat yang dapat membantu anda menulis dan mendebug kode <strong>JavaScript</strong>.</p> + +<dl> + <dt><a href="/id/docs/Tools">Firefox Developer Tools</a></dt> + <dd><a href="/id/docs/Tools/Scratchpad">Scratchpad</a>, <a href="/id/docs/Tools/Web_Console">Web Console</a>, <a href="/id/docs/Tools/Profiler">JavaScript Profiler</a>, <a href="/id/docs/Tools/Debugger">Debugger</a>, dan lainnya.</dd> + <dt><a class="external" href="http://www.getfirebug.com/">Firebug</a></dt> + <dd>Edit, debug, dan melihat CSS, HTML, juga JavaScript langsung di setiap halaman web.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Shells">JavaScript Shells</a></dt> + <dd>JavaScript shell memungkinkan anda untuk mencoba kode snippet JavaScript.</dd> + <dt><a href="https://togetherjs.com/">TogetherJS</a></dt> + <dd>Mempermudah kolaborasi.</dd> + <dt><a href="http://stackoverflow.com/questions/tagged/javascript">Stack Overflow</a></dt> + <dd>Bertanya di Stack Overflow dengan tag "JavaScript".</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript">Versi JavaScript dan catatan release</a></dt> + <dd>Jelajahi sejarah fitur JavaScript dan status implementasi.</dd> + <dt><a href="https://jsfiddle.net/">JSFiddle</a></dt> + <dd>Edit JavaScript, CSS, HTML dan lihat secara langsung. Gunakan sumber dari luar dan berkolaborasi dengan tim anda secara online.</dd> +</dl> +</div> +</div> diff --git a/files/id/web/javascript/inheritance_dan_prototype_chain/index.html b/files/id/web/javascript/inheritance_dan_prototype_chain/index.html new file mode 100644 index 0000000000..49a0100ed8 --- /dev/null +++ b/files/id/web/javascript/inheritance_dan_prototype_chain/index.html @@ -0,0 +1,304 @@ +--- +title: Inheritance dan prototype chain +slug: Web/JavaScript/Inheritance_dan_prototype_chain +translation_of: Web/JavaScript/Inheritance_and_the_prototype_chain +--- +<div>{{jsSidebar("Advanced")}}</div> + +<p>JavaScript sedikit membingungkan bagi pengembang yang berpengalaman di pemrograman berbasis class (seperti java dan C++), sebagai bahasa dinamis dan tidak mendukung implementasi <code>class</code> lihat( keyword <code>class</code> dikenalkan pada ES2015, namun terkesan berlebihan, JavaScript merupakan bahasa berbasis prototype).</p> + +<p>Ketika menggunakan inheritance, JavaScript hanya memiliki satu construct: objek. Setiap objek memiliki sebuah private property ( berkenaan tentang [[Prototype]] ) yang memegang jalinan ke objek lain yang memanggil <strong>prototype </strong>tersebut. Prototype objek tersebut memiliki prototype sendiri, dan seterusnya hingga objek mencapai prototipe <code>null</code>. Dengan definisi, <code>null</code> tidak lagi memiliki prototype, dan berperan sebagai hubungan terakhir dari <strong>prototype chain</strong>.</p> + +<p>Hampir seluruh objek pada JavaScript merupakan instance dari {{jsxref("Object")}} dimana berada di atas prototype chain.</p> + +<p>Meskipun hal ini sering dianggap sebagai salah satu kelemahan JavaScript, model Inheritance prototype sebenarnya lebih hebat daripada model klasiknya. Hal ini, misalnya, cukup sepele untuk membangun model klasik di atas model prototipal.</p> + +<h2 id="Inheritance_dengan_prototype_chain">Inheritance dengan prototype chain</h2> + +<h3 id="Meng-Inheriting_properti">Meng-Inheriting properti</h3> + +<p>JavaScript objects are dynamic "bags" of properties (referred to as <strong>own properties</strong>). JavaScript objects have a link to a prototype object. When trying to access a property of an object, the property will not only be sought on the object but on the prototype of the object, the prototype of the prototype, and so on until either a property with a matching name is found or the end of the prototype chain is reached.</p> + +<div class="note"> +<p>Following the ECMAScript standard, the notation <code>someObject.[[Prototype]]</code> is used to designate the prototype of <code>someObject. </code>Since ECMAScript 2015, the <code>[[Prototype]]</code> is accessed using the accessors {{jsxref("Object.getPrototypeOf()")}} and {{jsxref("Object.setPrototypeOf()")}}. This is equivalent to the JavaScript property <code>__proto__</code> which is non-standard but de-facto implemented by many browsers.</p> + +<p>It should not be confused with the <code><em>func</em>.prototype</code> property of functions, which instead specifies the <code>[[Prototype]]</code> to be assigned to all <em>instances</em> of objects created by the given function when used as a constructor. The <code><strong>Object.prototype</strong></code> property represents the {{jsxref("Object")}} prototype object.</p> +</div> + +<p>Here is what happens when trying to access a property:</p> + +<pre class="brush: js">// Let's assume we have object o, with its own properties a and b: +// {a: 1, b: 2} +// o.[[Prototype]] has properties b and c: +// {b: 3, c: 4} +// Finally, o.[[Prototype]].[[Prototype]] is null. +// This is the end of the prototype chain, as null, +// by definition, has no [[Prototype]]. +// Thus, the full prototype chain looks like: +// {a: 1, b: 2} ---> {b: 3, c: 4} ---> null + +console.log(o.a); // 1 +// Is there an 'a' own property on o? Yes, and its value is 1. + +console.log(o.b); // 2 +// Is there a 'b' own property on o? Yes, and its value is 2. +// The prototype also has a 'b' property, but it's not visited. +// This is called "property shadowing." + +console.log(o.c); // 4 +// Is there a 'c' own property on o? No, check its prototype. +// Is there a 'c' own property on o.[[Prototype]]? Yes, its value is 4. + +console.log(o.d); // undefined +// Is there a 'd' own property on o? No, check its prototype. +// Is there a 'd' own property on o.[[Prototype]]? No, check its prototype. +// o.[[Prototype]].[[Prototype]] is null, stop searching, +// no property found, return undefined. +</pre> + +<p>Setting a property to an object creates an own property. The only exception to the getting and setting behavior rules is when there is an inherited property with a <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">getter or a setter</a>.</p> + +<h3 id="Inheriting_methods">Inheriting "methods"</h3> + +<p>JavaScript does not have "methods" in the form that class-based languages define them. In JavaScript, any function can be added to an object in the form of a property. An inherited function acts just as any other property, including property shadowing as shown above (in this case, a form of <em>method overriding</em>).</p> + +<p>When an inherited function is executed, the value of <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> points to the inheriting object, not to the prototype object where the function is an own property.</p> + +<pre class="brush: js">var o = { + a: 2, + m: function() { + return this.a + 1; + } +}; + +console.log(o.m()); // 3 +// When calling o.m in this case, 'this' refers to o + +var p = Object.create(o); +// p is an object that inherits from o + +p.a = 4; // creates an own property 'a' on p +console.log(p.m()); // 5 +// when p.m is called, 'this' refers to p. +// So when p inherits the function m of o, +// 'this.a' means p.a, the own property 'a' of p +</pre> + +<h2 id="Different_ways_to_create_objects_and_the_resulting_prototype_chain">Different ways to create objects and the resulting prototype chain</h2> + +<h3 id="Objects_created_with_syntax_constructs">Objects created with syntax constructs</h3> + +<pre class="brush: js">var o = {a: 1}; + +// The newly created object o has Object.prototype as its [[Prototype]] +// o has no own property named 'hasOwnProperty' +// hasOwnProperty is an own property of Object.prototype. +// So o inherits hasOwnProperty from Object.prototype +// Object.prototype has null as its prototype. +// o ---> Object.prototype ---> null + +var b = ['yo', 'whadup', '?']; + +// Arrays inherit from Array.prototype +// (which has methods indexOf, forEach, etc.) +// The prototype chain looks like: +// b ---> Array.prototype ---> Object.prototype ---> null + +function f() { + return 2; +} + +// Functions inherit from Function.prototype +// (which has methods call, bind, etc.) +// f ---> Function.prototype ---> Object.prototype ---> null +</pre> + +<h3 id="With_a_constructor">With a constructor</h3> + +<p>A "constructor" in JavaScript is "just" a function that happens to be called with the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new operator</a>.</p> + +<pre class="brush: js">function Graph() { + this.vertices = []; + this.edges = []; +} + +Graph.prototype = { + addVertex: function(v) { + this.vertices.push(v); + } +}; + +var g = new Graph(); +// g is an object with own properties 'vertices' and 'edges'. +// g.[[Prototype]] is the value of Graph.prototype when new Graph() is executed. +</pre> + +<h3 id="With_Object.create">With <code>Object.create</code></h3> + +<p>ECMAScript 5 introduced a new method: {{jsxref("Object.create()")}}. Calling this method creates a new object. The prototype of this object is the first argument of the function:</p> + +<pre class="brush: js">var a = {a: 1}; +// a ---> Object.prototype ---> null + +var b = Object.create(a); +// b ---> a ---> Object.prototype ---> null +console.log(b.a); // 1 (inherited) + +var c = Object.create(b); +// c ---> b ---> a ---> Object.prototype ---> null + +var d = Object.create(null); +// d ---> null +console.log(d.hasOwnProperty); +// undefined, because d doesn't inherit from Object.prototype +</pre> + +<div> +<h3 id="With_the_class_keyword">With the <code>class</code> keyword</h3> + +<p>ECMAScript 2015 introduced a new set of keywords implementing <a href="/en-US/docs/Web/JavaScript/Reference/Classes">classes</a>. Although these constructs look like those familiar to developers of class-based languages, they are not the same. JavaScript remains prototype-based. The new keywords include {{jsxref("Statements/class", "class")}}, {{jsxref("Classes/constructor", "constructor")}}, {{jsxref("Classes/static", "static")}}, {{jsxref("Classes/extends", "extends")}}, and {{jsxref("Operators/super", "super")}}.</p> + +<pre class="brush: js">'use strict'; + +class Polygon { + constructor(height, width) { + this.height = height; + this.width = width; + } +} + +class Square extends Polygon { + constructor(sideLength) { + super(sideLength, sideLength); + } + get area() { + return this.height * this.width; + } + set sideLength(newLength) { + this.height = newLength; + this.width = newLength; + } +} + +var square = new Square(2); +</pre> + +<h3 id="Performance">Performance</h3> + +<p>The lookup time for properties that are high up on the prototype chain can have a negative impact on performance, and this may be significant in code where performance is critical. Additionally, trying to access nonexistent properties will always traverse the full prototype chain.</p> + +<p>Also, when iterating over the properties of an object, <strong>every</strong> enumerable property that is on the prototype chain will be enumerated.To check whether an object has a property defined on <em>itself</em> and not somewhere on its prototype chain, it is necessary to use the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty"><code>hasOwnProperty</code></a> method which all objects inherit from <code>Object.prototype</code>. To give you a concrete example, let's take the above graph example code to illustrate it:</p> + +<pre class="brush: js">console.log(g.hasOwnProperty('vertices')); +// true + +console.log(g.hasOwnProperty('nope')); +// false + +console.log(g.hasOwnProperty('addVertex')); +// false + +console.log(g.__proto__.hasOwnProperty('addVertex')); +// true +</pre> + +<p><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty"><code>hasOwnProperty</code></a> is the only thing in JavaScript which deals with properties and does <strong>not</strong> traverse the prototype chain.</p> + +<p>Note: It is <strong>not</strong> enough to check whether a property is <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a>. The property might very well exist, but its value just happens to be set to <code>undefined</code>.</p> +</div> + +<h3 id="Bad_practice_Extension_of_native_prototypes">Bad practice: Extension of native prototypes</h3> + +<p>One mis-feature that is often used is to extend <code>Object.prototype</code> or one of the other built-in prototypes.</p> + +<p>This technique is called monkey patching and breaks <em>encapsulation</em>. While used by popular frameworks such as Prototype.js, there is still no good reason for cluttering built-in types with additional <em>non-standard</em> functionality.</p> + +<p>The <strong>only</strong> good reason for extending a built-in prototype is to backport the features of newer JavaScript engines, like <code>Array.forEach</code>.</p> + +<h2 id="Example">Example</h2> + +<p><code>B</code> shall inherit from <code>A</code>:</p> + +<pre class="brush: js">function A(a) { + this.varA = a; +} + +// What is the purpose of including varA in the prototype when A.prototype.varA will <em>always</em> be shadowed by +// this.varA, given the definition of function A above? +A.prototype = { + varA: null, // Shouldn't we strike varA from the prototype as doing nothing? + // perhaps intended as an optimization to allocate space in hidden classes? + // https://developers.google.com/speed/articles/optimizing-javascript#Initializing-instance-variables + // would be valid if varA wasn't being initialized uniquely for each instance + doSomething: function() { + // ... + } +}; + +function B(a, b) { + A.call(this, a); + this.varB = b; +} +B.prototype = Object.create(A.prototype, { + varB: { + value: null, + enumerable: true, + configurable: true, + writable: true + }, + doSomething: { + value: function() { // override + A.prototype.doSomething.apply(this, arguments); // call super + // ... + }, + enumerable: true, + configurable: true, + writable: true + } +}); +B.prototype.constructor = B; + +var b = new B(); +b.doSomething(); +</pre> + +<p>The important parts are:</p> + +<ul> + <li>Types are defined in <code>.prototype</code>.</li> + <li>You use <code>Object.create()</code> to inherit.</li> +</ul> + +<h2 id="prototype_and_Object.getPrototypeOf"><code>prototype</code> and <code>Object.getPrototypeOf</code></h2> + +<p>JavaScript is a bit confusing for developers coming from Java or C++, as it's all dynamic, all runtime, and it has no classes at all. It's all just instances (objects). Even the "classes" we simulate are just a function object.</p> + +<p>You probably already noticed that our <code>function A</code> has a special property called <code>prototype</code>. This special property works with the JavaScript <code>new </code>operator. The reference to the prototype object is copied to the internal <code>[[Prototype]]</code> property of the new instance. For example, when you do <code>var a1 = new A()</code>, JavaScript (after creating the object in memory and before running function <code>A()</code> with <code>this</code> defined to it) sets <code>a1.[[Prototype]] = A.prototype</code>. When you then access properties of the instance, JavaScript first checks whether they exist on that object directly, and if not, it looks in <code>[[Prototype]]</code>. This means that all the stuff you define in <code>prototype</code> is effectively shared by all instances, and you can even later change parts of <code>prototype</code> and have the changes appear in all existing instances, if you wanted to.</p> + +<p>If, in the example above, you do <code>var a1 = new A(); var a2 = new A();</code> then <code>a1.doSomething</code> would actually refer to <code>Object.getPrototypeOf(a1).doSomething</code>, which is the same as the <code>A.prototype.doSomething</code> you defined, i.e. <code>Object.getPrototypeOf(a1).doSomething == Object.getPrototypeOf(a2).doSomething == A.prototype.doSomething</code>.</p> + +<p>In short, <code>prototype</code> is for types, while <code>Object.getPrototypeOf()</code> is the same for instances.</p> + +<p><code>[[Prototype]]</code> is looked at <em>recursively</em>, i.e. <code>a1.doSomething</code>, <code>Object.getPrototypeOf(a1).doSomething</code>, <code>Object.getPrototypeOf(Object.getPrototypeOf(a1)).doSomething</code> etc., until it's found or <code>Object.getPrototypeOf </code>returns null.</p> + +<p>So, when you call</p> + +<pre class="brush: js">var o = new Foo();</pre> + +<p>JavaScript actually just does</p> + +<pre class="brush: js">var o = new Object(); +o.[[Prototype]] = Foo.prototype; +Foo.call(o);</pre> + +<p>(or something like that) and when you later do</p> + +<pre class="brush: js">o.someProp;</pre> + +<p>it checks whether <code>o</code> has a property <code>someProp</code>. If not, it checks <code>Object.getPrototypeOf(o).someProp</code>, and if that doesn't exist it checks <code>Object.getPrototypeOf(Object.getPrototypeOf(o)).someProp</code>, and so on.</p> + +<div> +<h2 id="In_conclusion">In conclusion</h2> + +<p>It is <strong>essential</strong> to understand the prototypal inheritance model before writing complex code that makes use of it. Also, be aware of the length of the prototype chains in your code and break them up if necessary to avoid possible performance problems. Further, the native prototypes should <strong>never</strong> be extended unless it is for the sake of compatibility with newer JavaScript features.</p> +</div> diff --git a/files/id/web/javascript/language_resources/index.html b/files/id/web/javascript/language_resources/index.html new file mode 100644 index 0000000000..bda5fe1f42 --- /dev/null +++ b/files/id/web/javascript/language_resources/index.html @@ -0,0 +1,136 @@ +--- +title: JavaScript language resources +slug: Web/JavaScript/Language_Resources +tags: + - Advanced + - JavaScript +translation_of: Web/JavaScript/Language_Resources +--- +<div>{{JsSidebar}}</div> + +<p><strong>ECMAScript</strong> merupakan bahasa scripting yang membentuk basis dari <a href="/en-US/docs/JavaScript">JavaScript</a>. ECMAScript di standarisasi oleh organisasi standard <a href="http://www.ecma-international.org/" title="http://www.ecma-international.org/">ECMA International</a> pada <strong>Spesifikasi ECMA-262 dan ECMA-402</strong>. Berikut ECMAScript standard yang telah disetujui atau masih dalam pengerjaan:</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Nama</th> + <th>Link</th> + <th>Tanggal rilis</th> + <th>Deskripsi</th> + </tr> + <tr> + <th colspan="4">Edisi saat ini</th> + </tr> + <tr> + <td>ECMA-262 2017 (ES 8)</td> + <td><a href="http://tc39.github.io/ecma262/">Working draft</a>, <a href="https://github.com/tc39/ecma262">repository</a></td> + <td>2017</td> + <td>ECMAScript 2017 (8th Edition), currently work in progress.</td> + </tr> + <tr> + <td>ECMA-402 4.0</td> + <td><a href="http://tc39.github.io/ecma402/">Working draft</a>, <a href="https://github.com/tc39/ecma402">repository</a></td> + <td>2017</td> + <td>ECMAScript Internationalization API 4.0, currently work in progress.</td> + </tr> + <tr> + <th colspan="4">Obsolete/historical editions</th> + </tr> + <tr> + <td>ECMA-262 (ES 1)</td> + <td><a href="http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%201st%20edition,%20June%201997.pdf">PDF</a></td> + <td>June 1997</td> + <td>the original ECMAScript standard.</td> + </tr> + <tr> + <td>ECMA-262 (ES 2)</td> + <td><a href="http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%202nd%20edition,%20August%201998.pdf">PDF</a></td> + <td>August 1998</td> + <td>the second revision of the ECMAScript standard; also ISO standard 16262.</td> + </tr> + <tr> + <td>ECMA-262 (ES 3)</td> + <td><a href="http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%203rd%20edition,%20December%201999.pdf">PDF</a></td> + <td>December 1999</td> + <td>the third revision of the ECMAScript standard; corresponds to JavaScript 1.5.<br> + See also the <a href="http://www.mozilla.org/js/language/E262-3-errata.html">errata</a></td> + </tr> + <tr> + <td>ECMA-262 (ES 5)</td> + <td><a href="http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262%205th%20edition%20December%202009.pdf">PDF</a></td> + <td>December 2009</td> + <td>ECMAScript 5<br> + See also the <a href="http://wiki.ecmascript.org/doku.php?id=es3.1:es3.1_proposal_working_draft">ES5 errata</a> and <a href="/en-US/docs/JavaScript/ECMAScript_5_support_in_Mozilla" title="JavaScript/ECMAScript 5 support in Mozilla">ECMAScript 5 support in Mozilla</a></td> + </tr> + <tr> + <td>ECMA-357</td> + <td><a href="http://www.ecma-international.org/publications/files/ECMA-ST-WITHDRAWN/ECMA-357,%201st%20edition,%20June%202004.pdf">PDF</a></td> + <td>June 2004</td> + <td><a href="/en-US/docs/E4X" title="E4X">ECMAScript for XML (E4X)</a>.<br> + See also the <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=169406">E4X errata</a>.</td> + </tr> + <tr> + <td>ECMA-357 Edition 2</td> + <td><a href="http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-357.pdf">PDF</a></td> + <td>December 2005</td> + <td><a href="/en-US/docs/E4X" title="E4X">ECMAScript for XML (E4X)</a>.</td> + </tr> + <tr> + <td>ECMA-262 (ES 5.1)</td> + <td><a href="http://www.ecma-international.org/ecma-262/5.1/Ecma-262.pdf">PDF</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/">HTML</a></td> + <td>June 2011</td> + <td>This version is fully aligned with 3<sup>rd</sup> edition of the international standard <a href="http://www.iso.org/iso/iso_catalogue/catalogue_tc/catalogue_detail.htm?csnumber=55755">ISO/IEC 16262:2011</a>.<br> + It includes ES5 errata fixes, no new features.</td> + </tr> + <tr> + <td>ECMA-402 1.0</td> + <td><a href="http://ecma-international.org/ecma-402/1.0/ECMA-402.pdf">PDF</a>, <a href="http://ecma-international.org/ecma-402/1.0/index.html">HTML</a></td> + <td>December 2012</td> + <td>ECMAScript Internationalization API 1.0.</td> + </tr> + <tr> + <td>ECMA-262 2015 (ES 6)</td> + <td><a href="http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf">PDF</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/index.html">HTML</a></td> + <td>June 2015</td> + <td>ECMAScript 2015 (6th Edition).</td> + </tr> + <tr> + <td>ECMA-402 2.0</td> + <td><a href="http://www.ecma-international.org/ecma-402/2.0/ECMA-402.pdf">PDF</a></td> + <td>June 2015</td> + <td>ECMAScript Internationalization API 2.0.</td> + </tr> + <tr> + <td>ECMA-262 2016 (ES 7)</td> + <td><a href="http://tc39.github.io/ecma262/2016/">HTML</a></td> + <td>June 2016</td> + <td>ECMAScript 2016 (7th Edition). Now feature frozen. To be ratified later this year (June).</td> + </tr> + <tr> + <td>ECMA-402 3.0</td> + <td><a href="http://tc39.github.io/ecma402/2016/">HTML</a></td> + <td>June 2016</td> + <td>ECMAScript Internationalization API 3.0. To be ratified later this year (June).</td> + </tr> + </tbody> +</table> + +<p>Lihat <a href="https://en.wikipedia.org/wiki/ECMAScript" title="https://en.wikipedia.org/wiki/ECMAScript">entri Wikipedia ECMAScript</a> untuk info lebih lanjut tentang sejarah ECMAScript.</p> + +<p>Anda dapat berpartisipasi atau mengikuti pekerjaan di revisi berikutnya dari spasifikasi bahasa ECMAScript, nama kode "Harmony", dan Spesifikasi ECMAScript Internationalization API melalui public wiki dan <a class="link-https" href="https://mail.mozilla.org/listinfo/es-discuss" title="https://mail.mozilla.org/listinfo/es-discuss">es-discuss mailing list</a> tercantum dari <a href="http://www.ecmascript.org/community.php" title="http://www.ecmascript.org/community.php">ecmascript.org</a>.</p> + +<h2 id="Implementasi">Implementasi</h2> + +<ul> + <li><a href="/en-US/docs/SpiderMonkey" title="SpiderMonkey">SpiderMonkey</a> - JavaScript engine digunakan di hampir semuaproduk Mozilla, termasuk Firefox;</li> + <li><a href="/en-US/docs/Rhino" title="Rhino">Rhino</a> - JavaScript engine ditulis menggunakan Java;</li> + <li><a href="/en-US/docs/Tamarin" title="Tamarin">Tamarin</a> - ActionScript virtual machine (digunakan di Adobe® Flash® Player);</li> + <li><a href="https://en.wikipedia.org/wiki/List_of_ECMAScript_engines" title="https://en.wikipedia.org/wiki/List_of_ECMAScript_engines">Other implementations</a> (Wikipedia).</li> +</ul> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li><a href="https://brendaneich.com/" title="https://brendaneich.com/">Brendan Eich's blog</a>. Brendan adalah pencipta JavaScript dan SpiderMonkey JS engine. Tetap bekerja dengan ECMA working group untuk mengembangkan bahasa.</li> + <li><a href="http://dmitrysoshnikov.com/" title="http://dmitrysoshnikov.com/">Dmitry Soshnikov's analysis of ECMA-262 Edition 3 and 5</a></li> +</ul> diff --git a/files/id/web/javascript/memory_management/index.html b/files/id/web/javascript/memory_management/index.html new file mode 100644 index 0000000000..90242f72da --- /dev/null +++ b/files/id/web/javascript/memory_management/index.html @@ -0,0 +1,187 @@ +--- +title: Memory Management +slug: Web/JavaScript/Memory_Management +translation_of: Web/JavaScript/Memory_Management +--- +<div>{{JsSidebar("Advanced")}}</div> + +<h2 id="Introduction">Introduction</h2> + +<p>Bahasa-bahasa Level Bawah, seperti C, memiliki manajemen memory level rendah yang primitiv seperti <code>malloc()</code> dan <code>free()</code>. Pada bagian lain, nilai Javascript dialokasikan ketika sesuatu (objek, string,dll.) dibuat dan secara otomatis dibebaskan ketika tidak digunakan lagi. Proses terakhir disebut <em>garbage collection. "</em>Secara Otomatis" ini adalah sumber kekeliruan dan memberikan kesan developer Javascript (dan Bahasa tingkat tinggi lainnya) bahwa mereka bisa memilih untuk tidak mempedulikan tentang manajemen memory, maka itu adalah suatu kesalahan</p> + +<p>Low-level languages, like C, have low-level memory management primitives like <code>malloc()</code> and <code>free()</code>. On the other hand, JavaScript values are allocated when things (objects, strings, etc.) are created and "automatically" freed when they are not used anymore. The latter process is called <em>garbage collection</em>. This "automatically" is a source of confusion and gives JavaScript (and high-level languages) developers the impression they can decide not to care about memory management. This is a mistake.</p> + +<h2 id="Siklus_hidup_sebuah_memori">Siklus hidup sebuah memori</h2> + +<p>Tanpa memperhatikan bahasa pemograman, siklus hidup memori pada akhirnya selalu sama :</p> + +<ol> + <li>Mengalokasi memori yang kamu gunakan.</li> + <li>Menggunakan alokasi memori untuk (baca, tulis).</li> + <li>Membebaskan alokasi memori saat tidak digunakan lagi.</li> +</ol> + +<p>Bagian pertama dan kedua bersifat ekplisit untuk semua bahasa. Sedangkan untuk bagian terakhir adalah eksplisit untuk bahasa tingkat rendah, tetapi hampir semua bahasa tingkat atas seperti JavaScript juga bersifat implisit.</p> + +<h3 id="Allocation_in_JavaScript">Allocation in JavaScript</h3> + +<h4 id="Value_initialization">Value initialization</h4> + +<p>In order not to bother the programmer with allocations, JavaScript does it alongside with declaring values.</p> + +<pre class="brush: js">var n = 123; // allocates memory for a number +var s = "azerty"; // allocates memory for a string + +var o = { + a: 1, + b: null +}; // allocates memory for an object and contained values + +// (like object) allocates memory for the array and +// contained values +var a = [1, null, "abra"]; + +function f(a){ + return a + 2; +} // allocates a function (which is a callable object) + +// function expressions also allocate an object +someElement.addEventListener('click', function(){ + someElement.style.backgroundColor = 'blue'; +}, false); +</pre> + +<h4 id="Allocation_via_function_calls">Allocation via function calls</h4> + +<p>Some function calls result in object allocation.</p> + +<pre class="brush: js">var d = new Date(); // allocates a Date object + +var e = document.createElement('div'); // allocates a DOM element</pre> + +<p>Some methods allocate new values or objects:</p> + +<pre class="brush: js">var s = "azerty"; +var s2 = s.substr(0, 3); // s2 is a new string +// Since strings are immutable value, +// JavaScript may decide to not allocate memory, +// but just store the [0, 3] range. + +var a = ["ouais ouais", "nan nan"]; +var a2 = ["generation", "nan nan"]; +var a3 = a.concat(a2); +// new array with 4 elements being +// the concatenation of a and a2 elements +</pre> + +<h3 id="Using_values">Using values</h3> + +<p>Using value basically means reading and writing in allocated memory. This can be done by reading or writing the value of a variable or an object property or even passing an argument to a function.</p> + +<h3 id="Release_when_the_memory_is_not_needed_anymore">Release when the memory is not needed anymore</h3> + +<p>Most of memory management issues come at this phase. The hardest task here is to find when "the allocated memory is not needed any longer". It often requires for the developer to determine where in the program such piece of memory is not needed anymore and free it.</p> + +<p>High-level languages embed a piece of software called "garbage collector" whose job is to track memory allocation and use in order to find when a piece of allocated memory is not needed any longer in which case, it will automatically free it. This process is an approximation since the general problem of knowing whether some piece of memory is needed is <a class="external" href="http://en.wikipedia.org/wiki/Decidability_%28logic%29">undecidable</a> (can't be solved by an algorithm).</p> + +<h2 id="Garbage_collection">Garbage collection</h2> + +<p>As stated above the general problem of automatically finding whether some memory "is not needed anymore" is undecidable. As a consequence, garbage collections implement a restriction of a solution to the general problem. This section will explain the necessary notions to understand the main garbage collection algorithms and their limitations.</p> + +<h3 id="References">References</h3> + +<p>The main notion garbage collection algorithms rely on is the notion of <em>reference</em>. Within the context of memory management, an object is said to reference another object if the former has an access to the latter (either implicitly or explicitly). For instance, a JavaScript object has a reference to its <a href="/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">prototype</a> (implicit reference) and to its properties values (explicit reference).</p> + +<p>In this context, the notion of "object" is extended to something broader than regular JavaScript objects and also contains function scopes (or the global lexical scope).</p> + +<h3 id="Reference-counting_garbage_collection">Reference-counting garbage collection</h3> + +<p>This is the most naive garbage collection algorithm. This algorithm reduces the definition of "an object is not needed anymore" to "an object has no other object referencing to it". An object is considered garbage collectable if there is zero reference pointing at this object.</p> + +<h4 id="Example">Example</h4> + +<pre class="brush: js">var o = { + a: { + b:2 + } +}; +// 2 objects are created. One is referenced by the other as one of its properties. +// The other is referenced by virtue of being assigned to the 'o' variable. +// Obviously, none can be garbage-collected + + +var o2 = o; // the 'o2' variable is the second thing that + // has a reference to the object +o = 1; // now, the object that was originally in 'o' has a unique reference + // embodied by the 'o2' variable + +var oa = o2.a; // reference to 'a' property of the object. + // This object has now 2 references: one as a property, + // the other as the 'oa' variable + +o2 = "yo"; // The object that was originally in 'o' has now zero + // references to it. It can be garbage-collected. + // However what was its 'a' property is still referenced by + // the 'oa' variable, so it cannot be freed + +oa = null; // what was the 'a' property of the object originally in o + // has zero references to it. It can be garbage collected. +</pre> + +<h4 id="Limitation_cycles">Limitation: cycles</h4> + +<p>There is a limitation when it comes to cycles. In the following example two objects are created and reference one another – thus creating a cycle. They will not get out of the function scope after the function call, so they are effectively useless and could be freed. However, the reference-counting algorithm considers that since each of both object is referenced at least once and none can be garbage-collected.</p> + +<pre class="brush: js">function f(){ + var o = {}; + var o2 = {}; + o.a = o2; // o references o2 + o2.a = o; // o2 references o + + return "azerty"; +} + +f(); +</pre> + +<h4 id="Real-life_example">Real-life example</h4> + +<p>Internet Explorer 6 and 7 are known to have reference-counting garbage collectors for DOM objects. Cycles are a common mistake that can generate memory leaks:</p> + +<pre class="brush: js">var div; +window.onload = function(){ + div = document.getElementById("myDivElement"); + div.circularReference = div; + div.lotsOfData = new Array(10000).join("*"); +}; +</pre> + +<p>In the above example, the DOM element "myDivElement" has a circular reference to itself in the "circularReference" property. If the property is not explicitly removed or nulled, a reference-counting garbage collector will always have at least one reference intact and will keep the DOM element in memory even if it was removed from the DOM tree. If the DOM element holds lots of data (illustrated in the above example with the "lotsOfData" property), the memory consumed by this data will never be released.</p> + +<h3 id="Mark-and-sweep_algorithm">Mark-and-sweep algorithm</h3> + +<p>This algorithm reduces the definition of "an object is not needed anymore" to "an object is unreachable".</p> + +<p>This algorithm assumes the knowledge of a set of objects called <em>roots</em> (In JavaScript, the root is the global object). Periodically, the garbage-collector will start from these roots, find all objects that are referenced from these roots, then all objects referenced from these, etc. Starting from the roots, the garbage collector will thus find all <em>reachable</em> objects and collect all non-reachable objects.</p> + +<p>This algorithm is better than the previous one since "an object has zero reference" leads to this object being unreachable. The opposite is not true as we have seen with cycles.</p> + +<p>As of 2012, all modern browsers ship a mark-and-sweep garbage-collector. All improvements made in the field of JavaScript garbage collection (generational/incremental/concurrent/parallel garbage collection) over the last few years are implementation improvements of this algorithm, but not improvements over the garbage collection algorithm itself nor its reduction of the definition of when "an object is not needed anymore".</p> + +<h4 id="Cycles_are_not_a_problem_anymore">Cycles are not a problem anymore</h4> + +<p>In the first above example, after the function call returns, the 2 objects are not referenced anymore by something reachable from the global object. Consequently, they will be found unreachable by the garbage collector.</p> + +<p>The same thing goes with the second example. Once the div and its handler are made unreachable from the roots, they can both be garbage-collected despite referencing each other.</p> + +<h4 id="Limitation_objects_need_to_be_made_explicitly_unreachable">Limitation: objects need to be made explicitly unreachable</h4> + +<p>Although this is marked as a limitation, it is one that is rarely reached in practice which is why no one usually cares that much about garbage collection.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a class="external" href="http://www.ibm.com/developerworks/web/library/wa-memleak/">IBM article on "Memory leak patterns in JavaScript" (2007)</a></li> + <li><a class="external" href="http://msdn.microsoft.com/en-us/magazine/ff728624.aspx">Kangax article on how to register event handler and avoid memory leaks (2010)</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Performance" title="https://developer.mozilla.org/en-US/docs/Mozilla/Performance">Performance</a></li> +</ul> diff --git a/files/id/web/javascript/new_in_javascript/index.html b/files/id/web/javascript/new_in_javascript/index.html new file mode 100644 index 0000000000..79ee10c2b3 --- /dev/null +++ b/files/id/web/javascript/new_in_javascript/index.html @@ -0,0 +1,74 @@ +--- +title: New in JavaScript +slug: Web/JavaScript/New_in_JavaScript +tags: + - ECMAScript + - JavaScript + - NeedsTranslation + - TopicStub + - Versions +translation_of: Archive/Web/JavaScript/New_in_JavaScript +--- +<div>{{jsSidebar("New_in_JS")}}</div> + +<p>This chapter contains information about JavaScript's version history and implementation status for Mozilla/SpiderMonkey-based JavaScript applications, such as Firefox.</p> + +<h2 id="ECMAScript_versions">ECMAScript versions</h2> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Language_Resources">Language resources</a></dt> + <dd>Learn more about the ECMAScript standards on which the JavaScript language is based on.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla">ECMAScript 5 support</a></dt> + <dd>Implementation status for the current standard ECMA-262 Edition 5.1 in Mozilla-based engines and products.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_2015_support_in_Mozilla">ECMAScript 2015 support</a></dt> + <dd>Implementation status for the draft ECMA-262 Edition 6 (ES2015) in Mozilla-based engines and products.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_Next_support_in_Mozilla">ECMAScript Next support</a></dt> + <dd>Implementation status for upcoming ECMA-262 features as per the yearly (ES2016/ES2017/ES2018/...) release schedule in Mozilla-based engines and products.</dd> +</dl> + +<h2 id="JavaScript_release_notes">JavaScript release notes</h2> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/Firefox_JavaScript_changelog">Firefox JavaScript changelog</a></dt> + <dd>See this changelog for JavaScript features implemented in Firefox 5 and later.</dd> +</dl> + +<h2 id="JavaScript_versions">JavaScript versions</h2> + +<p><strong>Deprecated</strong> ({{deprecated_inline}}). The explicit versioning and opt-in of language features was Mozilla-specific and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=867609">are in process of being removed</a>. Firefox 4 was the last version which referred to a JavaScript version (1.8.5). With new ECMA standards, JavaScript language features are now often mentioned with their initial definition in ECMA-262 Editions such as ECMAScript 2015.</p> + +<p>JavaScript was released as version 1.0 in March 1996 in Netscape Navigator 2.0 and Internet Explorer 2.0.</p> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.1">JavaScript 1.1</a></dt> + <dd>Version shipped in Netscape Navigator 3.0. Released on August 19, 1996.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.2">JavaScript 1.2</a></dt> + <dd>Version shipped in Netscape Navigator 4.0-4.05. Released on June 11, 1997.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.3">JavaScript 1.3</a></dt> + <dd>Version shipped in Netscape Navigator 4.06-4.7x. Released on October 19, 1998.<br> + Standardization work to be compliant with ECMA-262 1st and 2nd Edition.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.4">JavaScript 1.4</a></dt> + <dd>Version shipped with Netscape's server-side JavaScript. Released in 1999.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.5">JavaScript 1.5</a></dt> + <dd>Version shipped in Netscape Navigator 6.0 and Firefox 1.0. Release on November 14, 2000.<br> + Standardization work to be compliant with ECMA-262 3rd Edition.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.6">JavaScript 1.6</a></dt> + <dd>Version shipped in Firefox 1.5. Released in November 2005.<br> + Includes ECMAScript for XML (E4X), new <code>Array</code> methods plus <code>String</code> and <code>Array</code> generics.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.7">JavaScript 1.7</a></dt> + <dd>Version shipped in Firefox 2. Released in October 2006.<br> + Includes generators, iterators, array comprehensions, <code>let</code> expressions, and destructuring assignment.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.8">JavaScript 1.8</a></dt> + <dd>Version shipped in Firefox 3. Released in June 2008.<br> + Includes expression closures, generator expressions and <code>Array.reduce()</code></dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.8.1">JavaScript 1.8.1</a></dt> + <dd>Version shipped in Firefox 3.5. Released on June 30, 2009.<br> + Includes the TraceMonkey JIT and supports native JSON.</dd> + <dt>JavaScript 1.8.2</dt> + <dd>Version shipped in Firefox 3.6. Released June 22, 2009.<br> + Includes only minor changes.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.8.5">JavaScript 1.8.5</a></dt> + <dd>Version shipped in Firefox 4. Released July 27, 2010.<br> + Includes many new features for ECMA-262 Edition 5 compliance.<br> + This is the last JavaScript version.</dd> +</dl> diff --git a/files/id/web/javascript/panduan/closures/index.html b/files/id/web/javascript/panduan/closures/index.html new file mode 100644 index 0000000000..73cdbb7e15 --- /dev/null +++ b/files/id/web/javascript/panduan/closures/index.html @@ -0,0 +1,345 @@ +--- +title: Closures +slug: Web/JavaScript/Panduan/Closures +translation_of: Web/JavaScript/Closures +--- +<p>Closure adalah fungsi yang merujuk kepada variabel yang mandiri (bebas). </p> + +<p>Dengan kata lain, fungsi yang di definisikan di dalam closure 'mengingat' lingkungan dimana closure ini didefinisikan. </p> + +<p>Lihat contoh berikut:</p> + +<div> +<pre class="brush: js">function init() { + var name = "Mozilla"; // name adalah sebuah lokal variabel yang dibuat oleh init + function displayName() { // displayName() adalah fungsi internal, sebuah closure + alert (name); // displayName() menggunakan variabel yang dideklarasikan pada fungsi induknya + } + displayName(); +} +init(); +</pre> +</div> + +<p><code style="font-size: 14px;">init()</code><span style="line-height: 1.572;"> membuat sebuah lokal variabel </span><code style="font-size: 14px;">name</code><span style="line-height: 1.572;"> dan kemudian memanggil fungsi </span><code style="font-size: 14px;">displayName()</code><span style="line-height: 1.572;">. </span><code style="font-size: 14px;">displayName()</code><span style="line-height: 1.572;"> adalah fungsi internal yang didefinisikan didalam</span><span style="line-height: 1.572;"> </span><code style="font-size: 14px;">init()</code><span style="line-height: 1.572;"> dan hanya dapat diakses di dalam fungsi tersebut. </span><code style="font-size: 14px;">displayName()</code><span style="line-height: 1.572;"> tidak memiliki lokal variabelnya sendiri, namun fungsi ini memiliki akses ke variabel diluar fungsinya dan dapat menggunakan variabel </span><code style="font-size: 14px;">name</code><span style="line-height: 1.572;"> tersebut yang telah di deklarasikan di fungsi induknya.</span></p> + +<p><a href="http://jsfiddle.net/xAFs9/3/" title="http://jsfiddle.net/xAFs9/">Jalankan</a> kode dan perhatikan bahwa <code>alert()</code> dapat menampilkan isi dari variabel <code>name</code>, dimana variabel tersebut dideklarasikan pada fungsi induknya. Ini adalah sebuah contoh dari ruang lingkup leksikal (<em>lexical</em> <em>scoping)</em>, yang menunjukan bagaimana cara javascript mencari variabel. Di Javascript lokasi dimana variabel tersebut dideklarasikan di dalam source code menentukan dimana variabel itu dapat diakses. Nested functions memiliki akses pada variabel yang dideklarasikan pada ruang lingkup induknya.</p> + +<p>Lihat contoh berikut:</p> + +<pre class="brush: js">function makeFunc() { + var name = "Mozilla"; + function displayName() { + alert(name); + } + return displayName; +} + +var myFunc = makeFunc(); +myFunc(); +</pre> + +<p>Jika kamu menjalankan kode ini, kode ini akan memiliki efek yang sama seperti contoh sebelumnya <code>init()</code>: teks "Mozilla" akan muncul di JavaScript alert box. Yang membedakan dan menarik adalah fungsi internal <code>displayName()</code> di kembalikan terlebih dahulu ke fungsi di luar sebelum di eksekusi.</p> + +<p>Jika dilihat ini agak aneh karena normalnya pada bahasa pemrograman lain, variabel lokal di dalam sebuah fungsi hanya ada saat fungsi tersebut dieksekusi. Sehingga saat <code>makeFunc()</code> selesai dieksekusi, sewajarnya variabel <code>name</code> ini tidak dapat diakses lagi. Namun, karena kode ini masih berjalan normal, ini adalah hal yang berbeda di Javascript.</p> + +<p>Alasannya adalah fungsi tersebut telah menjadi <em>closure </em>di javascript. <em>Closure </em>adalah kombinasi dari fungsi dan lingkungan leksikal dimana fungsi itu di deklarasikan. Lingkungan ini terdiri dari lokal variabel yang berada di ruang lingkup yang sama saat <em>closure </em>dibuat. Pada kasus ini, <code>myFunc</code> bereferensi kepada fungsi <code>displayName</code> yang telah dibuat ketika <code>makeFunc</code> dijalankan. Fungsi <code>displayName</code> akan tepat menjaga akses ke lingkungan leksikalnya, dimana variabel <code>name</code> ini aktif. Untuk alasan inilah, ketika <code>myFunc</code> di panggil, variabel <code>name</code> tetap dapat digunakan dan "Mozilla" dikirim ke alert box.</p> + +<p>Berikut adalah contoh menarik yang lainnya — fungsi <code>makeAdder</code> :</p> + +<pre class="brush: js">function makeAdder(x) { + return function(y) { + return x + y; + }; +} + +var add5 = makeAdder(5); +var add10 = makeAdder(10); + +console.log(add5(2)); // 7 +console.log(add10(2)); // 12 +</pre> + +<p>Di contoh ini, kita telah mendefinisikan fungsi <code>makeAdder(x)</code> dengan satu argument <code>x</code> dan mengembalikan sebuah fungsi baru. Fungsi yang dikembalikan membutuhkan satu argumen <code>y</code>, dan mengembalikan jumlah <code>x</code> dan <code>y</code>.</p> + +<p>Esensinya, <code>makeAdder</code> adalah fungsi untuk membuat fungsi (function factory) — fungsi ini akan membuat fungsi yang akan menambahkan angka melalui argumen. Pada contoh diatas kita membuat dua fungsi baru — yang satu menambahkan 5 melalui argumentnya dan satu menambahkan 10.</p> + +<p><code>add5</code> dan <code>add10</code> keduanya adalah closure. Fungsi ini menggunakan definisi fungsi yang sama, namun menggunakan memori yang berbeda. Di <code>add5</code> variabel <code>x</code> memiliki nilai 5. sedangkan di <code>add10</code> variabel <code>x</code> memiliki nilai 10.</p> + +<h2 id="Penggunaan_Closure">Penggunaan Closure</h2> + +<p>Setelah membaca teorinya muncul pertanyaan — Apakah closure berguna? Mari kita lihat implikasi dari penggunaan closure. Closure membantu kita mengakses data (pada lingkungannya) dengan fungsi yang mengoperasikan data tersebut. Ini berhubungan dengan <em>object oriented programming</em>, dimana objek obj0ek tersebut membantu kita dalam menghubukan beberapa data (properti objek) dengan satu atau lebih method.</p> + +<p>Karena itu, kamu dapat menggunakan closure dimanapun kamu dapat menggunakan objek dengan satu method.</p> + +<p>Situasi ini banyak ditemui umumnya pada pengembangan web. Banyak kode yang kita tulis di Javascript berdasarkan event — kita definisikan terlebih dahulu sifat dari event ini, kemudian menempelkannya pada event yang di panggil oleh user (seperti klik atau penekanan tombol). Kode kita secara garis umum adalah sebuah callback: sebuah fungsi yang dijalankan untuk merespon sebuah event.</p> + +<p>Berikut adalah contoh: kita ingin menambahkan beberapa tombol di sebuah halaman yang akan merubah ukuran teks. Cara untuk melakukannya adalah dengan menentukan ukuran huruf dari elemen body dalam satuan unit <em>pixel</em>, kemudian menentukan ukuran elemen lain di halaman (seperti header) menggunakan satuan unit <em>em</em>:</p> + +<pre class="brush: css">body { + font-family: Helvetica, Arial, sans-serif; + font-size: 12px; +} + +h1 { + font-size: 1.5em; +} + +h2 { + font-size: 1.2em; +} +</pre> + +<p>Tombol interaktif kita dapat merubah ukuran huruf dari elemen body dan elemen yang lainnya akan menyesuaikan.</p> + +<p>Berikut kode Javascript:</p> + +<pre class="brush: js">function makeSizer(size) { + return function() { + document.body.style.fontSize = size + 'px'; + }; +} + +var size12 = makeSizer(12); +var size14 = makeSizer(14); +var size16 = makeSizer(16); +</pre> + +<p><code>size12</code>, <code>size14</code>, dan <code>size16</code> adalah fungsi yang akan merubah ukuran teks body ke 12, 14, dan 16 pixel, secara berurutan. Kemudian kita tempelkan fungsi ini ke tombol (pada kasus ini adalah link) sebagai berikut:</p> + +<pre class="brush: js">document.getElementById('size-12').onclick = size12; +document.getElementById('size-14').onclick = size14; +document.getElementById('size-16').onclick = size16; +</pre> + +<pre class="brush: html"><a href="#" id="size-12">12</a> +<a href="#" id="size-14">14</a> +<a href="#" id="size-16">16</a> +</pre> + +<p><a href="https://jsfiddle.net/vnkuZ">Lihat pada JSFiddle</a></p> + +<h2 id="Emulating_private_methods_with_closures">Emulating private methods with closures</h2> + +<p>Languages such as Java provide the ability to declare methods private, meaning that they can only be called by other methods in the same class.</p> + +<p>JavaScript does not provide a native way of doing this, but it is possible to emulate private methods using closures. Private methods aren't just useful for restricting access to code: they also provide a powerful way of managing your global namespace, keeping non-essential methods from cluttering up the public interface to your code.</p> + +<p>Here's how to define some public functions that can access private functions and variables, using closures which is also known as the <a class="external" href="http://www.google.com/search?q=javascript+module+pattern" title="http://www.google.com/search?q=javascript+module+pattern">module pattern</a>:</p> + +<pre class="brush: js">var counter = (function() { + var privateCounter = 0; + function changeBy(val) { + privateCounter += val; + } + return { + increment: function() { + changeBy(1); + }, + decrement: function() { + changeBy(-1); + }, + value: function() { + return privateCounter; + } + }; +})(); + +alert(counter.value()); /* Alerts 0 */ +counter.increment(); +counter.increment(); +alert(counter.value()); /* Alerts 2 */ +counter.decrement(); +alert(counter.value()); /* Alerts 1 */ +</pre> + +<p>There's a lot going on here. In previous examples each closure has had its own environment; here we create a single environment which is shared by three functions: <code>counter.increment</code>, <code>counter.decrement</code>, and <code>counter.value</code>.</p> + +<p>The shared environment is created in the body of an anonymous function, which is executed as soon as it has been defined. The environment contains two private items: a variable called <code>privateCounter</code> and a function called <code>changeBy</code>. Neither of these private items can be accessed directly from outside the anonymous function. Instead, they must be accessed by the three public functions that are returned from the anonymous wrapper.</p> + +<p>Those three public functions are closures that share the same environment. Thanks to JavaScript's lexical scoping, they each have access to the <code>privateCounter</code> variable and <code>changeBy</code> function.</p> + +<p>You'll notice we're defining an anonymous function that creates a counter, and then we call it immediately and assign the result to the <code>counter</code> variable. We could store this function in a separate variable <code>makeCounter </code>and use it to create several counters.</p> + +<pre class="brush: js">var makeCounter = function() { + var privateCounter = 0; + function changeBy(val) { + privateCounter += val; + } + return { + increment: function() { + changeBy(1); + }, + decrement: function() { + changeBy(-1); + }, + value: function() { + return privateCounter; + } + } +}; + +var counter1 = makeCounter(); +var counter2 = makeCounter(); +alert(counter1.value()); /* Alerts 0 */ +counter1.increment(); +counter1.increment(); +alert(counter1.value()); /* Alerts 2 */ +counter1.decrement(); +alert(counter1.value()); /* Alerts 1 */ +alert(counter2.value()); /* Alerts 0 */ +</pre> + +<p>Notice how each of the two counters maintains its independence from the other. Its environment during the call of the <code>makeCounter()</code> function is different each time. The closure variable <code>privateCounter </code>contains a different instance each time.</p> + +<p>Using closures in this way provides a number of benefits that are normally associated with object oriented programming, in particular data hiding and encapsulation.</p> + +<h2 id="Creating_closures_in_loops_A_common_mistake">Creating closures in loops: A common mistake</h2> + +<p>Prior to the introduction of the <a href="/en-US/docs/JavaScript/Reference/Statements/let" title="let"><code>let</code> keyword</a> in JavaScript 1.7, a common problem with closures occurred when they were created inside a loop. Consider the following example:</p> + +<pre class="brush: html"><p id="help">Helpful notes will appear here</p> +<p>E-mail: <input type="text" id="email" name="email"></p> +<p>Name: <input type="text" id="name" name="name"></p> +<p>Age: <input type="text" id="age" name="age"></p> +</pre> + +<pre class="brush: js">function showHelp(help) { + document.getElementById('help').innerHTML = help; +} + +function setupHelp() { + var helpText = [ + {'id': 'email', 'help': 'Your e-mail address'}, + {'id': 'name', 'help': 'Your full name'}, + {'id': 'age', 'help': 'Your age (you must be over 16)'} + ]; + + for (var i = 0; i < helpText.length; i++) { + var item = helpText[i]; + document.getElementById(item.id).onfocus = function() { + showHelp(item.help); + } + } +} + +setupHelp(); +</pre> + +<p><a href="https://jsfiddle.net/v7gjv">Lihat pada JSFiddle</a></p> + +<p>The <code>helpText</code> array defines three helpful hints, each associated with the ID of an input field in the document. The loop cycles through these definitions, hooking up an onfocus event to each one that shows the associated help method.</p> + +<p>If you try this code out, you'll see that it doesn't work as expected. No matter what field you focus on, the message about your age will be displayed.</p> + +<p>The reason for this is that the functions assigned to onfocus are closures; they consist of the function definition and the captured environment from the <code>setupHelp</code> function's scope. Three closures have been created, but each one shares the same single environment. By the time the onfocus callbacks are executed, the loop has run its course and the item variable (shared by all three closures) has been left pointing to the last entry in the <code>helpText</code> list.</p> + +<p>One solution in this case is to use more closures: in particular, to use a function factory as described earlier on:</p> + +<pre class="brush: js">function showHelp(help) { + document.getElementById('help').innerHTML = help; +} + +function makeHelpCallback(help) { + return function() { + showHelp(help); + }; +} + +function setupHelp() { + var helpText = [ + {'id': 'email', 'help': 'Your e-mail address'}, + {'id': 'name', 'help': 'Your full name'}, + {'id': 'age', 'help': 'Your age (you must be over 16)'} + ]; + + for (var i = 0; i < helpText.length; i++) { + var item = helpText[i]; + document.getElementById(item.id).onfocus = makeHelpCallback(item.help); + } +} + +setupHelp(); +</pre> + +<p><a href="https://jsfiddle.net/v7gjv/1">Lihat pada JSFiddle</a></p> + +<p>This works as expected. Rather than the callbacks all sharing a single environment, the <code>makeHelpCallback</code> function creates a new environment for each one in which <code>help</code> refers to the corresponding string from the <code>helpText</code> array.</p> + +<h2 id="Performance_considerations">Performance considerations</h2> + +<p>It is unwise to unnecessarily create functions within other functions if closures are not needed for a particular task, as it will negatively affect script performance both in terms of processing speed and memory consumption.</p> + +<p>For instance, when creating a new object/class, methods should normally be associated to the object's prototype rather than defined into the object constructor. The reason is that whenever the constructor is called, the methods would get reassigned (that is, for every object creation).</p> + +<p>Consider the following impractical but demonstrative case:</p> + +<pre class="brush: js">function MyObject(name, message) { + this.name = name.toString(); + this.message = message.toString(); + this.getName = function() { + return this.name; + }; + + this.getMessage = function() { + return this.message; + }; +} +</pre> + +<p>The previous code does not take advantage of the benefits of closures and thus could instead be formulated:</p> + +<pre class="brush: js">function MyObject(name, message) { + this.name = name.toString(); + this.message = message.toString(); +} +MyObject.prototype = { + getName: function() { + return this.name; + }, + getMessage: function() { + return this.message; + } +}; +</pre> + +<p>However, redefining the prototype is not recommended, so the following example is even better because it appends to the existing prototype:</p> + +<pre class="brush: js">function MyObject(name, message) { + this.name = name.toString(); + this.message = message.toString(); +} +MyObject.prototype.getName = function() { + return this.name; +}; +MyObject.prototype.getMessage = function() { + return this.message; +}; +</pre> + +<p>In the two previous examples, the inherited prototype can be shared by all objects and the method definitions need not occur at every object creation. See <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Details of the Object Model</a> for more details.</p> + +<h2 id="Expression_closures">Expression closures</h2> + +<p>This addition is nothing more than a shorthand for writing simple functions, giving the language something similar to a typical <a class="external" href="http://en.wikipedia.org/wiki/Lambda_calculus#Lambda_calculus_and_programming_languages">Lambda notation</a>.</p> + +<p>JavaScript 1.7 and older:</p> + +<pre class="brush: js">function(x) { return x * x; }</pre> + +<p>JavaScript 1.8:</p> + +<pre class="brush: js">function(x) x * x</pre> + +<p>This syntax allows you to leave off the braces and 'return' statement - making them implicit. There is no added benefit to writing code in this manner, other than having it be syntactically shorter.</p> + +<p><strong>Examples:</strong></p> + +<p>A shorthand for binding event listeners:</p> + +<pre class="brush: js"> document.addEventListener("click", function() false, true); +</pre> + +<p>Using this notation with some of the array functions from JavaScript 1.6:</p> + +<pre class="brush: js">elems.some(function(elem) elem.type == "text");</pre> diff --git a/files/id/web/javascript/panduan/index.html b/files/id/web/javascript/panduan/index.html new file mode 100644 index 0000000000..491d4a4a84 --- /dev/null +++ b/files/id/web/javascript/panduan/index.html @@ -0,0 +1,119 @@ +--- +title: Panduan JavaScript +slug: Web/JavaScript/Panduan +translation_of: Web/JavaScript/Guide +--- +<div>{{jsSidebar("JavaScript Guide")}}</div> + +<p class="summary">Pedoman javasript memberi tahu bagaimana menggunakan <a href="/id/docs/Web/JavaScript">JavaScript</a> dan memberikan penjelasan tentang bahasa javascript. Jika anda ingin memulai javascript atau programming secara umum, konsultasikan artikel di <a href="/id/Learn">Area pembelajaran</a>. Jika anda membutuhkan informasi lengkap tentang fitur silakan lihat <a href="/id/docs/Web/JavaScript/Reference">Referensi javaScript</a>.</p> + +<h2 id="Bagian">Bagian</h2> + +<p>Pedoman ini dibagi menjadi beberapa bagian:</p> + +<ul class="card-grid"> + <li><span><a href="/id/docs/Web/JavaScript/Guide/Introduction">Introduction</a></span> + + <p><a href="/id/docs/Web/JavaScript/Guide/Introduction#Where_to_find_JavaScript_information">About this guide</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Introduction#What_is_JavaScript">About JavaScript</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_Java">JavaScript and Java</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_the_ECMAScript_Specification">ECMAScript</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Introduction#Getting_started_with_JavaScript">Tools</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Introduction#Hello_world">Hello World</a></p> + </li> + <li><span><a href="/id/docs/Web/JavaScript/Guide/Grammar_and_types">Grammar and types</a></span> + <p><a href="/id/docs/Web/JavaScript/Guide/Grammar_and_types#Basics">Basic syntax & comments</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Grammar_and_types#Declarations">Declarations</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_scope">Variable scope</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_hoisting">Variable hoisting</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Grammar_and_types#Data_structures_and_types">Data structures and types</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Grammar_and_types#Literals">Literals</a></p> + </li> + <li><span><a href="/id/docs/Web/JavaScript/Guide/Control_flow_and_error_handling">Control flow and error handling</a></span> + <p><code><a href="/id/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#if...else_statement">if...else</a></code><br> + <code><a href="/id/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#switch_statement">switch</a></code><br> + <a href="/id/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Exception_handling_statements"><code>try</code>/<code>catch</code>/<code>throw</code></a><br> + <a href="/id/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Utilizing_Error_objects">Error objects</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Promises">Promises</a></p> + </li> + <li><span><a href="/id/docs/Web/JavaScript/Guide/Loops_and_iteration">Loops and iteration</a></span> + <p><code><a href="/id/docs/Web/JavaScript/Guide/Loops_and_iteration#for_statement">for</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Loops_and_iteration#while_statement">while</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Loops_and_iteration#do...while_statement">do...while</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Loops_and_iteration#break_statement">break</a>/<a href="/id/docs/Web/JavaScript/Guide/Loops_and_iteration#continue_statement">continue</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Loops_and_iteration#for...in_statement">for..in</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement">for..of</a></code></p> + </li> +</ul> + +<ul class="card-grid"> + <li><span><a href="/id/docs/Web/JavaScript/Guide/Functions">Functions</a></span> + + <p><a href="/id/docs/Web/JavaScript/Guide/Functions#Defining_functions">Defining functions</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Functions#Calling_functions">Calling functions</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Functions#Function_scope">Function scope</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Functions#Closures">Closures</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Functions#Using_the_arguments_object">Arguments</a> & <a href="/id/docs/Web/JavaScript/Guide/Functions#Function_parameters">parameters</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Functions#Arrow_functions">Arrow functions</a></p> + </li> + <li><span><a href="/id/docs/Web/JavaScript/Guide/Expressions_and_Operators">Expressions and operators</a></span> + <p><a href="/id/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment_operators">Assignment</a> & <a href="/id/docs/Web/JavaScript/Guide/Expressions_and_Operators#Comparison_operators">Comparisons</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Expressions_and_Operators#Arithmetic_operators">Arithmetic operators</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Expressions_and_Operators#Bitwise_operators">Bitwise</a> & <a href="/id/docs/Web/JavaScript/Guide/Expressions_and_Operators#Logical_operators">logical operators</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Expressions_and_Operators#Conditional_(ternary)_operator">Conditional (ternary) operator</a></p> + </li> + <li><span><a href="/id/docs/Web/JavaScript/Guide/Numbers_and_dates">Numbers and dates</a></span><a href="/id/docs/Web/JavaScript/Guide/Numbers_and_dates#Numbers"> Number literals</a> + <p><a href="/id/docs/Web/JavaScript/Guide/Numbers_and_dates#Number_object"><code>Number</code> object</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Numbers_and_dates#Math_object"><code>Math</code> object</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Numbers_and_dates#Date_object"><code>Date</code> object</a></p> + </li> + <li><span><a href="/id/docs/Web/JavaScript/Guide/Text_formatting">Text formatting</a></span> + <p><a href="/id/docs/Web/JavaScript/Guide/Text_formatting#String_literals">String literals</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Text_formatting#String_objects"><code>String</code> object</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Text_formatting#Multi-line_template_literals">Template literals</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Text_formatting#Internationalization">Internationalization</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Regular_Expressions">Regular Expressions</a></p> + </li> +</ul> + +<ul class="card-grid"> + <li><span><a href="/id/docs/Web/JavaScript/Guide/Indexed_collections">Indexed collections</a></span> + + <p><a href="/id/docs/Web/JavaScript/Guide/Indexed_collections#Array_object">Arrays</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Indexed_collections#Typed_Arrays">Typed arrays</a></p> + </li> + <li><span><a href="/id/docs/Web/JavaScript/Guide/Keyed_collections">Keyed collections</a></span> + <p><code><a href="/id/docs/Web/JavaScript/Guide/Keyed_collections#Map_object">Map</a></code><br> + <code><a href="/id/docs/Web/JavaScript/Guide/Keyed_collections#WeakMap_object">WeakMap</a></code><br> + <code><a href="/id/docs/Web/JavaScript/Guide/Keyed_collections#Set_object">Set</a></code><br> + <code><a href="/id/docs/Web/JavaScript/Guide/Keyed_collections#WeakSet_object">WeakSet</a></code></p> + </li> + <li><span><a href="/id/docs/Web/JavaScript/Guide/Working_with_Objects">Working with objects</a></span> + <p><a href="/id/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties">Objects and properties</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Working_with_Objects#Creating_new_objects">Creating objects</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_methods">Defining methods</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">Getter and setter</a></p> + </li> + <li><span><a href="/id/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Details of the object model</a></span> + <p><a href="/id/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Class-based_vs._prototype-based_languages">Prototype-based OOP</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Creating_the_hierarchy">Creating object hierarchies</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Property_inheritance_revisited">Inheritance</a></p> + </li> +</ul> + +<ul class="card-grid"> + <li><span><a href="/id/docs/Web/JavaScript/Guide/Iterators_and_Generators">Iterators and generators</a></span> + + <p><a href="/id/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterators">Iterators</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterables">Iterables</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generators">Generators</a></p> + </li> + <li><span><a href="/id/docs/Web/JavaScript/Guide/Meta_programming">Meta programming</a></span> + <p><code><a href="/id/docs/Web/JavaScript/Guide/Meta_programming#Proxies">Proxy</a></code><br> + <a href="/id/docs/Web/JavaScript/Guide/Meta_programming#Handlers_and_traps">Handlers and traps</a><br> + <a href="/id/docs/Web/JavaScript/Guide/Meta_programming#Revocable_Proxy">Revocable Proxy</a><br> + <code><a href="/id/docs/Web/JavaScript/Guide/Meta_programming#Reflection">Reflect</a></code></p> + </li> +</ul> + +<p>{{Next("Web/JavaScript/Guide/Introduction")}}</p> diff --git a/files/id/web/javascript/panduan/loops_and_iteration/index.html b/files/id/web/javascript/panduan/loops_and_iteration/index.html new file mode 100644 index 0000000000..7fbb416c43 --- /dev/null +++ b/files/id/web/javascript/panduan/loops_and_iteration/index.html @@ -0,0 +1,330 @@ +--- +title: Loops and iteration +slug: Web/JavaScript/Panduan/Loops_and_iteration +translation_of: Web/JavaScript/Guide/Loops_and_iteration +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</div> + +<p class="summary"><span id="result_box" lang="id"><span>Loop menawarkan cara cepat dan mudah untuk melakukan sesuatu secara berulang-ulang.</span> <span>Bab tentang <a href="/id/docs/Web/JavaScript/Guide">Panduan JavaScript</a> ini memperkenalkan berbagai pernyataan iterasi</span></span><span lang="id"><span> berbeda yang tersedia untuk JavaScript.</span></span></p> + +<p><span id="result_box" lang="id"><span>Anda dapat menganggap <em>loop</em> sebagai versi permainan terkomputerisasi di mana Anda menyuruh seseorang untuk mengambil langkah X menuju satu arah lalu langkah Y ke arah yang lain;</span> <span>Sebagai contoh, gagasan "Pergilah lima langkah ke timur" dapat di ekspresikan dengan cara berikut sebagai sebuah loop (pengulangan):</span></span></p> + +<pre class="brush: js">var langkah; +for (langkah= 0; langkah< 5; langkah++) { + // berlari 5 kali, dengan nilai langkah 0 sampai 4. + console.log('<span class="short_text" id="result_box" lang="id"><span>Berjalan ke timur satu langkah</span></span>'); +} +</pre> + +<p><span id="result_box" lang="id"><span>Ada beberapa jenis loop yang berbeda, namun pada dasarnya semuanya melakukan hal yang sama, mereka mengulangi sebuah aksi beberapa kali (dan sebenarnya memungkinkan bahwa dapat saja menjadi nol).</span> <span>Berbagai mekanisme loop menawarkan berbagai cara untuk menentukan titik awal dan akhir perulangan.</span> <span>Ada berbagai situasi yang lebih mudah dikerjakan oleh sebuah tipe loop dibandingkan tipe (loop) yang lain.</span></span></p> + +<p><span id="result_box" lang="id"><span>Pernyataan untuk loop yang disediakan dalam JavaScript adalah:</span></span></p> + +<ul> + <li>{{anch("for statement")}}</li> + <li>{{anch("do...while statement")}}</li> + <li>{{anch("while statement")}}</li> + <li>{{anch("labeled statement")}}</li> + <li>{{anch("break statement")}}</li> + <li>{{anch("continue statement")}}</li> + <li>{{anch("for...in statement")}}</li> + <li>{{anch("for...of statement")}}</li> +</ul> + +<h2 id="for_statement"><code>for</code> statement</h2> + +<p>Sebuah {{jsxref("statements/for","for loop")}} <span id="result_box" lang="id"><span>mengulang hingga kondisi yang ditentukan evaluasinya menjadi salah/false.</span> <span><code> for</code> loop pada Javascript serupa dengan <code> for </code>loop pada Java dan C</span></span><span lang="id"><span>.</span> <span>Sebuah statement (pernyataan) <code>for </code> terlihat sebagai berikut:</span></span></p> + +<pre class="syntaxbox">for ([initialExpression]; [condition]; +[incrementExpression]) statement +</pre> + +<p>Ketika sebuah <code>for</code> loop dieksekusi, <span class="short_text" id="result_box" lang="id"><span>Berikut ini akan terjadi:</span></span></p> + +<ol> + <li><span class="short_text" id="result_box" lang="id"><span>Ekspresi yang menginisialisasi yaitu</span></span> <code>initialExpression</code>, <span id="result_box" lang="id"><span>Jika ada, maka akan di eksekusi</span>. <span>Ekspresi ini biasanya menginisialisasi satu atau lebih penghitung loop, tetapi sintaksnya memperbolehkan ekspresi dengan tingkat kerumitan apapun.</span> <span>Ekspresi ini juga bisa mendeklarasikan variabel.</span></span></li> + <li>Ekpresi <code>condition</code> di evaluasi. JIka <em>value</em> dari kondisi adalah true (benar), maka statement loop akan dieksekusi. Jika value dari <code>condition</code> false (salah), <code>for</code> loop akan dihentikan. <span id="result_box" lang="id"><span>Jika ekspresi <code>condition </code>dihilangkan sama sekali, kondisinya diasumsikan benar.</span></span></li> + <li>Mengeksekusi <code>Statement</code> . <span id="result_box" lang="id"><span>Untuk mengeksekusi berbagai pernyataan, gunakanlah sebuah blok pernyataan</span></span> (<code>{ ... }</code>) <span class="short_text" id="result_box" lang="id"><span>untuk mengelompokkan pernyataan-pernyataan tersebut</span></span>.</li> + <li>Jika ada, ekspresi baru<code> incrementExpression</code> di eksekusi<span id="result_box" lang="id"><span>.</span></span></li> + <li>Kontrol kembali ke langkah ke-2.</li> +</ol> + +<h3 id="Contoh"><strong>Contoh</strong></h3> + +<p><em>function</em> (fungsi) berikut memuat sebuah statement <code>for</code> yang menghitung angka dari opsi yang terpilih dalam sebuah daftar <em>scrolling</em> (sebuah elemen {{HTMLElement("select")}} yang memperbolehkan berbagai pilihan). Statement<code> for</code> mendeklarasikan variable <code>i</code> dan menginisialisasinya ke nol. Ia memeriksa bahwa<code> i</code> lebih kecil dari nomor dari opsi dalam elemen<code> <select></code> , menampilkan statement <code>if</code> yang berhasil, dan menaikan <code>i</code> satu setelah masing-masing lolos melewati loop.</p> + +<pre class="brush: html"><form name="selectForm"> + <p> + <label for="musicTypes">Choose some music types, then click the button below:</label> + <select id="musicTypes" name="musicTypes" multiple="multiple"> + <option selected="selected">R&B</option> + <option>Jazz</option> + <option>Blues</option> + <option>New Age</option> + <option>Classical</option> + <option>Opera</option> + </select> + </p> + <p><input id="btn" type="button" value="How many are selected?" /></p> +</form> + +<script> +function howMany(selectObject) { + var numberSelected = 0; + for (var i = 0; i < selectObject.options.length; i++) { + if (selectObject.options[i].selected) { + numberSelected++; + } + } + return numberSelected; +} + +var btn = document.getElementById('btn'); +btn.addEventListener('click', function() { + alert('Number of options selected: ' + howMany(document.selectForm.musicTypes)); +}); +</script> + +</pre> + +<h2 id="do...while_statement"><code>do...while</code> statement</h2> + +<p>Pernyataan/statement {{jsxref("statements/do...while", "do...while")}} terus di ulangi sampai evaluasi kondisi bernilai false/salah. Sebuah <code>do...while</code> statement terlihat sebagai berikut:</p> + +<pre class="syntaxbox">do + statement +while (condition); +</pre> + +<p><code>statement</code> di jalankan lebih dulu sebelum kondisi diperiksa. Untuk menjalankan banyak statements, gunakan statement blok (<code>{ ... }</code>) untuk membuat grup dari statement tersebut. Jika <code>condition</code> bernilai benar, maka statement akan dijalankan kembali. Kondisi diperiksa pada setiap akhir eksekusi. Ketika kondisi bernilai salah, eksekusi berhenti dan kontrol akan melewati pernyataan yang mengikuti <code>do...while</code>.</p> + +<h3 id="Contoh_2"><strong>Contoh</strong></h3> + +<p>Dalam contoh berikut, perulangan <code>do</code> di iterasi sekali dan di iterasi kembali sampai i tidak lagi kurang dari 5. </p> + +<pre class="brush: js">var i = 0; +do { + i += 1; + console.log(i); +} while (i < 5);</pre> + +<h2 id="while_statement"><code>while</code> statement</h2> + +<p>Sebuah statement {{jsxref("statements/while","while")}} di eksekusi pernyataan pernyataannya asalkan memenuhi syarat kondisinya yang bernilai true/benar. Sebuah statement <code>while</code> terlihat sebagai berikut:</p> + +<pre class="syntaxbox">while (condition) + statement +</pre> + +<p>Jika kondisi bernilai false/salah, <code>statement</code> dengan perulangan berhenti di eksekusi dan kontrol akan melewati statement yang mengikuti perulangan tersebut.</p> + +<p>Kondisi terjadi sebelum <code>statement</code> dalam perulangan di eksekusi. Jika kondisi bernilai true/benar, <code>statement</code> di eksekusi dan kondisi di uji kembali. Jika kondisi bernilai false/salah, eksekusi akan berhenti dan konrol lewat untuk statement yang mengikuti <code>while</code>.</p> + +<p>Untuk mengeksekusi banyak statement, gunakan blok statement ({ ... }) untuk mengelompokan banyak statement tersebut.</p> + +<h3 id="Contoh_1"><strong>Contoh 1</strong></h3> + +<p>Beikut perulangan <code>while</code> mengiterasi <code>n</code> selama n kurang dari tiga:</p> + +<pre class="brush: js">var n = 0; +var x = 0; +while (n < 3) { + n++; + x += n; +} +</pre> + +<p>Dengan setiap iterasi, perulangan akan menambahkan increments <code>n</code> dan menambahkan nilainya pada <code>x</code>. Karena itu, <code>x</code> dan <code>n</code> mengambil nilai nilai berikut:</p> + +<ul> + <li>Setelah lewat awal: <code>n</code> = 1 dan <code>x</code> = 1</li> + <li>Setelah lewat kedua: <code>n</code> = 2 dan <code>x</code> = 3</li> + <li>Setelah lewat ketiga: <code>n</code> = 3 dan <code>x</code> = 6</li> +</ul> + +<p>Setelah melewati perulangan yang ketiga , kondisinya <code>n < 3</code> tidak lagi bernilai true/benar, jadi perulangan di hentikan.</p> + +<h3 id="Contoh_2_2"><strong>Contoh 2</strong></h3> + +<p>Hindari perulangan tanpa batas. Pastikan kondisi dalam perulangan mendapatkan kondisi yang bernilai false/salah untuk berhenti, jika tidak perulangan tidak akan pernah berhenti. Statements dalam <code>while</code> berikut di eksekusi berulang kali selamanya karena kondisi tidak pernah mendapatkan nilai false/salah:</p> + +<pre class="brush: js">while (true) { + console.log('Hello, world!'); +}</pre> + +<h2 id="labeled_statement"><code>labeled</code> statement</h2> + +<p>Sebuah {{jsxref("statements/label","label")}} menyediakan sebuah statement dengan pengenal yang memungkinkan Anda merujuknya di tempat lain dalam program Kamu. Untuk contohnya, Kamu dapat menggunakan label untuk mengidentifikasi pengulangan, lalu gunakan statement <code>break</code> atau <code>continue</code> untuk menunjukkan apakah suatu program harus memutuskan loop atau melanjutkan eksekusinya.</p> + +<p>Sintak dari statement berlabel terlihat seperti berikut:</p> + +<pre class="syntaxbox">label : + statement +</pre> + +<p>Nilai dai sebuah <code><em>label</em></code> dapat berupa identifikasi JavaScript apa pun yang tidak dari kata kunci yang ada pada javascript. <code><em>statement</em></code><br> + yang Kamu identifikasi dengan label tersebut dapat berupa statement apa pun.</p> + +<h3 id="Contoh_3"><strong>Contoh</strong></h3> + +<p>Pada contoh ini, label <code>markLoop</code> mengidentifikasi sebuah perulangan <code>while</code>.</p> + +<pre class="brush: js">markLoop: +while (theMark == true) { + doSomething(); +}</pre> + +<h2 id="break_statement"><code>break</code> statement</h2> + +<p>Gunakan {{jsxref("statements/break","break")}} statement untuk menghentikan perulangan, <code>switch</code>, atau konjungsi dengan statement yang memakai label.</p> + +<ul> + <li>Ketika kamu menggunakan <code>break</code> tanpa sebuah label, Itu akan langsung mengakhiri lampiran yang ada didalam <code>while</code>, <code>do-while</code>, <code>for</code>, atau <code>switch</code> dengan segera dan kontrol pindah dari statement tersebut.</li> + <li>Ketika kamu menggunakan <code>break</code> pada sebuah label, Itu akan mengakhiri statement dari spesifik label.</li> +</ul> + +<p>Sintak dari statement <code>break</code> terlihat seperti ini:</p> + +<pre class="syntaxbox">break [<em>label</em>]; +</pre> + +<p>Bentuk pertama sintak mengakhiri perulangan atau <code>switch</code>; Bentuk kedua sintak mengakhiri statement dari spesifik label.</p> + +<h3 id="Contoh_1_2"><strong>Contoh</strong> <strong>1</strong></h3> + +<p>Contoh berikut mengiterasi melewati elemen-elemen dalam array sampai menemukan indeks elemen yang bernilai dari <code>theValue</code>:</p> + +<pre class="brush: js">for (var i = 0; i < a.length; i++) { + if (a[i] == theValue) { + break; + } +}</pre> + +<h3 id="Contoh_2_Breaking_pada_sebuah_label"><strong>Contoh 2: </strong>Breaking pada sebuah label</h3> + +<pre class="brush: js">var x = 0; +var z = 0; +labelCancelLoops: while (true) { + console.log('Outer loops: ' + x); + x += 1; + z = 1; + while (true) { + console.log('Inner loops: ' + z); + z += 1; + if (z === 10 && x === 10) { + break labelCancelLoops; + } else if (z === 10) { + break; + } + } +} +</pre> + +<h2 id="continue_statement"><code>continue</code> statement</h2> + +<p>Statement {{jsxref("statements/continue","continue")}} bisa digunakan untuk memulai lagi statement <code>while</code>, <code>do-while</code>, <code>for</code>, atau <code>label</code>.</p> + +<ul> + <li>Ketika kamu menggunakan <code>continue</code> tanpa sebuah label, itu akan menghentikan iterasi saat ini dari statement <code>while</code>, <code>do-while</code>, atau <code>for</code> dan melanjutkan eksekusi dari perulangan iterasi selanjutnya. Berbeda dengan statement <code>break</code>, <code>continue</code> tidak mengakhiri eksekusi dari perulangan sepenuhnya. Pada sebuah perulangan <code>while</code>, dia lompat kembali pada kondisinya. Pada sebuah perulangan <code>for</code>, Dia melompat ke ekpresi penambahan ke <code>increment-expression</code>.</li> + <li>Ketika kamu menggunakan <code>continue</code> dengan sebuah label, itu berlaku untuk pernyataan perulangan yang diidentifikasi dengan label tersebut.</li> +</ul> + +<p>Sintak statement <code>continue</code> terlihat sebagai berikut:</p> + +<pre class="syntaxbox">continue [<em>label</em>]; +</pre> + +<h3 id="Contoh_1_3"><strong>Contoh 1</strong></h3> + +<p>Contoh berikut menunjukkan sebuah perulangan <code>while</code> dengan sebuah statement <code>continue</code> yang di eksekusi ketika niai dari <code>i</code> adalah tiga Jadi, <code>n</code> mengambil nilai satu, tiga, tujuh dan dua belas.</p> + +<pre class="brush: js">var i = 0; +var n = 0; +while (i < 5) { + i++; + if (i == 3) { + continue; + } + n += i; +} +</pre> + +<h3 id="Contoh_2_3"><strong>Contoh 2</strong></h3> + +<p>Sebuah statement yang berlabel <code>checkiandj</code> berisikan sebuah statement berlabel <code>checkj</code>. Jika ada <code>continue</code> , Programnya akan menghentikan iterasi saat ini dari <code>checkj</code> dan memulai iterasi selanjutnya. Setiap kali <code>continue</code> ditemui, <code>checkj</code> di iterasi kembali sampai kondisinya bernilai <code>false</code>/salah. Ketika bernilai <code>false</code>/salah, Sisa dari statement <code>checkiandj</code> sudah selesai, dan <code>checkiandj</code> di iterasi kembali sampai kondisi bernilai salah <code>false</code>. Ketika bernilai salah <code>false</code> , program melanjutkan pada statement yang mengikuti <code>checkiandj</code>.</p> + +<p>JIka <code>continue</code> dipunyai label dari <code>checkiandj</code>, program akan terus berlanjut ke bagian atas dari statement <code>checkiandj</code> .</p> + +<pre class="brush: js">checkiandj: + while (i < 4) { + console.log(i); + i += 1; + checkj: + while (j > 4) { + console.log(j); + j -= 1; + if ((j % 2) == 0) { + continue checkj; + } + console.log(j + ' is odd.'); + } + console.log('i = ' + i); + console.log('j = ' + j); + }</pre> + +<h2 id="for...in_statement"><code>for...in</code> statement</h2> + +<p>Statement {{jsxref("statements/for...in","for...in")}} mengiterasi sebuah variabel spesifik diatas properti enumerable dari sebuah objek. Untuk setiap properti yang berbeda, JavaScript mengeksekusi pernyataan pernyataan yang spesifik. Sebuah statement <code>for...in</code> terlihat sebagai berikut:</p> + +<pre class="syntaxbox">for (variable in object) { + statements +} +</pre> + +<h3 id="Contoh_4"><strong>Contoh</strong></h3> + +<p>Function/fungsi berikut mengambil argumentnya dari sebuah objek dan nama objek. Lalu dia di iterasi diatas semua property objek dan mengembalikan sebuah string yang mendaftarkan nama properti dan nilainya.</p> + +<pre class="brush: js">function dump_props(obj, obj_name) { + var result = ''; + for (var i in obj) { + result += obj_name + '.' + i + ' = ' + obj[i] + '<br>'; + } + result += '<hr>'; + return result; +} +</pre> + +<p>Untuk sebuah objek <code>car</code> dengan property <code>make</code> dan <code>model</code>, <code>result/hasil</code> akan menjadi:</p> + +<pre class="brush: js">car.make = Ford +car.model = Mustang +</pre> + +<h3 id="Arrays"><strong>Arrays</strong></h3> + +<p>Meskipun mungkin menggunakan ini sebagai cara untuk melakukan iterasi di atas elemen {{jsxref("Array")}},statement <strong>for...in</strong> akan mengembalikan nilai nama property yang di tetapkan pengguna dalam penambahan numerik indek. Jadi lebih baik menggunakan tradisional perulangan {{jsxref("statements/for","for")}} dengan sebuah numerik indek ketika mengiterasi diatas array, karena statement <strong>for...in</strong> mengiterasi diatas nama properti yang di tetapkan pengguna pada penambahan elemen array, Jika kamu merubah array, seperti menambahkan properti atau metode. </p> + +<h2 id="for...of_statement"><code>for...of</code> statement</h2> + +<p>Statement {{jsxref("statements/for...of","for...of")}} membuat sebuah iterasi perulangan diatas <a href="/en-US/docs/Web/JavaScript/Guide/iterable">iterable objects</a> (termasuk {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("functions/arguments","arguments")}} object dan seterusnya), menjalankan hubungan iterasi khusus dengan statement yang akan dieksekusi untuk setiap nilai properti yang berbeda.</p> + +<pre class="syntaxbox">for (<em>variable</em> of <em>object</em>) { + <em>statement +</em>}</pre> + +<p>Contoh berikut menampilkan perbedaan diantara sebuah perulangan <code>for...of</code> dan sebuah perulangan {{jsxref("statements/for...in","for...in")}}. Ketika <code>for...in</code> mengiterasi diatas nama-nama properti, <code>for...of</code> mengiterasi diatas nilai-nilai properti:</p> + +<pre class="brush:js">let arr = [3, 5, 7]; +arr.foo = 'hello'; + +for (let i in arr) { + console.log(i); // logs "0", "1", "2", "foo" +} + +for (let i of arr) { + console.log(i); // logs 3, 5, 7 +} +</pre> + +<p>{{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</p> diff --git a/files/id/web/javascript/panduan/numbers_and_dates/index.html b/files/id/web/javascript/panduan/numbers_and_dates/index.html new file mode 100644 index 0000000000..e9681b2adf --- /dev/null +++ b/files/id/web/javascript/panduan/numbers_and_dates/index.html @@ -0,0 +1,376 @@ +--- +title: Numbers and dates +slug: Web/JavaScript/Panduan/Numbers_and_dates +translation_of: Web/JavaScript/Guide/Numbers_and_dates +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Expressions_and_Operators", "Web/JavaScript/Guide/Text_formatting")}}</div> + +<p class="summary">Pada Bab ini memperkenalkan cara menggunakan angka dan tanggal pada JavaScript.</p> + +<h2 id="Angka">Angka</h2> + +<p>Pada JavaScript, semua angka diimplementasikan kedalam <a class="external external-icon" href="https://en.wikipedia.org/wiki/Double-precision_floating-point_format">double-precision 64-bit binary format IEEE 754</a> (mis. angka antara -(2<sup>53</sup> -1) dan 2<sup>53</sup> -1). <strong>Tidak ada jenis spesifik untuk integer</strong>. Selain bisa mewakili angka float, tipe data angka memiliki 3 nilai secara simbolik: <code>+</code>{{jsxref("Infinity")}}, <code>-</code>{{jsxref("Infinity")}}, dan {{jsxref("NaN")}} (bukan sebuah angka). Lihat juga <a href="/en-US/docs/Web/JavaScript/Data_structures">JavaScript tipe data dan struktur</a> untuk konteks dengan tipe data primitif JavaScript yang lain.</p> + +<p>Anda dapat menggunakan empat tipe angka literal: desimal, biner, oktal, dan heksadesimal.</p> + +<h3 id="Angka_Desimal">Angka Desimal</h3> + +<pre class="brush: js">1234567890 +42 + +// Perhatikan ketika menggunakan angka berawalan nol: + +0888 // 888 diubah menjadi desimal +0777 // diubah menjadi oktal pada non-strict mode (511 in decimal) +</pre> + +<p>Perhatikan bahwa desimal literal dapat dimulai dari nol(0) diikuti angka desimal yang lain, namun jika setiap angka setelah 0 lebih kecil dari 8, angkanya diubah menjadi oktal.</p> + +<h3 id="Angka_Biner">Angka Biner</h3> + +<p>Sintaks angka biner menggunakan angka nol diikuti dengan huruf kecil atau dengan huruf besar, huruf Latin "B" (<code>0b</code> atau <code>0B</code>). Jika digit setelah <code>0b</code> atau bukan 0 atau 1, menurut <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></code> yang dilemparkan: "Missing binary digits after 0b".</p> + +<pre class="brush: js">var FLT_SIGNBIT = 0b10000000000000000000000000000000; // 2147483648 +var FLT_EXPONENT = 0b01111111100000000000000000000000; // 2139095040 +var FLT_MANTISSA = 0B00000000011111111111111111111111; // 8388607</pre> + +<h3 id="Angka_oktal">Angka oktal</h3> + +<p>Angka oktal menggunakan awalan angka nol. Jika digit setelah <code>0</code> berada diluar jangkauan 0 hinga 7, angka akan diintrepretasikan sebagai angka desimal.</p> + +<pre class="brush: js">var n = 0755; // 493 +var m = 0644; // 420 +</pre> + +<p>Mode ketat pada ECMAScript 5 melarang sintaks oktal. Oktal sintaks bukan bagian dari ECMAScript 5, namun didukung oleh semua peramban dengan cara awalan nomor oktal dengan angka nol: <code>0644 === 420</code> dan <code>"\045" === "%"</code>. Pada ECMAScript 2015, angka oktal didukung jika diawali dengan <code>0o</code>, e.g.: </p> + +<pre class="brush: js">var a = 0o10; // ES2015: 8 +</pre> + +<h3 id="Angka_Heksadesimal">Angka Heksadesimal</h3> + +<p>Sintaks heksadesimal menggunakan awalan nol diikuti dengan huruf kecil atau huruf kapital Latin "X" (<code>0x</code> atau <code>0X)</code>. Jika digit setelah 0x berada diluar jangkauan (0123456789ABCDEF), menurut <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></code> yang dilemparkan: "Identifier starts immediately after numeric literal".</p> + +<pre class="brush: js">0xFFFFFFFFFFFFFFFFF // 295147905179352830000 +0x123456789ABCDEF // 81985529216486900 +0XA // 10 +</pre> + +<h3 id="Eksponensial">Eksponensial</h3> + +<pre class="brush: js">1E3 // 1000 +2e6 // 2000000 +0.1e2 // 10</pre> + +<h2 id="Angka_object"><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">Angka</span></font> object</h2> + +<p>The built-in {{jsxref("Number")}} objek memiliki properti untuk numerik konstanta, seperti nilai maksimal, bukan-sebuah-angka, dan tak terhingga. Anda tidak dapat mengganti nilai dari properti tersebut dan anda dapat menggunakannya sebagai berikut:</p> + +<pre class="brush: js">var biggestNum = Number.MAX_VALUE; +var smallestNum = Number.MIN_VALUE; +var infiniteNum = Number.POSITIVE_INFINITY; +var negInfiniteNum = Number.NEGATIVE_INFINITY; +var notANum = Number.NaN; +</pre> + +<p>Anda selalu mengacu pada properti dari objek angka yang telah ditentukan seperti yang ditunjukkan diatas, dan bukan sebagai properti objek angka yang anda tentukan.</p> + +<p>Tabel berikut meringkas sifat-sifat nomor object.</p> + +<table class="standard-table"> + <caption>Properties of <code>Number</code></caption> + <thead> + <tr> + <th scope="col">Properti</th> + <th scope="col">Deskripsi</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{jsxref("Number.MAX_VALUE")}}</td> + <td>Merepresantikan angka maksimal / terbesar</td> + </tr> + <tr> + <td>{{jsxref("Number.MIN_VALUE")}}</td> + <td>Merepresantikan angka minimal / terkecil</td> + </tr> + <tr> + <td>{{jsxref("Number.NaN")}}</td> + <td>Nilai spesial "bukan sebuah angka"</td> + </tr> + <tr> + <td>{{jsxref("Number.NEGATIVE_INFINITY")}}</td> + <td>Nilai spesial negatif tak terhingga; dikembalikan pada overflow</td> + </tr> + <tr> + <td>{{jsxref("Number.POSITIVE_INFINITY")}}</td> + <td>Nilai spesial positif tak terhingga; dikembalikan pada overflow</td> + </tr> + <tr> + <td>{{jsxref("Number.EPSILON")}}</td> + <td>Perbedaan antara satu dan nilai terkecil lebih besar dari satu yang dapat direpresentasikan sebagai {{jsxref("Number")}}.</td> + </tr> + <tr> + <td>{{jsxref("Number.MIN_SAFE_INTEGER")}}</td> + <td>Bilangan bulat aman minimum dalam JavaScript.</td> + </tr> + <tr> + <td>{{jsxref("Number.MAX_SAFE_INTEGER")}}</td> + <td>Bilangan bulat aman maksimum dalam JavaScript.</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption>Methods of <code>Number</code></caption> + <thead> + <tr> + <th>Method</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{jsxref("Number.parseFloat()")}}</td> + <td>Parses a string argument and returns a floating point number.<br> + Same as the global {{jsxref("parseFloat", "parseFloat()")}} function.</td> + </tr> + <tr> + <td>{{jsxref("Number.parseInt()")}}</td> + <td>Parses a string argument and returns an integer of the specified radix or base.<br> + Same as the global {{jsxref("parseInt", "parseInt()")}} function.</td> + </tr> + <tr> + <td>{{jsxref("Number.isFinite()")}}</td> + <td>Determines whether the passed value is a finite number.</td> + </tr> + <tr> + <td>{{jsxref("Number.isInteger()")}}</td> + <td>Determines whether the passed value is an integer.</td> + </tr> + <tr> + <td>{{jsxref("Number.isNaN()")}}</td> + <td>Determines whether the passed value is {{jsxref("Global_Objects/NaN", "NaN")}}. More robust version of the original global {{jsxref("Global_Objects/isNaN", "isNaN()")}}.</td> + </tr> + <tr> + <td>{{jsxref("Number.isSafeInteger()")}}</td> + <td>Determines whether the provided value is a number that is a <dfn>safe integer</dfn>.</td> + </tr> + </tbody> +</table> + +<p>Prototipe Angka menyediakan metode-metode untuk menampilkan informasi dari objek angka dalam format bervariasi. Tabel berikut meringkas metode-metode prototipe angka.</p> + +<table class="standard-table"> + <caption>Methods of <code>Number.prototype</code></caption> + <thead> + <tr> + <th scope="col">Method</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{jsxref("Number.toExponential", "toExponential()")}}</td> + <td>Mengembalikan string yang merepresentasikan nomor dalam notasi eksponensial.</td> + </tr> + <tr> + <td>{{jsxref("Number.toFixed", "toFixed()")}}</td> + <td>Mengembalikan string yang merepresentasikan nomor dalam notasi fixed-point.</td> + </tr> + <tr> + <td>{{jsxref("Number.toPrecision", "toPrecision()")}}</td> + <td>Mengembalikan string yang merepresentasikan nomor dalam notasi fixed-point yang lebih spesifik.</td> + </tr> + </tbody> +</table> + +<h2 id="Math_object"><code>Math</code> object</h2> + +<p>The built-in {{jsxref("Math")}} objek memiliki properti dan metode-metode untuk konstanta matematika dan fungsi-fungsi. Sebagai contoh, objek matematik <code>PI</code> properti memiliki nilai (3.141...), yang akan anda gunakan dalam aplikasi sebagai</p> + +<pre class="brush: js">Math.PI +</pre> + +<p>Demikian pula, fungsi standard matematika merupakan metode-metode <code>Math</code>. termasuk trigonometri, logaritma, eksponensial, dan fungsi lainnya. Sebagai contoh, jika anda ingin menggunakan fungsi trigonometri sin, anda akan menulis</p> + +<pre class="brush: js">Math.sin(1.56) +</pre> + +<p>Perhatikan bahwa semua metode trigonometri matematika menggunakan argumen dalam radian.</p> + +<p>Tabel berikut meringkas metode-metode objek matematik.</p> + +<table class="standard-table"> + <caption>Methods of <code>Math</code></caption> + <thead> + <tr> + <th scope="col">Method</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{jsxref("Math.abs", "abs()")}}</td> + <td>Nilai absolut</td> + </tr> + <tr> + <td>{{jsxref("Math.sin", "sin()")}}, {{jsxref("Math.cos", "cos()")}}, {{jsxref("Math.tan", "tan()")}}</td> + <td>Fungsi trigonometri standar; dengan argumen dalam radian.</td> + </tr> + <tr> + <td>{{jsxref("Math.asin", "asin()")}}, {{jsxref("Math.acos", "acos()")}}, {{jsxref("Math.atan", "atan()")}}, {{jsxref("Math.atan2", "atan2()")}}</td> + <td>Fungsi trigonometri terbalik; mengembalikan nilai dalam radian.</td> + </tr> + <tr> + <td>{{jsxref("Math.sinh", "sinh()")}}, {{jsxref("Math.cosh", "cosh()")}}, {{jsxref("Math.tanh", "tanh()")}}</td> + <td>Fungsi hiperbolik. argumen dalam sudut hiperbolik.</td> + </tr> + <tr> + <td>{{jsxref("Math.asinh", "asinh()")}}, {{jsxref("Math.acosh", "acosh()")}}, {{jsxref("Math.atanh", "atanh()")}}</td> + <td>Fungsi hiperbolik terbalik. mengembalikan nilai dalam sudut hiperbolik.</td> + </tr> + <tr> + <td> + <p>{{jsxref("Math.pow", "pow()")}}, {{jsxref("Math.exp", "exp()")}}, {{jsxref("Math.expm1", "expm1()")}}, {{jsxref("Math.log10", "log10()")}}, {{jsxref("Math.log1p", "log1p()")}}, {{jsxref("Math.log2", "log2()")}}</p> + </td> + <td>Fungsi eksponen dan logaritma.</td> + </tr> + <tr> + <td>{{jsxref("Math.floor", "floor()")}}, {{jsxref("Math.ceil", "ceil()")}}</td> + <td>Mengembalikan angka bulat terkecil/terbesar kurang/lebih dari atau sama dengan pada sebuah argumen.</td> + </tr> + <tr> + <td>{{jsxref("Math.min", "min()")}}, {{jsxref("Math.max", "max()")}}</td> + <td>Mengembalikan nilai minimum/maksimum sebuah koma terpisah dari angka sebagai argumen.</td> + </tr> + <tr> + <td>{{jsxref("Math.random", "random()")}}</td> + <td>Megembalikan angka acak antara 0 dan 1.</td> + </tr> + <tr> + <td>{{jsxref("Math.round", "round()")}}, {{jsxref("Math.fround", "fround()")}}, {{jsxref("Math.trunc", "trunc()")}},</td> + <td>Fungsi pembulatan dan pemotongan.</td> + </tr> + <tr> + <td>{{jsxref("Math.sqrt", "sqrt()")}}, {{jsxref("Math.cbrt", "cbrt()")}}, {{jsxref("Math.hypot", "hypot()")}}</td> + <td>Akar kuadrat, akar pangkat tiga, akar kuadrat dari jumlah argumen persegi.</td> + </tr> + <tr> + <td>{{jsxref("Math.sign", "sign()")}}</td> + <td>tanda sebuah angka, mengindikasikan angka apapun merupakan angka positif, negatif, atau nol.</td> + </tr> + <tr> + <td>{{jsxref("Math.clz32", "clz32()")}},<br> + {{jsxref("Math.imul", "imul()")}}</td> + <td>Angka yang dimulai dari nol bit dalam 32-bit.<br> + Hasil dari C-like 32-bit perkalian dari dua argumen.</td> + </tr> + </tbody> +</table> + +<p>Tidak seperti beberapa objek lainnya, anda tidak perlu membuat objek matematika sendiri. anda selalu menggunakan built-in Math object.</p> + +<h2 id="Date_object"><code>Date</code> object</h2> + +<p>JavaScript does not have a date data type. However, you can use the {{jsxref("Date")}} object and its methods to work with dates and times in your applications. The <code>Date</code> object has a large number of methods for setting, getting, and manipulating dates. It does not have any properties.</p> + +<p>JavaScript handles dates similarly to Java. The two languages have many of the same date methods, and both languages store dates as the number of milliseconds since January 1, 1970, 00:00:00, with a Unix Timestamp being the number of seconds since January 1, 1970, 00:00:00.</p> + +<p>The <code>Date</code> object range is -100,000,000 days to 100,000,000 days relative to 01 January, 1970 UTC.</p> + +<p>To create a <code>Date</code> object:</p> + +<pre class="brush: js">var dateObjectName = new Date([parameters]); +</pre> + +<p>where <code>dateObjectName</code> is the name of the <code>Date</code> object being created; it can be a new object or a property of an existing object.</p> + +<p>Calling <code>Date</code> without the <code>new</code> keyword returns a string representing the current date and time.</p> + +<p>The <code>parameters</code> in the preceding syntax can be any of the following:</p> + +<ul> + <li>Nothing: creates today's date and time. For example, <code>today = new Date();</code>.</li> + <li>A string representing a date in the following form: "Month day, year hours:minutes:seconds." For example, <code>var Xmas95 = new Date("December 25, 1995 13:30:00")</code>. If you omit hours, minutes, or seconds, the value will be set to zero.</li> + <li>A set of integer values for year, month, and day. For example, <code>var Xmas95 = new Date(1995, 11, 25)</code>.</li> + <li>A set of integer values for year, month, day, hour, minute, and seconds. For example, <code>var Xmas95 = new Date(1995, 11, 25, 9, 30, 0);</code>.</li> +</ul> + +<h3 id="Methods_of_the_Date_object">Methods of the <code>Date</code> object</h3> + +<p>The <code>Date</code> object methods for handling dates and times fall into these broad categories:</p> + +<ul> + <li>"set" methods, for setting date and time values in <code>Date</code> objects.</li> + <li>"get" methods, for getting date and time values from <code>Date</code> objects.</li> + <li>"to" methods, for returning string values from <code>Date</code> objects.</li> + <li>parse and UTC methods, for parsing <code>Date</code> strings.</li> +</ul> + +<p>With the "get" and "set" methods you can get and set seconds, minutes, hours, day of the month, day of the week, months, and years separately. There is a <code>getDay</code> method that returns the day of the week, but no corresponding <code>setDay</code> method, because the day of the week is set automatically. These methods use integers to represent these values as follows:</p> + +<ul> + <li>Seconds and minutes: 0 to 59</li> + <li>Hours: 0 to 23</li> + <li>Day: 0 (Sunday) to 6 (Saturday)</li> + <li>Date: 1 to 31 (day of the month)</li> + <li>Months: 0 (January) to 11 (December)</li> + <li>Year: years since 1900</li> +</ul> + +<p>For example, suppose you define the following date:</p> + +<pre class="brush: js">var Xmas95 = new Date('December 25, 1995'); +</pre> + +<p>Then <code>Xmas95.getMonth()</code> returns 11, and <code>Xmas95.getFullYear()</code> returns 1995.</p> + +<p>The <code>getTime</code> and <code>setTime</code> methods are useful for comparing dates. The <code>getTime</code> method returns the number of milliseconds since January 1, 1970, 00:00:00 for a <code>Date</code> object.</p> + +<p>For example, the following code displays the number of days left in the current year:</p> + +<pre class="brush: js">var today = new Date(); +var endYear = new Date(1995, 11, 31, 23, 59, 59, 999); // Set day and month +endYear.setFullYear(today.getFullYear()); // Set year to this year +var msPerDay = 24 * 60 * 60 * 1000; // Number of milliseconds per day +var daysLeft = (endYear.getTime() - today.getTime()) / msPerDay; +var daysLeft = Math.round(daysLeft); //returns days left in the year +</pre> + +<p>This example creates a <code>Date</code> object named <code>today</code> that contains today's date. It then creates a <code>Date</code> object named <code>endYear</code> and sets the year to the current year. Then, using the number of milliseconds per day, it computes the number of days between <code>today</code> and <code>endYear</code>, using <code>getTime</code> and rounding to a whole number of days.</p> + +<p>The <code>parse</code> method is useful for assigning values from date strings to existing <code>Date</code> objects. For example, the following code uses <code>parse</code> and <code>setTime</code> to assign a date value to the <code>IPOdate</code> object:</p> + +<pre class="brush: js">var IPOdate = new Date(); +IPOdate.setTime(Date.parse('Aug 9, 1995')); +</pre> + +<h3 id="Example">Example</h3> + +<p>In the following example, the function <code>JSClock()</code> returns the time in the format of a digital clock.</p> + +<pre class="brush: js">function JSClock() { + var time = new Date(); + var hour = time.getHours(); + var minute = time.getMinutes(); + var second = time.getSeconds(); + var temp = '' + ((hour > 12) ? hour - 12 : hour); + if (hour == 0) + temp = '12'; + temp += ((minute < 10) ? ':0' : ':') + minute; + temp += ((second < 10) ? ':0' : ':') + second; + temp += (hour >= 12) ? ' P.M.' : ' A.M.'; + return temp; +} +</pre> + +<p>The <code>JSClock</code> function first creates a new <code>Date</code> object called <code>time</code>; since no arguments are given, time is created with the current date and time. Then calls to the <code>getHours</code>, <code>getMinutes</code>, and <code>getSeconds</code> methods assign the value of the current hour, minute, and second to <code>hour</code>, <code>minute</code>, and <code>second</code>.</p> + +<p>The next four statements build a string value based on the time. The first statement creates a variable <code>temp</code>, assigning it a value using a conditional expression; if <code>hour</code> is greater than 12, (<code>hour - 12</code>), otherwise simply hour, unless hour is 0, in which case it becomes 12.</p> + +<p>The next statement appends a <code>minute</code> value to <code>temp</code>. If the value of <code>minute</code> is less than 10, the conditional expression adds a string with a preceding zero; otherwise it adds a string with a demarcating colon. Then a statement appends a seconds value to <code>temp</code> in the same way.</p> + +<p>Finally, a conditional expression appends "P.M." to <code>temp</code> if <code>hour</code> is 12 or greater; otherwise, it appends "A.M." to <code>temp</code>.</p> + +<p>{{PreviousNext("Web/JavaScript/Guide/Expressions_and_Operators", "Web/JavaScript/Guide/Text_formatting")}}</p> diff --git a/files/id/web/javascript/panduan/pengenalan/index.html b/files/id/web/javascript/panduan/pengenalan/index.html new file mode 100644 index 0000000000..19523a0821 --- /dev/null +++ b/files/id/web/javascript/panduan/pengenalan/index.html @@ -0,0 +1,156 @@ +--- +title: Perkenalan +slug: Web/JavaScript/Panduan/pengenalan +tags: + - 'I10n:priority' + - JavaScript + - Pedoman + - Pemula + - Perkenalan +translation_of: Web/JavaScript/Guide/Introduction +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}</div> + +<p class="summary">Bab ini mengenalkan dan membahas konsep yang mendasar di javascript.</p> + +<h2 id="Apa_yang_perlu_anda_ketahui">Apa yang perlu anda ketahui</h2> + +<p>Pada pedoman ini kami anggap Anda memiliki pengetahuan dasar dari:</p> + +<ul> + <li>Pemahaman umum dari internet dan World Wide Web ({{Glossary("WWW")}}).</li> + <li>Mengetahui dan memahami bahasa markup atau HyperText Markup Language ({{Glossary("HTML")}}).</li> + <li>Memiliki pengalaman programming. Jika Anda baru belajar programming, silakan coba salah satu tutorial yang terdapat di halaman utama tentang <a href="/id/docs/Web/JavaScript">JavaScript</a>.</li> +</ul> + +<h2 id="Tempat_untuk_mencari_informasi_JavaScript">Tempat untuk mencari informasi JavaScript </h2> + +<p>Dokumentasi JavaScript di MDN menyediakan materi sebagai berikut:</p> + +<ul> + <li><a href="/id/Learn">Belajar Pengembangan Web</a> menyajikan informasi untuk pemula serta mengenalkan konsep dasar programming dan internet.</li> + <li><a href="/id/docs/Web/JavaScript/Guide">Panduan JavaScript</a> (pedoman ini) menyajikan gambaran tentang bahasa JavaScript dan objeknya.</li> + <li><a href="/id/docs/Web/JavaScript/Reference">Referensi JavaScript</a> menyajikan material referensi yang detail untuk JavaScript.</li> +</ul> + +<p>Jika Anda baru mengenal JavaScript, mulailah dari <a href="/id/Learn">area belajar</a> dan <a href="/id/docs/Web/JavaScript/Guide">Paduan JavaScript</a>. Ketika Anda sudah mendapatkan pemahaman dasarnya, Anda bisa menggunakan <a href="/id/docs/Web/JavaScript/Reference">Referensi JavaScript </a>untuk melihat lebih detil objek dan statement.</p> + +<h2 id="Apa_itu_JavaScript">Apa itu JavaScript?</h2> + +<p>JavaScript adalah bahasa scripting <em>cross-platform</em> yang berorientasi objek yang digunakan untuk membuat bagian interaktif dari halaman-halaman web (misal: animasi kompleks, tombol yang dapat di-klik, menu pop-up, dll). Terdapat juga versi <em>server-side</em> yang lebih lanjut dari JavaScript seperti Node.Js yang mana dapat memberikan Anda fungsionalitas lebih pada sebuah website (seperti kolaborasi realtime di antara beberapa komputer). Di dalam <em>host environment </em>(contoh, sebuah <em>web browser</em>), JavaScript dapat dihubungkan ke objek-objek dari <em>environment</em> tersebut untuk menyediakan kendali programmatis terhadapnya. </p> + +<p>JavaScript memuat satu library standar yang memuat objek-objek, seperti <code>Array</code>, <code>Date</code>, dan <code>Math</code>, juga set inti dari elemen-elemen bahasa ini seperti operator, struktur kontrol, dan statement. Inti dari JavaScript dapat dikembangkan untuk kegunaan yang beragam dengan cara menambahkan objek-objek tambahan; sebagai contoh:</p> + +<ul> + <li>JavaScript<em> client-side</em> memperluas inti bahasa ini dengan cara menyediakan objek-objek untuk mengontrol browser beserta DOM-nya (Document Object Model). Misal, ekstensi pada sisi klien memungkinkan sebuah aplikasi untuk menambahkan elemen-elemen pada sebuah form HTML dan merespon event dari user seperti klik mouse, input form, dan navigasi laman.</li> + <li>JavaScript<em> server-side</em> memperluas inti bahasa ini dengan cara menyediakan objek-objek yang relevan untuk menjalankan JavaScript pada sebuah server. Misal, extensi <em>server-side</em> memungkinkan aplikasi untuk berkomunikasi dengan database, menyediakan informasi yang berkelanjutan dari satu permintaan ke permintaan yang lain dari suatu aplikasi, atau melakukan manipulasi file di server.</li> +</ul> + +<h2 id="JavaScript_and_Java" name="JavaScript_and_Java">JavaScript dan Java</h2> + +<p>JavaScript dan Java memang memiliki kemiripan pada beberapa hal, namun pada dasarnya saling berbeda. JavaScript menyerupai Java namum tidak memiliki <em>static typing</em> dan <em>strong type checking</em>. JavaScript mengikuti sebagian besar expresi <em>syntax </em>Java, konvensi penamaan serta konstruksi <em>control-flow</em> dasar, yang mana menjadi alasan untuk mengganti namanya dari LiveScript ke JavaScript.</p> + +<p>Berbeda dengan sistem <em>compile-time</em> <em>class</em> Java yang dibangun melalui deklarasi, Javascript mendukung sistem <em>runtime </em>yang berbasis pada sebagian kecil tipe data yang mewakili nilai numerik, Boolean, dan string. Javascript memiliki model objek berbasis prototipe ketimbang model objek berbasis kelas yang lebih umum. Model berbasis prototipe menyediakan <em>inheritance </em>dinamis; yaitu, apa yang diturunkan/diwariskan dapat berbeda pada setiap objek. Javascript juga mendukung fungsi tanpa persyaratan deklaratif khusus. Fungsi bisa berupa properti objek, yang dijalankan sebagai tipe metode yang longgar.</p> + +<p>JavaScript merupakan bahasa dengan bentuk yang sangat bebas dibandingkan dengan Java. Anda tidak perlu mendeklarasikan semua variabel, kelas, dan metode. Anda tidak perlu khawatir apakah metode itu public, private, atau protected, dan Anda juga tidak perlu mengimplementasikan <em>interface</em>. Variabel, parameter, dan tipe kembalian fungsi juga tidak ditulis secara eksplisit.</p> + +<p>Java merupakan bahasa berbasis kelas yang didesain untuk eksekusi yang cepat dan penulisan yang aman. Penulisan yang aman, misalnya, Anda tidak bisa mengubah integer Java menjadi referensi objek atau mengakses private memori dengan membobol <em>bytecode</em>. Model berbasis kelas Java bermaksud bahwa program secara eksklusif terdiri atas sejumlah kelas beserta metode-metodenya. Pewarisan kelas dan penulisan ketat milik Java umumnya membutuhkan hirarki objek yang juga sangat kekat. Syarat-syarat tersebut menjadikan pemrograman Java lebih kompleks ketimbang pemrograman Javascript.</p> + +<p>Sebaliknya, JavaScript mewarisi inti dari baris bahasa yang bertipe dinamis dan lebih sederhana sepeti HyperTalk dan dBASE. Bahasa-bahasa scripting tersebut menawarkan fungsionalitas pemrograman ke pengguna yang lebih luas karena <em>syntax</em>-nya yang lebih mudah, berfokus pada fungsi <em>built-in</em>, dan persyaratan yang minimalis untuk membuat objek.</p> + +<table class="standard-table"> + <caption>JavaScript dibandingkan Java</caption> + <thead> + <tr> + <th scope="col">JavaScript</th> + <th scope="col">Java</th> + </tr> + </thead> + <tbody> + <tr> + <td>Berorientasi objek. Tak ada perbedaan antar tipe objek. <em>Inheritance/ </em>pewarisan melalui mekanisme prototipe, serta properti dan metode bisa ditambahkan kepada objek apapun secara dinamis.</td> + <td>Berbasis kelas. Objek dibagi ke dalam kelas dan instansi dengan semua pewarisan melalui hirarki kelas. Kelas dan instansi tidak dapat memiliki properti atau metode yang ditambahkan secara dinamis.</td> + </tr> + <tr> + <td>Tipe data variabel tidak dideklarasi (<em>dynamic typing</em>, <em>loosely typed</em>).</td> + <td>Tipe data variabel harus dideklarasi (<em>static-typing</em>, <em>strongly typed</em>).</td> + </tr> + <tr> + <td>Tidak bisa menulis ke hard disk secara otomatis.</td> + <td>Bisa menulis ke hard disk secara otomatis.</td> + </tr> + </tbody> +</table> + +<p>Untuk informasi lebih lanjut perbedaan antara JavaScript dan Java, lihat bagian <a href="/id/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Detil dari model objek</a>.</p> + +<h2 id="JavaScript_and_the_ECMAScript_Specification" name="JavaScript_and_the_ECMAScript_Specification">JavaScript dan spesifikasi ECMAScript</h2> + +<p>Javascript distandarisasi melalui <a class="external" href="http://www.ecma-international.org/">Ecma International</a> — asosiasi Eropa yang men-standarisasi sistem informasi dan komunikasi (ECMA merupakan singkatan yang dari <em>European Computer Manufacturers Association</em>) yang mengurusi standarisasi bahasa pemrograman internasional berbasis JavaScript. Versi standarisasi JavaScript ini, yang disebut sebagai ECMAScript, akan berperilaku sama pada setiap aplikasi yang mengikutinya. Perusahaan-perusahaan dapat menggunakan bahasa standar terbuka untuk mengembangkan implementasi JavaScript mereka. Standar ECMAScript didokumentasikan dalam spesifikasi ECMA-262. Kunjungi <a href="/id/docs/Web/JavaScript/New_in_JavaScript">Terbaru di JavaScript</a> untuk mempelajari lebih lanjut tentang berbagai versi dari JavaScript dan spesifikasi edisi ECMAScript.</p> + +<p>Standar ECMA-262 juga disetujui oleh <a class="external" href="http://www.iso.ch/">ISO</a> (International Organization for Standardization) sebagai ISO-16262. Anda juga dapat menemukan spesifikasinya di <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">website Ecma International</a>. Spesifikasi ECMAScript tidak memaparkan Document Object Model yang distandarisasi oleh <a class="external" href="http://www.w3.org/">World Wide Web Consortium (W3C)</a> bersama <a href="https://whatwg.org">WHATWG (Web Hypertext Application Technology Working Group)</a>. DOM mendefinisikan cara dimana dokumen objek HTML diekspos ke script Anda. Untuk mendapatkan pemahaman yang lebih baik tentang berbagai teknologi yang digunakan ketika memrogram menggunakan JavaScript, lihat artikel <a href="/id/docs/Web/JavaScript/JavaScript_technologies_overview">ikhtisar teknologi JavaScript</a>.</p> + +<h3 id="JavaScript_Documentation_versus_the_ECMAScript_Specification" name="JavaScript_Documentation_versus_the_ECMAScript_Specification">Perbandingan dokumentasi JavaScript dengan spesifikasi ECMAScript</h3> + +<p>Spesifikasi ECMAScript adalah seperangkat persyaratan untuk menerapkan ECMAScript; berguna jika Anda ingin menerapkan fitur bahasa yang sesuai standar dalam penerapan atau mesin ECMAScript Anda (seperti SpiderMonkey di Firefox, atau V8 di Chrome).</p> + +<p>Dokumen ECMAScript tidak dimaksudkan untuk membantu <em>script programmer</em>; gunakanlah dokumentasi JavaScript untuk informasi dalam penulisan script.</p> + +<p>Spesifikasi ECMAScript menggunakan terminologi dan <em>syntax </em>yang mungkin asing bagi programmer JavaScript. Meskpun deskripsi dari bahasa tersebut dapat berbeda dengan ECMAScript, bahasanya sendiri tetap sama. JavaScript mendukung semua fungsionalitas yang diuraikan dalam spesifikasi ECMAScript.</p> + +<p>Dokumentasi JavaScript menggambarkan aspek bahasa yang sesuai bagi seorang programmer JavaScript.</p> + +<h2 id="Memulai_Javascript">Memulai Javascript</h2> + +<p>Memulai JavaScript itu mudah: semua yang dibutuhkan hanyalah Web browser modern untuk menjalankannya. Panduan ini mencakup beberapa fitur JavaScript yang hanya tersedia pada versi terakhir Firefox, sehingga disarankan untuk menggunakan Firefox versi terbaru.</p> + +<p>Terdapat dua alat yang dipasang ke dalam Firefox yang berguna dalam bereksperimen dengan JavaScript: Web Console dan Scratchpad.</p> + +<h3 id="Web_Console">Web Console</h3> + +<p><a href="/id/docs/Tools/Web_Console">Web Consol / Konsol Web</a> memperlihatkan kepada Anda tentang informasi laman Web yang sedang di-load saat ini, dan juga mencakup <a href="/id/docs/Tools/Web_Console#The_command_line_interpreter">commandline / baris perintah</a> yang dapat Anda gunakan untuk mengeksekusi ekspresi JavaScript pada laman saat ini.</p> + +<p>Untuk membuka Konsol Web, tekan (Ctrl + Shift + K) pada Windows dan Linux atau tekan (Cmd + Option + K) pada Mac, pilih "<em>Web Console</em>" dari menu "<em>Developer</em>", yang berada di bawah menu "<em>Tools</em>" di Firefox. Konsol akan muncul di bagian bawah jendela browser. Di bagian bawah konsol tersebut adalah command line yang dapat Anda gunakan untuk memasukkan JavaScript, dan outputnya akan muncul pada panel di atasnya.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16569/2019-04-04_00-15-29.png" style="display: block; height: 1824px; margin-left: auto; margin-right: auto; width: 2784px;"> Konsol tersebut bekerja persis seperti eval: expresi terakhir yang dienter akan dikembalikan. Demi kesederhanaan, bisa dibayangkan jika setiap saat sesuatu dimasukkan ke dalam konsol, ia akan selalu dikelilingi oleh console.log sekitar eval seperti ini.</p> + +<pre class="brush: js">function greetMe(yourName) { + alert('Hello ' + yourName); +} +<code>console.log(eval('3 + 5'));</code></pre> + +<p> </p> + +<h3 id="Scratchpad">Scratchpad</h3> + +<p>Konsol Web bagus untuk menjalankan satu baris kode JavaScript, meskipun Anda juga dapat menjalankan banyak baris, tetap saja akan terasa kurang nyaman, dan Anda juga tidak bisa menyimpan sampel kode Anda menggunakan Konsol Web. Jadi untuk contoh yang lebih kompleks, <a href="/id/docs/Tools/Scratchpad">Scratchpad</a> adalah solusinya.</p> + +<p>Untuk membuka Scratchpad tekan (Shift + F4), pilih "<em>Scratchpad</em>" dari menu "<em>Developer</em>", yang ada di bawah menu pada Firefox. Selanjutnya akan muncul di window yang terpisah dan merupakan editor yang dapat Anda gunakan untuk menulis dan menjalankan JavaScript di browser. Anda juga dapat menyimpan dan membuka kode dari disk.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13468/scratchpad.png" style="display: block; height: 375px; margin-left: auto; margin-right: auto; width: 631px;"></p> + +<h3 id="Hello_world">Hello world</h3> + +<p>Untuk mulai menulis JavaScript, buka Scratchpad dan tulislah kode JavaScript "Hello world" pertama Anda:</p> + +<pre class="brush: js">(function(){ + "use strict"; + /* Start of your code */ + function greetMe(yourName) { + alert('Hello ' + yourName); + } + + greetMe('World'); + /* End of your code */ +})(); +</pre> + +<p>Pilih kode diatas dan tekan Ctrl+R untuk melihatnya berjalan di browser Anda! Di laman-laman berikutnya, panduan ini akan memperkenalkan Anda dengan syntax dan fitur-fitur bahasa JavaScript, sehingga Anda dapat menulis aplikasi yang lebih kompleks. Tapi untuk saat ini, ingatlah untuk selalu memasukkan <code>(function(){"use strict";</code> sebelum kode Anda, dan tambahkan <code>})();</code> di akhir kode Anda. Anda akan mempelajari apa artinya itu, tetapi untuk sekarang mereka bisa dianggap melakukan:</p> + +<ol> + <li>Meningkatkan performa secara masif</li> + <li>Mencegah semantik ceroboh dalam JavaScript yang menjatuhkan pemula</li> + <li>Mencegah <em>code snippets</em> yang dieksekusi dalam konsol untuk berinteraksi satu sama lain (misalnya sesuatu yang dibuat dalam suatu eksekusi konsol digunakan untuk eksekusi konsol yang lain).</li> +</ol> + +<p>{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}</p> diff --git a/files/id/web/javascript/panduan/tentang/index.html b/files/id/web/javascript/panduan/tentang/index.html new file mode 100644 index 0000000000..98b5e2c2b0 --- /dev/null +++ b/files/id/web/javascript/panduan/tentang/index.html @@ -0,0 +1,144 @@ +--- +title: Tentang Panduan Ini +slug: Web/JavaScript/Panduan/Tentang +tags: + - JavaScript + - Panduan + - dasar +translation_of: Web/JavaScript/Guide/Introduction +--- +<p>JavaScript adalah bahasa yang cross-platform yaitu berarti JavaScript dapat dijalankan di banyak platform seperti Linux, Windows, Mac OS, Android, Firefox OS dan lain - lain. Panduan ini akan memberikan segala pengetahuan dasar yang perlu anda ketahui dalam penggunaan JavaScript.</p> + +<h2 id="Fitur_baru_pada_versi_JavaScript">Fitur baru pada versi JavaScript</h2> + +<p> </p> + +<ul> + <li><a class="new" href="/id/docs/Web/JavaScript/New_in_JavaScript/1.2" rel="nofollow">/id/docs/Web/JavaScript/New_in_JavaScript/1.2</a></li> + <li><a class="new" href="/id/docs/Web/JavaScript/New_in_JavaScript/1.3" rel="nofollow">/id/docs/Web/JavaScript/New_in_JavaScript/1.3</a></li> + <li><a class="new" href="/id/docs/Web/JavaScript/New_in_JavaScript/1.4" rel="nofollow">/id/docs/Web/JavaScript/New_in_JavaScript/1.4</a></li> + <li><a class="new" href="/id/docs/Web/JavaScript/New_in_JavaScript/1.5" rel="nofollow">/id/docs/Web/JavaScript/New_in_JavaScript/1.5</a></li> + <li><a class="new" href="/id/docs/Web/JavaScript/New_in_JavaScript/1.6" rel="nofollow">/id/docs/Web/JavaScript/New_in_JavaScript/1.6</a></li> + <li><a class="new" href="/id/docs/Web/JavaScript/New_in_JavaScript/1.7" rel="nofollow">/id/docs/Web/JavaScript/New_in_JavaScript/1.7</a></li> + <li><a class="new" href="/id/docs/Web/JavaScript/New_in_JavaScript/1.8" rel="nofollow">/id/docs/Web/JavaScript/New_in_JavaScript/1.8</a></li> + <li><a class="new" href="/id/docs/Web/JavaScript/New_in_JavaScript/1.8.1" rel="nofollow">/id/docs/Web/JavaScript/New_in_JavaScript/1.8.1</a></li> + <li><a class="new" href="/id/docs/Web/JavaScript/New_in_JavaScript/1.8.5" rel="nofollow">/id/docs/Web/JavaScript/New_in_JavaScript/1.8.5</a></li> +</ul> + +<p> </p> + +<h2 id="Apa_yang_perlu_anda_pelajari_terlebih_dahulu">Apa yang perlu anda pelajari terlebih dahulu ?</h2> + +<p>Sebelum mempelajari panduan ini anda harus mempunyai pengetahuan dasar tentang:</p> + +<ul> + <li>Pengetahuan umum tentang internet dan World Wide Web (<a href="http://id.wikipedia.org/wiki/World_Wide_Web">www</a>) yang bisa anda dapatkan di <a href="http://id.wikipedia.org/wiki/Internet">Wikipedia Indonesia</a>.</li> + <li>Pengetahuan yang mantap tentang Hyper Text Markup Language (<a href="/en/HTML" title="en/HTML">HTML</a>) dan cara penggunaannya, bisa anda pelajari di <a href="http://www.w3schools.com/html/default.asp">w3schools</a>.</li> + <li>Pengalaman programming khususnya JavaScript, jika anda benar - benar sedang memulai dari awal cobalah membaca tutorial pada link berikut ini<a href="/en-US/docs/JavaScript" title="/en-US/docs/"> JavaScript</a></li> +</ul> + +<h2 id="JavaScript_versions">JavaScript versions</h2> + +<table class="standard-table"> + <caption>Table 1 JavaScript and Navigator versions</caption> + <thead> + <tr> + <th scope="col">JavaScript version</th> + <th scope="col">Navigator version</th> + </tr> + </thead> + <tbody> + <tr> + <td>JavaScript 1.0</td> + <td>Navigator 2.0</td> + </tr> + <tr> + <td>JavaScript 1.1</td> + <td>Navigator 3.0</td> + </tr> + <tr> + <td>JavaScript 1.2</td> + <td>Navigator 4.0-4.05</td> + </tr> + <tr> + <td>JavaScript 1.3</td> + <td>Navigator 4.06-4.7x</td> + </tr> + <tr> + <td>JavaScript 1.4</td> + <td> </td> + </tr> + <tr> + <td>JavaScript 1.5</td> + <td>Navigator 6.0<br> + Mozilla (open source browser)</td> + </tr> + <tr> + <td>JavaScript 1.6</td> + <td><a href="/en/Firefox_1.5_for_developers" title="en/Firefox_1.5_for_developers">Firefox 1.5</a>, other Mozilla 1.8-based products</td> + </tr> + <tr> + <td>JavaScript 1.7</td> + <td><a href="/en/Firefox_2_for_developers" title="en/Firefox_2_for_developers">Firefox 2</a>, other Mozilla 1.8.1-based products</td> + </tr> + <tr> + <td>JavaScript 1.8</td> + <td><a href="/en/Firefox_3_for_developers" title="en/Firefox_3_for_developers">Firefox 3</a>, other Gecko 1.9-based products</td> + </tr> + </tbody> +</table> + +<h2 id="Dimana_saya_mendapatkan_informasi_tentang_JavaScript">Dimana saya mendapatkan informasi tentang JavaScript ?</h2> + +<p>Dokumentasi JavaScript terdapat pada buku dibawah ini:</p> + +<ul> + <li><a href="/en/JavaScript/Guide" title="en/Core_JavaScript_1.5_Guide">JavaScript Guide</a> (this guide) provides information about JavaScript language and its objects.</li> + <li><a href="/en/JavaScript/Reference" title="en/JavaScript/Reference">JavaScript Reference</a> provides reference material for JavaScript language.</li> +</ul> + +<p>Untuk yang baru belajar bacalah <a href="/en/JavaScript/Guide" title="en/Core_JavaScript_1.5_Guide">JavaScript Guide</a>. Atau anda ingin mendapat pemahaman yang kuat bacalah <a href="/en/JavaScript/Reference" title="en/JavaScript/Reference">JavaScript Reference</a> untuk mendapatkan detail dari masing - masing object dan statements.</p> + +<h2 id="Tips_untuk_belajar_JavaScript">Tips untuk belajar JavaScript</h2> + +<p>Untuk memulai belajar JavaScript sangatlah mudah, anda hanya butuh web browser versi terbaru seperti <a href="https://www.mozilla.org/id/firefox/new/">Mozilla Firefox</a>. Karena di dalam panduan ini terdapat beberapa fitur JavaScript yang hanya bisa dijalankan pada web browser firefox versi terbaru (dan web browser lain yang didukung Gecko), jadi kami menyarankan anda selalu update Mozilla Firefox terbaru.</p> + +<p>Ada dua tool yang tersedia di dalam Firefox dan sangat berguna untuk berEksperimen dengan JavaScript yaitu Web Console dan Scratchpad.</p> + +<h3 id="Web_Console">Web Console</h3> + +<p><a href="/en-US/docs/Tools/Web_Console">Web Console</a> memberikan anda informasi tentang halaman web yang sedang anda buka, dan juga terdapat <a href="/en-US/docs/Tools/Web_Console#The_command_line_interpreter">command line</a> yang membuat anda bisa menjalankan JavaScript expression di web page yang sedang anda buka.</p> + +<p>Untuk menggunakan Web Console, pilih "Web Console" dari menu "Web Developer" yang terdapat di dalam menu "Tools" atau "Peralatan" dalam bahasa indonesia. Web Console akan muncul pada bagian bawah browser dan anda bisa menjalankan Script anda pada Text Input dan hasilnya akan muncul pada box seperti gambar dibawah ini.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7363/web-console-commandline.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h3 id="Scratchpad">Scratchpad</h3> + +<p>Web Console biasa digunakan untuk single lines Script, ketika anda ingin mencoba Script multiple lines kami sarankan menggunakan Scratchpad, karena selain tidak efective juga Web Console tidak bisa menyimpan perubahan yang anda lakukan pada Script, namun Scratchpad melakukan itu dengan sangat baik.</p> + +<p>Untuk menggunakan Scratchpad, pilih "Scratchpad" pada menu "Web Developer" di dalam menu "Tools" atau "Pengaturan" dalam bahasa indonesia. Anda dapat menyimpan dan menload Script dari dari hardisk ataupun flashdisk.</p> + +<p>Ketika anda mengklik tombol "Inspect" maka script anda akan tereksekusi dan hasilnya akan dikembalikan pada Script dalam bentuk komentar.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7365/scratchpad.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h2 id="Document_conventions">Document conventions</h2> + +<p>Applikasi JavaScript berjalan di banyak Operating System (OS) dan informasi pada panduan ini adalah untuk semua versi OS. File dan lokasi Folder pada Unix dan Windows dipisahkan oleh backslashes (/)</p> + +<p>Panduan ini menggunakan uniform resource locators (URLs) of the following form:</p> + +<p><code>http://<em>server</em>.<em>domain</em>/<em>path</em>/<em>file</em>.html</code></p> + +<p>In these URLs, <em>server</em> represents the name of the server on which you run your application, such as <code>research1</code> or <code>www</code>; <em>domain</em> represents your Internet domain name, such as <code>netscape.com</code> or <code>uiuc.edu</code>; <em>path</em> represents the directory structure on the server; and <em>file</em><code>.html</code> represents an individual file name. In general, items in italics in URLs are placeholders and items in normal monospace font are literals. If your server has Secure Sockets Layer (SSL) enabled, you would use <code>https</code> instead of <code>http</code> in the URL.</p> + +<p>This guide uses the following font conventions:</p> + +<ul> + <li><code>The monospace font</code> is used for sample code and code listings, API and language elements (such as method names and property names), file names, path names, directory names, HTML tags, and any text that must be typed on the screen. (<code><em>Monospace italic font</em></code> is used for placeholders embedded in code.)</li> + <li><em>Italic type</em> is used for book titles, emphasis, variables and placeholders, and words used in the literal sense.</li> + <li><strong>Boldface</strong> type is used for glossary terms.</li> +</ul> + +<div> </div> diff --git a/files/id/web/javascript/panduan/values,_variables,_and_literals/index.html b/files/id/web/javascript/panduan/values,_variables,_and_literals/index.html new file mode 100644 index 0000000000..41900a1603 --- /dev/null +++ b/files/id/web/javascript/panduan/values,_variables,_and_literals/index.html @@ -0,0 +1,648 @@ +--- +title: Tata Bahasa dan Tipe +slug: 'Web/JavaScript/Panduan/Values,_variables,_and_literals' +tags: + - JavaScript + - Panduan +translation_of: Web/JavaScript/Guide/Grammar_and_types +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}</div> + +<p class="summary">Pada bagian ini membahas tata bahasa dasar Javascript, deklarasi variabel, tipe data dan literal.</p> + +<h2 id="Dasar"><strong style="font-size: 2.14285714285714rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">Dasar</strong></h2> + +<p>Sebagian besar sintak JavaScript terinspirasi dari Java, namun juga dipengaruhi oleh Awk, Perl dan Python.</p> + +<p><font><font>JavaScript bersifat </font></font><strong><font><font>case-sensitive</font></font></strong><font><font> dan menggunakan </font><font>set karakter </font></font><strong><font><font>Unicode</font></font></strong><font><font>.</font></font></p> + +<p>Dalam JavaScript, instruksi disebut {{Glossary ("Statement", "pernyataan")}} dan dipisahkan oleh titik koma (;). Spasi, tab dan karakter baris baru disebut whitespace.Teks sumber skrip JavaScript dipindai dari kiri ke kanan dan diubah menjadi urutan elemen masukan yang merupakan token, karakter kontrol, terminator baris, komentar atau whitespace. ECMAScript juga mendefinisikan kata kunci dan literal tertentu dan memiliki aturan untuk penyisipan titik koma secara otomatis <a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">(ASI)</a> untuk mengakhiri pernyataan. Namun, dianjurkan untuk selalu menambahkan titik koma untuk mengakhiri pernyataan anda; Itu akan terhindar dari efek samping. Untuk informasi lebih lanjut, lihat referensi rinci tentang <a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference/Lexical_grammar">tata bahasa eksikal</a> JavaScript.</p> + +<h2 id="Komentar"><br> + <strong style="color: #4d4e53; font-size: 2.14286rem; letter-spacing: -1px;">Komentar</strong></h2> + +<p>Sintak komentar pada JavaScript sama dengan C++ dan dalam banyak bahasa pemrograman lainnya:</p> + +<pre><code>// komentar satu baris + +/* Ini lebih panjang + komentar beberapa baris + */ + +/* Anda tidak bisa menggunakannya, /* komentar bersarang */ Sintak bermasalah */</code></pre> + +<h2 id="Deklarasi">Deklarasi</h2> + +<p>Ada tiga macam deklarasi pada JavaScript.</p> + +<dl> + <dt><a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference/Statements/var" title="The variable statement declares a variable, optionally initializing it to a value."><code>var</code></a></dt> + <dd>Mendeklarasikan sebuah variabel, opsional menginisialisasi sebuah nilai.</dd> + <dt><a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference/Statements/let" title="The let statement declares a block scope local variable, optionally initializing it to a value."><code>let</code></a></dt> + <dd>Mendeklarasikan lingkup-blok, variabel lokal, opsional menginisialisasi sebuah nilai.</dd> + <dt><a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference/Statements/const" title="This declaration creates a constant whose scope can be either global or local to the function in which it is declared. An initializer for a constant is required; that is, you must specify its value in the same statement in which it's declared (which makes sense, given that it can't be changed later)."><code>const</code></a></dt> + <dd>Mendeklarasikan sebuah lingkup-blok, baca-saja dinamakan konstanta.</dd> +</dl> + +<h2 id="Variabel"><strong>Variabel</strong></h2> + +<p>Anda menggunakan variabel sebagai nama simbolik dalam aplikasi Anda. Nama variabel, disebut {{Glossary("Identifier", "Pengidentifikasi")}}, sesuai dengan peraturan tertentu.</p> + +<p>Pengindetifikasi pada JavaScript harus dimulai dengan huruf, garis bawah (_), atau tanda dolar ($); Karakter selanjutnya bisa berupa digit (0-9). karena JavaScript sensitif huruf (case-sensitive), Huruf termasuk karakter "A" sampai "Z" (huruf besar) dan huruf "a" sampai "z" (huruf kecil) .</p> + +<p>Anda dapat menggunakan sebagian besar huruf ISO 8859-1 atau Unicode seperti å dan ü dalam pengidentifikasi (untuk lebih jelasnya lihat <a href="https://mathiasbynens.be/notes/javascript-identifiers-es6">postingan blog ini</a>). Anda juga dapat menggunakan urutan <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#String_literals">rangkaian pelolosan/escape Unicode</a> sebagai karakter dalam pengidentifikasi.</p> + +<p><font><font>Beberapa contoh nama legal adalah </font></font><code>Number_hits</code><font><font>, </font></font><code>temp99</code><font><font>, $credit, dan </font></font><code>_name</code><font><font>.</font></font></p> + +<h3 id="Mendeklarasikan_variabel"><font><font>Mendeklarasikan variabel</font></font></h3> + +<p><font><font>Anda bisa mendeklarasikan sebuah variabel dalam tiga cara:</font></font></p> + +<ul> + <li><font><font>Dengan kata kunci </font></font><a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference/Statements/var">var</a>.<font><font> </font><font>Misalnya </font></font><code>var x = 42</code><font><font>,. </font><font>Sintaks ini dapat digunakan untuk mendeklarasikan variabel lokal dan global.</font></font></li> + <li><font><font>Cukup menugaskan sebuah nilai. </font><font>Misalnya </font></font><code>x = 42</code><font><font>. </font><font>Ini selalu mendeklarasikan variabel global, jika dinyatakan di luar fungsi apa pun. </font><font>Ini menghasilkan peringatan JavaScript yang ketat/strict. </font><font>Anda sebaiknya tidak menggunakan varian ini.</font></font></li> + <li><font><font>Dengan kata kunci </font></font><a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference/Statements/let">let</a><font><font>. </font><font>Misalnya </font></font><code>let y = 13</code><font><font>. </font><font>Sintaks ini dapat digunakan untuk mendeklarasikan variabel lokal lingkup-blok. </font><font>Lihat </font></font><font><font><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_scope">Lingkup variabel</a></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_scope"><font><font> </font></font></a><font><font>di bawah ini.</font></font></li> +</ul> + +<h3 id="Mengevaluasi_variabel"><font><font>Mengevaluasi variabel</font></font></h3> + +<p><font><font>Variabel yang dideklarasikan dengan menggunakan pernyataan </font></font><code>var </code>atau<code> let</code> <font><font>tanpa penetapan nilai yang ditentukan memiliki nilai </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a>.</p> + +<p><font><font>Upaya untuk mengakses variabel yang tidak dideklarasikan akan menuju kepada pelemparan eksepsi </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError">ReferenceError</a><font><font>:</font></font></p> + +<pre><code>var a; +console.log('Nilai dari a adalah ' + a); // Nilai dari a adalah undefined + +console.log('Nilai dari b adalah ' + b); // Nilai dari b adalah undefined +var b; + +console.log('Nilai dari c adalah ' + c); // Tidak tertangkap ReferenceError: c tidak di definisikan + +let x; +console.log('Nilai dari x adalah ' + x); // Nilai dari x adalah undefined + +console.log('Nilai dari y adalah ' + y); // Tidak tertangkap ReferenceError: y tidak di definisikan +let y;</code></pre> + +<p><font><font>Anda dapat menggunakan </font></font><code>undefined </code><font><font>untuk menentukan apakah sebuah variabel memiliki nilai. </font><font>Dalam kode berikut, variabel </font></font><code>input </code><font><font>tidak diberi nilai, dan pernyataan </font></font><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if</a> </code><font><font>dievaluasi </font></font><code>true</code><font><font>.</font></font></p> + +<pre><code>var input; +if (input === undefined) { + lakukanIni(); +} else { + lakukanItu(); +}</code></pre> + +<p><font><font>Nilai </font></font><code>undefined </code><font><font>berperilaku sebagai </font></font><code>false </code><font><font>bila digunakan dalam konteks boolean. </font><font>Misalnya, kode berikut menjalankan fungsi <code>fungsiSaya</code></font></font><code> </code><font><font>karena elemen </font></font><code>myArray </code><font><font>undefined:</font></font></p> + +<pre><code>var myArray = []; +if (!myArray[0]) fungsiSaya();</code></pre> + +<p><font><font>Nilai </font></font><code>undefined </code><font><font>mengkonversi ke </font></font><code>NaN </code><font><font>bila digunakan dalam konteks numerik.</font></font></p> + +<pre><code>var a; +a + 2; // Dievaluasi ke NaN</code></pre> + +<p><font><font>Ketika Anda mengevaluasi sebuah variabel </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null">null</a><font><font>, nilai null berperilaku seperti 0 dalam konteks numerik dan sebagai false dalam konteks boolean. </font><font>Sebagai contoh:</font></font></p> + +<pre><code>var n = null; +console.log(n * 32); // Akan log 0 ke konsol</code></pre> + +<h3 id="Lingkup_variabel"><font><font>Lingkup variabel</font></font></h3> + +<p><font><font>Bila Anda mendeklarasikan variabel di luar fungsi apa pun, ini disebut </font><font>variabel </font></font><em><font><font>global</font></font></em><font><font> , karena tersedia pada kode lain dalam dokumen tersebut. </font><font>Ketika Anda mendeklarasikan sebuah variabel dalam suatu fungsi, itu disebut </font><font>variabel </font></font><em><font><font>lokal</font></font></em><font><font> , karena hanya tersedia di dalam fungsi itu.</font></font></p> + +<p><font><font>JavaScript sebelum ECMAScript 2015 tidak memiliki </font><font>lingkup </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Block_statement"><font><font>pernyataan blok</font></font></a><font><font> ; </font><font>Sebaliknya, variabel yang dinyatakan dalam blok bersifat lokal terhadap </font></font><em><font><font>fungsi (atau lingkup global)</font></font></em><font><font> yang berada di blok. </font><font>Misalnya kode berikut akan log </font></font><code>5</code><font><font>, karena ruang lingkupnya </font></font><code>x </code><font><font>adalah fungsi (atau konteks global) yang </font></font><code>x </code><font><font>dideklarasikan, bukan bloknya, yang dalam hal ini adalah sebuah pernyataan </font></font><code>if</code><font><font>.</font></font></p> + +<pre><code>if (true) { + var x = 5; +} +console.log(x); // x is 5</code></pre> + +<p><font><font>Perilaku ini berubah, saat menggunakan deklarasi </font></font><code>let </code><font><font>yang diperkenalkan di ECMAScript 2015.</font></font></p> + +<pre><code>if (true) { + let y = 5; +} +console.log(y); // ReferenceError: y tidak di definisikan</code></pre> + +<h3 id="Hoisting_variabel"><font><font>Hoisting variabel</font></font></h3> + +<p><font><font>Hal lain yang tidak biasa tentang variabel dalam JavaScript adalah Anda bisa merujuk ke variabel yang dideklarasikan nanti, tanpa mendapatkan eksepsi. </font><font>Konsep ini dikenal sebagai </font></font><strong><font><font>hoisting</font></font></strong><font><font>; </font><font>Variabel dalam JavaScript dalam arti "dikibarkan" atau diangkat ke atas fungsi atau pernyataan. </font><font>Bagaimanapun, variabel yang dikibarkan akan memberikan nilai </font></font><code>undefined</code><font><font>. </font><font>Jadi, bahkan jika Anda mendeklarasikan dan menginisialisasi setelah Anda menggunakan atau merujuk ke variabel ini, itu akan tetap memberikan undefined.</font></font></p> + +<pre><code>/** + * Contoh 1 + */ +console.log(x === undefined); // true +var x = 3; + +/** + * Contoh 2 + */ +// Akan memberikan nilai undefined +var myvar = 'my value'; + +(function() { + console.log(myvar); // undefined + var myvar = 'local value'; +})();</code></pre> + +<p><font><font>Contoh di atas akan dinterprestasikan sama dengan:</font></font></p> + +<pre><code>/** + * Contoh 1 + */ +var x; +console.log(x === undefined); // true +x = 3; + +/** + * Example 2 + */ +var myvar = 'my value'; + +(function() { + var myvar; + console.log(myvar); // undefined + myvar = 'nilai lokal'; +})();</code></pre> + +<p><font><font>Karena hoisting, semua pernyataan </font></font><code>var </code><font><font>dalam suatu fungsi harus ditempatkan sedekat mungkin ke atas fungsi. </font><font>Praktik terbaik ini meningkatkan kejelasan kode.</font></font></p> + +<p><font><font>Dalam ECMAScript 2015, variabel </font></font><code>let (const)</code> <strong><font><font>tidak akan hoist </font></font></strong><font><font>ke bagian atas blok. </font><font>Bagaimanapun, referensi variabel di blok sebelum deklarasi variabel menghasilkan sebuah </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError" title="Objek ReferenceError mewakili kesalahan saat variabel yang tidak ada direferensikan."><code>ReferenceError</code></a><font><font>. </font><font>Variabel ini berada dalam "zona mati temporal" dari awal blok sampai deklarasi diproses.</font></font></p> + +<pre><code>console.log(x); // ReferenceError +let x = 3;</code></pre> + +<h3 id="Hoisting_fungsi"><font><font>Hoisting fungsi</font></font></h3> + +<p><font><font>Untuk fungsi, hanya deklarasi fungsi yang diangkat ke atas dan bukan ekspresi fungsi.</font></font></p> + +<pre><code>/* Deklarasi fungsi */ + +foo(); // "bar" + +function foo() { + console.log('bar'); +} + + +/* Ekspresi fungsi */ + +baz(); // TypeError: baz adalah bukan fungsi + +var baz = function() { + console.log('bar2'); +};</code></pre> + +<h3 id="Variabel_global"><font><font>Variabel global</font></font></h3> + +<p><font><font>Variabel global sebenarnya adalah properti dari </font></font><em><font><font>objek global</font></font></em><font><font> . </font><font>Di halaman web objek global itu </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window">window</a><font><font>, sehingga Anda bisa mengatur dan mengakses variabel global dengan menggunakan </font><font>sintaks </font></font><code>window.<em>variable</em></code></p> + +<p><font><font>Akibatnya, Anda dapat mengakses variabel global yang dideklarasikan dalam satu window atau frame dari window atau frame lain dengan menentukan nama window atau frame. </font><font>Misalnya, jika variabel yang disebut </font></font><code>phoneNumber </code><font><font>dinyatakan dalam dokumen, Anda dapat merujuk variabel ini dari iframe as </font></font><code>parent.phoneNumber</code><font><font>.</font></font></p> + +<h3 id="Konstanta"><font><font>Konstanta</font></font></h3> + +<p><font><font>Anda bisa membuat variabel baca-saja, dinamai dengan kata kunci </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const" title="Deklarasi ini menciptakan sebuah konstanta yang ruang lingkupnya bisa bersifat global atau lokal terhadap fungsi di mana ia dideklarasikan. Penginisialisasi untuk konstanta diperlukan; Artinya, Anda harus menentukan nilainya dalam pernyataan yang sama dengan pernyataannya (yang masuk akal, mengingat hal itu tidak dapat diubah nanti)."><code>const</code></a><font><font>. </font><font>Sintaksis dari pengenal konstanta sama dengan pengenal variabel: ia harus dimulai dengan huruf, garis bawah atau tanda dolar ($) dan dapat berisi karakter abjad, numerik, atau garis bawah.</font></font></p> + +<pre><code>const PI = 3.14;</code></pre> + +<p><font><font>Konstanta tidak dapat mengubah nilai melalui penugasan atau dinyatakan ulang saat naskah dijalankan. </font><font>Ini harus diinisialisasi ke sebuah nilai.</font></font></p> + +<p><font><font>Aturan lingkup untuk konstanta sama dengan variabel lingkup-blok </font></font><code>let</code> <font><font>. Jika kata kunci </font></font><code>const </code><font><font>dihilangkan, pengenal dianggap mewakili variabel.</font></font></p> + +<p><font><font>Anda tidak dapat mendeklarasikan konstanta dengan nama yang sama dengan fungsi atau variabel dalam lingkup yang sama. </font><font>Sebagai contoh:</font></font></p> + +<pre><code>// INI AKAN MENYEBABKAN ERROR +function f() {}; +const f = 5; + +// INI AKAN MENYEBABKAN ERROR JUGA +function f() { + const g = 5; + var g; + + //pernyataan +}</code></pre> + +<p><font><font>Namun, properti objek yang ditugaskan pada konstanta tidak terlindungi, jadi pernyataan berikut dijalankan tanpa masalah.</font></font></p> + +<pre><code>const MY_OBJECT = {'key': 'value'}; +MY_OBJECT.key = 'otherValue';</code></pre> + +<h2 id="Struktur_dan_tipe_data"><font><font>Struktur dan tipe data</font></font></h2> + +<h3 id="Tipe_data"><font><font>Tipe data</font></font></h3> + +<p><font><font>Standar ECMAScript terbaru mendefinisikan tujuh tipe data:</font></font></p> + +<ul> + <li><font><font>Enam tipe data yang </font></font>{{Glossary("Primitive", "primitif")}}<font><font> :</font></font> + + <ul> + <li>{{Glossary("Boolean")}}.<font><font> </font></font><code>true </code><font><font>Dan </font></font><code>false</code><font><font>.</font></font></li> + <li>{{Glossary("null")}}.<font><font> </font><font>Kata kunci khusus yang menunjukkan nilai null. </font><font>Karena JavaScript adalah huruf-sensitif/case-sensitive, </font></font><code>null</code><font><font> ini tidak sama dengan </font></font><code>Null</code><font><font>, </font></font><code>NULL</code><font><font>, atau varian lainnya.</font></font></li> + <li>{{Glossary("undefined")}}<font><font>. </font><font>Properti tingkat atas yang nilainya tidak terdefinisi.</font></font></li> + <li>{{Glossary("Number")}}<font><font>. </font></font><code>42 </code><font><font>Atau </font></font><code>3.14159</code><font><font>.</font></font></li> + <li>{{Glossary("String")}}<font><font>. </font><font>"howdy"</font></font></li> + <li>{{Glossary("Symbol")}} <font><font>(baru dalam ECMAScript 2015). </font><font>Tipe data yang halnya unik dan tidak dapat diubah.</font></font></li> + </ul> + </li> + <li><font><font>Dan </font></font>{{Glossary("Object")}}</li> +</ul> + +<p><font><font>Meskipun tipe data ini jumlahnya relatif kecil, namun memungkinkan Anda untuk melakukan fungsi-fungsi yang berguna dengan aplikasi Anda. </font></font> {{jsxref("Object", "Objects")}} dan {{jsxref("Function", "functions")}} <font><font>merupakan unsur fundamental lainnya dalam bahasa ini. </font><font>Anda bisa memikirkan objek sebagai wadah bernama untuk nilai, dan fungsi sebagai prosedur yang dapat dilakukan aplikasi Anda.</font></font></p> + +<h3 id="Konversi_tipe_data"><font><font>Konversi tipe data</font></font></h3> + +<p><font><font>JavaScript adalah bahasa yang diketik secara dinamis. </font><font>Itu berarti Anda tidak perlu menentukan tipe data variabel saat Anda menyatakannya, dan tipe data akan dikonversi secara otomatis sesuai kebutuhan selama eksekusi skrip. </font><font>Jadi, misalnya, Anda bisa mendefinisikan variabel sebagai berikut:</font></font></p> + +<pre><code>var jawaban = 42;</code></pre> + +<p><font><font>Dan nanti, Anda bisa menetapkan variabel yang sama dengan nilai string, misalnya:</font></font></p> + +<pre><code>jawaban = 'Thanks for all the fish...';</code></pre> + +<p><font><font>Karena JavaScript diketik secara dinamis, penugasan ini tidak menyebabkan pesan kesalahan.</font></font></p> + +<p><font><font>Dalam ekspresi yang melibatkan nilai numerik dan string dengan operator +, JavaScript mengubah nilai numerik menjadi string. </font><font>Misalnya, perhatikan pernyataan berikut:</font></font></p> + +<pre><code>x = 'Jawabannya adalah ' + 42 // "Jawabannya adalah 42" +y = 42 + ' Adalah jawabannya' // "42 Adalah jawabannya"</code></pre> + +<p><font><font>Dalam pernyataan yang melibatkan operator lain, JavaScript tidak mengubah nilai numerik menjadi string. </font><font>Sebagai contoh:</font></font></p> + +<pre><code>'37' - 7 // 30 +'37' + 7 // "377"</code></pre> + +<h3 id="Mengubah_string_menjadi_angka"><font><font>Mengubah string menjadi angka</font></font></h3> + +<p><font><font>Dalam kasus yang sebuah nilai mewakili bilangan ada dalam memori sebagai string, ada metode untuk konversi.</font></font></p> + +<ul> + <li id="parseInt()_and_parseFloat()">{{jsxref("parseInt", "parseInt()")}}</li> + <li>{{jsxref("parseFloat", "parseFloat()")}}</li> +</ul> + +<p><code>parseInt </code><font><font>Hanya akan memberikan bilangan bulat, jadi penggunaannya berkurang untuk desimal. </font><font>Selain itu, praktik terbaik untuk </font></font><code>parseInt </code><font><font>selalu menyertakan parameter radix. </font><font>Parameter radix digunakan untuk menentukan sistem numerik yang akan digunakan.</font></font></p> + +<p><font><font>Metode alternatif untuk mengambil nomor dari string adalah dengan operator </font></font><code>+</code><font><font> (unary plus):</font></font></p> + +<pre><code>'1.1' + '1.1' = '1.11.1' +(+'1.1') + (+'1.1') = 2.2 +// Catatan: kurung siku buka tutup ditambahkan untuk kejelasan, tidak diminta.</code></pre> + +<h2 id="Literal"><font><font>Literal</font></font></h2> + +<p><font><font>Anda menggunakan literal untuk mewakili nilai dalam JavaScript. </font><font>Ini adalah nilai tetap, bukan variabel, yang Anda </font><font>berikan </font></font><em><font><font>secara literal </font></font></em><font><font>dalam skrip Anda. </font><font>Bagian ini menjelaskan jenis literal berikut:</font></font></p> + +<ul> + <li>{{anch("Literal array")}}</li> + <li>{{anch("Literal boolean")}}</li> + <li>{{anch("Literal floating-point")}}</li> + <li>{{anch("Literal integer")}}</li> + <li>{{anch("Literal_object")}}</li> + <li>{{anch("Literal RegExp")}}</li> + <li>{{anch("Literal string")}}</li> +</ul> + +<h3 id="Literal_array"><font><font>Literal array</font></font></h3> + +<p><font><font>Sebuah literal array adalah daftar dari nol atau lebih ekspresi, yang masing-masing mewakili elemen array, dilampirkan dalam tanda kurung siku (</font></font><code>[]</code><font><font>). Bila Anda membuat array menggunakan literal array, ini diinisialisasi dengan nilai yang ditentukan sebagai elemennya, dan panjangnya diatur ke jumlah argumen yang ditentukan.</font></font></p> + +<p><font><font>Contoh berikut membuat array </font></font><code>coffees </code><font><font>dengan tiga elemen dan panjang tiga:</font></font></p> + +<pre><code>var coffees = ['French Roast', 'Colombian', 'Kona'];</code></pre> + +<p><strong><font><font>Catatan:</font></font></strong><font><font> Sebuah literal array adalah tipe dari object initializer. Lihat </font></font><a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Guide/Working_with_Objects#Using_object_initializers"><font><font>Menggunakan Penginisialisasi Objek</font></font></a><font><font>.</font></font></p> + +<p><font><font>Jika sebuah array dibuat menggunakan literal dalam skrip tingkat-atas, JavaScript menginterpretasikan array setiap kali mengevaluasi ekspresi yang berisi literal array. </font><font>Selain itu, literal yang digunakan dalam suatu fungsi dibuat setiap kali fungsi dipanggil.</font></font></p> + +<p><font><font>Array literal juga objek Array</font></font><font><font>. </font><font>Lihat </font></font><code><a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference/Global_Objects/Array" title="Objek JavaScript Array adalah objek global yang digunakan dalam konstruksi array; Yang tingkat tinggi, daftar-seperti objek.">Array</a> </code><font><font>dan </font></font><a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Guide/Indexed_collections"><font><font>Koleksi diIndek</font></font></a><font><font> untuk rincian tentang objek </font></font><code>Array</code><font><font>.</font></font></p> + +<h4 id="Ekstra_koma_dalam_literal_array"><font><font>Ekstra koma dalam literal array</font></font></h4> + +<p><font><font>Anda tidak perlu menentukan semua elemen dalam literal array. Jika Anda memasukkan dua koma berturut-turut, array dibuat </font></font><code>undefined </code><font><font>untuk elemen yang tidak ditentukan. Contoh berikut membuat array </font></font><code>fish</code><font><font>:</font></font></p> + +<pre><code>var fish = ['Lion', , 'Angel'];</code></pre> + +<p><font><font>Array ini memiliki dua elemen dengan nilai dan satu elemen kosong (</font></font><code>fish[0]</code><font><font> adalah "Lion", </font></font><code>fish[1]</code><font><font> adalah </font></font><code>undefined</code><font><font>, dan </font></font><code>fish[2]</code><font><font> merupakan "Angel").</font></font></p> + +<p><font><font>Jika Anda menyertakan koma di akhir daftar elemen, koma diabaikan. </font><font>Pada contoh berikut, panjang array adalah tiga. </font><font>Tidak ada </font></font><code>myList[3]</code><font><font>. </font><font>Semua koma lainnya dalam daftar menunjukkan elemen baru.</font></font></p> + +<p><strong><font><font>Catatan:</font></font></strong><font><font> Koma diakhir dapat membuat kesalahan pada versi browser lama dan merupakan praktik terbaik untuk menghapusnya.</font></font></p> + +<pre><code>var myList = ['home', , 'school', ];</code></pre> + +<p><font><font>Dalam contoh berikut, panjang array adalah empat, dan </font></font><code>myList[0]</code><font><font>dan </font></font><code>myList[2]</code><font><font> hilang.</font></font></p> + +<pre><code>var myList = [ ,'home', , 'school'];</code></pre> + +<p><font><font>Dalam contoh berikut, panjang array adalah empat, dan </font></font><code>myList[1]</code><font><font>dan </font></font><code>myList[3] </code><font><font>hilang. </font><font>Hanya koma terakhir yang diabaikan.</font></font></p> + +<pre><code>var myList = ['home', , 'school', , ];</code></pre> + +<p><font><font>Memahami perilaku ekstra koma penting untuk memahami JavaScript sebagai bahasa, namun saat menulis kode Anda sendiri: secara eksplisit menyatakan elemen yang hilang sebagai </font></font><code>undefined </code><font><font>akan meningkatkan kejelasan dan perawatan kode anda.</font></font></p> + +<h3 id="Literal_boolean">L<font><font>iteral boolean</font></font></h3> + +<p><font><font>Tipe Boolean memiliki dua nilai literal: </font></font><code>true </code><font><font>dan </font></font><code>false</code><font><font>.</font></font></p> + +<p><font><font>Jangan membingungkan nilai Boolean primitif </font></font><code>true </code><font><font>dan </font></font><code>false </code><font><font>dengan nilai true dan false objek Boolean. </font><font>Objek Boolean adalah pembungkus di sekitar tipe data Boolean primitif. </font><font>Lihat </font></font>{{jsxref("Boolean")}} untuk <font><font>informasi lebih lanjut.</font></font></p> + +<h3 id="Integer"><font><font>Integer</font></font></h3> + +<p><font><font>Integer dapat dinyatakan dalam desimal (basis 10), heksadesimal (basis 16), oktal (basis 8) dan biner (basis 2).</font></font></p> + +<ul> + <li><font><font>Literal integer desimal terdiri dari urutan digit tanpa 0 (nol) didepan.</font></font></li> + <li><font><font>Memulakan 0 (nol) pada literal integer, atau Memulakan 0o (atau 0O) mengindikasikan itu adalah oktal. Integer Oktal hanya bisa memasukkan angka 0-7.</font></font></li> + <li><font><font>Memulakan 0x (atau 0X) menunjukkan heksadesimal. </font><font>Integer heksadesimal dapat mencakup angka (0-9) dan huruf a-f dan A-F.</font></font></li> + <li> + <p><font><font>Memulakan 0b (atau 0B) menunjukkan biner. Integer </font><font>biner dapat mencakup angka hanya 0 dan 1.</font></font></p> + </li> +</ul> + +<p><font><font>Beberapa contoh literal bilangan bulat adalah:</font></font></p> + +<pre><code>0, 117 and -345 (desimal, basis 10) +015, 0001 and -0o77 (oktal, basis 8) +0x1123, 0x00111 and -0xF1A7 (heksadesimal, "hex" or basis 16) +0b11, 0b0011 and -0b11 (biner, basis 2)</code></pre> + +<p><font><font>Untuk informasi lebih lanjut, lihat </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Numeric_literals"><font><font>literatur numerik dalam referensi tata bahasa leksikal</font></font></a><font><font> .</font></font></p> + +<h3 id="Literal_floating-point"><font><font>Literal floating-point</font></font></h3> + +<p><font><font>Sebuah literal floating-point dapat memiliki bagian berikut:</font></font></p> + +<ul> + <li><font><font>Sebuah integer desimal yang dapat ditandatangani (didahului dengan "+" atau "-"),</font></font></li> + <li><font><font>Titik desimal ("."),</font></font></li> + <li><font><font>Fraksi (bilangan desimal lain),</font></font></li> + <li><font><font>Eksponen</font></font></li> +</ul> + +<p><font><font>Bagian eksponennya adalah "e" atau "E" diikuti oleh bilangan bulat, yang dapat ditandatangani (didahului dengan "+" atau "-"). </font><font>Literal floating-point harus memiliki setidaknya satu digit dan titik desimal atau "e" (atau "E").</font></font></p> + +<p><font><font>Lebih ringkas lagi, sintaksnya adalah:</font></font></p> + +<pre><code>[(+|-)][angka][.angka][(E|e)[(+|-)]angka]</code></pre> + +<p><font><font>Sebagai contoh:</font></font></p> + +<pre><code>3.1415926 +-.123456789 +-3.1E+12 +.1e-23</code></pre> + +<h3 id="Literal_objek"><font><font>Literal objek</font></font></h3> + +<p><font><font>Literal objek adalah daftar dari nol atau lebih pasangan nama properti dan nilai objek yang terkait, yang dilampirkan dalam kurung kurawal (</font></font><code>{}</code><font><font>). </font><font>Anda seharusnya tidak menggunakan literal objek di awal sebuah pernyataan. </font><font>Ini akan menyebabkan kesalahan atau tidak berperilaku seperti yang Anda harapkan, karena { akan ditafsirkan sebagai awal dari sebuah blok.</font></font></p> + +<p><font><font>Berikut ini adalah contoh dari literal objek. Elemen pertama dari objek </font></font><code>car </code><font><font>mendefinisikan sebuah properti </font></font><code>myCar</code><font><font>, dan menetapkan sebuah string baru, " </font></font><code>Saturn</code><font><font>"; Elemen kedua, properti </font></font><code>getCar</code><font><font>, segera diberi hasil pemanggilan function </font></font><code>(carTypes("Honda")); </code><font><font>elemen ketiga, properti </font></font><code>special</code><font><font> menggunakan variabel yang ada ( </font></font><code>sales</code><font><font>).</font></font></p> + +<pre><code>var sales = 'Toyota'; + +function carTypes(name) { + if (name === 'Honda') { + return name; + } else { + return "Maaf, kami tidak menjual " + name + "."; + } +} + +var car = { myCar: 'Saturn', getCar: carTypes('Honda'), special: sales }; + +console.log(car.myCar); // Saturn +console.log(car.getCar); // Honda +console.log(car.special); // Toyota</code></pre> + +<p><font><font>Selain itu, Anda dapat menggunakan literal numerik atau string untuk nama properti atau menyarangkan objek di dalam objek yang lain. Contoh berikut menggunakan opsi ini.</font></font></p> + +<pre><code>var car = { manyCars: {a: 'Saab', 'b': 'Jeep'}, 7: 'Mazda' }; + +console.log(car.manyCars.b); // Jeep +console.log(car[7]); // Mazda</code></pre> + +<p><font><font>Nama properti objek bisa berupa string apapun, termasuk string kosong. </font><font>Jika nama properti akan menjadi </font></font>{{Glossary("Identifier","pengidentifikasi")}}<font><font> JavaScript yang tidak valid atau angka</font><font>, maka harus dilampirkan dalam tanda petik. </font><font>Nama properti yang pengidentifikasi tidak valid juga tidak dapat diakses sebagai properti dot (</font></font><code>.</code><font><font>), namun dapat diakses dan ditetapkan dengan notasi seperti array ("</font></font><code>[]</code><font><font>").</font></font></p> + +<pre><code>var namaPropertiTidakBiasa = { + '': 'An empty string', + '!': 'Bang!' +} +console.log(namaPropertiTidakBiasa.''); // SyntaxError: Unexpected string +console.log(namaPropertiTidakBiasa['']); // An empty string +console.log(namaPropertiTidakBiasa.!); // SyntaxError: Unexpected token ! +console.log(namaPropertiTidakBiasa['!']); // Bang!</code></pre> + +<h4 id="Peningkatan_Literal_Objek">Peningkatan Literal Objek</h4> + +<p><font><font>Di ES2015, literal objek diperluas untuk mendukung pengaturan prototipe pada konstruksi, singkatan untuk </font></font><code>foo: penugasan</code><font><font> </font></font><code>foo</code><font><font> , definisikan metode, pembuatan panggilan super, dan komputasi nama properti dengan ekspresi. Bersamaan dengan itu, ini juga membawa literatur dan deklarasi kelas lebih dekat bersama, dan membiarkan desain berbasis objek mendapatkan keuntungan dari beberapa kemudahan yang sama.</font></font></p> + +<pre><code>var obj = { + // __proto__ + __proto__: theProtoObj, + // Shorthand for ‘handler: penangan’ + handler, + // Metode + toString() { + // Pangilan super + return 'd ' + super.toString(); + }, + // Dikalkulasi (dinamis) nama properti + [ 'prop_' + (() => 42)() ]: 42 +};</code></pre> + +<p><font><font>Tolong dicatat:</font></font></p> + +<pre><code>var foo = {a: 'alpha', 2: 'two'}; +console.log(foo.a); // alpha +console.log(foo[2]); // two +//console.log(foo.2); // Error: missing ) after argument list +//console.log(foo[a]); // Error: a is not defined +console.log(foo['a']); // alpha +console.log(foo['2']); // two</code></pre> + +<h3 id="Literal_RegExp"><font><font>Literal RegExp</font></font></h3> + +<p><font><font>Sebuah literal regex adalah pola yang dilampirkan diantara garis miring. Berikut ini adalah contoh literal regex.</font></font></p> + +<pre><code>var re = /ab+c/;</code></pre> + +<h3 id="Literal_string"><font><font>Literal string</font></font></h3> + +<p><font><font>Literal string adalah nol atau lebih karakter yang dilampirkan dengan tanda kutip ganda (</font></font><code>"</code><font><font>) atau tunggal (</font></font><code>'</code><font><font>). </font><font>String harus dibatasi dengan tanda kutip dari jenis yang sama; </font><font>Yaitu kedua tanda kutip tunggal atau kedua tanda petik ganda. </font><font>Berikut ini adalah contoh literal string:</font></font></p> + +<pre><code>'foo' +"bar" +'1234' +'baris satu \n baris lainnya' +"Kucing jhon"</code></pre> + +<p><font><font>Anda dapat memanggil salah satu metode objek String pada nilai literal string-JavaScript secara otomatis mengubah literal string menjadi objek String sementara, memanggil metode tersebut, lalu membuang objek String sementara. </font><font>Anda juga bisa menggunakan </font></font><font><font>properti </font></font><code>String.length</code><font><font> dengan literal string:</font></font></p> + +<pre><code>console.log("Kucing jhon".length) +// </code><span id="result_box" lang="id"><span>Akan mencetak jumlah simbol dalam string termasuk spasi.</span></span><code> +// Dalam hal ini, 11.</code></pre> + +<p><font><font>Di ES2015, template literal juga tersedia. Template string memberikan sintaksis gula untuk pembuatan string. Ini mirip dengan fitur interpolasi string di Perl, Python dan lainnya. Secara o</font><font>psional, tag dapat ditambahkan untuk memungkinkan konstruksi string disesuaikan, menghindari serangan injeksi atau membangun struktur data tingkat tinggi dari konten string.</font></font></p> + +<pre><code>// Literal dasar kreasi string +`Dalam JavaScript '\n' adalah sebuah line-feed.` + +// String beberapa baris +`</code><span id="result_box" lang="id"><span>Dalam template </span></span><span lang="id"><span>string JavaScript dapat berjalan di + beberapa baris, namun string yang dikutip ganda dan tunggal + tidak dapat dilakukan.</span></span><code>` + +// Interpoasi string +var name = 'Bob', time = 'today'; +`Hello ${name}, how are you ${time}?` + +// </code><span id="result_box" lang="id"><span>Membangun prefix permintaan HTTP digunakan untuk menafsirkan penggantian dan konstruksi</span></span><code> +POST`http://foo.org/bar?a=${a}&b=${b} + Content-Type: application/json + X-Credentials: ${credentials} + { "foo": ${foo}, + "bar": ${bar}}`(myOnReadyStateChangeHandler);</code></pre> + +<p><font><font>Anda harus menggunakan literal string kecuali Anda secara khusus perlu menggunakan objek String. Lihat </font></font>{{jsxref("String")}} <code> </code><font><font>untuk rincian tentang objek </font></font><code>String.</code></p> + +<h4 id="Menggunakan_karakter_khusus_dalam_string"><font><font>Menggunakan karakter khusus dalam string</font></font></h4> + +<p><font><font>Selain karakter biasa, Anda juga bisa menyertakan karakter khusus dalam string, seperti yang ditunjukkan pada contoh berikut.</font></font></p> + +<pre><code>'one line \n another line'</code></pre> + +<p><font><font>Tabel berikut mencantumkan karakter khusus yang dapat Anda gunakan dalam string JavaScript.</font></font></p> + +<table> + <caption><font><font>Tabel: karakter khusus JavaScript</font></font></caption> + <thead> + <tr> + <th scope="col"><font><font>Karakter</font></font></th> + <th scope="col"><font><font>Berarti</font></font></th> + </tr> + </thead> + <tbody> + <tr> + <td><code>\0</code></td> + <td><font><font>Null Byte</font></font></td> + </tr> + <tr> + <td><code>\b</code></td> + <td><font><font>backspase</font></font></td> + </tr> + <tr> + <td><code>\f</code></td> + <td>form feed</td> + </tr> + <tr> + <td><code>\n</code></td> + <td><font><font>Baris baru</font></font></td> + </tr> + <tr> + <td><code>\r</code></td> + <td><font><font>Cariage return</font></font></td> + </tr> + <tr> + <td><code>\t</code></td> + <td><font><font>Tab</font></font></td> + </tr> + <tr> + <td><code>\v</code></td> + <td><font><font>Tab vertikal</font></font></td> + </tr> + <tr> + <td><code>\'</code></td> + <td><font><font>Apostrof atau kutipan tunggal</font></font></td> + </tr> + <tr> + <td><code>\"</code></td> + <td><font><font>Kutipan ganda</font></font></td> + </tr> + <tr> + <td><code>\\</code></td> + <td><font><font>Karakter backslash</font></font></td> + </tr> + <tr> + <td><code>\<em>XXX</em></code></td> + <td><font><font>Karakter dengan pengkodean Latin-1 ditentukan oleh hingga tiga digit oktal </font></font><em><font><font>XXX</font></font></em><font><font> antara 0 dan 377. Misalnya, \251 adalah urutan oktal untuk simbol hak cipta.</font></font></td> + </tr> + <tr> + </tr> + <tr> + <td><code>\x<em>XX</em></code></td> + <td><font><font>Karakter dengan pengkodean Latin-1 yang ditentukan oleh dua digit heksadesimal </font></font><em><font><font>XX</font></font></em><font><font> antara 00 dan FF. </font><font>Misalnya, \xA9 adalah urutan heksadesimal untuk simbol hak cipta.</font></font></td> + </tr> + <tr> + </tr> + <tr> + <td><code>\u<em>XXXX</em></code></td> + <td><font><font>Karakter Unicode ditentukan oleh empat digit heksadesimal </font></font><em><font><font>XXXX</font></font></em><font><font> . </font><font>Misalnya, \u00A9 adalah urutan Unicode untuk simbol hak cipta. </font><font>Lihat </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#String_literals"><font><font>rangkaian pelolosan Unicode</font></font></a><font><font>.</font></font></td> + </tr> + <tr> + <td><code>\u<em>{XXXXX}</em></code></td> + <td><font><font>Kode Unicode lolos. </font><font>Misalnya, \u {2F804} sama dengan Unicode sederhana yang lolos \uD87E \uDC04.</font></font></td> + </tr> + </tbody> +</table> + +<h4 id="Karakter_pelolosan"><font><font>Karakter pelolosan</font></font></h4> + +<p><font><font>Untuk karakter yang tidak tercantum dalam tabel, tanda garis miring terbalik sebelumnya diabaikan, namun penggunaan ini tidak berlaku lagi dan harus dihindari.</font></font></p> + +<p><font><font>Anda dapat memasukkan tanda petik di dalam string sebelum mendahului dengan garis miring terbalik. </font><font>Ini dikenal sebagai </font></font><em><font><font>pelolosan</font></font></em><font><font> dari tanda petik. </font><font>Sebagai contoh:</font></font></p> + +<pre><code>var quote = "He read \"The Cremation of Sam McGee\" by R.W. Service."; +console.log(quote);</code></pre> + +<p><font><font>Hasil dari ini adalah:</font></font></p> + +<pre><code>He read "The Cremation of Sam McGee" by R.W. Service.</code></pre> + +<p><font><font>Untuk menyertakan garis miring terbalik di dalam string, Anda harus melepaskan diri dari karakter garis miring terbalik. </font><font>Misalnya, untuk menetapkan path file </font></font><code>c:\temp</code><font><font> ke string, gunakan yang berikut ini:</font></font></p> + +<pre><code>var home = 'c:\\temp';</code></pre> + +<p><font><font>Anda juga bisa meloloskan dari baris istirahat sebelumnya mendahului mereka dengan garis miring terbalik. </font><font>Garis miring terbalik dan baris istirahat keduanya terlepas dari nilai string.</font></font></p> + +<pre><code>var str = 'this string \ +is broken \ +across multiple \ +lines.' +console.log(str); // this string is broken across multiplelines.</code></pre> + +<p><font><font>Meskipun JavaScript tidak memiliki sintaks "heredoc", Anda bisa mendekat dengan menambahkan pelolosan baris istirahat dan baris istirahat pada akhir setiap baris:</font></font></p> + +<pre><code>var poem = +'Roses are red,\n\ +Violets are blue.\n\ +Sugar is sweet,\n\ +and so is foo.'</code></pre> + +<p><font><font>ECMAScript 2015 memperkenalkan tipe literal baru, yaitu </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/template_strings" rel="noreferrer"><strong><font><font>template literal</font></font></strong></a><font><font> . </font><font>Hal ini memungkinkan banyak fitur baru termasuk string beberapa baris!</font></font></p> + +<p> </p> + +<pre dir="rtl"><code>var poem = +`Roses are red, +Violets are blue. +Sugar is sweet, +and so is foo.`</code></pre> + +<p> </p> + +<h2 id="Informasi_lebih_lanjut"><font><font>Informasi lebih lanjut</font></font></h2> + +<p><font><font>Bab ini berfokus pada sintaks dasar untuk deklarasi dan tipe. </font><font>Untuk mempelajari lebih lanjut tentang konstruksi bahasa JavaScript, lihat juga bab-bab berikut dalam panduan ini:</font></font></p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling"><font><font>Kontrol aliran dan error handling</font></font></a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration"><font><font>Loop dan iterasi</font></font></a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions"><font><font>Fungsi</font></font></a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators"><font><font>Ekspresi dan operator</font></font></a></li> +</ul> + +<p><font><font>Pada bab berikutnya, kita akan melihat konstruksi aliran kontrol dan penanganan kesalahan.</font></font></p> diff --git a/files/id/web/javascript/panduan/working_with_objects/index.html b/files/id/web/javascript/panduan/working_with_objects/index.html new file mode 100644 index 0000000000..4449732e61 --- /dev/null +++ b/files/id/web/javascript/panduan/working_with_objects/index.html @@ -0,0 +1,492 @@ +--- +title: Bekerja dengan objek +slug: Web/JavaScript/Panduan/Working_with_Objects +tags: + - 'I10n:priority' + - JavaScript + - Konstruktor + - Membandingkan objek + - Objek + - Panduan + - Pemula + - dokumen +translation_of: Web/JavaScript/Guide/Working_with_Objects +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}</div> + +<p class="summary">JavaScript dirancang berdasarkan paradigma berbasis objek sederhana. Objek adalah kumpulan dari properti, dan properti adalah sepasang hubungan antara nama (atau kunci) dan nilai. Nilai properti bisa berupa fungsi, Dalam hal ini properti itu disebut metode. Selain objek yang sudah di tentukan pada peramban, Kamu bisa menentukan objekmu sendiri. Bab ini menjelaskan cara memakai objek, properti, fungsi, dan metode, serta bagaimana cara membuat objekmu sendiri.</p> + +<h2 id="Ikhtisar_objek">Ikhtisar objek</h2> + +<p>Objek di JavaScript sama seperti kebanyakan bahasa pemrograman lainnya, bisa dibandingkan dengan objek dalam kehidupan nyata. Konsep objek dalam JavaScript dapat dipahami dengan kehidupan nyata, objek nyata.</p> + +<p>Di JavaScript, objek adalah entitas yang mandiri dengan properti dan tipe. Bandingkan dengan cangkir, misalnya. Sebuah cangkir adalah objek dengan banyak properti. Cangkir punya warna, desain, berat, materi bahan, dll. Dengan cara sama, objek JavaScript juga punya banyak properti yang menjelaskan karakteristiknya.</p> + +<h2 id="Objek_dan_properti">Objek dan properti</h2> + +<p>Objek JavaScript punya banyak properti yang terkait dengannya. Properti dari objek dapat didefinisikan sebagai variabel yang dilampirkan pada objek itu. Properti dari objek pada dasarnya sama dengan variabel JavaScript biasa, kecuali lampiran pada objek. Properti objek menentukan karakteristik objek itu. Kamu mengakses properti objek dengan sebuah notasi titik sederhana:</p> + +<pre class="brush: js">objectName.propertyName +</pre> + +<p>Seperti semua variabel JavaScript, baik nama objek (bisa jadi variabel normal) maupun nama properti peka terhadap besar huruf. Kamu bisa mendefinisi properti dengan mengassign nilai. Contohnya, ayo buat objek bernama <code>myCar</code> dan dan berikan dia properti bernama <code>make</code>, <code>model</code>, dan <code>year</code> sebagai berikut:</p> + +<pre class="brush: js">var <code>myCar </code>= new Object(); +<code>myCar</code>.make = 'Ford'; +<code>myCar</code>.model = 'Mustang'; +<code>myCar</code>.year = 1969; +</pre> + +<p>Nilai properti objek yang tidak diassign adalah {{jsxref("undefined")}} (dan bukan {{jsxref("null")}}).</p> + +<pre class="brush: js">myCar.color; // undefined</pre> + +<p>Properti dari objek JavaScript juga bisa diakses atau diset menggunakan notasi kurung siku (untuk lebih detil lihat <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors">aksesor properti</a>). Terkadang objek disebut <em>associative array</em>, karena tiap properti dikaitkan dengan nilai string yang bisa digunakan untuk mengaksesnya. Jadi, contohnya, kamu bisa mengakses properti dari objek <code>myCar</code> seperti berikut:</p> + +<pre class="brush: js">myCar['make'] = 'Ford'; +myCar['model'] = 'Mustang'; +myCar['year'] = 1969; +</pre> + +<p>Nama properti objek bisa berupa string dari JavaScript yang valid, atau apapun yang dapat diubah menjadi string, termasuk string kosong. Namun, nama properti apapun yang tidak valid sebagai identitas di JavaScript (contohnya, nama properti yang memiliki spasi atau tanda hubung, atau yang dimulai dengan angka) hanya bisa diakses menggunakan notasi kurung siku. Notasi ini juga sangat berguna ketika nama properti harus ditentukan secara dinamis (ketika nama properti belum ditentukan hingga runtime). Contohnya sebagai berikut:</p> + +<pre class="brush: js">// empat variabel dibuat dan diberi nilai sekali jalan, +// dipisahkan oleh koma +var myObj = new Object(), + str = 'myString', + rand = Math.random(), + obj = new Object(); + +myObj.type = 'Syntax titik'; +myObj['date created'] = 'String dengan spasi'; +myObj[str] = 'Nilai string'; +myObj[rand] = 'Angka Random'; +myObj[obj] = 'Objek'; +myObj[''] = 'Bahkan string kosong'; + +console.log(myObj); +</pre> + +<p>Tolong dicatat bahwa semua kunci di dalam notasi kurung siku diubah ke dalam tipe String, karena objek JavaScript hanya bisa punya tipe String sebagai tipe kunci. Contohnya, dalam kode di atas, ketika kunci <code>obj</code> ditambahkan dalam <code>myObj</code>, JavaScript akan memanggil method <code>obj.toString()</code> , dan menggunakan hasil string ini sebagai kunci baru.</p> + +<p>Kamu juga bisa mengakses properti menggunakan nilai string yang disimpan dalam variabel:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> propertyName <span class="operator token">=</span> <span class="string token">'make'</span><span class="punctuation token">;</span> +myCar<span class="punctuation token">[</span>propertyName<span class="punctuation token">]</span> <span class="operator token">=</span> <span class="string token">'Ford'</span><span class="punctuation token">;</span> + +propertyName <span class="operator token">=</span> <span class="string token">'model'</span><span class="punctuation token">;</span> +myCar<span class="punctuation token">[</span>propertyName<span class="punctuation token">]</span> <span class="operator token">=</span> <span class="string token">'Mustang'</span><span class="punctuation token">;</span></code></pre> + +<p>Kamu bisa menggunakan notasi kurung siku dengan <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code> untuk mengiterasi ulang semua kumpulan properti yang terdaftar dari sebuah objek. Untuk mengilustrasikan cara kerjanya, fungsi berikut ini menampilkan properti dari objek ketika kamu memasukkan objek dan nama objek sebagai argumen pada fungsi:</p> + +<pre class="brush: js">function showProps(obj, objName) { + var result = ''; + for (var i in obj) { + // obj.hasOwnProperty() digunakan untuk menyaring properti dari rantai prototipe objek + if (obj.hasOwnProperty(i)) { + result += objName + '.' + i + ' = ' + obj[i] + '\n'; + } + } + return result; +} +</pre> + +<p>Jadi memanggil fungsi <code>showProps(mobilKu, "mobilKu")</code> akan mengembalikan:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">myCar<span class="punctuation token">.</span>make <span class="operator token">=</span> Ford +myCar<span class="punctuation token">.</span>model <span class="operator token">=</span> Mustang +myCar<span class="punctuation token">.</span>year <span class="operator token">=</span> <span class="number token">1969</span></code></pre> + +<h2 id="Mengenumerasi_properti_dari_objek">Mengenumerasi properti dari objek</h2> + +<p>Mulai <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla" title="en-US/docs/JavaScript/ECMAScript 5 support in Mozilla">ECMAScript 5</a>, ada tiga cara asli untuk mendaftarkan/melintasi properti objek:</p> + +<ul> + <li>Perulangan <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in" title="en-US/docs/JavaScript/Reference/Statements/for...in">for...in</a></code><br> + Metode ini melintasi semua kumpulan properti yang terdaftar dari objek dan rantai prototipenya.</li> + <li>{{jsxref("Object.keys", "Object.keys(o)")}}<br> + Metode ini mengembalikan array dengan semua milik (tidak di rantai prototip) nama-nama ("kunci") properti terhitung dari objek <code>o</code>.</li> + <li>{{jsxref("Object.getOwnPropertyNames", "Object.getOwnPropertyNames(o)")}}<br> + Metode ini mengembalikan sebuah array berisikan semua nama-nama properti (kumpulan terhitung atau tidak) dari sebuah objek <code>o</code>.</li> +</ul> + +<p>Sebelum ECMAScript 5, tidak ada cara asli untuk mendaftarkan semua properti-properti dari suatu objek. Namun, ini dapat dicapai dengan fungsi berikut:</p> + +<pre class="brush: js">function listAllProperties(o) { + var objectToInspect; + var result = []; + + for(objectToInspect = o; objectToInspect !== null; objectToInspect = Object.getPrototypeOf(objectToInspect)) { + result = result.concat(Object.getOwnPropertyNames(objectToInspect)); + } + + return result; +} +</pre> + +<p>Ini dapat berguna untuk memperlihatkan properti-properti tersembunyi" (properti-properti dalam rantai prototip yang tidak dapat diakses melalui objek, karena properti lain memiliki nama yang sama di rantai prototip sebelumnya). Mendaftarkan properti-properti yang dapat diakses hanya dapat dilakukan dengan menghapus duplikat di dalam array.</p> + +<h2 id="Membuat_objek_baru">Membuat objek baru</h2> + +<p>JavaScript mempunyai sejumlah objek yang telah ditetapkan. Selain itu, kamu dapat membuat objek sendiri. Kamu bisa membuat sebuah objek menngunakan sebuah <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">object initializer</a>. Sebagai alternatif, kamu bisa membuat sebuah fungsi konstruktor lalu menginstanisasi sebuah pemanggilan objek bersama dengan operator <code>new</code>.</p> + +<h3 id="Menggunakan_object_initializer">Menggunakan object initializer</h3> + +<p>Selain membuat objek menggunakan fungsi konstruktor, kamu bisa membuat objek memakai <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">object initializer</a>. Kadang pemakaian object initializer disamakan dengan pembuatan objek dengan notasi literal. "Object initializer" sama dengan terminologi dalam C++.</p> + +<p>Syntax untuk objek yang menggunakan object initializer ialah:</p> + +<pre class="brush: js">var obj = { property_1: value_1, // property_# bisa berupa identifier... + 2: value_2, // atau angka... + // ..., + 'property n': value_n }; // atau string +</pre> + +<p>Di mana <code>obj</code> adalah nama objek baru, setiap <code>property_<em>i</em></code> adalah identifier (baik nama, angka, atau string literal), dan setiap <code>value_<em>i</em></code> adalah expresi yang nilainya diassign ke <code>property_<em>i</em></code>. <code>obj</code> dan assignment adalah opsional, jika kamu tidak butuh rujukan ke objek ini, kamu tak usah mengassign dia ke variabel. (Ingat bahwa kamu harus membungkus literal objek dalam tanda kurung jika objeknya muncul dalam statement diharapkan, supaya bisa membedakan mana literal dan mana statement blok.)</p> + +<p>Object initializer adalah expresi, dan setiap object initializer mengembalikan objek baru. Objek baru dibuat saat ia muncul dalam statement yang dieksekusi. Object initializer yang identik membuat objek berbeda yang tidak akan sama bila dibandingkan. Objek dibuat seolah-olah ada panggilan <code>new Object()</code>; yaitu, objek yang dibuat dari expresi literal objek adalah instance dari <code>Object</code>.</p> + +<p>Statement berikut membuat objek dan mengassign dia ke variabel <code>x</code> jika dan hanya jika expresi <code>cond</code> benar:</p> + +<pre class="brush: js">if (cond) var x = {greeting: 'hi there'}; +</pre> + +<p>Contoh berikut membuat <code>myHonda</code> dengan tiga properti. Ingat bahwa properti <code>engine</code> juga adalah objek yang punya properti sendiri.</p> + +<pre class="brush: js">var myHonda = {color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}}; +</pre> + +<p>Kamu juga bisa menggunakan object initializer untuk membuat array. Lihat <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Array_literals">literal array</a>.</p> + +<h3 id="Menggunakan_fungsi_konstruktor">Menggunakan fungsi konstruktor</h3> + +<p>Kamu bisa membuat objek dengan dua langkah alternatif ini:</p> + +<ol> + <li>Definisikan tipe objek dengan menulis fungsi konstruktor. Ada konvensi dengan alasan bagus untuk menggunakan huruf kapital inisial.</li> + <li>Membuat instance objek dengan <code>new</code>.</li> +</ol> + +<p>Untuk mendefinisi tipe objek, buat fungsi untuk tipe objek tersebut yang menspesifikasi nama, properti, dan metodenya. Misalnya, kamu ingin membuat tipe objek untuk mobil. Kamu ingin jenis objek ini disebut <code>Car</code>, dan kamu ingin punya properti pembuat, model, dan tahun. Untuk melakukan ini, kamu akan menulis fungsi berikut:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">Car</span><span class="punctuation token">(</span><span class="parameter token">make<span class="punctuation token">,</span> model<span class="punctuation token">,</span> year</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>make <span class="operator token">=</span> make<span class="punctuation token">;</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>model <span class="operator token">=</span> model<span class="punctuation token">;</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>year <span class="operator token">=</span> year<span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<p>Perhatikan penggunaan <code>this</code> untuk mengassign nilai ke properti objek berdasarkan nilai yang diteruskan kepada fungsi.</p> + +<p>Sekarang kamu bisa membuat objek <code>myCar</code> sebagai berikut:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> mycar <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Car</span><span class="punctuation token">(</span><span class="string token">'Eagle'</span><span class="punctuation token">,</span> <span class="string token">'Talon TSi'</span><span class="punctuation token">,</span> <span class="number token">1993</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>Statement ini membuat <code>myCar</code> dan mengassign ia nilai spesifik untuk propertinya. Lalu nilai dari <code>myCar.make</code> ialah string "Eagle", <code>myCar.year</code> ialah integer 1993, dan seterusnya.</p> + +<p>Kamu bisa membuat sejumlah objek <code>Car</code> dengan memanggil <code>new</code>. Sebagai contoh.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> kenscar <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Car</span><span class="punctuation token">(</span><span class="string token">'Nissan'</span><span class="punctuation token">,</span> <span class="string token">'300ZX'</span><span class="punctuation token">,</span> <span class="number token">1992</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> vpgscar <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Car</span><span class="punctuation token">(</span><span class="string token">'Mazda'</span><span class="punctuation token">,</span> <span class="string token">'Miata'</span><span class="punctuation token">,</span> <span class="number token">1990</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>Objek bisa punya properti yang merupakan objek lain. Misalnya, kamu mendefinisi objek <code>person</code> sebagai berikut:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">Person</span><span class="punctuation token">(</span><span class="parameter token">name<span class="punctuation token">,</span> age<span class="punctuation token">,</span> sex</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>name <span class="operator token">=</span> name<span class="punctuation token">;</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>age <span class="operator token">=</span> age<span class="punctuation token">;</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>sex <span class="operator token">=</span> sex<span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<p>dan kemudian menginstantiasi dua objek <code>person</code> baru sebagai berikut:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> rand <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Person</span><span class="punctuation token">(</span><span class="string token">'Rand McKinnon'</span><span class="punctuation token">,</span> <span class="number token">33</span><span class="punctuation token">,</span> <span class="string token">'M'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> ken <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Person</span><span class="punctuation token">(</span><span class="string token">'Ken Jones'</span><span class="punctuation token">,</span> <span class="number token">39</span><span class="punctuation token">,</span> <span class="string token">'M'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>Kemudian, kamu bisa menulis ulang definisi <code>Car</code> untuk memasukkan properti <code>owner</code> yang mengambil objek <code>person</code> sebagai berikut:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">Car</span><span class="punctuation token">(</span><span class="parameter token">make<span class="punctuation token">,</span> model<span class="punctuation token">,</span> year<span class="punctuation token">,</span> owner</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>make <span class="operator token">=</span> make<span class="punctuation token">;</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>model <span class="operator token">=</span> model<span class="punctuation token">;</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>year <span class="operator token">=</span> year<span class="punctuation token">;</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>owner <span class="operator token">=</span> owner<span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<p>Untuk menginstantiasi objek baru, gunakan ini:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> car1 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Car</span><span class="punctuation token">(</span><span class="string token">'Eagle'</span><span class="punctuation token">,</span> <span class="string token">'Talon TSi'</span><span class="punctuation token">,</span> <span class="number token">1993</span><span class="punctuation token">,</span> rand<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> car2 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Car</span><span class="punctuation token">(</span><span class="string token">'Nissan'</span><span class="punctuation token">,</span> <span class="string token">'300ZX'</span><span class="punctuation token">,</span> <span class="number token">1992</span><span class="punctuation token">,</span> ken<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>Perhatikan bahwa ketimbang meneruskan nilai string atau integer literal ketika membuat objek baru, statement diatas meneruskan objek <code>rand</code> dan <code>ken</code> sebagai argumen untuk pemilik. Lalu jika kamu mau mencari nama pemilik car2, kamu bisa mengakses properti berikut:</p> + +<pre class="brush: js">car2.owner.name +</pre> + +<p>Ingat bahwa kamu selalu bisa menambah properti ke objek yang sudah dibuat sebelumnya. Contohnya statement</p> + +<pre class="brush: js">car1.color = 'black'; +</pre> + +<p>menambah properti <code>color</code> pada car1, dan mengassign nilai "black". Ini tak mempengaruhi objek lain. Untuk menambah properti baru ke semua objek dari tipe yang sama, kamu harus menambah properti pada definisi tipe objek <code>Car</code>.</p> + +<h3 id="Menggunakan_metode_Object.create">Menggunakan metode <code>Object.create</code></h3> + +<p>Objek bisa juga dibuat menggunakan metode {{jsxref("Object.create()")}}. Metode ini bisa sangat berguna, karena ia memungkinkan kamu memilih prototipe objek untuk objek yang mau kamu buat, tanpa harus mendefinisi fungsi konstruktor.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="comment token">// Enkapsulasi metode dan properti Animal</span> +<span class="keyword token">var</span> Animal <span class="operator token">=</span> <span class="punctuation token">{</span> + type<span class="punctuation token">:</span> <span class="string token">'Invertebrates'</span><span class="punctuation token">,</span> <span class="comment token">// Nilai properti default</span> + <span class="function function-variable token">displayType</span><span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="comment token">// Method which will display type of Animal</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>type<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span> + +<span class="comment token">// Create new animal type called animal1 </span> +<span class="keyword token">var</span> animal1 <span class="operator token">=</span> Object<span class="punctuation token">.</span><span class="function token">create</span><span class="punctuation token">(</span>Animal<span class="punctuation token">)</span><span class="punctuation token">;</span> +animal1<span class="punctuation token">.</span><span class="function token">displayType</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Output:Invertebrates</span> + +<span class="comment token">// Create new animal type called Fishes</span> +<span class="keyword token">var</span> fish <span class="operator token">=</span> Object<span class="punctuation token">.</span><span class="function token">create</span><span class="punctuation token">(</span>Animal<span class="punctuation token">)</span><span class="punctuation token">;</span> +fish<span class="punctuation token">.</span>type <span class="operator token">=</span> <span class="string token">'Fishes'</span><span class="punctuation token">;</span> +fish<span class="punctuation token">.</span><span class="function token">displayType</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Output:Fishes</span></code></pre> + +<h2 id="Warisan">Warisan</h2> + +<p>Semua objek di javascript diwariskan setidaknya dari satu objek lain. Objek yang diwariskan disebut prototipe, dan properti warisan bisa ditemukan dalam objek <code>prototype</code> dari konstruktor. Lihat <a href="/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Rantai warisan dan prototype</a> untuk informasi lebih lanjut.</p> + +<h2 id="Mengindex_properti_objek">Mengindex properti objek</h2> + +<p>Kamu dapat merujuk ke properti dari objek menggunakan nama propertinya ataupun index urutannya. Jika kamu awalnya mendefinisi properti memakai namanya, kamu harus selalu merujuknya dengan namanya, dan jika kamu awalnya mendefinisikan properti memakai index, kamu harus selalu merujuknya dengan indexnya.</p> + +<p>Pembatasan ini berlaku ketika kamu membuat objek dan propertinya dengan fungsi konstruktor (seperti yang kita lakukan sebelumnya dengan jenis objek <code>Car</code>) dan ketika kamu mendefinisi properti individual secara explisit (misalnya, <code>myCar.color = "ref"</code>). Jika kamu awalnya mendefinisi properti objek dengan index, seperti <code>myCar[5] = "25 mpg"</code>, maka kamu merujuk ke properti tersebut dengan <code>myCar[5]</code>.</p> + +<p>Pengecualian dalam aturan ini adalah objek mirip-array pantulan dari HTML, seperti objek mirip-array <code>forms</code>. Kamu selalu dapat merujuk ke objek dalam objek mirip-array ini menggunakan nomor urutan mereka (berdasarkan di mana mereka muncul dalam dokumen) atau nama mereka (jika didefinisi). Misalnya, jika tag <code><FORM></code> kedua dalam dokumen punya atribut <code>NAME</code> "myForm", kamu dapat merujuk ke form tersebut sebagai <code>document.forms[1]</code> atau <code>document.forms["myForm"]</code> atau <code>document.forms.myForm</code>.</p> + +<h2 id="Mendefinisi_properti_untuk_tipe_objek">Mendefinisi properti untuk tipe objek</h2> + +<p>Kamu dapat menambah properti ke tipe objek yang didefinisi sebelumnya menggunakan properti <code>prototype</code>. Ini mendefinisi properti yang dibagikan semua objek dari tipe yang dispesifikasi, bukan cuma satu instance objek. Kode berikut menambahkan sebuah properti <code>color</code> ke semua objek dari tipe objek <code>Car</code>, dan kemudian mengassign nilai ke properti <code>color</code> dari objek <code>car1</code>.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="class-name token">Car</span><span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>color <span class="operator token">=</span> <span class="keyword token">null</span><span class="punctuation token">;</span> +car1<span class="punctuation token">.</span>color <span class="operator token">=</span> <span class="string token">'black'</span><span class="punctuation token">;</span></code></pre> + +<p>Lihat <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype" title="en-US/docs/JavaScript/Reference/Global Objects/Function/prototype">properti <code>prototipe</code></a> dari objek <code>Function</code> dalam <a href="/en-US/docs/Web/JavaScript/Reference">referensi JavaScript</a> untuk informasi lebih lanjut.</p> + +<h2 id="Mendefiniskan_metode">Mendefiniskan metode</h2> + +<p><em>Metode</em> ialah fungsi yang terasosiasi dengan objek, atau sederhananya, metode ialah properti dari objek berupa fungsi. Metode didefinisi sebagai cara fungsi nornal didefinisi, kecuali mereka harus diassign sebagai properti objek. Lihat juga <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">definisi metode</a> untuk lebih detil. Contohnya:</p> + +<pre class="brush: js">objectName.methodname = functionName; + +var myObj = { + myMethod: function(params) { + // ...do something + } + + // OR THIS WORKS TOO + + myOtherMethod(params) { + // ...do something else + } +}; +</pre> + +<p>Di mana <code>objectName</code> adalah metode yang sudah ada, <code>methodname</code> ialah nama yang kamu assign ke metode, dan <code>functionName</code> adalah nama fungsi.</p> + +<p>Lalu kamu bisa memanggil metode dalam kontex objek sebagai berikut:</p> + +<pre class="brush: js">object.methodname(params); +</pre> + +<p>Kamu bisa mendefinisi metode untuk tipe objek dengan memasukkan sebuah definisi metode dalam fungsi konstruktor objek. Kamu bisa mendefinisi fungsi yang akan memformat dan menampilkan properti objek <code>Car</code> sebelumnya; contohnya,</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">displayCar</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> result <span class="operator token">=</span> <span class="template-string token"><span class="string token">`A Beautiful </span><span class="interpolation token"><span class="interpolation-punctuation punctuation token">${</span><span class="keyword token">this</span><span class="punctuation token">.</span>year<span class="interpolation-punctuation punctuation token">}</span></span><span class="string token"> </span><span class="interpolation token"><span class="interpolation-punctuation punctuation token">${</span><span class="keyword token">this</span><span class="punctuation token">.</span>make<span class="interpolation-punctuation punctuation token">}</span></span><span class="string token"> </span><span class="interpolation token"><span class="interpolation-punctuation punctuation token">${</span><span class="keyword token">this</span><span class="punctuation token">.</span>model<span class="interpolation-punctuation punctuation token">}</span></span><span class="string token">`</span></span><span class="punctuation token">;</span> + <span class="function token">pretty_print</span><span class="punctuation token">(</span>result<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<p>Di mana <code>pretty_print</code> adalah fungsi untuk menampilkan garis horizontal dan string. Perhatikan penggunaan <code>this</code> untuk merujuk ke objek yang punya metode tersebut.</p> + +<p>Kamu bisa menjadikan fungsi ini metode <code>Car</code> dengan menambah statement</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">this</span><span class="punctuation token">.</span>displayCar <span class="operator token">=</span> displayCar<span class="punctuation token">;</span></code></pre> + +<p>ke definisi objek. Jadi definisi penuh dari <code>Car</code> sekarang akan terlihat seperti</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">Car</span><span class="punctuation token">(</span><span class="parameter token">make<span class="punctuation token">,</span> model<span class="punctuation token">,</span> year<span class="punctuation token">,</span> owner</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>make <span class="operator token">=</span> make<span class="punctuation token">;</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>model <span class="operator token">=</span> model<span class="punctuation token">;</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>year <span class="operator token">=</span> year<span class="punctuation token">;</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>owner <span class="operator token">=</span> owner<span class="punctuation token">;</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>displayCar <span class="operator token">=</span> displayCar<span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<p>Maka kamu bisa memanggil metode <code>displayCar</code> untuk masing-masig objek sebagai berikut:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">car1<span class="punctuation token">.</span><span class="function token">displayCar</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +car2<span class="punctuation token">.</span><span class="function token">displayCar</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<h2 id="Menggunakan_this_untuk_referensi_Objek">Menggunakan <code>this</code> untuk referensi Objek</h2> + +<p>JavaScript punya katakunci spesial <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code>, kamu bisa memakainya dalam metode untuk merujuk ke objek saat ini. Misalnya, kamu punya fungsi yang disebut <code>validate</code> yang memvalidasi properti <code>value</code>, yang diberikan objek dan nilai atas dan bawah:</p> + +<pre class="brush: js">function validate(obj, lowval, hival) { + if ((obj.value < lowval) || (obj.value > hival)) { + alert('Invalid Value!'); + } +} +</pre> + +<p>Kemudian kamu bisa panggil <code>validate</code> di penangan event <code>onchange</code> setiap elemen form, gunakan <code>this</code> untuk meneruskan elemen. Seperti contoh berikut:</p> + +<pre class="brush: html"><input type="text" name="age" size="3" + onChange="validate(this, 18, 99)"> +</pre> + +<p>Secara umum, <code>this</code> merujuk ke pemanggilan objek dalam metode.</p> + +<p>Ketika dikombinasikan dengan properti <code>form</code>, <code>this</code> bisa mengacu ke induk objek form saat ini. Dalam contoh berikut, form <code>myForm</code> berisi objek <code>Text</code> dan sebuah tombol. Ketika pengguna mengklik tombol, nilai objek <code>Text</code> diset ke nama form tersebut. Penangan event <code>onclick</code> tombol menggunakan <code>this.form</code> untuk merujuk ke induk form, <code>myForm</code>.</p> + +<pre class="brush: html"><form name="myForm"> +<p><label>Form name:<input type="text" name="text1" value="Beluga"></label> +<p><input name="button1" type="button" value="Show Form Name" + onclick="this.form.text1.value = this.form.name"> +</p> +</form></pre> + +<h2 id="Mendefinisikan_getter_dan_setter">Mendefinisikan getter dan setter</h2> + +<p><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">Getter</a> ialah metode yang mendapat nilai dari properti spesifik. <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">Setter</a> ialah metode yang mengatur nilai properti spesifik. Kamu bisa mendefinisi getter dan setter objek inti apapun yang sudah ditetapkan atau objek yang ditetapkan pengguna yang mendukung penambahan peroperti-properti baru. Syntax untuk mendefinisi getter dan setter menggunakan syntax literal objek.</p> + +<p>Berikut ilustrasi cara getter dan setter bisa bekerja untuk objek <code>o</code> yang sudah didefinisi user.</p> + +<pre class="brush: js">var o = { + a: 7, + get b() { + return this.a + 1; + }, + set c(x) { + this.a = x / 2; + } +}; + +console.log(o.a); // 7 +console.log(o.b); // 8 +o.c = 50; +console.log(o.a); // 25 +</pre> + +<p>Properti objek <code>o</code> adalah:</p> + +<ul> + <li><code>o.a</code> — angka</li> + <li><code>o.b</code> — getter yang mengembalikan <code>o.a</code> tambah 1</li> + <li><code>o.c</code> — setter yang mengeset nilai <code>o.a</code> setengah dari nilai <code>o.c</code> yang diset.</li> +</ul> + +<p>Harap diingat bahwa nama fungsi dari getter dan setter yang didefisini dalam literal objek menggunakan "[gs]et <em>property</em>()" (dibandingkan dengan <code>__define[GS]etter__</code> ) bukanlah nama getter mereka sendiri, meski syntax <code>[gs]et <em>propertyName</em>(){ }</code> membuatmu berpikir lain. Untuk menamai fungsi dalam getter atau setter menggunakan syntax "[gs]et <em>property</em>()", definiskan fungsi, dengan nama explisit, secara terprogram menggunakan <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty" title="en-US/docs/Core JavaScript 1.5 Reference/Global +Objects/Object/defineProperty">Object.defineProperty</a></code> (atau pengganti legacy <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineGetter" title="en-US/docs/Core JavaScript 1.5 Reference/Global +Objects/Object/defineGetter">Object.prototype.__defineGetter__</a></code>).</p> + +<p>Kode berikut mengilustrasikan cara getter dan setter bisa memperluas prototipe {{jsxref("Date")}} untuk menambah properti <code>year</code> ke semua instance dari kelas <code>Date</code> yang sudah didefinisi. Ia menggunakan metode kelas <code>Date</code> yang sudah ada, <code>getFullYear</code> dan <code>setFullYear</code> untuk mendukung properti getter dan setter <code>year</code>.</p> + +<p>Statement ini mendefinisi getter dan setter untuk properti tahun:</p> + +<pre class="brush: js">var d = Date.prototype; +Object.defineProperty(d, 'year', { + get: function() { return this.getFullYear(); }, + set: function(y) { this.setFullYear(y); } +}); +</pre> + +<p>Statement ini menggunakan getter dan setter dalam objek <code>Date</code>:</p> + +<pre class="brush: js">var now = new Date(); +console.log(now.year); // 2000 +now.year = 2001; // 987617605170 +console.log(now); +// Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001 +</pre> + +<p>Secara pinsip, getter dan setter bisa</p> + +<ul> + <li>didefinisi menggunakan <a href="#Object_initializers">object initializers</a>, atau</li> + <li>ditambahkan kemudian ke objek apapun kapanpun menggunakan metode penambahan getter atau setter.</li> +</ul> + +<p>Ketika mendefiniisi getter dan setter menggunakan <a href="#Object_initializers">object initializer</a> yang harus kamu lakukan adalah memprefix metode getter dengan <code>get</code> dan metode setter dengan <code>set</code>. Tentunya, metode getter tidak boleh mengharapkan parameter, lalu metode setter mengharapkan hanya satu parameter (nilai baru untuk diset). Contohnya:</p> + +<pre class="brush: js">var o = { + a: 7, + get b() { return this.a + 1; }, + set c(x) { this.a = x / 2; } +}; +</pre> + +<p>Getter dan setter juga bisa ditambah ke objek kapanpun setelah membuat objek menggunakan metode <code>Object.defineProperties</code>. Parameter pertama metode ini ialah object tempat kamu mendefinisi getter atau setter. Parameter kedua ialah objek yang nama propertinya berupa nama getter atau setter,dan yang nilai propertinya berupa objek yang mendefinisi fungsi getter atau setter. Berikut adalah contoh mendefinisi getter dan setter yang sama yang digunakan dalam contoh sebelumnya:</p> + +<pre class="brush: js">var o = { a: 0 }; + +Object.defineProperties(o, { + 'b': { get: function() { return this.a + 1; } }, + 'c': { set: function(x) { this.a = x / 2; } } +}); + +o.c = 10; // Menjalankan setter, yang mengassign 10 / 2 (5) ke properti 'a' +console.log(o.b); // Menjalankan getter, yang menghasilkan a + 1 atau 6 +</pre> + +<p>Yang manapun dari dua form ini yang dipilih tergantung dari gaya pemrograman dan tugas di tangan. Jika kamu sudah memilih object initializer ketika mendefinisi prototipe kamu mungkin akan sering memilih form pertama. Form ini lebih compact dan natural. Namun, kalau kamu harus menambah getter dan setter nanti — karena kamu tak menulis prototipenya atau object khusus — maka form kedua menjadi satu-satunya solusi. Form kedua mungkin paling baik mewakiliki sifat dinamis JavaScript — tapi ia bisa membuat kode sulit dibaca dan dipahami.</p> + +<h2 id="Menghapus_properti">Menghapus properti</h2> + +<p>Kamu bisa menghapus properti yang bukan warisan menggunakan operator <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code>. Kode berikut menampilkan cara menghapus properti.</p> + +<pre class="brush: js">// Membuat objek baru, myobj, dengan dua properti, a dan b. +var myobj = new Object; +myobj.a = 5; +myobj.b = 12; + +// Mengapus properti a, menyisakan myobj hanya dengan properti b. +delete myobj.a; +console.log ('a' in myobj); // menghasilkan "false" +</pre> + +<p>Kamu juga bisa memakai <code>delete</code> untuk menghapus variabel global jika katakunci <code>var</code> tidak dipakai untuk mendeklarasi variabel itu:</p> + +<pre class="brush: js">g = 17; +delete g; +</pre> + +<h2 id="Membandingkan_objek">Membandingkan objek</h2> + +<p>Dalam JavaScript objek ialah tipe referensi. Dua objek berbeda tak akan pernah sama, meski mereka punya properti yang sama. Hanya membandingkan referensi objek yang sama dengannya menghasilkan true.</p> + +<pre class="brush: js">// Dua variabel, dua objek berbeda dengan properti yang sama +var fruit = {name: 'apple'}; +var fruitbear = {name: 'apple'}; + +fruit == fruitbear; // mengembalikan false +fruit === fruitbear; // mengembalikan false</pre> + +<pre class="brush: js">// Dua variabel, objek tunggal +var fruit = {name: 'apple'}; +var fruitbear = fruit; // assign referensi objek buah ke fruitbear + +// di sini fruit dan fruitbear menunjuk ke objek yang sama +fruit == fruitbear; // mengembalikan true +fruit === fruitbear; // mengembalikan true +</pre> + +<pre class="brush: js">fruit.name = 'grape'; +console.log(fruitbear); // menghasilkan { name: "grape" } ketimbang { name: "apple" } +</pre> + +<p>Untuk informasi lebih tentang operator pembandingan, lihat <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">Operator pembandingan</a>.</p> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>Untuk mempelajari lebih dalam, baca <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">detil model objek javaScript</a>.</li> + <li>Untuk belejar tentang kelas ECMAScript 2015 (cara baru membuat objek), baca bab <a href="/en-US/docs/Web/JavaScript/Reference/Classes">kelas JavaScript</a>.</li> +</ul> + +<p>{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}</p> diff --git a/files/id/web/javascript/reference/about/index.html b/files/id/web/javascript/reference/about/index.html new file mode 100644 index 0000000000..02c6ef967c --- /dev/null +++ b/files/id/web/javascript/reference/about/index.html @@ -0,0 +1,86 @@ +--- +title: Mengenai Pustaka Ini +slug: Web/JavaScript/Reference/About +tags: + - JavaScript +translation_of: Web/JavaScript/Reference/About +--- +<h2 id="Apa_yang_perlu_diketahui_sebelumnya">Apa yang perlu diketahui sebelumnya</h2> + +<p>Pengalaman menggunakan bahasa pemrograman lainnya dapat menjadi manfaat, meskipun tidak menjadi prasyarat.</p> + +<p>JavaScript ditujukan untuk digunakan pada lingkup yang lebih besar, seperti peramban, script server-side, atau sejenisnya. Secara umum, pustaka ini tergantung pada platform tertentu, dan tidak ditujukan hanya untuk peramban.</p> + +<p>Untuk tujuan demo, pustakan ini menggunakan fungsi, println. Fungsi tersebut bukanlah bagian dari JavaScript. Namun ia dapat dipetakan terhadap implementasi spesifik pada platform tertentu.</p> + +<p>Misal, bila berjalan di peramban, maka fungsi di atas dapat implementasikan sebagai:</p> + +<div style="overflow: hidden;"> +<pre class="brush: js">function println(string) { + window.alert(string); +} +</pre> + +<p> </p> +</div> + +<h2 id="Sejarah_JavaScript">Sejarah JavaScript</h2> + +<p>Versi terbaru dari peramban berbasis Mozilla mendukung versi terbaru dari JavaScript. Tabel berikut menampilkan daftar dari versi JavaScript yang didukung oleh versi yang berbeda dari peramban berbasis Mozilla.</p> + +<p>Peramban yang tidak mendukung versi JavaScript setidaknya versi 1.5 adalah hal yang sangat langka untuk saat ini. JavaScript versi 1.5 sudah dipublikasikan sejak tahun 1999. Bila Anda tertarik untuk mempelajari sejarahnya, silahkan mengunjungi referensi yang terdapat di Wikipedia, <a class="external" href="http://en.wikipedia.org/wiki/ECMAScript">ECMAScript</a>.</p> + +<h3 id="JavaScriptBrowser_support_history">JavaScript/Browser support history</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">JavaScript (<a href="/en-US/docs/SpiderMonkey" title="en-US/docs/SpiderMonkey">SpiderMonkey</a>) version</th> + <th scope="col">Mozilla release</th> + <th scope="col"><a href="/en-US/docs/Gecko" title="en-US/docs/Gecko">Gecko</a> version</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/en-US/docs/JavaScript/New_in_JavaScript/1.5" title="en-US/docs/JavaScript/New in JavaScript/1.5">JavaScript 1.5</a></td> + <td>Navigator 6.0, Mozilla Application Suite, Firefox 1.0</td> + <td>Gecko 0.6x-1.7</td> + </tr> + <tr> + <td><a href="/en-US/docs/JavaScript/New_in_JavaScript/1.6" title="en-US/docs/JavaScript/New in JavaScript/1.6">JavaScript 1.6</a></td> + <td>Firefox 1.5</td> + <td>Gecko 1.8</td> + </tr> + <tr> + <td><a href="/en-US/docs/JavaScript/New_in_JavaScript/1.7" title="en-US/docs/JavaScript/New in JavaScript/1.7">JavaScript 1.7</a></td> + <td>Firefox 2</td> + <td>Gecko 1.8.1</td> + </tr> + <tr> + <td><a href="/en-US/docs/JavaScript/New_in_JavaScript/1.8" title="en-US/docs/JavaScript/New in JavaScript/1.8">JavaScript 1.8</a></td> + <td>Firefox 3</td> + <td>Gecko 1.9</td> + </tr> + <tr> + <td><a href="/en-US/docs/JavaScript/New_in_JavaScript/1.8.5" title="en-US/docs/JavaScript/New in JavaScript/1.8.5">JavaScript 1.8.5</a></td> + <td>Firefox 4</td> + <td>Gecko 2.0</td> + </tr> + <tr> + <td><a href="/en-US/docs/Firefox_17_for_developers#JavaScript">JavaScript 1.8.6</a></td> + <td>Firefox 17</td> + <td>Gecko 17</td> + </tr> + </tbody> +</table> + +<h2 id="Sumber_informasi_JavaScript">Sumber informasi JavaScript</h2> + +<p>Dokumentasi JavaScript dari fitur bahasa inti (murni <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Language_Resources">ECMAScript</a>, untuk sebagian besar) mencakup:</p> + +<ul> + <li><a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Guide">Pedoman JavaScript</a></li> + <li><a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference">Referensi JavaScript</a></li> +</ul> + +<p>Bila Anda masih baru terhadap JavaScript, mulailah dari <a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Guide">pedoman</a>. Bila kemudian Anda sudah merasa memiliki pemahaman yang lebih mendalam, Anda dapat memanfaatkan <a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference">referensi</a>.</p> diff --git a/files/id/web/javascript/reference/classes/constructor/index.html b/files/id/web/javascript/reference/classes/constructor/index.html new file mode 100644 index 0000000000..8da1df9428 --- /dev/null +++ b/files/id/web/javascript/reference/classes/constructor/index.html @@ -0,0 +1,162 @@ +--- +title: constructor +slug: Web/JavaScript/Reference/Classes/constructor +translation_of: Web/JavaScript/Reference/Classes/constructor +--- +<div>{{jsSidebar("Classes")}}</div> + +<p>Metode dengan nama "constructor" adalah metode spesial untuk pembuatan dan penginisialisasian objek yang dibuat dengan kelas.</p> + +<h2 id="sintaks">sintaks</h2> + +<pre class="syntaxbox">constructor([arguments]) { ... }</pre> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Hanya boleh ada satu metode spesial dengan nama "constructor" dalam sebuah kelas. {{jsxref("SyntaxError")}} akan dilemparkan jika suatu kelas memiliki lebih dari satu metode konstruktor.</p> + +<p>Konstruktor dapat menggunakan kata kunci {{jsxref("Operators/super", "super")}} untuk memanggil konstruktor orang-tua.</p> + +<p>Jika metode konstruktor tidak didefinisikan dalam sebuah kelas, maka kontruktor asali yang akan digunakan.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Menggunakan_metode_constructor">Menggunakan metode <code>constructor</code></h3> + +<p>Potongan kode ini diambil dari <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">contoh kelas</a> (<a href="https://googlechrome.github.io/samples/classes-es6/index.html">demostrasi langsung</a>).</p> + +<pre class="brush: js">class Square extends Polygon { + constructor(length) { + // Di sini, akan memanggil konstruktor orang-tua dengan panjang + // diberikan untuk panjang dan tinggi Polygon + super(length, length); + // Catatan: di kelas turunan, super() harus dipanggil sebelum + // bisa menggunakan kata kunci 'this'. Meninggalkan pemanggilan ini di awal + // akan menyebabkan kesalahan referensi. + this.name = 'Square'; + } + + get area() { + return this.height * this.width; + } + + set area(value) { + this.area = value; + } +}</pre> + +<h3 id="Konstruktor_asali">Konstruktor asali</h3> + +<p>Jika metode konstruktor tidak didefinisikan dalam sebuah kelas, maka kontruktor asali yang akan digunakan. Untuk konstruktor asali untuk kelas dasar adalah:</p> + +<pre class="brush: js">constructor() {} +</pre> + +<p>Konstruktor asali untuk kelas turunan adalah:</p> + +<pre class="brush: js">constructor(...args) { + super(...args); +}</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-static-semantics-constructormethod', 'Constructor Method')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definisi awal</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-static-semantics-constructormethod', 'Constructor Method')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatibilitas_Peramban">Kompatibilitas Peramban</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(42.0)}}</td> + <td>{{CompatGeckoDesktop(45)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Default constructors</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(45)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(42.0)}}</td> + <td>{{CompatGeckoMobile(45)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(42.0)}}</td> + </tr> + <tr> + <td>Default constructors</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(45)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_Pula">Lihat Pula</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super()</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> declaration</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li> +</ul> diff --git a/files/id/web/javascript/reference/classes/extends/index.html b/files/id/web/javascript/reference/classes/extends/index.html new file mode 100644 index 0000000000..c6def454fe --- /dev/null +++ b/files/id/web/javascript/reference/classes/extends/index.html @@ -0,0 +1,112 @@ +--- +title: extends +slug: Web/JavaScript/Reference/Classes/extends +tags: + - ECMAScript 2015 + - JavaScript + - Kelas +translation_of: Web/JavaScript/Reference/Classes/extends +--- +<div>{{jsSidebar("Classes")}}</div> + +<p>Kata kunci <strong><code>extends</code></strong> digunakan pada <a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">class declarations</a> atau <a href="/en-US/docs/Web/JavaScript/Reference/Operators/class">class expressions</a> untuk membuat sebuah class yang merupakan turunan dari class lain.</p> + +<div>{{EmbedInteractiveExample("pages/js/classes-extends.html", "taller")}}</div> + +<p class="hidden">Sumber kode dari contoh interaktif ini disimpan di repositori GitHub. Jika Anda tertarik untuk berkontribusi dengan proyek contoh interaktif, silahkan menduplikasi repositori <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> dan kirimkan ke kami dengan pull request.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox">class ChildClass extends ParentClass { ... }</pre> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Kata kunci <code>extends</code> dapat digunakan untuk subclass custom classes dan built-in objects.</p> + +<p><code>.prototype</code> dari suatu ekstensi harus berupa sebuah {{jsxref("Object")}} atau {{jsxref("null")}}.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Menggunakan_extends">Menggunakan <code>extends</code></h3> + +<p>Contoh pertama membuat sebuah class bernama <code>Square</code> dari kelas bernama <code>Polygon</code>. Contoh ini diambil dari <a href="https://googlechrome.github.io/samples/classes-es6/index.html">live demo</a> <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">(source)</a>.</p> + +<pre class="brush: js">class Square extends Polygon { + constructor(length) { + // Disini, obyek dari Square memanggil konstruktor dari parent class dengan argumen lengths yang tersedia + // untuk width dan height pada Polygon + super(length, length); + // Catatan: Pada kelas turunan, super() harus dipanggil sebelum Anda + // dapat menggunakan 'this'. Pengabaian terhadap hal tersebut akan menyebabkan reference error. + this.name = 'Square'; + } + + get area() { + return this.height * this.width; + } +}</pre> + +<h3 id="Menggunakan_extends_dengan_built-in_objects">Menggunakan <code>extends</code> dengan built-in objects</h3> + +<p>Contoh berikut mewarisi built-in {{jsxref("Date")}} object. Contoh ini diambil dari <a href="https://googlechrome.github.io/samples/classes-es6/index.html">live demo</a> <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">(source)</a>.</p> + +<pre class="brush: js">class myDate extends Date { + constructor() { + super(); + } + + getFormattedDate() { + var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; + return this.getDate() + '-' + months[this.getMonth()] + '-' + this.getFullYear(); + } +}</pre> + +<h3 id="Extending_(Pewarisan)_null">Extending (Pewarisan) <code>null</code></h3> + +<p>Extending/pewarisan dari {{jsxref("null")}} bekerja layaknya seperti normal class, dengan pengecualian prototype object tidak mewarisi dari {{jsxref("Object.prototype")}}.</p> + +<pre class="brush: js">class nullExtends extends null { + constructor() {} +} + +Object.getPrototypeOf(nullExtends); // Function.prototype +Object.getPrototypeOf(nullExtends.prototype) // null + +new nullExtends(); //ReferenceError: this is not defined +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Komentar</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-class-definitions', 'extends')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-class-definitions', 'extends')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatibilitas_peramban">Kompatibilitas peramban</h2> + +<div class="hidden">Tabel kompatibilitas pada halaman ini hasil pengolahan dari data terstruktur. Jika Anda tertarik untuk berkontribusi pada data, Silahkan cek <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> dan kirimkan kami pull request.</div> + +<p>{{Compat("javascript.classes.extends")}}</p> + +<h2 id="Cek_juga">Cek juga</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super</a></li> + <li><a href="https://medium.com/beginners-guide-to-mobile-web-development/super-and-extends-in-javascript-es6-understanding-the-tough-parts-6120372d3420">Anurag Majumdar - Super & Extends in JavaScript</a></li> +</ul> diff --git a/files/id/web/javascript/reference/classes/index.html b/files/id/web/javascript/reference/classes/index.html new file mode 100644 index 0000000000..3a8a71f562 --- /dev/null +++ b/files/id/web/javascript/reference/classes/index.html @@ -0,0 +1,383 @@ +--- +title: Classes +slug: Web/JavaScript/Reference/Classes +tags: + - Classes + - Constructors + - ECMAScript6 + - Inheritance + - Intermediate + - JavaScript + - NeedsTranslation + - TopicStub +translation_of: Web/JavaScript/Reference/Classes +--- +<div>{{JsSidebar("Classes")}}</div> + +<p>Kelas di JavaScript diperkenalkan pada ECMAScript 6 seperti pemanis dari prototype-based JavaScript yang sudah ada. Syntax dari kelas tidak menggunakan model object-oriented inheritance yang baru. JavaScript kelas menyediakan syntax yang lebih sederhana dan rapi untuk membuat object-object dan mengatasi / dealing dengan turunan / inheritance.</p> + +<h2 id="Definisi_kelas">Definisi kelas</h2> + +<p>Kelas seperti "fungsi istimewa", dan seperti kamu bisa mendeklarasikan <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">ekspresi fungsi </a>(function expressions) dan <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">deklarasi fungsi </a> (function declarations), syntax kelas sendiri mempunyai dua komponen: <a href="/en-US/docs/Web/JavaScript/Reference/Operators/class">ekspresi kelas</a> (class expressions) dan <a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">deklarasi kelas</a> (class declarations).</p> + +<h3 id="Deklarasi_Kelas">Deklarasi Kelas</h3> + +<p>Salah satu cara untuk mendefinisikan kelas adalah dengan menggunakan <strong>class declaration / deklarasi kelas</strong>. Untuk mendeklarasikan kelas, kamu bisa menggunakan kata kunci <code>class</code> sebagai contoh class "Polygon" di bawah ini.</p> + +<pre class="brush: js notranslate">class Polygon { + constructor(height, width) { + this.height = height; + this.width = width; + } +}</pre> + +<h4 id="Hoisting">Hoisting</h4> + +<p>Perbedaan penting antara <strong>deklarasi</strong><strong> f</strong><strong>ungsi</strong><strong> </strong>(function declarations)<strong> </strong>dan<strong> </strong><strong>deklarasi</strong><strong> kelas</strong> (class declarations) adalah deklarasi fungsi {{Glossary("Hoisting", "hoisted")}} dan deklarasi class tidak. Pertama-tama k<span style="background-color: #f6d5d9;">amu </span>harus mendeklarasikan kelas dan mengaksesnya, jika tidak maka kode seperti berikut akan menampilkan {{jsxref("ReferenceError")}}:</p> + +<pre class="brush: js example-bad notranslate">var p = new Polygon(); // ReferenceError + +class Polygon {} +</pre> + +<h3 id="Ekspresi_Kelas">Ekspresi Kelas</h3> + +<p><strong>Ekspresi kelas </strong>(class expression) adalah cara lain untuk mendefinisikan sebuah class. Class expression bisa bernama ataupun tidak. Nama yang diberikan berbentuk lokal berada di body class.</p> + +<pre class="brush: js notranslate">// unnamed +var Polygon = class { + constructor(height, width) { + this.height = height; + this.width = width; + } +}; + +// named +var Polygon = class Polygon { + constructor(height, width) { + this.height = height; + this.width = width; + } +}; +</pre> + +<p><strong>Catatan:</strong> <strong>Ekspresi </strong>kelas (Class expressions) juga mempunyai masalah yang sama terkait hoisting seperti pada <strong>Deklarasi kelas</strong> (Class declarations).</p> + +<h2 id="Tubuh_Kelas_class_body_and_definisi_metode">Tubuh Kelas (class body) and definisi metode</h2> + +<p>Tubuh atau body sebuah kelas berada didalam kurung {}. Disitu kamu dapat mendefinisikan isi kelas seperti method atau konstruktor.</p> + +<h3 id="Strict_mode">Strict mode</h3> + +<p>Body atau bagian badan dari <em>kelas deklarasi</em> dan <em>kelas ekspresi</em> di eksekusi pada <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>.</p> + +<h3 id="Konstruktor">Konstruktor</h3> + +<p><code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/constructor">konstruktor</a></code> adalah metode (method) khusus untuk membuat dan inisialisasi sebuah objek yang dibuat dengan <code>class</code>. Hanya ada satu metode khusus dengan nama "konstruktor" di kelas. Sebuah {{jsxref("SyntaxError")}} akan tampil jika kelas berisi lebih dari satu method <code>constructor</code>.</p> + +<p>Sebuah konstruktor dapat digunakan keyword <code>super</code> untuk memanggil kostruktor dari kelas <em>parent</em> nya.</p> + +<h3 id="Prototipe_method">Prototipe method</h3> + +<p>Lihat juga <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">definisi method</a></p> + +<pre class="brush: js notranslate">class Polygon { + constructor(height, width) { + this.height = height; + this.width = width; + } + + get area() { + return this.calcArea(); + } + + calcArea() { + return this.height * this.width; + } +} + +const square = new Polygon(10, 10); + +console.log(square.area);</pre> + +<h3 id="Metode_Statis">Metode Statis</h3> + +<p>Kata kunci <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/static">statis</a></code> mendefinisikan metode statis untuk suatu kelas. Metode statis dipanggil tanpa membuat <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript#The_object_(class_instance)" title='An example of class instance is "var john = new Person();"'>instance </a>kelasnya dan <strong>tidak</strong> bisa dipanggil ketika kelas tersebut dipakai. Metode statis sering digunakan untuk membuat fungsi utilitas untuk suatu aplikasi.</p> + +<pre class="brush: js notranslate">class Point { + constructor(x, y) { + this.x = x; + this.y = y; + } + + static distance(a, b) { + const dx = a.x - b.x; + const dy = a.y - b.y; + + return Math.sqrt(dx*dx + dy*dy); + } +} + +const p1 = new Point(5, 5); +const p2 = new Point(10, 10); + +console.log(Point.distance(p1, p2));</pre> + +<h3 id="Mem-binding_this_dengan_prototipe_dan_metode_statis">Mem-binding <code>this</code> dengan prototipe dan metode statis</h3> + +<p>Ketika metode statis atau prototipe dipanggil tanpa objek yang bernilai "this" (atau "this" sebagai boolean, string, angka, <strong><code>tidak terdefinisi</code></strong> atau null), maka nilai "this" akan ditentukan dalam fungsi yang digunakan. Autoboxing tidak akan berjalan. Hal tersebut juga berlaku ketika kita menulis kode dalam mode non-strict.laku akan sama bahkan jika kita menulis kode dalam mode tidak ketat.</p> + +<pre class="brush: js notranslate">class Animal { + speak() { + return this; + } + static eat() { + return this; + } +} + +let obj = new Animal(); +let speak = obj.speak; +speak(); // undefined + +let eat = Animal.eat; +eat(); // undefined</pre> + +<p>Jika kita menulis kode diatas menggunakan fungsi tradisional berdasarkan kelas, maka autoboxing akan berjalan sesuai dengan nilai "this" pada fungsi yang dipanggil.</p> + +<pre class="brush: js notranslate">function Animal() { } + +Animal.prototype.speak = function(){ + return this; +} + +Animal.eat = function() { + return this; +} + +let obj = new Animal(); +let speak = obj.speak; +speak(); // global object + +let eat = Animal.eat; +eat(); // global object +</pre> + +<h2 id="Sub_kelas_dengan_extends">Sub kelas dengan <code>extends</code></h2> + +<p><code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/extends">extends</a></code> digunakan pada <em>deklarasi kelas</em> atau <em>kelas expresi</em> untuk membuat suatu kelas sebagai turunan dari kelas lain.</p> + +<pre class="brush: js notranslate">class Animal { + constructor(name) { + this.name = name; + } + + speak() { + console.log(this.name + ' makes a noise.'); + } +} + +class Dog extends Animal { + speak() { + console.log(this.name + ' barks.'); + } +} + +var d = new Dog('Mitzie'); +d.speak(); +</pre> + +<p>Jika terdapat constructor pada sub kelas saat ini, maka pertama dibutuhkan untuk memanggil super() sebelum menggunakan "this".</p> + +<div>Seseorang juga dapat mengextend "kelas" berbasis fungsi tradisional:</div> + +<pre class="brush: js notranslate">function Animal (name) { + this.name = name; +} + +Animal.prototype.speak = function () { + console.log(this.name + ' makes a noise.'); +} + +class Dog extends Animal { + speak() { + console.log(this.name + ' barks.'); + } +} + +var d = new Dog('Mitzie'); +d.speak(); +</pre> + +<p>Perhatikan bahwa kelas tidak dapat di extend pada objek reguler atau biasa (non-constructible) . Jika ingin mewarisi regurel object, maka dapat menggunakan {{jsxref("Object.setPrototypeOf()")}}:</p> + +<pre class="brush: js notranslate">var Animal = { + speak() { + console.log(this.name + ' makes a noise.'); + } +}; + +class Dog { + constructor(name) { + this.name = name; + } + speak() { + console.log(this.name + ' barks.'); + } +} + +Object.setPrototypeOf(Dog.prototype, Animal); + +var d = new Dog('Mitzie'); +d.speak(); +</pre> + +<h2 id="Species">Species</h2> + +<p>Kamu dapat mengembalikan objek {{jsxref("Array")}} di kelas array yang diturunkan <code>MyArray</code>. Pola spesies memungkinkan Kamu <em>overide</em> konstruktor default.</p> + +<p>Contohnya, ketika menggunakan method seperti {{jsxref("Array.map", "map()")}} yang mana mengembalikan konstruktor default, kamu butuh method yang dapat mengembalikan objek parent <code>Array</code>, bukan dari objek <code>MyArray</code>. Simbol {{jsxref("Symbol.species")}} memungkinkan untuk melakukan:</p> + +<pre class="brush: js notranslate">class MyArray extends Array { + // Overwrite species to the parent Array constructor + static get [Symbol.species]() { return Array; } +} + +var a = new MyArray(1,2,3); +var mapped = a.map(x => x * x); + +console.log(mapped instanceof MyArray); // false +console.log(mapped instanceof Array); // true +</pre> + +<h2 id="Memanggil_Kelas_Super_dengan_keyword_super">Memanggil Kelas Super dengan keyword <code>super</code></h2> + +<p>Keyword <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super</a></code> digunakan untuk memanggil fungsi pada objek parent nya.</p> + +<pre class="brush: js notranslate">class Cat { + constructor(name) { + this.name = name; + } + + speak() { + console.log(this.name + ' makes a noise.'); + } +} + +class Lion extends Cat { + speak() { + super.speak(); + console.log(this.name + ' roars.'); + } +} +</pre> + +<h2 id="Mix-ins">Mix-ins</h2> + +<p>Subkelas Abstrak or <em>mix-ins </em>adalah template untuk kelas. Kelas berbasis ECMAScript hanya dapat memiliki satu superclass (Kelas super), jadi inheritence berganda dari kelas tool sebagai contohnya, itu tidak memungkinkan. Fungsionalitas harus disediakan oleh superclass.</p> + +<p>Sebuah fungsi dengan superclass sebagai inputanya dan sukelas as input and a subclass extend superclass sebagai output dapat mengimplemtasikan pada ECMAScript sebagai berikut:</p> + +<pre class="brush: js notranslate">var calculatorMixin = Base => class extends Base { + calc() { } +}; + +var randomizerMixin = Base => class extends Base { + randomize() { } +}; +</pre> + +<p>A class that uses these mix-ins can then be written like this:</p> + +<pre class="brush: js notranslate">class Foo { } +class Bar extends calculatorMixin(randomizerMixin(Foo)) { }</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Kompatibilitas_Browser">Kompatibilitas Browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Edge</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(42.0)}}<sup>[1]</sup><br> + {{CompatChrome(49.0)}}</td> + <td>{{CompatGeckoDesktop(45)}}</td> + <td>13</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatSafari(9.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(45)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>9</td> + <td>{{CompatChrome(42.0)}}<sup>[1]</sup><br> + {{CompatChrome(49.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Requires strict mode. Non-strict mode support is behind the flag "Enable Experimental JavaScript", disabled by default.</p> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Functions</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> declaration</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li> + <li>{{jsxref("Operators/super", "super")}}</li> + <li><a href="https://hacks.mozilla.org/2015/07/es6-in-depth-classes/">Blog post: "ES6 In Depth: Classes"</a></li> +</ul> diff --git a/files/id/web/javascript/reference/errors/called_on_incompatible_type/index.html b/files/id/web/javascript/reference/errors/called_on_incompatible_type/index.html new file mode 100644 index 0000000000..4fab8e8ca2 --- /dev/null +++ b/files/id/web/javascript/reference/errors/called_on_incompatible_type/index.html @@ -0,0 +1,69 @@ +--- +title: X.prototype.y called on incompatible type +slug: Web/JavaScript/Reference/Errors/Called_on_incompatible_type +tags: + - Error + - JavaScript + - TypeError +translation_of: Web/JavaScript/Reference/Errors/Called_on_incompatible_type +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Message">Message</h2> + +<pre class="syntaxbox">TypeError: 'this' is not a Set object (EdgE) +TypeError: Function.prototype.toString called on incompatible object (Firefox) +TypeError: Function.prototype.bind called on incompatible target (Firefox) +TypeError: Method Set.prototype.add called on incompatible receiver undefined (Chrome) +TypeError: Bind must be called on a function (Chrome) +</pre> + +<h2 id="Tipe_error">Tipe error</h2> + +<p>{{jsxref("TypeError")}}</p> + +<h2 id="Apa_yang_salah">Apa yang salah?</h2> + +<p>Ketika error ini dilempar, suatu fungsi (dari objek yang diberikan), dipanggil dengan <code>this</code> tidak berkorespondensi ke tipe yang diharapkan fungsi tersebut.</p> + +<p>Isu ini bisa terbit ketika menggunakan metode {{jsxref("Function.prototype.call()")}} atau {{jsxref("Function.prototype.apply()")}}, dan menyediakan argumen <code>this</code> yang tak punya tipe yang diharapkan.</p> + +<p>Isu ini juga bisa terjadi ketika menyediakan fungsi yang disimpan sebagai properti suatu objek sebagai argumen fungsi lain. Dalam hal ini, objek yang menyimpan fungsi tersebut takkan menjadi target <code>this</code> target dari fungsi itu ketika dipanggil oleh fungsi lain. Untuk mengatasi isu ini, kamu harus menyediakan lambda yang membuat panggilan, ataupun menggunakan fungsi {{jsxref("Function.prototype.bind()")}} untuk memaksa argumen <code>this</code> ke objek yang diharapkan.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Kasus_tak_valid">Kasus tak valid</h3> + +<pre class="brush: js example-bad">var mySet = new Set; +['bar', 'baz'].forEach(mySet.add); +// mySet.add adalah fungsi, tapi "mySet" tidak dikaptur sebagai this. + +var myFun = function () { + console.log(this); +}; +['bar', 'baz'].forEach(myFun.bind); +// myFun.bind adalah fungsi, tapi "myFun" tidak dikaptur sebagai this. + +</pre> + +<h3 id="Kasus_valid">Kasus valid</h3> + +<pre class="brush: js example-good">var mySet = new Set; +['bar', 'baz'].forEach(mySet.add.bind(mySet)); +// Ini berjalan karena mengikat "mySet" sebagai this. + +var myFun = function () { + console.log(this); +}; +['bar', 'baz'].forEach(x => myFun.bind(x)); +// Ini berjalan menggunakan fungsi "bind". Ia membuat lambda yang meneruskan argumen. + +</pre> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("Function.prototype.call()")}}</li> + <li>{{jsxref("Function.prototype.apply()")}}</li> + <li>{{jsxref("Function.prototype.bind()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/errors/index.html b/files/id/web/javascript/reference/errors/index.html new file mode 100644 index 0000000000..68e7cce3df --- /dev/null +++ b/files/id/web/javascript/reference/errors/index.html @@ -0,0 +1,12 @@ +--- +title: Referensi error JavaScript +slug: Web/JavaScript/Reference/Errors +tags: + - JavaScript +translation_of: Web/JavaScript/Reference/Errors +--- +<p>{{jsSidebar("Errors")}}</p> + +<p>Error, error dimana - mana.</p> + +<p>{{ListSubPages("/en-US/docs/Web/JavaScript/Reference/Errors")}}</p> diff --git a/files/id/web/javascript/reference/errors/invalid_array_length/index.html b/files/id/web/javascript/reference/errors/invalid_array_length/index.html new file mode 100644 index 0000000000..3b7fd4e78e --- /dev/null +++ b/files/id/web/javascript/reference/errors/invalid_array_length/index.html @@ -0,0 +1,78 @@ +--- +title: 'RangeError: invalid array length' +slug: Web/JavaScript/Reference/Errors/Invalid_array_length +tags: + - Errors + - JavaScript + - RangeError +translation_of: Web/JavaScript/Reference/Errors/Invalid_array_length +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Message">Message</h2> + +<pre class="syntaxbox">RangeError: Array length must be a finite positive integer (Edge) +RangeError: invalid array length (Firefox) +RangeError: Invalid array length (Chrome) +RangeError: Invalid array buffer length (Chrome) +</pre> + +<h2 id="Tipe_error">Tipe error</h2> + +<p>{{jsxref("RangeError")}}</p> + +<h2 id="Apa_yang_salah">Apa yang salah?</h2> + +<p>Panjang array tak valid bisa muncul di situasi berikut:</p> + +<ul> + <li>Ketika membuat satu {{jsxref("Array")}} atau {{jsxref("ArrayBuffer")}} yang punya panjang negatif atau lebih besar atau sama dengan 2<sup>32</sup>, atau</li> + <li>ketika mengeset properti {{jsxref("Array.length")}} ke nilai negatif atau lebih besar atau sama dengan 2<sup>32</sup>.</li> +</ul> + +<p>Kenapa panjang <code>Array</code> dan <code>ArrayBuffer</code> dibatasi? Properti <code>length</code> dari <code>Array</code> atau <code>ArrayBuffer</code> diwakili dengan satu unsigned 32-bit integer, yang hanya menyimpan nilai dalam kisaran dari 0 hingga 2<sup>32</sup>-1.</p> + +<p>Jika kamu membuat satu <code>Array</code>, menggunakan constructor, kamu mungkin mau memakai notasi literal saja, karena argumen pertama diinterpretasi sebagai panjang <code>Array</code>.</p> + +<p>Sebaliknya, kamu mungkin mau mengelam panjangnya sebelum mengeset properti panjangnya, atau memakainya sebagai argumen konstructor.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Kasus_tak_valid">Kasus tak valid</h3> + +<pre class="brush: js example-bad">new Array(Math.pow(2, 40)) +new Array(-1) +new ArrayBuffer(Math.pow(2, 32)) +new ArrayBuffer(-1) + +let a = []; +a.length = a.length - 1; // set -1 to the length property + +let b = new Array(Math.pow(2, 32) - 1); +b.length = b.length + 1; // set 2^32 to the length property +</pre> + +<h3 id="Kasus_valid">Kasus valid</h3> + +<pre class="brush: js example-good">[ Math.pow(2, 40) ] // [ 1099511627776 ] +[ -1 ] // [ -1 ] +new ArrayBuffer(Math.pow(2, 32) - 1) +new ArrayBuffer(0) + +let a = []; +a.length = Math.max(0, a.length - 1); + +let b = new Array(Math.pow(2, 32) - 1); +b.length = Math.min(0xffffffff, b.length + 1); + +// 0xffffffff is the hexadecimal notation for 2^32 - 1 +// which can also be written as (-1 >>> 0) +</pre> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Array.length")}}</li> + <li>{{jsxref("ArrayBuffer")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/errors/missing_semicolon_before_statement/index.html b/files/id/web/javascript/reference/errors/missing_semicolon_before_statement/index.html new file mode 100644 index 0000000000..32be54e5ce --- /dev/null +++ b/files/id/web/javascript/reference/errors/missing_semicolon_before_statement/index.html @@ -0,0 +1,78 @@ +--- +title: 'SyntaxError: missing ; before statement' +slug: Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement +translation_of: Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Pesan">Pesan</h2> + +<pre class="syntaxbox">SyntaxError: Expected ';' (Edge) +SyntaxError: missing ; before statement (Firefox) +</pre> + +<h2 id="Tipe_error">Tipe error</h2> + +<p>{{jsxref("SyntaxError")}}.</p> + +<h2 id="Apa_yang_Salah">Apa yang Salah?</h2> + +<p>Ada titik koma (<code>;</code>) yang hilang di suatu tempat. <a href="/en-US/docs/Web/JavaScript/Reference/Statements">JavaScript statements</a> harus diakhiri dengan semicolon. Beberapa dari mereka dipengaruhi oleh <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">automatic semicolon insertion (ASI)</a>, tetapi dalam hal ini anda perlu memberikan titik koma, sehingga JavaScript dapat mem-parse kode sumber dengan benar.</p> + +<p>Namun, seringkali, kesalahan ini hanya merupakan konsekuensi dari kesalahan lain, seperti tidak menempatkan string dengan benar, atau menggunakan var secara salah. Ada mungkin juga memiliki terlalu banyak tanda kurung di suatu tempat. Hati-hati memeriksa sintaks ketika kesalahan ini dilemparkan.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Unescaped_strings">Unescaped strings</h3> + +<p>Kesalahan ini dapat terjadi dengan mudah ketika tidak melepaskan string dengan benar dan engine JavaScript is expecting the end of your string already. Sebagai contoh:</p> + +<pre class="brush: js example-bad">var foo = 'Tom's bar'; +// SyntaxError: missing ; before statement</pre> + +<p>Anda dapat menggunakan double quotes, atau menggunakan tanda kutip dengan menambahkan backslash</p> + +<pre class="brush: js example-good">var foo = "Tom's bar"; +var foo = 'Tom\'s bar'; +</pre> + +<h3 id="Declaring_properties_with_var">Declaring properties with var</h3> + +<p>Anda tidak dapat mendeklarasikan property dari sebuah objek atau larik(array) <code>dengan deklarasi var</code>.</p> + +<pre class="brush: js example-bad">var obj = {}; +var obj.foo = 'hi'; // SyntaxError missing ; before statement + +var array = []; +var array[0] = 'there'; // SyntaxError missing ; before statement +</pre> + +<p>Sebagai gantinya, hapus kata kunci var:</p> + +<pre class="brush: js example-good">var obj = {}; +obj.foo = 'hi'; + +var array = []; +array[0] = 'there'; +</pre> + +<h3 id="Kata_kunci_yang_buruk">Kata kunci yang buruk</h3> + +<p>Jika ada berasal dari bahasa pemrograman yang lain, itu juga umum untuk menggunakan kata kunci yang tidak berarti sama atau tidak memiliki arti sama sekali di JavaScript:</p> + +<pre class="brush: js example-bad">def print(info){ + console.log(info); +}; // SyntaxError missing ; before statement</pre> + +<p>Sebagai gantinya, gunakan <code>function</code> daripada menggunakan kata kunci <code>def</code>:</p> + +<pre class="brush: js example-good">function print(info){ + console.log(info); +};</pre> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">Automatic semicolon insertion (ASI)</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements">JavaScript statements</a></li> +</ul> diff --git a/files/id/web/javascript/reference/errors/negative_repetition_count/index.html b/files/id/web/javascript/reference/errors/negative_repetition_count/index.html new file mode 100644 index 0000000000..0ea4bec83a --- /dev/null +++ b/files/id/web/javascript/reference/errors/negative_repetition_count/index.html @@ -0,0 +1,45 @@ +--- +title: 'RangeError: repeat count must be non-negative' +slug: Web/JavaScript/Reference/Errors/Negative_repetition_count +tags: + - Errors + - JavaScript + - RangeError +translation_of: Web/JavaScript/Reference/Errors/Negative_repetition_count +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Pesan">Pesan</h2> + +<pre class="syntaxbox">RangeError: argument out of range +RangeError: repeat count must be non-negative (Firefox) +RangeError: Invalid count value (Chrome) +</pre> + +<h2 id="Tipe_error">Tipe error</h2> + +<p>{{jsxref("RangeError")}}</p> + +<h2 id="Apa_yang_salah">Apa yang salah?</h2> + +<p>Metode {{jsxref("String.prototype.repeat()")}} telah digunakan. Ia punya parameter <code>count</code> mengindikasikan jumlah pengulangan string. Ia harus bernilai antara 0 dan kurang dari positif {{jsxref("Infinity")}} dan tidak boleh angka negatif. Kisarannya nilai yang diperbolehkan bisa dijelaskan seperti ini: [0, +∞).</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Kasus_tak_valid">Kasus tak valid</h3> + +<pre class="brush: js example-bad">'abc'.repeat(-1); // RangeError </pre> + +<h3 id="Kasus_valid">Kasus valid</h3> + +<pre class="brush: js example-good">'abc'.repeat(0); // '' +'abc'.repeat(1); // 'abc' +'abc'.repeat(2); // 'abcabc' +'abc'.repeat(3.5); // 'abcabcabc' (count will be converted to integer) +</pre> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("String.prototype.repeat()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/errors/not_a_codepoint/index.html b/files/id/web/javascript/reference/errors/not_a_codepoint/index.html new file mode 100644 index 0000000000..d3d8b2f934 --- /dev/null +++ b/files/id/web/javascript/reference/errors/not_a_codepoint/index.html @@ -0,0 +1,56 @@ +--- +title: 'RangeError: argument is not a valid code point' +slug: Web/JavaScript/Reference/Errors/Not_a_codepoint +tags: + - Errors + - JavaScript + - RangeError +translation_of: Web/JavaScript/Reference/Errors/Not_a_codepoint +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Pesan">Pesan</h2> + +<pre class="syntaxbox">RangeError: Invalid code point {0} (Edge) +RangeError: {0} is not a valid code point (Firefox) +RangeError: Invalid code point {0} (Chrome) +</pre> + +<p> </p> + +<h2 id="Tipe_error">Tipe error</h2> + +<p>{{jsxref("RangeError")}}</p> + +<h2 id="Apa_yang_salah">Apa yang salah?</h2> + +<p><span class="seoSummary">{{jsxref("String.fromCodePoint()")}} throws this error when passed {{jsxref("NaN")}} values, negative Integers (-1), non-Integers (5.4), or values larger than 0x10FFFF (1114111).</span></p> + +<p>Satu <a href="https://en.wikipedia.org/wiki/Code_point">poin kode</a> ialah satu nilai dalam codespace Unicode; yaitu, kisaran integer dari <code>0</code> hingga <code>0x10FFFF</code>.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Kasus_tak_nvalid">Kasus tak nvalid</h3> + +<pre class="brush: js example-bad">String.fromCodePoint('_'); // RangeError +String.fromCodePoint(Infinity); // RangeError +String.fromCodePoint(-1); // RangeError +String.fromCodePoint(3.14); // RangeError +String.fromCodePoint(3e-2); // RangeError +String.fromCodePoint(NaN); // RangeError</pre> + +<h3 id="Kasus_valid">Kasus valid</h3> + +<pre class="brush: js example-good">String.fromCodePoint(42); // "*" +String.fromCodePoint(65, 90); // "AZ" +String.fromCodePoint(0x404); // "\u0404" +String.fromCodePoint(0x2F804); // "\uD87E\uDC04" +String.fromCodePoint(194564); // "\uD87E\uDC04" +String.fromCodePoint(0x1D306, 0x61, 0x1D307) // "\uD834\uDF06a\uD834\uDF07" +</pre> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("String.fromCodePoint()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/errors/not_defined/index.html b/files/id/web/javascript/reference/errors/not_defined/index.html new file mode 100644 index 0000000000..d0dc93a0c6 --- /dev/null +++ b/files/id/web/javascript/reference/errors/not_defined/index.html @@ -0,0 +1,66 @@ +--- +title: 'ReferenceError: "x" is not defined' +slug: Web/JavaScript/Reference/Errors/Not_defined +translation_of: Web/JavaScript/Reference/Errors/Not_defined +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Pesan">Pesan</h2> + +<pre class="syntaxbox">ReferenceError: "x" is not defined +</pre> + +<h2 id="Type_Error">Type Error</h2> + +<p>{{jsxref("ReferenceError")}}.</p> + +<h2 id="Mengapa_salah">Mengapa salah?</h2> + +<p>Tidak ditemukannya referensi variabel dimanapun. Variabel ini perlu dideklarasikan, atau anda pastikan lagi bahwa ada di dalam script atau {{Glossary("scope")}} anda.</p> + +<div class="note"> +<p><strong>Note:</strong> Ketika memanggil sebuah library (seperti jQuery), pastikan memanggilnya terlebih dahulu tanda "$" sebelum mengakses variabel library. Gunakan tag {{HTMLElement("script")}} untuk memanggil library sebelum menggunakannya pada kode anda.</p> +</div> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Variable_tidak_dideklarasikan">Variable tidak dideklarasikan</h3> + +<pre class="brush: js example-bad">foo.substring(1); // ReferenceError: foo is not defined +</pre> + +<p>Variabel "foo" tidak ditemukan dimanapun. Variabel tersebut diperlukan oleh beberapa string, agar metode {{jsxref("String.prototype.substring()")}} dapat bekerja.</p> + +<pre class="brush: js example-good">var foo = 'bar'; +foo.substring(1); // "ar"</pre> + +<h3 id="Ruang_lingkup_salah">Ruang lingkup salah</h3> + +<p><span id="result_box" lang="id"><span>Sebuah variabel harus tersedia dalam kontek eksekusi saat ini</span></span> . Variabel yang berada di dalam sebuah <a href="/en-US/docs/Web/JavaScript/Reference/Functions">fungsi</a> tidak dapat diakses dari luar fungsi, sebab sebuah variabel mepunyai batasan pada cakupan wilayah sebuah fungsi</p> + +<pre class="brush: js example-bad">function numbers() { + var num1 = 2, + num2 = 3; + return num1 + num2; +} + +console.log(num1); // ReferenceError num1 is not defined.</pre> + +<p>Dengan demikian sebuah fungsi dapat mengakses semua variabel dan fungsi lainnya yang didefinisikan di dalam cakupan dimana ia didefinisikan. Dengan kata lain, sebiah fungsi yang didefinisikan di cakupan global dapat mengakses semua variabel yang didefinisian secara global pula.</p> + +<pre class="brush: js example-good">var num1 = 2, + num2 = 3; + +function numbers() { + return num1 + num2; +} + +console.log(numbers()); // 5</pre> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{Glossary("Scope")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Declaring_variables">Panduan pendeklarasian variabel dalam JavaScript</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Functions#Function_scope/en-US/docs/">Panduan cakupan fungsi pada JavaScript</a></li> +</ul> diff --git a/files/id/web/javascript/reference/errors/property_access_denied/index.html b/files/id/web/javascript/reference/errors/property_access_denied/index.html new file mode 100644 index 0000000000..6cbece3868 --- /dev/null +++ b/files/id/web/javascript/reference/errors/property_access_denied/index.html @@ -0,0 +1,47 @@ +--- +title: 'Error: Permission denied to access property "x"' +slug: Web/JavaScript/Reference/Errors/Property_access_denied +tags: + - Error + - Errors + - JavaScript + - Keamanan +translation_of: Web/JavaScript/Reference/Errors/Property_access_denied +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Pesan">Pesan</h2> + +<pre class="syntaxbox">Error: Permission denied to access property "x" +</pre> + +<h2 id="Tipe_error">Tipe error</h2> + +<p>{{jsxref("Error")}}.</p> + +<h2 id="Apa_kesalahannya">Apa kesalahannya?</h2> + +<p><span class="seoSummary">Ada usaha pengaksesan objeck yang kamu belum punya ijinnya. Sepertinya elemen {{HTMLElement("iframe")}} diload dari domain berbeda yang kebijakan <a href="/en-US/docs/Web/Security/Same-origin_policy">same-origin policy</a>nya kamu langgar.</span></p> + +<h2 id="Contoh">Contoh</h2> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <iframe id="myframe" src="http://www1.w3c-test.org/common/blank.html"></iframe> + <script> + onload = function() { + console.log(frames[0].document); + // Error: Permission denied to access property "document" + } + </script> + </head> + <body></body> +</html></pre> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{HTMLElement("iframe")}}</li> + <li><a href="/en-US/docs/Web/Security/Same-origin_policy">Same-origin policy</a></li> +</ul> diff --git a/files/id/web/javascript/reference/errors/too_much_recursion/index.html b/files/id/web/javascript/reference/errors/too_much_recursion/index.html new file mode 100644 index 0000000000..4c35bcfc83 --- /dev/null +++ b/files/id/web/javascript/reference/errors/too_much_recursion/index.html @@ -0,0 +1,70 @@ +--- +title: 'InternalError: too much recursion' +slug: Web/JavaScript/Reference/Errors/Too_much_recursion +tags: + - Errors + - InternalError + - JavaScript +translation_of: Web/JavaScript/Reference/Errors/Too_much_recursion +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Pesan">Pesan</h2> + +<pre class="syntaxbox">Error: Out of stack space (Edge) +InternalError: too much recursion (Firefox) +RangeError: Maximum call stack size exceeded (Chrome) +</pre> + +<h2 id="Tipe_error">Tipe error</h2> + +<p>{{jsxref("InternalError")}}.</p> + +<h2 id="Apa_yang_salah">Apa yang salah?</h2> + +<p>Fungsi yang memanggil dirinya sendiri disebut <em>fungsi rekursif</em>. Sekali satu kondisi telah ketemu, fungsi itu berhenti memanggil dirinya. Ini disebut <em>base case</em>.</p> + +<p>Dalam beberapa cara, rekursi analog dengan loop. Keduanya mengeksekusi kode yang sama berulang kali, dan keduanya membutuhkan satu kondisi (untuk mencegah loop tak-terbatas, atau lebih tepatnya, rekursi tak-terbatas dalam hal ini). <span class="seoSummary">Ketika panggilan fungsi terlalu banyak, atau tak ada base case dalam fungsi, JavaScript akan melempar error ini.</span></p> + +<h2 id="Contoh">Contoh</h2> + +<p>Fungsi rekursif ini berjalan 10 kali, per kondisi exit.</p> + +<pre class="brush: js">function loop(x) { + if (x >= 10) // "x >= 10" is the exit condition + return; + // do stuff + loop(x + 1); // the recursive call +} +loop(0);</pre> + +<p>Mengeset kondisi ini ke nilai extrem sangat tinggi, tak akan jalan:</p> + +<pre class="brush: js example-bad">function loop(x) { + if (x >= 1000000000000) + return; + // do stuff + loop(x + 1); +} +loop(0); + +// InternalError: too much recursion</pre> + +<p>Fungsi rekursif ini tak punya base case. Jika tak kondisi exit, function akan memanggil dirinya sendiri terus-terusan.</p> + +<pre class="brush: js example-bad">function loop(x) { + // The base case is missing + +loop(x + 1); // Recursive call +} + +loop(0); + +// InternalError: too much recursion</pre> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{Glossary("Rekursi")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Functions#Recursion">Fungsi rekursif</a></li> +</ul> diff --git a/files/id/web/javascript/reference/functions/index.html b/files/id/web/javascript/reference/functions/index.html new file mode 100644 index 0000000000..adb0d13f05 --- /dev/null +++ b/files/id/web/javascript/reference/functions/index.html @@ -0,0 +1,596 @@ +--- +title: Functions +slug: Web/JavaScript/Reference/Functions +tags: + - Constructor + - Function + - Functions + - JavaScript + - NeedsTranslation + - Parameter + - TopicStub + - parameters +translation_of: Web/JavaScript/Reference/Functions +--- +<div>{{jsSidebar("Functions")}}</div> + +<p>Generally speaking, a function is a "subprogram" that can be <em>called</em> by code external (or internal in the case of recursion) to the function. Like the program itself, a function is composed of a sequence of statements called the <em>function body</em>. Values can be <em>passed</em> to a function, and the function will <em>return</em> a value.</p> + +<p>In JavaScript, functions are first-class objects, because they can have properties and methods just like any other object. What distinguishes them from other objects is that functions can be called. In brief, they are <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function">Function</a></code> objects.</p> + +<p>For more examples and explanations, see also the <a href="/en-US/docs/Web/JavaScript/Guide/Functions">JavaScript guide about functions</a>.</p> + +<h2 id="Description">Description</h2> + +<p>Every function in JavaScript is a <code>Function</code> object. See {{jsxref("Function")}} for information on properties and methods of <code>Function</code> objects.</p> + +<p>To return a value other than the default, a function must have a <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/return">return</a></code> statement that specifies the value to return. A function without a return statement will return a default value. In the case of a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">constructor</a> called with the <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a></code> keyword, the default value is the value of its <code>this</code> parameter. For all other functions, the default return value is {{jsxref("undefined")}}.</p> + +<p>The parameters of a function call are the function's <em>arguments</em>. Arguments are passed to functions <em>by value</em>. If the function changes the value of an argument, this change is not reflected globally or in the calling function. However, object references are values, too, and they are special: if the function changes the referred object's properties, that change is visible outside the function, as shown in the following example:</p> + +<pre class="brush: js">/* Declare the function 'myFunc' */ +function myFunc(theObject) { + theObject.brand = "Toyota"; +} + +/* + * Declare variable 'mycar'; + * create and initialize a new Object; + * assign reference to it to 'mycar' + */ +var mycar = { + brand: "Honda", + model: "Accord", + year: 1998 +}; + +/* Logs 'Honda' */ +console.log(mycar.brand); + +/* Pass object reference to the function */ +myFunc(mycar); + +/* + * Logs 'Toyota' as the value of the 'brand' property + * of the object, as changed to by the function. + */ +console.log(mycar.brand); +</pre> + +<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code> keyword</a> does not refer to the currently executing function, so you must refer to <code>Function</code> objects by name, even within the function body.</p> + +<h2 id="Defining_functions">Defining functions</h2> + +<p>There are several ways to define functions:</p> + +<h3 id="The_function_declaration_(function_statement)">The function declaration (<code>function</code> statement)</h3> + +<p>There is a special syntax for declaring functions (see <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function statement</a> for details):</p> + +<pre class="syntaxbox">function <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>The function name.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument to be passed to the function.</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>The statements comprising the body of the function.</dd> +</dl> + +<h3 id="The_function_expression_(function_expression)">The function expression (<code>function</code> expression)</h3> + +<p>A function expression is similar to and has the same syntax as a function declaration (see <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">function expression</a> for details). A function expression may be a part of a larger expression. One can define "named" function expressions (where the name of the expression might be used in the call stack for example) or "anonymous" function expressions. Function expressions are not <em>hoisted</em> onto the beginning of the scope, therefore they cannot be used before they appear in the code.</p> + +<pre class="syntaxbox">function [<em>name</em>]([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>The function name. Can be omitted, in which case the function becomes known as an anonymous function.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument to be passed to the function.</dd> + <dt><code>statements</code></dt> + <dd>The statements comprising the body of the function.</dd> +</dl> + +<p>Here is an example of an <strong>anonymous</strong> function expression (the <code>name</code> is not used):</p> + +<pre class="brush: js">var myFunction = function() { + statements +}</pre> + +<p>It is also possible to provide a name inside the definition in order to create a <strong>named</strong> function expression:</p> + +<pre class="brush: js">var myFunction = function namedFunction(){ + statements +} +</pre> + +<p>One of the benefits of creating a named function expression is that in case we encountered an error, the stack trace will contain the name of the function, making it easier to find the origin of the error.</p> + +<p>As we can see, both examples do not start with the <code>function</code> keyword. Statements involving functions which do not start with <code>function</code> are function expressions.</p> + +<p>When functions are used only once, a common pattern is an <a href="/en-US/docs/Glossary/IIFE">IIFE (Immediately Invokable Function Expression)</a>.</p> + +<pre class="brush: js">(function() { + statements +})();</pre> + +<p>IIFE are function expressions that are invoked as soon as the function is declared.</p> + +<h3 id="The_generator_function_declaration_(function*_statement)">The generator function declaration (<code>function*</code> statement)</h3> + +<p>There is a special syntax for generator function declarations (see {{jsxref('Statements/function*', 'function* statement')}} for details):</p> + +<pre class="syntaxbox">function* <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>The function name.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument to be passed to the function.</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>The statements comprising the body of the function.</dd> +</dl> + +<h3 id="The_generator_function_expression_(function*_expression)">The generator function expression (<code>function*</code> expression)</h3> + +<p>A generator function expression is similar to and has the same syntax as a generator function declaration (see {{jsxref('Operators/function*', 'function* expression')}} for details):</p> + +<pre class="syntaxbox">function* [<em>name</em>]([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>The function name. Can be omitted, in which case the function becomes known as an anonymous function.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument to be passed to the function.</dd> + <dt><code>statements</code></dt> + <dd>The statements comprising the body of the function.</dd> +</dl> + +<h3 id="The_arrow_function_expression_(>)">The arrow function expression (=>)</h3> + +<p>An arrow function expression has a shorter syntax and lexically binds its <code>this</code> value (see <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a> for details):</p> + +<pre class="syntaxbox">([param[, param]]) => { + statements +} + +param => expression +</pre> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument. Zero arguments need to be indicated with <code>()</code>. For only one argument, the parentheses are not required. (like <code>foo => 1</code>)</dd> + <dt><code>statements or expression</code></dt> + <dd>Multiple statements need to be enclosed in brackets. A single expression requires no brackets. The expression is also the implicit return value of the function.</dd> +</dl> + +<h3 id="The_Function_constructor">The <code>Function</code> constructor</h3> + +<div class="note"> +<p><strong>Note:</strong> Using the <code>Function</code> constructor to create functions is not recommended since it needs the function body as a string which may prevent some JS engine optimizations and can also cause other problems.</p> +</div> + +<p>As all other objects, {{jsxref("Function")}} objects can be created using the <code>new</code> operator:</p> + +<pre class="syntaxbox">new Function (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>functionBody</em>) +</pre> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>Zero or more names to be used by the function as formal parameters. Each must be a proper JavaScript identifier.</dd> +</dl> + +<dl> + <dt><code>functionBody</code></dt> + <dd>A string containing the JavaScript statements comprising the function body.</dd> +</dl> + +<p>Invoking the <code>Function</code> constructor as a function (without using the <code>new</code> operator) has the same effect as invoking it as a constructor.</p> + +<h3 id="The_GeneratorFunction_constructor">The <code>GeneratorFunction</code> constructor</h3> + +<div class="note"> +<p><strong>Note:</strong> <code>GeneratorFunction</code> is not a global object, but could be obtained from generator function instance (see {{jsxref("GeneratorFunction")}} for more detail).</p> +</div> + +<div class="note"> +<p><strong>Note:</strong> Using the <code>GeneratorFunction</code> constructor to create functions is not recommended since it needs the function body as a string which may prevent some JS engine optimizations and can also cause other problems.</p> +</div> + +<p>As all other objects, {{jsxref("GeneratorFunction")}} objects can be created using the <code>new</code> operator:</p> + +<pre class="syntaxbox">new GeneratorFunction (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>functionBody</em>) +</pre> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>Zero or more names to be used by the function as formal argument names. Each must be a string that conforms to the rules for a valid JavaScript identifier or a list of such strings separated with a comma; for example "<code>x</code>", "<code>theValue</code>", or "<code>a,b</code>".</dd> +</dl> + +<dl> + <dt><code>functionBody</code></dt> + <dd>A string containing the JavaScript statements comprising the function definition.</dd> +</dl> + +<p>Invoking the <code>Function</code> constructor as a function (without using the <code>new</code> operator) has the same effect as invoking it as a constructor.</p> + +<h2 id="Function_parameters">Function parameters</h2> + +<h3 id="Default_parameters">Default parameters</h3> + +<p>Default function parameters allow formal parameters to be initialized with default values if no value or <code>undefined</code> is passed. For more details, see<a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters"> default parameters</a>.</p> + +<h3 id="Rest_parameters">Rest parameters</h3> + +<p>The rest parameter syntax allows representing an indefinite number of arguments as an array. For more details, see <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest parameters</a>.</p> + +<h2 id="The_arguments_object">The <code>arguments</code> object</h2> + +<p>You can refer to a function's arguments within the function by using the <code>arguments</code> object. See <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a>.</p> + +<ul> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments">arguments</a></code>: An array-like object containing the arguments passed to the currently executing function.</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/callee">arguments.callee</a></code> {{Deprecated_inline}}: The currently executing function.</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/caller">arguments.caller</a></code> {{Obsolete_inline}} : The function that invoked the currently executing function.</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/length">arguments.length</a></code>: The number of arguments passed to the function.</li> +</ul> + +<h2 id="Defining_method_functions">Defining method functions</h2> + +<h3 id="Getter_and_setter_functions">Getter and setter functions</h3> + +<p>You can define getters (accessor methods) and setters (mutator methods) on any standard built-in object or user-defined object that supports the addition of new properties. The syntax for defining getters and setters uses the object literal syntax.</p> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">get</a></dt> + <dd> + <p>Binds an object property to a function that will be called when that property is looked up.</p> + </dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">set</a></dt> + <dd>Binds an object property to a function to be called when there is an attempt to set that property.</dd> +</dl> + +<h3 id="Method_definition_syntax">Method definition syntax</h3> + +<p>Starting with ECMAScript 2015, you are able to define own methods in a shorter syntax, similar to the getters and setters. See <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definitions</a> for more information.</p> + +<pre class="brush: js">var obj = { + foo() {}, + bar() {} +};</pre> + +<h2 id="Constructor_vs._declaration_vs._expression">Constructor vs. declaration vs. expression</h2> + +<p>Compare the following:</p> + +<p>A function defined with the <code>Function</code> <em>constructor</em> assigned to the variable <code>multiply:</code></p> + +<pre class="brush: js">var multiply = new Function('x', 'y', 'return x * y');</pre> + +<p>A <em>function declaration</em> of a function named <code>multiply</code>:</p> + +<pre class="brush: js">function multiply(x, y) { + return x * y; +} // there is no semicolon here +</pre> + +<p>A <em>function expression</em> of an anonymous function assigned to the variable <code>multiply:</code></p> + +<pre class="brush: js">var multiply = function(x, y) { + return x * y; +}; +</pre> + +<p>A <em>function expression</em> of a function named <code>func_name</code> assigned to the variable <code>multiply:</code></p> + +<pre class="brush: js">var multiply = function func_name(x, y) { + return x * y; +}; +</pre> + +<h3 id="Differences">Differences</h3> + +<p>All do approximately the same thing, with a few subtle differences:</p> + +<p>There is a distinction between the function name and the variable the function is assigned to. The function name cannot be changed, while the variable the function is assigned to can be reassigned. The function name can be used only within the function's body. Attempting to use it outside the function's body results in an error (or <code>undefined</code> if the function name was previously declared via a <code>var</code> statement). For example:</p> + +<pre class="brush: js">var y = function x() {}; +alert(x); // throws an error +</pre> + +<p>The function name also appears when the function is serialized via <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/toString"><code>Function</code>'s toString method</a>.</p> + +<p>On the other hand, the variable the function is assigned to is limited only by its scope, which is guaranteed to include the scope in which the function is declared.</p> + +<p>As the 4th example shows, the function name can be different from the variable the function is assigned to. They have no relation to each other. A function declaration also creates a variable with the same name as the function name. Thus, unlike those defined by function expressions, functions defined by function declarations can be accessed by their name in the scope they were defined in:</p> + +<p>A function defined by '<code>new Function'</code> does not have a function name. However, in the <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> JavaScript engine, the serialized form of the function shows as if it has the name "anonymous". For example, <code>alert(new Function())</code> outputs:</p> + +<pre class="brush: js">function anonymous() { +} +</pre> + +<p>Since the function actually does not have a name, <code>anonymous</code> is not a variable that can be accessed within the function. For example, the following would result in an error:</p> + +<pre class="brush: js">var foo = new Function("alert(anonymous);"); +foo(); +</pre> + +<p>Unlike functions defined by function expressions or by the <code>Function</code> constructor, a function defined by a function declaration can be used before the function declaration itself. For example:</p> + +<pre class="brush: js">foo(); // alerts FOO! +function foo() { + alert('FOO!'); +} +</pre> + +<p>A function defined by a function expression or by a function declaration inherits the current scope. That is, the function forms a closure. On the other hand, a function defined by a <code>Function</code> constructor does not inherit any scope other than the global scope (which all functions inherit).</p> + +<pre class="brush: js">/* + * Declare and initialize a variable 'p' (global) + * and a function 'myFunc' (to change the scope) inside which + * declare a varible with same name 'p' (current) and + * define three functions using three different ways:- + * 1. function declaration + * 2. function expression + * 3. function constructor + * each of which will log 'p' + */ +var p = 5; +function myFunc() { + var p = 9; + + function decl() { + console.log(p); + } + var expr = function() { + console.log(p); + }; + var cons = new Function('\tconsole.log(p);'); + + decl(); + expr(); + cons(); +} +myFunc(); + +/* + * Logs:- + * 9 - for 'decl' by function declaration (current scope) + * 9 - for 'expr' by function expression (current scope) + * 5 - for 'cons' by Function constructor (global scope) + */ +</pre> + +<p>Functions defined by function expressions and function declarations are parsed only once, while those defined by the <code>Function</code> constructor are not. That is, the function body string passed to the <code>Function</code> constructor must be parsed each and every time the constructor is called. Although a function expression creates a closure every time, the function body is not reparsed, so function expressions are still faster than "<code>new Function(...)</code>". Therefore the <code>Function</code> constructor should generally be avoided whenever possible.</p> + +<p>It should be noted, however, that function expressions and function declarations nested within the function generated by parsing a <code>Function constructor</code> 's string aren't parsed repeatedly. For example:</p> + +<pre class="brush: js">var foo = (new Function("var bar = \'FOO!\';\nreturn(function() {\n\talert(bar);\n});"))(); +foo(); // The segment "function() {\n\talert(bar);\n}" of the function body string is not re-parsed.</pre> + +<p>A function declaration is very easily (and often unintentionally) turned into a function expression. A function declaration ceases to be one when it either:</p> + +<ul> + <li>becomes part of an expression</li> + <li>is no longer a "source element" of a function or the script itself. A "source element" is a non-nested statement in the script or a function body:</li> +</ul> + +<pre class="brush: js">var x = 0; // source element +if (x === 0) { // source element + x = 10; // not a source element + function boo() {} // not a source element +} +function foo() { // source element + var y = 20; // source element + function bar() {} // source element + while (y === 10) { // source element + function blah() {} // not a source element + y++; // not a source element + } +} +</pre> + +<h3 id="Examples">Examples</h3> + +<pre class="brush: js">// function declaration +function foo() {} + +// function expression +(function bar() {}) + +// function expression +x = function hello() {} + + +if (x) { + // function expression + function world() {} +} + + +// function declaration +function a() { + // function declaration + function b() {} + if (0) { + // function expression + function c() {} + } +} +</pre> + +<h2 id="Block-level_functions">Block-level functions</h2> + +<p>In <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>, starting with ES2015, functions inside blocks are now scoped to that block. Prior to ES2015, block-level functions were forbidden in strict mode.</p> + +<pre class="brush: js">'use strict'; + +function f() { + return 1; +} + +{ + function f() { + return 2; + } +} + +f() === 1; // true + +// f() === 2 in non-strict mode +</pre> + +<h3 id="Block-level_functions_in_non-strict_code">Block-level functions in non-strict code</h3> + +<p>In a word: Don't.</p> + +<p>In non-strict code, function declarations inside blocks behave strangely. For example:</p> + +<pre class="brush: js">if (shouldDefineZero) { + function zero() { // DANGER: compatibility risk + console.log("This is zero."); + } +} +</pre> + +<p>ES2015 says that if <code>shouldDefineZero</code> is false, then <code>zero</code> should never be defined, since the block never executes. However, it's a new part of the standard. Historically, this was left unspecified, and some browsers would define <code>zero</code> whether the block executed or not.</p> + +<p>In <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>, all browsers that support ES2015 handle this the same way: <code>zero</code> is defined only if <code>shouldDefineZero</code> is true, and only in the scope of the <code>if</code>-block.</p> + +<p>A safer way to define functions conditionally is to assign a function expression to a variable:</p> + +<pre class="brush: js">var zero; +if (shouldDefineZero) { + zero = function() { + console.log("This is zero."); + }; +} +</pre> + +<h2 id="Examples_2">Examples</h2> + +<h3 id="Returning_a_formatted_number">Returning a formatted number</h3> + +<p>The following function returns a string containing the formatted representation of a number padded with leading zeros.</p> + +<pre class="brush: js">// This function returns a string padded with leading zeros +function padZeros(num, totalLen) { + var numStr = num.toString(); // Initialize return value as string + var numZeros = totalLen - numStr.length; // Calculate no. of zeros + for (var i = 1; i <= numZeros; i++) { + numStr = "0" + numStr; + } + return numStr; +} +</pre> + +<p>The following statements call the padZeros function.</p> + +<pre class="brush: js">var result; +result = padZeros(42,4); // returns "0042" +result = padZeros(42,2); // returns "42" +result = padZeros(5,4); // returns "0005" +</pre> + +<h3 id="Determining_whether_a_function_exists">Determining whether a function exists</h3> + +<p>You can determine whether a function exists by using the <code>typeof</code> operator. In the following example, a test is performed to determine if the <code>window</code> object has a property called <code>noFunc</code> that is a function. If so, it is used; otherwise, some other action is taken.</p> + +<pre class="brush: js"> if ('function' === typeof window.noFunc) { + // use noFunc() + } else { + // do something else + } +</pre> + +<p>Note that in the <code>if</code> test, a reference to <code>noFunc</code> is used—there are no brackets "()" after the function name so the actual function is not called.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-13', 'Function Definition')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New: Arrow functions, Generator functions, default parameters, rest parameters.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.functions")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Statements/function", "function statement")}}</li> + <li>{{jsxref("Operators/function", "function expression")}}</li> + <li>{{jsxref("Statements/function*", "function* statement")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> + <li>{{jsxref("Functions/Arrow_functions", "Arrow functions")}}</li> + <li>{{jsxref("Functions/Default_parameters", "Default parameters")}}</li> + <li>{{jsxref("Functions/rest_parameters", "Rest parameters")}}</li> + <li>{{jsxref("Functions/arguments", "Arguments object")}}</li> + <li>{{jsxref("Functions/get", "getter")}}</li> + <li>{{jsxref("Functions/set", "setter")}}</li> + <li>{{jsxref("Functions/Method_definitions", "Method definitions")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope">Functions and function scope</a></li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/array/concat/index.html b/files/id/web/javascript/reference/global_objects/array/concat/index.html new file mode 100644 index 0000000000..c6a25609db --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/array/concat/index.html @@ -0,0 +1,169 @@ +--- +title: Array.prototype.concat() +slug: Web/JavaScript/Reference/Global_Objects/Array/concat +tags: + - Array +translation_of: Web/JavaScript/Reference/Global_Objects/Array/concat +--- +<div>{{JSRef}}</div> + +<p>Method <code><strong>concat()</strong></code> mengembalikan sebuah array baru yang terdiri dari array yang dipanggil kemudian digabung dengan array dan/atau nilai yang ditambahkan pada argumen.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>var <var>array_baru</var> = <var>array_lama</var>.concat(<var>value1</var>[, <var>value2</var>[, ...[, <var>valueN</var>]]])</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>value<em>N</em></code></dt> + <dd>Array dan/atau nilai untuk digabung menjadi array baru. Untuk detailnya lihat deskripsi dibawah.</dd> +</dl> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p><code>concat</code> menciptakan array baru yang terdiri dari unsur - unsur dalam object yang disebut, berdasarkan urutannya, setiap argumen, elemen dari argumen tersebut(Jika argumen adalah array) atau argumennya sendiri (jika argumennya bukan array).</p> + +<p><code>concat</code> tidak mengubah <code>this</code> atau beberapa array yang tersedia sebagai argumen melainkan mengembalikan shallow copy yang berisi salinan dari elemen yang sama digabung dengan array yang asli. Elemen dari array asli disalin ke array baru sebagai berikut:</p> + +<ul> + <li>Referensi Object (bukan object sebenarnya) : <code>concat</code> menyalin referensi object ke dalam array baru. Kedua array asli dan baru merujuk pada object yang sama. Artinya, jika referensi object diubah, perubahan akan terlihat pada kedua array baru dan asli.</li> + <li>Strings and numbers (bukan {{jsxref("Global_Objects/String", "String")}} dan {{jsxref("Global_Objects/Number", "Number")}} objects): <code>concat</code> menyalin nilai string dan numbers ke dalam array baru.</li> +</ul> + +<div class="note"> +<p><strong>Catatan:</strong> Concatenating array/nilai akan membiarkan aslinya tidak tersentuh. Selanjutnya, setiap operasi pada array baru tidak akan mempengaruhi array yang asli, begitupun sebaliknya.</p> +</div> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Menggabungkan_dua_Array">Menggabungkan dua Array</h3> + +<p>Berikut kode untuk menggabunggkan dua array:</p> + +<pre class="brush: js">var huruf = ['a', 'b', 'c'], + angka = [1, 2, 3]; + +var hurufAngka = huruf.concat(angka); + +console.log(hurufAngka); // Hasil: ['a', 'b', 'c', 1, 2, 3] +</pre> + +<h3 id="Menggabungkan_tiga_array">Menggabungkan tiga array</h3> + +<p>Berikut kode untuk mengabungkan tiga array:</p> + +<pre class="brush: js">var angka1 = [1, 2, 3], + angka2 = [4, 5, 6], + angka3 = [7, 8, 9]; + +var angkaBaru = angka1.concat(angka2, angka3); + +console.log(angkaBaru); // Hasil: [1, 2, 3, 4, 5, 6, 7, 8, 9] +</pre> + +<h3 id="Menggabungkan_nilai_ke_sebuah_array">Menggabungkan nilai ke sebuah array</h3> + +<p>Berikut kode untuk menggabungkan tiga nilai ke sebuah array :</p> + +<pre class="brush: js">var huruf = ['a', 'b', 'c']; + +var hurufAngka = huruf.concat(1, [2, 3]); + +console.log(hurufAngka); +// Hasil: ['a', 'b', 'c', 1, 2, 3] +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.4', 'Array.prototype.concat')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.concat', 'Array.prototype.concat')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.concat', 'Array.prototype.concat')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Browser">Kompabilitas Browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatChrome("1.0")}}</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>{{CompatIE("5.5")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li>{{jsxref("Array.push", "push")}} / {{jsxref("Array.pop", "pop")}} — menambahkan/menghapus element dari akhir array </li> + <li>{{jsxref("Array.unshift", "unshift")}} / {{jsxref("Array.shift", "shift")}} — menambahkan/menghapus element dari awal array</li> + <li>{{jsxref("Array.splice", "splice")}} — menambahkan/menghapus element dari lokasi spesifik array</li> + <li>{{jsxref("String.prototype.concat()")}}</li> + <li>{{jsxref("Symbol.isConcatSpreadable")}} – Kontrol Perataan.</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/array/filter/index.html b/files/id/web/javascript/reference/global_objects/array/filter/index.html new file mode 100644 index 0000000000..5c23313268 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/array/filter/index.html @@ -0,0 +1,244 @@ +--- +title: Array.prototype.filter() +slug: Web/JavaScript/Reference/Global_Objects/Array/filter +tags: + - Array + - ECMAScript 5 + - JavaScript + - Metode + - Referensi + - polyfill + - purwarupa +translation_of: Web/JavaScript/Reference/Global_Objects/Array/filter +--- +<div>{{JSRef}}</div> + +<p>Fungsi <code><strong>filter()</strong></code> membuat array baru berisi elemen yang lolos pengecekan di dalam fungsi anonim yang dikirim sebagai parameter.</p> + +<pre class="brush: js">var words = ["spray", "limit", "elite", "exuberant", "destruction", "present"]; + +var longWords = words.filter(function(word){ + return word.length > 6; +}); + +// Filtered array longWords is ["exuberant", "destruction", "present"] +</pre> + +<h3 id="Versi_ES6">Versi ES6</h3> + +<pre class="brush: js">const words = ["spray", "limit", "elite", "exuberant", "destruction", "present"]; + +let longWords = words.filter(word => word.length > 6); + +// Filtered array longWords is ["exuberant", "destruction", "present"] +</pre> + +<h2 id="Sintaksis">Sintaksis</h2> + +<pre class="syntaxbox"><var>var newArray = arr</var>.filter(<var>callback</var>[, <var>thisArg</var>])</pre> + +<h3 id="Parameter-parameter">Parameter-parameter</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Fungsi berupa tes untuk mengecek elemen yang ada di dalam array. Kembalikan nilai <code>true</code> untuk meloloskan element, <code>false</code> untuk tidak lolos, dan dapat memiliki tiga argumen:</dd> + <dd> + <dl> + <dt><code>element</code></dt> + <dd>Elemen saat ini yang sedang diproses.</dd> + <dt><code>index</code></dt> + <dd>Nilai indeks (posisi) dari elemen yang sedang diproses.</dd> + <dt><code>array</code></dt> + <dd>Array yang memanggil fungsi <code>filter</code>.</dd> + </dl> + </dd> + <dt><code>thisArg {{Optional_inline}}</code></dt> + <dd>Opsional. Objek yang akan digunakan sebagai <code>this</code> saat mengeksekusi <code>callback</code>.</dd> +</dl> + +<h3 id="Nilai_balikan">Nilai balikan</h3> + +<p>Array baru yang berisi elemen lolos pengecekan.</p> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p><code>filter()</code> akan memanggil fungsi <code>callback</code> sekali untuk tiap elemen di dalam array, dan membuat array baru dari semua <a href="/en-US/docs/Glossary/Truthy">nilai yang dianggap true</a> dari hasil yang dikembalikan <code>callback</code>. <code>callback</code> hanya dipanggil untuk indeks dari array yang berisi sebuah nilai; fungsi tidak akan dipanggil untuk indeks yang telah dihapus atau belum diisi nilai tertentu. Elemen array yang tidak lolos tes <code>callback</code> akan dilewati dan tidak dimasukkan ke dalam array baru.</p> + +<p><code>callback</code> dapat dipanggil dengan tiga argumen:</p> + +<ol> + <li>nilai dari elemen</li> + <li>indeks dari elemen</li> + <li>objek array yang diproses</li> +</ol> + +<p>Jika parameter <code>thisArg</code> tersedia juga saat memanggil <code>filter</code>, itu akan digunakan sebagai nilai <code>this</code> di dalam <code>callback</code>. Jika tidak disediakan, maka <code>undefined</code> yang digunakan sebagai nilai <code>this</code>. Nilai <code>this</code> yang dapat digunakan dalam <code>callback</code> ditentukan dari <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">aturan umum penentuan <code>this</code> dalam fungsi</a>.</p> + +<p><code>filter()</code> tidak mengubah array yang memanggil fungsi ini.</p> + +<p>Kumpulan elemen yang akan diproses oleh <code>filter()</code> ditentukan sebelum pemanggilan pertama <code>callback</code>. Elemen yang ditambahkan ke array setelah pemanggilan<code>filter()</code> dimulai tidak akan diproses oleh <code>callback</code>. Jika elemen yang sudah ada dalam array berubah, atau dihapus, nilai yang digunakan dalam <code>callback</code> adalah nilai pada saat <code>filter()</code> menggunakannya; elemen yang dihapus tidak akan diproses.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Menyaring_semua_nilai_kecil">Menyaring semua nilai kecil</h3> + +<p>Contoh berikut ini menggunakan <code>filter()</code> untuk membuat array yang menyaring semua nilai di bawah 10.</p> + +<pre class="brush: js">function isBigEnough(value) { + return value >= 10; +} + +var filtered = [12, 5, 8, 130, 44].filter(isBigEnough); +// filtered is [12, 130, 44] +</pre> + +<h3 id="Menyaring_entri_invalid_dari_JSON">Menyaring entri invalid dari JSON</h3> + +<p>Contoh berikut ini menggunakan <code>filter()</code> untuk membuat json tersaring berisi semua elemen <code>id</code> berupa angka bukan nol.</p> + +<pre class="brush: js">var arr = [ + { id: 15 }, + { id: -1 }, + { id: 0 }, + { id: 3 }, + { id: 12.2 }, + { }, + { id: null }, + { id: NaN }, + { id: 'undefined' } +]; + +var invalidEntries = 0; + +function isNumber(obj) { + return obj!== undefined && typeof(obj) === 'number' && !isNaN(obj); +} + +function filterByID(item) { + if (isNumber(item.id)) { + return true; + } + invalidEntries++; + return false; +} + +var arrByID = arr.filter(filterByID); + +console.log('Filtered Array\n', arrByID); +// Filtered Array +// [{ id: 15 }, { id: -1 }, { id: 0 }, { id: 3 }, { id: 12.2 }] + +console.log('Number of Invalid Entries = ', invalidEntries); +// Number of Invalid Entries = 4 +</pre> + +<h3 id="Pencarian_dalam_array">Pencarian dalam array</h3> + +<p>Contoh berikut menggunakan <code>filter()</code> untuk menyaring isi array berdasarkan kriteria pencarian</p> + +<pre class="brush: js">var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange']; + +/** + * Array filters items based on search criteria (query) + */ +function filterItems(query) { + return fruits.filter(function(el) { + return el.toLowerCase().indexOf(query.toLowerCase()) > -1; + }) +} + +console.log(filterItems('ap')); // ['apple', 'grapes'] +console.log(filterItems('an')); // ['banana', 'mango', 'orange']</pre> + +<h3 id="Implementasi_ES2015">Implementasi ES2015</h3> + +<pre class="brush: js">const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange']; + +/** + * Array filters items based on search criteria (query) + */ +const filterItems = (query) => { + return fruits.filter((el) => + el.toLowerCase().indexOf(query.toLowerCase()) > -1 + ); +} + +console.log(filterItems('ap')); // ['apple', 'grapes'] +console.log(filterItems('an')); // ['banana', 'mango', 'orange'] + +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p><code>filter()</code> ditambahkan ke standar ECMA-262 baru pada edisi ke-5; sehingga fungsi ini mungkin tidak terdapat pada semua implementasi standar. Anda dapat mengatasi hal ini dengan menambahkan kode berikut pada awalan skrip Anda, memungkinkan penggunaan <code>filter()</code> di implementasi ECMA-262 yang belum mendukung. Algoritma ini persis sepadan dengan yang dispesifikasikan dalam ECMA-262, edisi ke-5, dengan asumsi <code>fn.call</code> dievaluasi ke nilai asli dari {{jsxref("Function.prototype.bind()")}}, dan {{jsxref("Array.prototype.push()")}} memiliki nilai aslinya.</p> + +<pre class="brush: js">if (!Array.prototype.filter) + Array.prototype.filter = function(func, thisArg) { + 'use strict'; + if ( ! ((typeof func === 'Function' || typeof func === 'function') && this) ) + throw new TypeError(); + + var len = this.length >>> 0, + res = new Array(len), // preallocate array + t = this, c = 0, i = -1; + if (thisArg === undefined) + while (++i !== len) + // checks to see if the key was set + if (i in this) + if (func(t[i], i, t)) + res[c++] = t[i]; + else + while (++i !== len) + // checks to see if the key was set + if (i in this) + if (func.call(thisArg, t[i], i, t)) + res[c++] = t[i]; + + res.length = c; // shrink down array to proper size + return res; + }; +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Komentar</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.20', 'Array.prototype.filter')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.prototype.filter', 'Array.prototype.filter')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.filter', 'Array.prototype.filter')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatibilitas_browser">Kompatibilitas browser</h2> + +<div> +<div class="hidden">Tabel kompatibilitas di laman ini dihasilkan dari struktur data. Jika Anda tertarik berkontribusi di dalamnya, silakan <em>check out</em> <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> dan kirim kami <em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.Array.filter")}}</p> +</div> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li>{{jsxref("Array.prototype.reduce()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/array/from/index.html b/files/id/web/javascript/reference/global_objects/array/from/index.html new file mode 100644 index 0000000000..7845da9755 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/array/from/index.html @@ -0,0 +1,248 @@ +--- +title: Array.from() +slug: Web/JavaScript/Reference/Global_Objects/Array/from +translation_of: Web/JavaScript/Reference/Global_Objects/Array/from +--- +<div>{{JSRef}}</div> + +<p>Method <code><strong>Array.from()</strong></code> membuat sebuah instansi <code>Array</code> dari sebuah array-like atau objek iterable.</p> + +<p>Di ES6, sintaks class memungkinkan untuk subclassing diantaranya built-in dan user defined classes; hasilnya , method statik class-side seperti <code><strong>Array.from</strong></code> "diwariskan" oleh subclasses dari <code><strong>Array</strong></code> dan membuat instansi baru dari subclass, bukan <code><strong>Array</strong></code>.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><code>Array.from(arrayLike[, mapFn[, thisArg]]) +</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>arrayLike</code></dt> + <dd> Array-like atau objek iterable untuk diubah menjadi array.</dd> + <dt><code>mapFn</code></dt> + <dd>Opsional. Fungsi Map untuk memanggil setiap elemen array.</dd> + <dt><code>thisArg</code></dt> + <dd>Opsional. Nilai untuk digunakan <code>this</code> ketika mengeksekusi <code>mapFn</code>.</dd> +</dl> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p><code>Array.from()</code> memungkinkan anda membuat <code>Arrays</code> dari:</p> + +<ul> + <li>Objek array-like (objek dengan peoperti <code>length</code> dan elemen yang diindex) atau</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/iterable">Objek iterable</a> (objek dimana anda bisa mengambil elemen, seperti {{jsxref("Map")}} dan {{jsxref("Set")}}).</li> +</ul> + +<p><code>Array.from()</code> memiliki parameter opsional <code>mapFn</code>, yang memungkinkan anda untuk mengeksekusi fungsi {{jsxref("Array.prototype.map", "map")}} pada setiap elemen array (atau objek subclass) yang akan dibuat. Jelasnya,<code> Array.from(obj, mapFn, thisArg)</code> sama dengan <code>Array.from(obj).map(mapFn, thisArg)</code>, kecuali dengan tidak membuat array menengah. Ini sangat penting untuk setiap subclass array, seperti <a href="/en-US/docs/Web/JavaScript/Typed_arrays">typed arrays</a>, selama array menengah akan memiliki nilai yang terpisah agar bisa masuk ke tipe yang sesuai.</p> + +<p>Properti <code>length</code> dari method <code>from()</code> adalah 1.</p> + +<h2 id="Contoh">Contoh</h2> + +<pre class="brush: js">// Array-like object (arguments) to Array +function f() { + return Array.from(arguments); +} + +f(1, 2, 3); +// [1, 2, 3] + + +// Any iterable object... +// Set +var s = new Set(["foo", window]); +Array.from(s); +// ["foo", window] + + +// Map +var m = new Map([[1, 2], [2, 4], [4, 8]]); +Array.from(m); +// [[1, 2], [2, 4], [4, 8]] + + +// String +Array.from("foo"); +// ["f", "o", "o"] + + +// Using an arrow function as the map function to +// manipulate the elements +Array.from([1, 2, 3], x => x + x); +// [2, 4, 6] + + +// Generate a sequence of numbers +Array.from({length: 5}, (v, k) => k); +// [0, 1, 2, 3, 4] + +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p><code>Array.from</code> telah di masukkan di standar ECMA-262 pada edisi ke-6; karena itu mungkin tidak bisa digunakan pada implementasi standar lain. Anda bisa menyiasatinya dengan menambahkan kode berikut ke awal script, memungkinkan penggunaan <code>Array.from</code> pada implementasi yang aslinya tidak mendukung. Algoritma ini sama dengan yang di spesifikasikan di ECMA-262, edisi ke-6, dengan saumsi <code>Object</code> dan <code>TypeError</code> memiliki nilai tersendiri dan <code>callback.call</code> mengevaluasi nilai valur dari {{jsxref("Function.prototype.call")}}. Selain itu, sejak iterable tidak dapat di polyfill, implementasi ini tidak mendukung generik iterable seperti yang didefinisikan di edisi ke-6 di ECMA-262.</p> + +<pre class="brush: js">// Production steps of ECMA-262, Edition 6, 22.1.2.1 +// Reference: https://people.mozilla.org/~jorendorff/es6-draft.html#sec-array.from +if (!Array.from) { + Array.from = (function () { + var toStr = Object.prototype.toString; + var isCallable = function (fn) { + return typeof fn === 'function' || toStr.call(fn) === '[object Function]'; + }; + var toInteger = function (value) { + var number = Number(value); + if (isNaN(number)) { return 0; } + if (number === 0 || !isFinite(number)) { return number; } + return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number)); + }; + var maxSafeInteger = Math.pow(2, 53) - 1; + var toLength = function (value) { + var len = toInteger(value); + return Math.min(Math.max(len, 0), maxSafeInteger); + }; + + // The length property of the from method is 1. + return function from(arrayLike/*, mapFn, thisArg */) { + // 1. Let C be the this value. + var C = this; + + // 2. Let items be ToObject(arrayLike). + var items = Object(arrayLike); + + // 3. ReturnIfAbrupt(items). + if (arrayLike == null) { + throw new TypeError("Array.from requires an array-like object - not null or undefined"); + } + + // 4. If mapfn is undefined, then let mapping be false. + var mapFn = arguments.length > 1 ? arguments[1] : void undefined; + var T; + if (typeof mapFn !== 'undefined') { + // 5. else + // 5. a If IsCallable(mapfn) is false, throw a TypeError exception. + if (!isCallable(mapFn)) { + throw new TypeError('Array.from: when provided, the second argument must be a function'); + } + + // 5. b. If thisArg was supplied, let T be thisArg; else let T be undefined. + if (arguments.length > 2) { + T = arguments[2]; + } + } + + // 10. Let lenValue be Get(items, "length"). + // 11. Let len be ToLength(lenValue). + var len = toLength(items.length); + + // 13. If IsConstructor(C) is true, then + // 13. a. Let A be the result of calling the [[Construct]] internal method of C with an argument list containing the single item len. + // 14. a. Else, Let A be ArrayCreate(len). + var A = isCallable(C) ? Object(new C(len)) : new Array(len); + + // 16. Let k be 0. + var k = 0; + // 17. Repeat, while k < len… (also steps a - h) + var kValue; + while (k < len) { + kValue = items[k]; + if (mapFn) { + A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k); + } else { + A[k] = kValue; + } + k += 1; + } + // 18. Let putStatus be Put(A, "length", len, true). + A.length = len; + // 20. Return A. + return A; + }; + }()); +} +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.from', 'Array.from')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.from', 'Array.from')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Browser">Kompabilitas Browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Edge</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatChrome("45")}}</td> + <td>{{CompatGeckoDesktop("32")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>9.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("32")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Array.prototype.map()")}}</li> + <li>{{jsxref("TypedArray.from()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/array/index.html b/files/id/web/javascript/reference/global_objects/array/index.html new file mode 100644 index 0000000000..2b052487c4 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/array/index.html @@ -0,0 +1,484 @@ +--- +title: Array +slug: Web/JavaScript/Reference/Global_Objects/Array +tags: + - Array + - Global Objects + - JavaScript + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/Array +--- +<div>{{JSRef}}</div> + +<p>Objek JavaScript <strong><code>Array</code></strong> merupakan objek global yang berguna membangun himpunan; dimana merupakan objek level tinggi dan (seperti) daftar.</p> + +<p><strong>Membuat sebuah Array</strong></p> + +<pre class="brush: js">var fruits = ["Apple", "Banana"]; + +console.log(fruits.length); +// 2 +</pre> + +<p><strong>Akses (index) kedalam sebuah item Array</strong></p> + +<pre class="brush: js">var first = fruits[0]; +// Apple + +var last = fruits[fruits.length - 1]; +// Banana +</pre> + +<p><strong>Perulangan pada Array</strong></p> + +<pre class="brush: js">fruits.forEach(function (item, index, array) { + console.log(item, index); +}); +// Apple 0 +// Banana 1 +</pre> + +<p><strong>Menambahkan elemen pada bagian akhir sebuah Array</strong></p> + +<pre class="brush: js">var newLength = fruits.push("Orange"); +// ["Apple", "Banana", "Orange"] +</pre> + +<p><strong>Menghapus elemen di akhir sebuah Array</strong></p> + +<pre class="brush: js">var last = fruits.pop(); // remove Orange (from the end) +// ["Apple", "Banana"]; +</pre> + +<p><strong>Menghapus elemen di awal sebuah Array</strong></p> + +<pre class="brush: js">var first = fruits.shift(); // remove Apple from the front +// ["Banana"]; +</pre> + +<p><strong>Menambahkan elemen di bagian awal sebuah Array</strong></p> + +<pre class="brush: js">var newLength = fruits.unshift("Strawberry") // add to the front +// ["Strawberry", "Banana"]; +</pre> + +<p><strong>Mencari (nomor) index elemen pada sebuah Array</strong></p> + +<pre class="brush: js">fruits.push("Mango"); +// ["Strawberry", "Banana", "Mango"] + +var pos = fruits.indexOf("Banana"); +// 1 +</pre> + +<p><strong>Menghapus elemen berdasar posisi index</strong></p> + +<pre class="brush: js">var removedItem = fruits.splice(pos, 1); // this is how to remove an item +// ["Strawberry", "Mango"] +</pre> + +<p><strong>Menduplikat sebuah Array</strong></p> + +<pre class="brush: js">var shallowCopy = fruits.slice(); // this is how to make a copy +// ["Strawberry", "Mango"] +</pre> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>[<var>element0</var>, <var>element1</var>, ..., <var>elementN</var>] +new Array(<var>element0</var>, <var>element1</var>[, ...[, <var>elementN</var>]]) +new Array(<var>arrayLength</var>)</code></pre> + +<dl> + <dt><code>element<em>N</em></code></dt> + <dd>A JavaScript array is initialized with the given elements, except in the case where a single argument is passed to the <code>Array</code> constructor and that argument is a number (see the arrayLength parameter below).Note that this special case only applies to JavaScript arrays created with the <code>Array</code> constructor, not array literals created with the bracket syntax.</dd> + <dt><code>arrayLength</code></dt> + <dd>If the only argument passed to the <code>Array</code> constructor is an integer between 0 and 2<sup>32</sup>-1 (inclusive), this returns a new JavaScript array with length set to that number. If the argument is any other number, a {{jsxref("RangeError")}} exception is thrown.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>Arrays are list-like objects whose prototype has methods to perform traversal and mutation operations. Neither the length of a JavaScript array nor the types of its elements are fixed. Since an array's length can change at any time, and data can be stored at non-contiguous locations in the array, JavaScript arrays are not guaranteed to be dense; this depends on how the programmer chooses to use them. In general, these are convenient characteristics; but if these features are not desirable for your particular use, you might consider using typed arrays.</p> + +<p>Some people think that <a class="external" href="http://www.andrewdupont.net/2006/05/18/javascript-associative-arrays-considered-harmful/">you shouldn't use an array as an associative array</a>. In any case, you can use plain {{jsxref("Global_Objects/Object", "objects")}} instead, although doing so comes with its own caveats. See the post <a class="external" href="http://www.less-broken.com/blog/2010/12/lightweight-javascript-dictionaries.html">Lightweight JavaScript dictionaries with arbitrary keys</a> as an example.</p> + +<h3 id="Accessing_array_elements">Accessing array elements</h3> + +<p>JavaScript arrays are zero-indexed: the first element of an array is at index <code>0</code>, and the last element is at the index equal to the value of the array's {{jsxref("Array.length", "length")}} property minus 1.</p> + +<pre class="brush: js">var arr = ['this is the first element', 'this is the second element']; +console.log(arr[0]); // logs 'this is the first element' +console.log(arr[1]); // logs 'this is the second element' +console.log(arr[arr.length - 1]); // logs 'this is the second element' +</pre> + +<p>Array elements are object properties in the same way that <code>toString</code> is a property, but trying to access an element of an array as follows throws a syntax error, because the property name is not valid:</p> + +<pre class="brush: js">console.log(arr.0); // a syntax error +</pre> + +<p>There is nothing special about JavaScript arrays and the properties that cause this. JavaScript properties that begin with a digit cannot be referenced with dot notation; and must be accessed using bracket notation. For example, if you had an object with a property named <code>'3d'</code>, it can only be referenced using bracket notation. E.g.:</p> + +<pre class="brush: js">var years = [1950, 1960, 1970, 1980, 1990, 2000, 2010]; +console.log(years.0); // a syntax error +console.log(years[0]); // works properly +</pre> + +<pre class="brush: js">renderer.3d.setTexture(model, 'character.png'); // a syntax error +renderer['3d'].setTexture(model, 'character.png'); // works properly +</pre> + +<p>Note that in the <code>3d</code> example, <code>'3d'</code> had to be quoted. It's possible to quote the JavaScript array indexes as well (e.g., <code>years['2']</code> instead of <code>years[2]</code>), although it's not necessary. The 2 in <code>years[2]</code> is coerced into a string by the JavaScript engine through an implicit <code>toString</code> conversion. It is for this reason that <code>'2'</code> and <code>'02'</code> would refer to two different slots on the <code>years</code> object and the following example could be <code>true</code>:</p> + +<pre class="brush: js">console.log(years['2'] != years['02']); +</pre> + +<p>Similarly, object properties which happen to be reserved words(!) can only be accessed as string literals in bracket notation(but it can be accessed by dot notation in firefox 40.0a2 at least):</p> + +<pre class="brush: js">var promise = { + 'var' : 'text', + 'array': [1, 2, 3, 4] +}; + +console.log(promise['array']); +</pre> + +<h3 id="Relationship_between_length_and_numerical_properties">Relationship between <code>length</code> and numerical properties</h3> + +<p>A JavaScript array's {{jsxref("Array.length", "length")}} property and numerical properties are connected. Several of the built-in array methods (e.g., {{jsxref("Array.join", "join")}}, {{jsxref("Array.slice", "slice")}}, {{jsxref("Array.indexOf", "indexOf")}}, etc.) take into account the value of an array's {{jsxref("Array.length", "length")}} property when they're called. Other methods (e.g., {{jsxref("Array.push", "push")}}, {{jsxref("Array.splice", "splice")}}, etc.) also result in updates to an array's {{jsxref("Array.length", "length")}} property.</p> + +<pre class="brush: js">var fruits = []; +fruits.push('banana', 'apple', 'peach'); + +console.log(fruits.length); // 3 +</pre> + +<p>When setting a property on a JavaScript array when the property is a valid array index and that index is outside the current bounds of the array, the engine will update the array's {{jsxref("Array.length", "length")}} property accordingly:</p> + +<pre class="brush: js">fruits[5] = 'mango'; +console.log(fruits[5]); // 'mango' +console.log(Object.keys(fruits)); // ['0', '1', '2', '5'] +console.log(fruits.length); // 6 +</pre> + +<p>Increasing the {{jsxref("Array.length", "length")}}.</p> + +<pre class="brush: js">fruits.length = 10; +console.log(Object.keys(fruits)); // ['0', '1', '2', '5'] +console.log(fruits.length); // 10 +</pre> + +<p>Decreasing the {{jsxref("Array.length", "length")}} property does, however, delete elements.</p> + +<pre class="brush: js">fruits.length = 2; +console.log(Object.keys(fruits)); // ['0', '1'] +console.log(fruits.length); // 2 +</pre> + +<p>This is explained further on the {{jsxref("Array.length")}} page.</p> + +<h3 id="Creating_an_array_using_the_result_of_a_match">Creating an array using the result of a match</h3> + +<p>The result of a match between a regular expression and a string can create a JavaScript array. This array has properties and elements which provide information about the match. Such an array is returned by {{jsxref("RegExp.exec")}}, {{jsxref("String.match")}}, and {{jsxref("String.replace")}}. To help explain these properties and elements, look at the following example and then refer to the table below:</p> + +<pre class="brush: js">// Match one d followed by one or more b's followed by one d +// Remember matched b's and the following d +// Ignore case + +var myRe = /d(b+)(d)/i; +var myArray = myRe.exec('cdbBdbsbz'); +</pre> + +<p>The properties and elements returned from this match are as follows:</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td class="header">Property/Element</td> + <td class="header">Description</td> + <td class="header">Example</td> + </tr> + <tr> + <td><code>input</code></td> + <td>A read-only property that reflects the original string against which the regular expression was matched.</td> + <td>cdbBdbsbz</td> + </tr> + <tr> + <td><code>index</code></td> + <td>A read-only property that is the zero-based index of the match in the string.</td> + <td>1</td> + </tr> + <tr> + <td><code>[0]</code></td> + <td>A read-only element that specifies the last matched characters.</td> + <td>dbBd</td> + </tr> + <tr> + <td><code>[1], ...[n]</code></td> + <td>Read-only elements that specify the parenthesized substring matches, if included in the regular expression. The number of possible parenthesized substrings is unlimited.</td> + <td>[1]: bB<br> + [2]: d</td> + </tr> + </tbody> +</table> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt><code>Array.length</code></dt> + <dd>The <code>Array</code> constructor's length property whose value is 1.</dd> + <dt>{{jsxref("Array.@@species", "get Array[@@species]")}}</dt> + <dd>The constructor function that is used to create derived objects.</dd> + <dt>{{jsxref("Array.prototype")}}</dt> + <dd>Allows the addition of properties to all array objects.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{jsxref("Array.from()")}}</dt> + <dd>Creates a new <code>Array</code> instance from an array-like or iterable object.</dd> + <dt>{{jsxref("Array.isArray()")}}</dt> + <dd>Returns true if a variable is an array, if not false.</dd> + <dt>{{jsxref("Array.of()")}}</dt> + <dd>Creates a new <code>Array</code> instance with a variable number of arguments, regardless of number or type of the arguments.</dd> +</dl> + +<h2 id="Array_instances"><code>Array</code> instances</h2> + +<p>All <code>Array</code> instances inherit from {{jsxref("Array.prototype")}}. The prototype object of the <code>Array</code> constructor can be modified to affect all <code>Array</code> instances.</p> + +<h3 id="Properties_2">Properties</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Properties')}}</div> + +<h3 id="Methods_2">Methods</h3> + +<h4 id="Mutator_methods">Mutator methods</h4> + +<div>{{page('en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Mutator_methods')}}</div> + +<h4 id="Accessor_methods">Accessor methods</h4> + +<div>{{page('en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Accessor_methods')}}</div> + +<h4 id="Iteration_methods">Iteration methods</h4> + +<div>{{page('en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Iteration_methods')}}</div> + +<h2 id="Array_generic_methods"><code>Array</code> generic methods</h2> + +<div class="warning"> +<p><strong>Array generics are non-standard, deprecated and will get removed near future</strong>. Note that you can not rely on them cross-browser. However, there is a <a href="https://github.com/plusdude/array-generics">shim available on GitHub</a>.</p> +</div> + +<p>Sometimes you would like to apply array methods to strings or other array-like objects (such as function {{jsxref("Functions/arguments", "arguments", "", 1)}}). By doing this, you treat a string as an array of characters (or otherwise treat a non-array as an array). For example, in order to check that every character in the variable <var>str</var> is a letter, you would write:</p> + +<pre class="brush: js">function isLetter(character) { + return character >= 'a' && character <= 'z'; +} + +if (Array.prototype.every.call(str, isLetter)) { + console.log("The string '" + str + "' contains only letters!"); +} +</pre> + +<p>This notation is rather wasteful and JavaScript 1.6 introduced a generic shorthand:</p> + +<pre class="brush: js">if (Array.every(str, isLetter)) { + console.log("The string '" + str + "' contains only letters!"); +} +</pre> + +<p>{{jsxref("Global_Objects/String", "Generics", "#String_generic_methods", 1)}} are also available on {{jsxref("String")}}.</p> + +<p>These are <strong>not</strong> part of ECMAScript standards (though the ES6 {{jsxref("Array.from()")}} can be used to achieve this). The following is a shim to allow its use in all browsers:</p> + +<pre class="brush: js">// Assumes Array extras already present (one may use polyfills for these as well) +(function() { + 'use strict'; + + var i, + // We could also build the array of methods with the following, but the + // getOwnPropertyNames() method is non-shimable: + // Object.getOwnPropertyNames(Array).filter(function(methodName) { + // return typeof Array[methodName] === 'function' + // }); + methods = [ + 'join', 'reverse', 'sort', 'push', 'pop', 'shift', 'unshift', + 'splice', 'concat', 'slice', 'indexOf', 'lastIndexOf', + 'forEach', 'map', 'reduce', 'reduceRight', 'filter', + 'some', 'every', 'find', 'findIndex', 'entries', 'keys', + 'values', 'copyWithin', 'includes' + ], + methodCount = methods.length, + assignArrayGeneric = function(methodName) { + if (!Array[methodName]) { + var method = Array.prototype[methodName]; + if (typeof method === 'function') { + Array[methodName] = function() { + return method.call.apply(method, arguments); + }; + } + } + }; + + for (i = 0; i < methodCount; i++) { + assignArrayGeneric(methods[i]); + } +}()); +</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="Creating_an_array">Creating an array</h3> + +<p>The following example creates an array, <code>msgArray</code>, with a length of 0, then assigns values to <code>msgArray[0]</code> and <code>msgArray[99]</code>, changing the length of the array to 100.</p> + +<pre class="brush: js">var msgArray = []; +msgArray[0] = 'Hello'; +msgArray[99] = 'world'; + +if (msgArray.length === 100) { + console.log('The length is 100.'); +} +</pre> + +<h3 id="Creating_a_two-dimensional_array">Creating a two-dimensional array</h3> + +<p>The following creates a chess board as a two dimensional array of strings. The first move is made by copying the 'p' in (6,4) to (4,4). The old position (6,4) is made blank.</p> + +<pre class="brush: js">var board = [ + ['R','N','B','Q','K','B','N','R'], + ['P','P','P','P','P','P','P','P'], + [' ',' ',' ',' ',' ',' ',' ',' '], + [' ',' ',' ',' ',' ',' ',' ',' '], + [' ',' ',' ',' ',' ',' ',' ',' '], + [' ',' ',' ',' ',' ',' ',' ',' '], + ['p','p','p','p','p','p','p','p'], + ['r','n','b','q','k','b','n','r'] ]; + +console.log(board.join('\n') + '\n\n'); + +// Move King's Pawn forward 2 +board[4][4] = board[6][4]; +board[6][4] = ' '; +console.log(board.join('\n')); +</pre> + +<p>Here is the output:</p> + +<pre class="eval">R,N,B,Q,K,B,N,R +P,P,P,P,P,P,P,P + , , , , , , , + , , , , , , , + , , , , , , , + , , , , , , , +p,p,p,p,p,p,p,p +r,n,b,q,k,b,n,r + +R,N,B,Q,K,B,N,R +P,P,P,P,P,P,P,P + , , , , , , , + , , , , , , , + , , , ,p, , , + , , , , , , , +p,p,p,p, ,p,p,p +r,n,b,q,k,b,n,r +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4', 'Array')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>New methods added: {{jsxref("Array.isArray")}}, {{jsxref("Array.prototype.indexOf", "indexOf")}}, {{jsxref("Array.prototype.lastIndexOf", "lastIndexOf")}}, {{jsxref("Array.prototype.every", "every")}}, {{jsxref("Array.prototype.some", "some")}}, {{jsxref("Array.prototype.forEach", "forEach")}}, {{jsxref("Array.prototype.map", "map")}}, {{jsxref("Array.prototype.filter", "filter")}}, {{jsxref("Array.prototype.reduce", "reduce")}}, {{jsxref("Array.prototype.reduceRight", "reduceRight")}}</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array-objects', 'Array')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New methods added: {{jsxref("Array.from")}}, {{jsxref("Array.of")}}, {{jsxref("Array.prototype.find", "find")}}, {{jsxref("Array.prototype.findIndex", "findIndex")}}, {{jsxref("Array.prototype.fill", "fill")}}, {{jsxref("Array.prototype.copyWithin", "copyWithin")}}</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array-objects', 'Array')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>New method added: {{jsxref("Array.prototype.includes()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Indexing_object_properties">JavaScript Guide: “Indexing object properties”</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Predefined_Core_Objects#Array_Object">JavaScript Guide: “Predefined Core Objects: <code>Array</code> Object”</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Array_comprehensions">Array comprehensions</a></li> + <li><a href="https://github.com/plusdude/array-generics">Polyfill for JavaScript 1.8.5 Array Generics and ECMAScript 5 Array Extras</a></li> + <li><a href="/en-US/docs/JavaScript_typed_arrays">Typed Arrays</a></li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/array/isarray/index.html b/files/id/web/javascript/reference/global_objects/array/isarray/index.html new file mode 100644 index 0000000000..152b6cdfd0 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/array/isarray/index.html @@ -0,0 +1,144 @@ +--- +title: Array.isArray() +slug: Web/JavaScript/Reference/Global_Objects/Array/isArray +tags: + - Array + - ECMAScript5 + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/isArray +--- +<div>{{JSRef}}</div> + +<p>Method <code><strong>Array.isArray()</strong></code> mengembalikan nilai <code>true</code> jika objek adalah array, <code>false</code> jika bukan.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><code>Array.isArray(<var>obj</var>)</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>Objek yang di cek.</dd> +</dl> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Baca artikel <a href="http://web.mit.edu/jwalden/www/isArray.html">“Determining with absolute accuracy whether or not a JavaScript object is an array”</a> untuk detailnya.</p> + +<h2 id="Contoh">Contoh</h2> + +<pre class="brush: js">// semuanya mengembalikan nilai true +Array.isArray([]); +Array.isArray([1]); +Array.isArray(new Array()); +// Sekedar fakta : Array.prototype sendiri adalah array: +Array.isArray(Array.prototype); + +// semua mengembalikan nilai false +Array.isArray(); +Array.isArray({}); +Array.isArray(null); +Array.isArray(undefined); +Array.isArray(17); +Array.isArray('Array'); +Array.isArray(true); +Array.isArray(false); +Array.isArray({ __proto__: Array.prototype }); +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Jalankan kode berikut sebelum kode lain untuk membuat method <code>Array.isArray()</code> jika secara native tidak tersedia.</p> + +<pre class="brush: js">if (!Array.isArray) { + Array.isArray = function(arg) { + return Object.prototype.toString.call(arg) === '[object Array]'; + }; +} +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.3.2', 'Array.isArray')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.isarray', 'Array.isArray')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.isarray', 'Array.isArray')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Browser">Kompabilitas Browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("5")}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatOpera("10.5")}}</td> + <td>{{CompatSafari("5")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li>{{jsxref("Array")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/array/join/index.html b/files/id/web/javascript/reference/global_objects/array/join/index.html new file mode 100644 index 0000000000..8ddd3bb8ed --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/array/join/index.html @@ -0,0 +1,132 @@ +--- +title: Array.prototype.join() +slug: Web/JavaScript/Reference/Global_Objects/Array/join +tags: + - Array + - Method + - Referensi +translation_of: Web/JavaScript/Reference/Global_Objects/Array/join +--- +<div>{{JSRef}}</div> + +<p>Method <code><strong>join()</strong></code> menggabungkan semua elemen dari sebuah array menjadi sebuah string.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>str</var> = <var>arr</var>.join([<var>separator</var> = ','])</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>separator</code></dt> + <dd>Opsional. Menentukan string untuk memisahkan setiap elemen array. separator dapat di konersi ke string jika diperlukan. Jika dihilangkan, elemen array akan dipisahkan dengan koma, jika separator adalah string kosong, semua elemen digabungkan tanpa karakter pemisah.</dd> +</dl> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>mengonversi string dari semua elemen array dengan menggabungkannya menjadi sebuah string. Jika elemen bernilai <code>undefined</code> atau <code>null</code>, akan dikonversi menjadi string kosong.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Penggabungan_array_menggunakan_empat_cara_yang_berbeda">Penggabungan array menggunakan empat cara yang berbeda</h3> + +<p>Berikut merupakan contoh membuat array, dengan tiga elemen, kemudian menggabungkan array dengan empa cara berbeda : menggunakan separator default, koma dan spasi, plus dan string kosong.</p> + +<pre class="brush: js">var a = ['Angin', 'Air', 'Api']; +var variabel1 = a.join(); // Memberikan nilai 'Angin,Air,Api' pada variabel1 +var variabel2 = a.join(', '); // Memberikan nilai 'Angin, Air, Api' pada variabel2 +var variabel3 = a.join(' + '); // Memberikan nilai 'Angin + Air + Api' pada variabel3 +var variabel4 = a.join(''); // Memberikan nilai 'AnginAirApi' pada variabel4 +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.5', 'Array.prototype.join')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.join', 'Array.prototype.join')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.join', 'Array.prototype.join')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_browser">Kompabilitas browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Dukungan Dasar</td> + <td>{{CompatChrome("1.0")}}</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>{{CompatIE("5.5")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Dukungan Dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("String.prototype.split()")}}</li> + <li>{{jsxref("Array.prototype.toString()")}}</li> + <li>{{jsxref("TypedArray.prototype.join()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/array/length/index.html b/files/id/web/javascript/reference/global_objects/array/length/index.html new file mode 100644 index 0000000000..6e8e9e3ae8 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/array/length/index.html @@ -0,0 +1,145 @@ +--- +title: Array.length +slug: Web/JavaScript/Reference/Global_Objects/Array/length +tags: + - Array + - JavaScript + - Property + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/length +--- +<div>{{JSRef}}</div> + +<p>Properti array <code><strong>length</strong></code> merangkai atau mengembalikan angka dari sejumlah elemen pada array. berupa unsigned, 32-bit integer yang selalu lebih besar dari indeks array terbesar atau index array terakhir.</p> + +<pre class="brush: js">var items = ["sepatu", "kaos", "baju", "sweater"]; +items.length; + +// index terakhir "sweater" 3 +// returns 4</pre> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Nilai properti <code>length</code> berupa integer positif dan nilainya lebih kecil dari 2 sampai 2 pangkat 32 (2<sup>32</sup>).</p> + +<p>Anda bisa merangkai properti <code>length</code> untuk memotong array kapanpun. Ketika anda memperpanjang array dengan mengubah properti <code>length</code>, nomor dari elemen sebenarnya tidak bertambah; contoh, jika anda merangkai <code>length</code> ke 3 ketika saat ini adalah 2, array tetap berisi 2 element. Dengan begitu, properti <code>length</code> tidak selalu menunjukkan jumlah angka dari nilai yang didefinisikan pada array. Lihat juga <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#Relationship_between_length_and_numerical_properties" title="Relationship between length and numerical properties">Hubungan antara <code>length</code> dan properti numerik</a>.</p> + +<p>{{js_property_attributes(1, 0, 0)}}</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Iterasi_pada_array">Iterasi pada array</h3> + +<p>Pada contoh, <code>numbers</code> array diiterasikan melalui nilai properti array <code>length</code>. Nilai setiap elemen kemudian dikalikan.</p> + +<pre class="brush: js">var numbers = [1, 2, 3, 4, 5]; +var length = numbers.length; +for (var i = 0; i < length; i++) { + numbers[i] *= 2; +} +// numbers is now [2, 4, 6, 8, 10] +</pre> + +<h3 id="Memendekan_array">Memendekan array</h3> + +<p>Pada contoh memendekkan array <code>numbers</code> ke panjang array 3 jika panjang array sebenarnya lebih besar dari 3.</p> + +<pre class="brush: js">var numbers = [1,2,3,4,5]; + +if (numbers.length > 3) { + numbers.length = 3; +} + +console.log(numbers); // [1, 2, 3] +console.log(numbers.length); // 3 +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.5.2', 'Array.length')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-properties-of-array-instances-length', 'Array.length')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-properties-of-array-instances-length', 'Array.length')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Browser">Kompabilitas Browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("Array")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/array/of/index.html b/files/id/web/javascript/reference/global_objects/array/of/index.html new file mode 100644 index 0000000000..49ca553133 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/array/of/index.html @@ -0,0 +1,129 @@ +--- +title: Array.of() +slug: Web/JavaScript/Reference/Global_Objects/Array/of +tags: + - Array + - JavaScript + - Method +translation_of: Web/JavaScript/Reference/Global_Objects/Array/of +--- +<div>{{JSRef}}</div> + +<p>Method <code><strong>Array.of()</strong></code> membuat instansi <code>Array</code> baru denganjumlah variabel argumen.</p> + +<p>Perbedaan antara <code><strong>Array.of()</strong></code> dan konstruktor <code><strong>Array</strong></code> pada penanganan argumen integer: <code><strong>Array.of(42)</strong></code> membuat sebuah array dengan sebuah elemen, <code>42</code>, sedang <code><strong>Array(42)</strong></code> membuat array dengan 42 element, yang masing - masing <code>undefined</code>.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><code>Array.of(<var>element0</var>[, <var>element1</var>[, ...[, <var>elementN</var>]]])</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>element<em>N</em></code></dt> + <dd>Element yang digunakan untuk membuat array.</dd> +</dl> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Fungsi ini merupakan bagian dari ECMAScript 6 standard. Untuk informasi lengkap lihat <a href="https://gist.github.com/rwaldron/1074126"><code>Array.of</code> and <code>Array.from</code> proposal</a> dan <a href="https://gist.github.com/rwaldron/3186576"><code>Array.of</code> polyfill</a>.</p> + +<h2 id="Contoh">Contoh</h2> + +<pre class="brush: js">Array.of(1); // [1] +Array.of(1, 2, 3); // [1, 2, 3] +Array.of(undefined); // [undefined] +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Menjalankan kode berikut sebelum kode lain membuat <code>Array.of()</code> jika secara native tidak tersedia.</p> + +<pre class="brush: js">if (!Array.of) { + Array.of = function() { + return Array.prototype.slice.call(arguments); + }; +} +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.of', 'Array.of')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.of', 'Array.of')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_browser">Kompabilitas browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(45)}}</td> + <td>{{CompatGeckoDesktop("25")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(39)}}</td> + <td>{{CompatGeckoMobile("25")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Array.from()")}}</li> + <li>{{jsxref("TypedArray.of()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/array/pop/index.html b/files/id/web/javascript/reference/global_objects/array/pop/index.html new file mode 100644 index 0000000000..f8dc9f0523 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/array/pop/index.html @@ -0,0 +1,134 @@ +--- +title: Array.prototype.pop() +slug: Web/JavaScript/Reference/Global_Objects/Array/pop +tags: + - Array + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Array/pop +--- +<div>{{JSRef}}</div> + +<p>Method <code><strong>pop()</strong></code> menghapus elemen <strong>terakhir</strong> dari array dan mengembalikan elemen tersebut.</p> + +<h2 id="Syntaks">Syntaks</h2> + +<pre class="syntaxbox"><code><var>arr</var>.pop()</code></pre> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Method <code>pop</code> menghapus elemen terakhir pada array dan mengembalikan nilai ke pemanggil.</p> + +<p><code>pop</code> adalah desain generic; method ini dapat berupa {{jsxref("Function.call", "called", "", 1)}} atau {{jsxref("Function.apply", "applied", "", 1)}} ke objek yang menyerupai array. Objek yang tidak memiliki properti <code>length</code> mencerminkan akhir dari urutan, properti numerik yang berbasis zero mungkin tidak memiliki makna yang berarti.</p> + +<p>jika anda menggunakan <code>pop()</code> pada array yang kosong, akan mengembalikan nilai {{jsxref("undefined")}}.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Menghapus_elemen_terakhir_pada_array">Menghapus elemen terakhir pada array</h3> + +<p>Kode berikut membuat array <code>myFish</code> yang memiliki empat elemen, kemudian menghapus elemen teakhirnya.</p> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; + +console.log(myFish); // ['angel', 'clown', 'mandarin', 'sturgeon'] + +var popped = myFish.pop(); + +console.log(myFish); // ['angel', 'clown', 'mandarin' ] + +console.log(popped); // 'sturgeon'</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.6', 'Array.prototype.pop')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.pop', 'Array.prototype.pop')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.pop', 'Array.prototype.pop')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_browser">Kompabilitas browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("1.0")}}</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>{{CompatIE("5.5")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()")}}</li> + <li>{{jsxref("Array.prototype.shift()")}}</li> + <li>{{jsxref("Array.prototype.unshift()")}}</li> + <li>{{jsxref("Array.prototype.splice()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/array/reverse/index.html b/files/id/web/javascript/reference/global_objects/array/reverse/index.html new file mode 100644 index 0000000000..dca16b463e --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/array/reverse/index.html @@ -0,0 +1,127 @@ +--- +title: Array.prototype.reverse() +slug: Web/JavaScript/Reference/Global_Objects/Array/reverse +tags: + - Array + - Method +translation_of: Web/JavaScript/Reference/Global_Objects/Array/reverse +--- +<div>{{JSRef}}</div> + +<p>Method <code><strong>reverse()</strong></code> membalikkan urutan array elemen. Elemen array pertama menjadi terakhir dan sebaliknya.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><code><var>arr</var>.reverse()</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<p>None.</p> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Method <code>reverse</code> mengubah urutan elemen objek array, memutasi array, dan mengembalikan referensi ke array.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Membalikan_elemen_di_dalam_array">Membalikan elemen di dalam array</h3> + +<p>Pada contoh membuat array <code>myArray </code>dengan tiga elemen, kemudian membalikkan array.</p> + +<pre class="brush: js">var myArray = ['one', 'two', 'three']; +myArray.reverse(); + +console.log(myArray) // ['three', 'two', 'one'] +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.8', 'Array.prototype.reverse')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_browser">Kompabilitas browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("1.0")}}</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>{{CompatIE("5.5")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("Array.prototype.join()")}}</li> + <li>{{jsxref("Array.prototype.sort()")}}</li> + <li>{{jsxref("TypedArray.prototype.reverse()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/array/shift/index.html b/files/id/web/javascript/reference/global_objects/array/shift/index.html new file mode 100644 index 0000000000..ac20d5cd60 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/array/shift/index.html @@ -0,0 +1,129 @@ +--- +title: Array.prototype.shift() +slug: Web/JavaScript/Reference/Global_Objects/Array/shift +translation_of: Web/JavaScript/Reference/Global_Objects/Array/shift +--- +<div>{{JSRef}}</div> + +<p>method <code><strong>shift()</strong></code> menghapus elemen <strong>pertama</strong> pada array dan mengembalikan elemen tersebut. Method ini mengubah panjang (jumlah elemen) array.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><code><var>arr</var>.shift()</code></pre> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Method <code>shift</code> menghapus elemen pada index 0 dan menggeser nilai index setelahnya, kemudian mengembalikan nilai yang dihapus. Jika properti {{jsxref("Array.length", "length")}} bernilai 0, maka akan mengembalikan nilai {{jsxref("undefined")}}.</p> + +<p><code>shift</code> adalah desain generic; method ini dapat berupa {{jsxref("Function.call", "called", "", 1)}} atau {{jsxref("Function.apply", "applied", "", 1)}} pada objek yag menyerupai array. Objek yang tidak memiliki properti <code>length</code> akan dianggap terakhir dalam urutan, properti numerik berbasis zero mungkin tidak memiliki makna yang berarti.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Menghapus_Elemen_dari_sebuah_Array">Menghapus Elemen dari sebuah Array</h3> + +<p>Kode berikut menampilkan array <code>myFish</code> sebelum dan sesudah menghapus elemen pertama. Juga menampilkan elemen yang dihapus:</p> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'surgeon']; + +console.log('myFish sebelum: ' + myFish); +// myFish sebelum: angel,clown,mandarin,surgeon + +var shifted = myFish.shift(); + +console.log('myFish sesudah: ' + myFish); +// myFish sesudah: clown,mandarin,surgeon + +console.log('Elemen yang dihapus: ' + shifted); +// Elemen yang dihapus: angel</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.9', 'Array.prototype.shift')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.shift', 'Array.prototype.shift')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.shift', 'Array.prototype.shift')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabiltas_browser">Kompabiltas browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("1.0")}}</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>{{CompatIE("5.5")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()")}}</li> + <li>{{jsxref("Array.prototype.pop()")}}</li> + <li>{{jsxref("Array.prototype.unshift()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/array/slice/index.html b/files/id/web/javascript/reference/global_objects/array/slice/index.html new file mode 100644 index 0000000000..44f018ba65 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/array/slice/index.html @@ -0,0 +1,152 @@ +--- +title: Array.prototype.slice() +slug: Web/JavaScript/Reference/Global_Objects/Array/slice +translation_of: Web/JavaScript/Reference/Global_Objects/Array/slice +--- +<div>{{JSRef}}</div> + +<p>Method <code><strong>slice()</strong></code> mengembalikan sebuah salinan dangkal dari sebagian array menjadi sebuah objek array baru yang dimulai dari <code>start</code> sampai <code>end</code> (<code>end</code> tidak termasuk) dimana <code>start</code> dan <code>end</code> merupakan index dari item yang ada di array tersebut. Tidak merubah array asli.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-slice.html")}}</div> + +<p class="hidden">The source for this interactive demo is stored in a GitHub repository. If you'd like to contribute to the interactive demo project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox notranslate"><var>arr</var>.slice([<var>start</var>[, <var>end</var>]]) +</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code><var>start</var></code> {{optional_inline}}</dt> + <dd>Indeks berbasis nol untuk memulai ekstraksi.</dd> + <dd><br> + Indeks negatif dapat digunakan, menunjukkan offset dari akhir urutan.. <code>slice(-2)</code> mengekstrak dua elemen terakhir dari urutan.</dd> + <dd>Jika <code><var>start</var></code> tidak terdefinisi, <code>slice</code> memulai dari indeks ke <code>0</code>.</dd> + <dd>Jika <code><var>start</var></code> lebih besar dari indeks urutan, array kosong akan dikembalikan.</dd> + <dt><code><var>end</var></code> {{optional_inline}}</dt> + <dd>Indeks berbasis nol untuk mengakhiri ekstraksi. <code>slice</code> mengekstrak hingga tapi tidak termasuk <code><var>end</var></code>. Sebagai contoh, <code>slice(1,4)</code> mengekstrak elemen kedua menuju elemen ke-empat (indeks elemen 1, 2, dan 3).</dd> + <dd> + <p>Indeks negatif bisa digunakan,<br> + menunjukkan offset dari akhir urutan. <code>slice(2,-1)</code> mengekstrak elemen ketiga menuju elemen kedua-ke-terakhir dalam urutan.</p> + </dd> + <dd>Jika <code><var>end</var></code> dihillangkan, <code>slice</code> mengekstrak melalui akhir dari urutan (<code><var>arr</var>.length</code>).</dd> + <dd>Jika <code><var>end</var></code> lebih besar dari panjang urutan, <code>slice</code> mengkstrak melalui akhir urutan (<code><var>arr</var>.length</code>).</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>Array baru berisi elemen yang diekstrak.</p> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p><code>slice</code> does not alter the original array. It returns a shallow copy of elements from the original array. Elements of the original array are copied into the returned array as follows:</p> + +<ul> + <li>For object references (and not the actual object), <code>slice</code> copies object references into the new array. Both the original and new array refer to the same object. If a referenced object changes, the changes are visible to both the new and original arrays.</li> + <li>For strings, numbers and booleans (not {{jsxref("String")}}, {{jsxref("Number")}} and {{jsxref("Boolean")}} objects), <code>slice</code> copies the values into the new array. Changes to the string, number, or boolean in one array do not affect the other array.</li> +</ul> + +<p>If a new element is added to either array, the other array is not affected.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Return_a_portion_of_an_existing_array">Return a portion of an existing array</h3> + +<pre class="brush: js notranslate">let fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'] +let citrus = fruits.slice(1, 3) + +// fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'] +// citrus contains ['Orange','Lemon'] +</pre> + +<h3 id="Using_slice">Using <code>slice</code></h3> + +<p>In the following example, <code>slice</code> creates a new array, <code>newCar</code>, from <code>myCar</code>. Both include a reference to the object <code>myHonda</code>. When the color of <code>myHonda</code> is changed to purple, both arrays reflect the change.</p> + +<pre class="brush: js notranslate">// Using slice, create newCar from myCar. +let myHonda = { color: 'red', wheels: 4, engine: { cylinders: 4, size: 2.2 } } +let myCar = [myHonda, 2, 'cherry condition', 'purchased 1997'] +let newCar = myCar.slice(0, 2) + +// Display the values of myCar, newCar, and the color of myHonda +// referenced from both arrays. +console.log('myCar = ' + JSON.stringify(myCar)) +console.log('newCar = ' + JSON.stringify(newCar)) +console.log('myCar[0].color = ' + myCar[0].color) +console.log('newCar[0].color = ' + newCar[0].color) + +// Change the color of myHonda. +myHonda.color = 'purple' +console.log('The new color of my Honda is ' + myHonda.color) + +// Display the color of myHonda referenced from both arrays. +console.log('myCar[0].color = ' + myCar[0].color) +console.log('newCar[0].color = ' + newCar[0].color) +</pre> + +<p>This script writes:</p> + +<pre class="notranslate">myCar = [{color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}}, 2, + 'cherry condition', 'purchased 1997'] +newCar = [{color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}}, 2] +myCar[0].color = red +newCar[0].color = red +The new color of my Honda is purple +myCar[0].color = purple +newCar[0].color = purple +</pre> + +<h3 id="Array-like_objects">Array-like objects</h3> + +<p><code>slice</code> method can also be called to convert Array-like objects/collections to a new Array. You just {{jsxref("Function.prototype.bind", "bind")}} the method to the object. The {{jsxref("Functions/arguments", "arguments")}} inside a function is an example of an 'array-like object'.</p> + +<pre class="brush: js notranslate">function list() { + return Array.prototype.slice.call(arguments) +} + +let list1 = list(1, 2, 3) // [1, 2, 3] +</pre> + +<p>Binding can be done with the {{jsxref("Function.prototype.call", "call()")}} method of {{jsxref("Function.prototype")}} and it can also be reduced using <code>[].slice.call(arguments)</code> instead of <code>Array.prototype.slice.call</code>.</p> + +<p>Anyway, it can be simplified using {{jsxref("Function.prototype.bind", "bind")}}.</p> + +<pre class="brush: js notranslate">let unboundSlice = Array.prototype.slice +let slice = Function.prototype.call.bind(unboundSlice) + +function list() { + return slice(arguments) +} + +let list1 = list(1, 2, 3) // [1, 2, 3]</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.slice', 'Array.prototype.slice')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatibilitas_Peramban">Kompatibilitas Peramban</h2> + + + +<p>{{Compat("javascript.builtins.Array.slice")}}</p> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("Array.prototype.splice()")}}</li> + <li>{{jsxref("Function.prototype.call()")}}</li> + <li>{{jsxref("Function.prototype.bind()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/array/splice/index.html b/files/id/web/javascript/reference/global_objects/array/splice/index.html new file mode 100644 index 0000000000..a0c7c1cb86 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/array/splice/index.html @@ -0,0 +1,146 @@ +--- +title: Array.prototype.splice() +slug: Web/JavaScript/Reference/Global_Objects/Array/splice +tags: + - Indonesia +translation_of: Web/JavaScript/Reference/Global_Objects/Array/splice +--- +<div>{{JSRef}}</div> + +<p>Metode <code><strong>splice()</strong></code> mengubah konten dari array dengan menghapus elemen yang ada dan/atau menambah elemen baru.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-splice.html")}}</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>array</var>.splice(<var>start[</var>, <var>deleteCount[</var>, <var>item1[</var>, <var>item2[</var>, <em>...]]]]</em>) +</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>start</code></dt> + <dd>Indeks di mana untuk mulai mengubah array (dengan asal 0). Jika lebih besar dari panjang array, indeks awal sebenarnya akan diatur ke panjang array. Jika negatif, akan mulai banyak elemen dari akhir array (dengan asal -1) dan akan diset ke 0 jika nilai absolut lebih besar dari panjang array.</dd> + <dt><code>deleteCount</code> {{optional_inline}}</dt> + <dd>Sebuah integer yang menunjukkan jumlah elemen array lama yang akan dihapus.</dd> + <dd>Jika <code>deleteCount</code> dihilangkan, atau jika nilainya lebih besar dari <code>array.length - start</code> (yaitu, jika lebih besar dari jumlah elemen yang tersisa dalam array, mulai dari <code>start</code>), maka semua elemen dari <code>start</code> sampai akhir dari array akan dihapus.</dd> + <dd>Jika <code>deleteCount</code> adalah 0 atau negatif, tidak ada elemen yang dihapus. Dalam kasus ini, Anda harus menentukan setidaknya satu elemen baru (lihat di bawah).</dd> + <dt><code>item1, item2, <em>...</em></code> {{optional_inline}}</dt> + <dd>Elemen yang ditambahkan ke array, <code>dimulai</code> pada indeks awal. Jika kamu tidak menentukan elemen apapun, <code>splice()</code> hanya akan menghapus elemen-elemen dari array.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p><span id="result_box" lang="id"><span>Array berisi elemen yang dihapus.</span> <span>Jika hanya satu elemen yang dihapus, array dari satu elemen dikembalikan.</span> <span>Jika tidak ada elemen yang dihapus, sebuah array kosong akan dikembalikan.</span></span></p> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Jika anda menentukan elemen yang berbeda untuk disisipkan daripada nomor yang anda hapus, array akan memiliki panjang yang berbeda ketika kamu memanggilnya nanti.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Remove_0_elements_from_index_2_and_insert_drum">Remove 0 elements from index 2, and insert "drum"</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; +var removed = myFish.splice(2, 0, 'drum'); + +// myFish is ["angel", "clown", "drum", "mandarin", "sturgeon"] +// removed is [], no elements removed +</pre> + +<h3 id="Remove_1_element_from_index_3">Remove 1 element from index 3</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon']; +var removed = myFish.splice(3, 1); + +// removed is ["mandarin"] +// myFish is ["angel", "clown", "drum", "sturgeon"] +</pre> + +<h3 id="Remove_1_element_from_index_2_and_insert_trumpet">Remove 1 element from index 2, and insert "trumpet"</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'drum', 'sturgeon']; +var removed = myFish.splice(2, 1, 'trumpet'); + +// myFish is ["angel", "clown", "trumpet", "sturgeon"] +// removed is ["drum"]</pre> + +<h3 id="Remove_2_elements_from_index_0_and_insert_parrot_anemone_and_blue">Remove 2 elements from index 0, and insert "parrot", "anemone" and "blue"</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'trumpet', 'sturgeon']; +var removed = myFish.splice(0, 2, 'parrot', 'anemone', 'blue'); + +// myFish is ["parrot", "anemone", "blue", "trumpet", "sturgeon"] +// removed is ["angel", "clown"]</pre> + +<h3 id="Remove_2_elements_from_index_2">Remove 2 elements from index 2</h3> + +<pre class="brush: js">var myFish = ['parrot', 'anemone', 'blue', 'trumpet', 'sturgeon']; +var removed = myFish.splice(myFish.length - 3, 2); + +// myFish is ["parrot", "anemone", "sturgeon"] +// removed is ["blue", "trumpet"]</pre> + +<h3 id="Remove_1_element_from_index_-2">Remove 1 element from index -2</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; +var removed = myFish.splice(-2, 1); + +// myFish is ["angel", "clown", "sturgeon"] +// removed is ["mandarin"]</pre> + +<h3 id="Remove_all_elements_after_index_2_(incl.)">Remove all elements after index 2 (incl.)</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; +var removed = myFish.splice(2); + +// myFish is ["angel", "clown"] +// removed is ["mandarin", "sturgeon"]</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.12', 'Array.prototype.splice')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.splice', 'Array.prototype.splice')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.splice', 'Array.prototype.splice')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.splice")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()", "push()")}} / {{jsxref("Array.prototype.pop()", "pop()")}} — add/remove elements from the end of the array</li> + <li>{{jsxref("Array.prototype.unshift()", "unshift()")}} / {{jsxref("Array.prototype.shift()", "shift()")}} — add/remove elements from the beginning of the array</li> + <li>{{jsxref("Array.prototype.concat()", "concat()")}} — returns a new array comprised of this array joined with other array(s) and/or value(s)</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/array/unshift/index.html b/files/id/web/javascript/reference/global_objects/array/unshift/index.html new file mode 100644 index 0000000000..4df2069f54 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/array/unshift/index.html @@ -0,0 +1,135 @@ +--- +title: Array.prototype.unshift() +slug: Web/JavaScript/Reference/Global_Objects/Array/unshift +translation_of: Web/JavaScript/Reference/Global_Objects/Array/unshift +--- +<div>{{JSRef}}</div> + +<p>Method <code><strong>unshift()</strong></code> menambahkan satu atau lebih elemen ke indek awal array dan mengembalikan jumlah index array yang baru.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><code><var>arr</var>.unshift([<var>element1</var>[, ...[, <var>elementN</var>]]])</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>element<em>N</em></code></dt> + <dd>Elemen yang akan di tambahkan di awal array.</dd> +</dl> + +<h3 id="Returns">Returns</h3> + +<p>Properti {{jsxref("Array.length", "length")}} baru dari objek teratas dimana method di panggil.</p> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Method <code>unshift</code> menambahkan nilai yang diberikan ke awal objek array.</p> + +<p><code>unshift</code> biasanya generic; method ini bisa berupa {{jsxref("Function.call", "called", "", 1)}} atau {{jsxref("Function.apply", "applied", "", 1)}} ke objek menyerupai array. Objek yang tidak memiliki properti <code>length</code> mencerminkan dari serangkaian urutan, properti numerik berbasis zero kemungkinan tidak berperilaku dengan cara yang berarti.</p> + +<h2 id="Contoh">Contoh</h2> + +<pre class="brush: js">var arr = [1, 2]; + +arr.unshift(0); // result of call is 3, the new array length +// arr is [0, 1, 2] + +arr.unshift(-2, -1); // = 5 +// arr is [-2, -1, 0, 1, 2] + +arr.unshift([-3]); +// arr is [[-3], -2, -1, 0, 1, 2] +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.13', 'Array.prototype.unshift')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Browser">Kompabilitas Browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("1.0")}}</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>{{CompatIE("5.5")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()")}}</li> + <li>{{jsxref("Array.prototype.pop()")}}</li> + <li>{{jsxref("Array.prototype.shift()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/array/values/index.html b/files/id/web/javascript/reference/global_objects/array/values/index.html new file mode 100644 index 0000000000..dd77cc65a5 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/array/values/index.html @@ -0,0 +1,120 @@ +--- +title: Array.prototype.values() +slug: Web/JavaScript/Reference/Global_Objects/Array/values +translation_of: Web/JavaScript/Reference/Global_Objects/Array/values +--- +<div>{{JSRef}}</div> + +<p>Method <strong><code>values()</code></strong> mengembalikan objek <strong><code>Array Iterator</code></strong> baru yang berisi nilai setiap index pada array.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><var>arr</var>.values()</pre> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Iterasi_menggunakan_for...of_loop">Iterasi menggunakan <code>for...of</code> loop</h3> + +<pre class="brush: js">var arr = ['w', 'y', 'k', 'o', 'p']; +var eArr = arr.values(); +// your browser must support for..of loop +// and let-scoped variables in for loops +for (let letter of eArr) { + console.log(letter); +} +</pre> + +<h3 id="Iterasi_alternatif">Iterasi alternatif</h3> + +<pre class="brush: js">var arr = ['w', 'y', 'k', 'o', 'p']; +var eArr = arr.values(); +console.log(eArr.next().value); // w +console.log(eArr.next().value); // y +console.log(eArr.next().value); // k +console.log(eArr.next().value); // o +console.log(eArr.next().value); // p +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.values', 'Array.prototype.values')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.values', 'Array.prototype.values')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Browser">Kompabilitas Browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("51")}}</td> + <td>{{CompatGeckoDesktop(48)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>9</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome("51")}}</td> + <td>{{CompatGeckoMobile(48)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("Array.prototype.keys()")}}</li> + <li>{{jsxref("Array.prototype.entries()")}}</li> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/date/getfullyear/index.html b/files/id/web/javascript/reference/global_objects/date/getfullyear/index.html new file mode 100644 index 0000000000..08e657aeec --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/date/getfullyear/index.html @@ -0,0 +1,88 @@ +--- +title: Date.prototype.getFullYear() +slug: Web/JavaScript/Reference/Global_Objects/Date/getFullYear +tags: + - Date + - JavaScript + - Metode + - Prototype + - Referensi +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getFullYear +--- +<div>{{JSRef}}</div> + +<p>Metode <strong><code>getFullYear()</code></strong> mengembanlikan tahun dari tanggal yang dispesifikasi, mengikuti waktu lokal.</p> + +<p>Gunakan metode ini ketimbang metode {{jsxref("Date.prototype.getYear()", "getYear()")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-getfullyear.html")}}</div> + +<p class="hidden">Sumber untuk contoh interaktif ini disimpan di repository GitHub. Jika kamu ingin berkontribusi ke project contoh interaktif ini, silakan clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> dan kirimi kamu pull request.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.getFullYear()</code></pre> + +<h3 id="Nilai_kembali">Nilai kembali</h3> + +<p>Angka yang berkorespondensi ke tahuny dari tanggal yang diberikan, mengikuti waktu lokal.</p> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Nilai yang dikembalikan oleh <code>getFullYear()</code> is an absolute number. For dates between the years 1000 and 9999, <code>getFullYear()</code> returns a four-digit number, for example, 1995. Use this function to make sure a year is compliant with years after 2000.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Menggunakan_getFullYear()">Menggunakan <code>getFullYear()</code></h3> + +<p>Contoh ini menggassign nilai empat-digit dari tahun saat ini ke variabel <code>year</code>.</p> + +<pre class="brush: js">var today = new Date(); +var year = today.getFullYear(); +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Komen</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definisi inisial. Diimplementasi di JavaScript 1.3.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.10', 'Date.prototype.getFullYear')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.getfullyear', 'Date.prototype.getFullYear')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.getfullyear', 'Date.prototype.getFullYear')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatibilitas_peramban">Kompatibilitas peramban</h2> + +<p class="hidden">Tabel kompatibilitas di laman ini digenerate dari data terstruktur. Jika kamu ingin berkontribusi ke datanya, silakan check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> dan kirimi kami pull request.</p> + +<p>{{Compat("javascript.builtins.Date.getFullYear")}}</p> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li> + <li>{{jsxref("Date.prototype.setFullYear()")}}</li> + <li>{{jsxref("Date.prototype.getYear()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/date/index.html b/files/id/web/javascript/reference/global_objects/date/index.html new file mode 100644 index 0000000000..1fc6272dcf --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/date/index.html @@ -0,0 +1,261 @@ +--- +title: Date +slug: Web/JavaScript/Reference/Global_Objects/Date +tags: + - Date + - JavaScript + - NeedsTranslation + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/Date +--- +<div>{{JSRef}}</div> + +<p>Creates a JavaScript <strong><code>Date</code></strong> instance that represents a single moment in time. <code>Date</code> objects are based on a time value that is the number of milliseconds since 1 January, 1970 UTC.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>new Date(); +new Date(<var>value</var>); +new Date(<var>dateString</var>); +new Date(<var>year</var>, <var>month</var>[, <var>day</var>[, <var>hour</var>[, <var>minutes</var>[, <var>seconds</var>[, <var>milliseconds</var>]]]]]); +</code></pre> + +<div class="note"> +<p><strong>Note:</strong> JavaScript <code>Date</code> objects can only be instantiated by calling JavaScript <code>Date</code> as a constructor: calling it as a regular function (i.e. without the {{jsxref("Operators/new", "new")}} operator) will return a string rather than a <code>Date</code> object; unlike other JavaScript object types, JavaScript <code>Date</code> objects have no literal syntax.</p> +</div> + +<h3 id="Parameters">Parameters</h3> + +<div class="note"> +<p><strong>Note:</strong> Where <code>Date</code> is called as a constructor with more than one argument, if values are greater than their logical range (e.g. 13 is provided as the month value or 70 for the minute value), the adjacent value will be adjusted. E.g. <code>new Date(2013, 13, 1)</code> is equivalent to <code>new Date(2014, 1, 1)</code>, both create a date for <code>2014-02-01</code> (note that the month is 0-based). Similarly for other values: <code>new Date(2013, 2, 1, 0, 70)</code> is equivalent to <code>new Date(2013, 2, 1, 1, 10)</code> which both create a date for <code>2013-03-01T01:10:00</code>.</p> +</div> + +<div class="note"> +<p><strong>Note:</strong> Where <code>Date</code> is called as a constructor with more than one argument, the specifed arguments represent local time. If UTC is desired, use <code>new Date({{jsxref("Date.UTC()", "Date.UTC(...)")}})</code> with the same arguments.</p> +</div> + +<dl> + <dt><code>value</code></dt> + <dd>Integer value representing the number of milliseconds since 1 January 1970 00:00:00 UTC (Unix Epoch).</dd> + <dt><code>dateString</code></dt> + <dd>String value representing a date. The string should be in a format recognized by the {{jsxref("Date.parse()")}} method (<a href="http://tools.ietf.org/html/rfc2822#page-14">IETF-compliant RFC 2822 timestamps</a> and also a <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15">version of ISO8601</a>). + <div class="note"> + <p><strong>Note:</strong> parsing of date strings with the <code>Date</code> constructor (and <code>Date.parse</code>, they are equivalent) is strongly discouraged due to browser differences and inconsistencies.</p> + </div> + </dd> + <dt><code>year</code></dt> + <dd>Integer value representing the year. Values from 0 to 99 map to the years 1900 to 1999. See the {{anch("Example:_Two_digit_years_map_to_1900_-_1999", "example below")}}.</dd> + <dt><code>month</code></dt> + <dd>Integer value representing the month, beginning with 0 for January to 11 for December.</dd> + <dt><code>day</code></dt> + <dd>Optional. Integer value representing the day of the month.</dd> + <dt><code>hour</code></dt> + <dd>Optional. Integer value representing the hour of the day.</dd> + <dt><code>minute</code></dt> + <dd>Optional. Integer value representing the minute segment of a time.</dd> + <dt><code>second</code></dt> + <dd>Optional. Integer value representing the second segment of a time.</dd> + <dt><code>millisecond</code></dt> + <dd>Optional. Integer value representing the millisecond segment of a time.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<ul> + <li>If no arguments are provided, the constructor creates a JavaScript <code>Date</code> object for the current date and time according to system settings.</li> + <li>If at least two arguments are supplied, missing arguments are either set to 1 (if day is missing) or 0 for all others.</li> + <li>The JavaScript date is based on a time value that is milliseconds since midnight 01 January, 1970 UTC. A day holds 86,400,000 milliseconds. The JavaScript <code>Date</code> object range is -100,000,000 days to 100,000,000 days relative to 01 January, 1970 UTC.</li> + <li>The JavaScript <code>Date</code> object provides uniform behavior across platforms. The time value can be passed between systems to represent the same moment in time and if used to create a local date object, will reflect the local equivalent of the time.</li> + <li>The JavaScript <code>Date</code> object supports a number of UTC (universal) methods, as well as local time methods. UTC, also known as Greenwich Mean Time (GMT), refers to the time as set by the World Time Standard. The local time is the time known to the computer where JavaScript is executed.</li> + <li>Invoking JavaScript <code>Date</code> as a function (i.e., without the {{jsxref("Operators/new", "new")}} operator) will return a string representing the current date and time.</li> +</ul> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{jsxref("Date.prototype")}}</dt> + <dd>Allows the addition of properties to a JavaScript <code>Date</code> object.</dd> + <dt><code>Date.length</code></dt> + <dd>The value of <code>Date.length</code> is 7. This is the number of arguments handled by the constructor.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{jsxref("Date.now()")}}</dt> + <dd>Returns the numeric value corresponding to the current time - the number of milliseconds elapsed since 1 January 1970 00:00:00 UTC.</dd> + <dt>{{jsxref("Date.parse()")}}</dt> + <dd>Parses a string representation of a date and returns the number of milliseconds since 1 January, 1970, 00:00:00, UTC. + <div class="note"> + <p><strong>Note:</strong> Parsing of strings with <code>Date.parse</code> is strongly discouraged due to browser differences and inconsistencies.</p> + </div> + </dd> + <dt>{{jsxref("Date.UTC()")}}</dt> + <dd>Accepts the same parameters as the longest form of the constructor (i.e. 2 to 7) and returns the number of milliseconds since 1 January, 1970, 00:00:00 UTC.</dd> +</dl> + +<h2 id="JavaScript_Date_instances">JavaScript <code>Date</code> instances</h2> + +<p>All <code>Date</code> instances inherit from {{jsxref("Date.prototype")}}. The prototype object of the <code>Date</code> constructor can be modified to affect all <code>Date</code> instances.</p> + +<h3 id="Date.prototype_Methods">Date.prototype Methods</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/prototype', 'Methods')}}</div> + +<h2 id="Examples">Examples</h2> + +<h3 id="Several_ways_to_create_a_Date_object">Several ways to create a <code>Date</code> object</h3> + +<p>The following examples show several ways to create JavaScript dates:</p> + +<div class="note"> +<p><strong>Note:</strong> parsing of date strings with the <code>Date</code> constructor (and <code>Date.parse</code>, they are equivalent) is strongly discouraged due to browser differences and inconsistencies.</p> +</div> + +<pre class="brush: js">var today = new Date(); +var birthday = new Date('December 17, 1995 03:24:00'); +var birthday = new Date('1995-12-17T03:24:00'); +var birthday = new Date(1995, 11, 17); +var birthday = new Date(1995, 11, 17, 3, 24, 0); +</pre> + +<h3 id="Two_digit_years_map_to_1900_-_1999">Two digit years map to 1900 - 1999</h3> + +<p>In order to create and get dates between the years 0 and 99 the {{jsxref("Date.prototype.setFullYear()")}} and {{jsxref("Date.prototype.getFullYear()")}} methods should be used.</p> + +<pre class="brush: js">var date = new Date(98, 1); // Sun Feb 01 1998 00:00:00 GMT+0000 (GMT) + +// Deprecated method, 98 maps to 1998 here as well +date.setYear(98); // Sun Feb 01 1998 00:00:00 GMT+0000 (GMT) + +date.setFullYear(98); // Sat Feb 01 0098 00:00:00 GMT+0000 (BST) +</pre> + +<h3 id="Calculating_elapsed_time">Calculating elapsed time</h3> + +<p>The following examples show how to determine the elapsed time between two JavaScript dates in millisconds.</p> + +<p>Due to the differing lengths of days (due to daylight saving changeover), months and years, expressing elapsed time in units greater than hours, minutes and seconds requires addressing a number of issues and should be thoroughly researched before being attempted.</p> + +<pre class="brush: js">// using Date objects +var start = Date.now(); + +// the event to time goes here: +doSomethingForALongTime(); +var end = Date.now(); +var elapsed = end - start; // elapsed time in milliseconds +</pre> + +<pre class="brush: js">// using built-in methods +var start = new Date(); + +// the event to time goes here: +doSomethingForALongTime(); +var end = new Date(); +var elapsed = end.getTime() - start.getTime(); // elapsed time in milliseconds +</pre> + +<pre class="brush: js">// to test a function and get back its return +function printElapsedTime(fTest) { + var nStartTime = Date.now(), + vReturn = fTest(), + nEndTime = Date.now(); + + console.log('Elapsed time: ' + String(nEndTime - nStartTime) + ' milliseconds'); + return vReturn; +} + +yourFunctionReturn = printElapsedTime(yourFunction); +</pre> + +<div class="note"> +<p><strong>Note:</strong> In browsers that support the {{domxref("window.performance", "Web Performance API", "", 1)}}'s high-resolution time feature, {{domxref("Performance.now()")}} can provide more reliable and precise measurements of elapsed time than {{jsxref("Date.now()")}}.</p> +</div> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date-objects', 'Date')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date-objects', 'Date')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9', 'Date')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}} [1]</td> + <td>{{CompatVersionUnknown}} [1]</td> + <td>{{CompatVersionUnknown}} [2]</td> + <td>{{CompatVersionUnknown}} [1]</td> + <td>{{CompatVersionUnknown}} [1]</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Some browsers can have issues when parsing dates: <a href="http://dygraphs.com/date-formats.html">3/14/2012 blog from danvk Comparing FF/IE/Chrome on Parsing Date Strings</a></p> + +<p>[2] <a href="https://msdn.microsoft.com/en-us//library/ie/ff743760(v=vs.94).aspx">ISO8601 Date Format is not supported</a> in Internet Explorer 8, and other version can have <a href="http://dygraphs.com/date-formats.html">issues when parsing dates</a></p> diff --git a/files/id/web/javascript/reference/global_objects/date/now/index.html b/files/id/web/javascript/reference/global_objects/date/now/index.html new file mode 100644 index 0000000000..43760a275b --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/date/now/index.html @@ -0,0 +1,124 @@ +--- +title: Date.now() +slug: Web/JavaScript/Reference/Global_Objects/Date/now +tags: + - Date + - JavaScript + - Method + - Referensi +translation_of: Web/JavaScript/Reference/Global_Objects/Date/now +--- +<div>{{JSRef}}</div> + +<p>Method <strong><code>Date.now()</code></strong> mengembalikan jumlah milisekon sejak 1 Januari 1970 00:00:00 UTC.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><code>var timeInMs = Date.now();</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<p>None.</p> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Method <code>now()</code> mengembalikan nilaimillisekon sejak 1 January 1970 00:00:00 UTC hingga sekarang sebagai {{jsxref("Number")}}.</p> + +<p>Karena <code>now()</code> adalah method static dari {{jsxref("Date")}}, anda bisa menggunakannya sebagai <code>Date.now()</code>.</p> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Method ini di bakukan pada ECMA-262 5<sup>th</sup> edition. Mesin yang belum diupdate untuk mendukung method ini bisa menggunkan shim berikut:</p> + +<pre class="brush: js">if (!Date.now) { + Date.now = function now() { + return new Date().getTime(); + }; +} +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.4.4', 'Date.now')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.now', 'Date.now')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.now', 'Date.now')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Browser">Kompabilitas Browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatChrome("5")}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatOpera("10.50")}}</td> + <td>{{CompatSafari("4")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li>{{domxref("Performance.now()")}} — menyediakan timestamp dengan resolusi sub-millisekon untuk digunakan untuk mengukur performa halaman web</li> + <li>{{domxref("console.time()")}} / {{domxref("console.timeEnd()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/date/tojson/index.html b/files/id/web/javascript/reference/global_objects/date/tojson/index.html new file mode 100644 index 0000000000..cb951d5fa0 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/date/tojson/index.html @@ -0,0 +1,119 @@ +--- +title: Date.prototype.toJSON() +slug: Web/JavaScript/Reference/Global_Objects/Date/toJSON +tags: + - Date + - Method + - Referensi +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toJSON +--- +<div>{{JSRef}}</div> + +<p>Method <strong><code>toJSON()</code></strong> mengembalikan string berdasarkan pada object {{jsxref("Date")}}.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.toJSON()</code></pre> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>{{jsxref("Date")}} mengacu pada titik waktu tertentu. Memanggil <code>toJSON()</code> mengembalikan nilai ke string (menggunakan {{jsxref("Date.prototype.toISOString()", "toISOString()")}}) berdasarkan nilai pada object {{jsxref("Date")}}. Method ini biasanya ditujukan, secara default, guna menserialisasi object {{jsxref("Date")}} saat serialisasi {{Glossary("JSON")}}.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Penggunaan_toJSON()">Penggunaan <code>toJSON()</code></h3> + +<pre class="brush:js">var jsonDate = (new Date()).toJSON(); +var backToDate = new Date(jsonDate); + +console.log(jsonDate); //2015-10-26T07:46:36.611Z +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.44', 'Date.prototype.toJSON')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definisi Inisial. Diimplementasikan dalam JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.tojson', 'Date.prototype.toJSON')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.tojson', 'Date.prototype.toJSON')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Browser">Kompabilitas Browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="sect1"> </h2> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li> + <li>{{jsxref("Date.prototype.toTimeString()")}}</li> + <li>{{jsxref("Date.prototype.toUTCString()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/date/totimestring/index.html b/files/id/web/javascript/reference/global_objects/date/totimestring/index.html new file mode 100644 index 0000000000..90ebd23e68 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/date/totimestring/index.html @@ -0,0 +1,125 @@ +--- +title: Date.prototype.toTimeString() +slug: Web/JavaScript/Reference/Global_Objects/Date/toTimeString +tags: + - Date + - JavaScript + - Prototype + - Referensi +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toTimeString +--- +<div>{{JSRef}}</div> + +<p>Method <strong><code>toTimeString()</code></strong> mengembalikan satuan waktu dari objek {{jsxref("Date")}} object dalam format yang dapat dibaca manusia.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.toTimeString()</code></pre> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Instansi {{jsxref("Date")}} menunjuk pada titik waktu spesifik. Dengan memanggil {{jsxref("Date.prototype.toString()", "toString()")}} akan mengembalikan format tanggal dalam bentuk yang mudah dibaca manuasia dengan format tanggal English (Amerika). Di <a href="/en-US/docs/SpiderMonkey">SpiderMonkey</a>, Bagian tanggal terdiri dari (hari, bulan, dan tahun) di ikuti dengan waktu (Jam, menit, detik, dan waktu bagian). Terkadang kita hanya membutuhan bagian waktu dalam bentuk string; hal tersebut bisa di capai dengan menggunakan metod <code>toTimeString()</code>.</p> + +<p>Method <code>toTimeString()</code> sangatlah berguna karena berdasarkan engine (compiliant engine) yang di implementasikan <a href="/en-US/docs/ECMAScript">ECMA-262</a> mungkin string yang diperoleh akan berbeda dari {{jsxref("Date.prototype.toString()", "toString()")}} untuk objek {{jsxref("Date")}}, dengan format tergantung dari implementasi; pendekatan bagian string sederhana kemungkinan tidak sama untuk engine yang berbeda.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Dasar_penggunaan_of_toTimeString()">Dasar penggunaan of <code>toTimeString()</code></h3> + +<pre class="brush: js">var d = new Date(1993, 6, 28, 14, 39, 7); + +console.log(d.toString()); // logs Wed Jul 28 1993 14:39:07 GMT-0600 (PDT) +console.log(d.toTimeString()); // logs 14:39:07 GMT-0600 (PDT) +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.4', 'Date.prototype.toTimeString')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.totimestring', 'Date.prototype.toTimeString')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.totimestring', 'Date.prototype.toTimeString')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Browser">Kompabilitas Browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("Date.prototype.toLocaleTimeString()")}}</li> + <li>{{jsxref("Date.prototype.toDateString()")}}</li> + <li>{{jsxref("Date.prototype.toString()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/error/index.html b/files/id/web/javascript/reference/global_objects/error/index.html new file mode 100644 index 0000000000..c0fc3cec6f --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/error/index.html @@ -0,0 +1,231 @@ +--- +title: Error +slug: Web/JavaScript/Reference/Global_Objects/Error +tags: + - Error + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Error +--- +<div>{{JSRef}}</div> + +<p>Konstruktor <strong><code>Error</code></strong> membuat sebuah objek error. Misal objek <code>Error</code> di lontarkan ketika terjadi runtime error. Objek <code>Error</code> juga dapat digunakan sebagai objek dasar dengan pengecualian yang ditentukan pengguna. Berikut untuk standard jenis built-in error.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox">new Error([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>message</code></dt> + <dd>Optional. Human-readable description of the error.</dd> + <dt><code>fileName</code> {{non-standard_inline}}</dt> + <dd>Optional. The value for the <code>fileName</code> property on the created <code>Error</code> object. Defaults to the name of the file containing the code that called the <code>Error()</code> constructor.</dd> + <dt><code>lineNumber</code> {{non-standard_inline}}</dt> + <dd>Optional. The value for the <code>lineNumber</code> property on the created <code>Error</code> object. Defaults to the line number containing the <code>Error()</code> constructor invocation.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>Runtime errors result in new <code>Error</code> objects being created and thrown.</p> + +<p>This page documents the use of the <code>Error</code> object itself and its use as a constructor function. For a list of properties and methods inherited by <code>Error</code> instances, see {{jsxref("Error.prototype")}}.</p> + +<h3 id="Error_types">Error types</h3> + +<p>Besides the generic <code>Error</code> constructor, there are six other core error constructors in JavaScript. For client-side exceptions, see <a href="/en-US/docs/Web/JavaScript/Guide/Statements#Exception_Handling_Statements">Exception Handling Statements</a>.</p> + +<dl> + <dt>{{jsxref("EvalError")}}</dt> + <dd>Creates an instance representing an error that occurs regarding the global function {{jsxref("Global_Objects/eval", "eval()")}}.</dd> + <dt>{{jsxref("InternalError")}} {{non-standard_inline}}</dt> + <dd>Creates an instance representing an error that occurs when an internal error in the JavaScript engine is thrown. E.g. "too much recursion".</dd> + <dt>{{jsxref("RangeError")}}</dt> + <dd>Creates an instance representing an error that occurs when a numeric variable or parameter is outside of its valid range.</dd> + <dt>{{jsxref("ReferenceError")}}</dt> + <dd>Creates an instance representing an error that occurs when de-referencing an invalid reference.</dd> + <dt>{{jsxref("SyntaxError")}}</dt> + <dd>Creates an instance representing a syntax error that occurs while parsing code in {{jsxref("Global_Objects/eval", "eval()")}}.</dd> + <dt>{{jsxref("TypeError")}}</dt> + <dd>Creates an instance representing an error that occurs when a variable or parameter is not of a valid type.</dd> + <dt>{{jsxref("URIError")}}</dt> + <dd>Creates an instance representing an error that occurs when {{jsxref("Global_Objects/encodeURI", "encodeURI()")}} or {{jsxref("Global_Objects/decodeURI", "decodeURI()")}} are passed invalid parameters.</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{jsxref("Error.prototype")}}</dt> + <dd>Allows the addition of properties to <code>Error</code> instances.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p>The global <code>Error</code> object contains no methods of its own, however, it does inherit some methods through the prototype chain.</p> + +<h2 id="Error_instances"><code>Error</code> instances</h2> + +<div>{{page('en-US/docs/JavaScript/Reference/Global_Objects/Error/prototype', 'Description')}}</div> + +<h3 id="Properties_2">Properties</h3> + +<div>{{page('en-US/docs/JavaScript/Reference/Global_Objects/Error/prototype', 'Properties')}}</div> + +<h3 id="Methods_2">Methods</h3> + +<div>{{page('en-US/docs/JavaScript/Reference/Global_Objects/Error/prototype', 'Methods')}}</div> + +<h2 id="Examples">Examples</h2> + +<h3 id="Throwing_a_generic_error">Throwing a generic error</h3> + +<p>Usually you create an <code>Error</code> object with the intention of raising it using the {{jsxref("Statements/throw", "throw")}} keyword. You can handle the error using the {{jsxref("Statements/try...catch", "try...catch")}} construct:</p> + +<pre class="brush: js">try { + throw new Error('Whoops!'); +} catch (e) { + console.log(e.name + ': ' + e.message); +} +</pre> + +<h3 id="Handling_a_specific_error">Handling a specific error</h3> + +<p>You can choose to handle only specific error types by testing the error type with the error's {{jsxref("Object.prototype.constructor", "constructor")}} property or, if you're writing for modern JavaScript engines, {{jsxref("Operators/instanceof", "instanceof")}} keyword:</p> + +<pre class="brush: js">try { + foo.bar(); +} catch (e) { + if (e instanceof EvalError) { + console.log(e.name + ': ' + e.message); + } else if (e instanceof RangeError) { + console.log(e.name + ': ' + e.message); + } + // ... etc +} +</pre> + +<h3 id="Custom_Error_Types">Custom Error Types</h3> + +<p>You might want to define your own error types deriving from <code>Error</code> to be able to <code>throw new MyError()</code> and use <code>instanceof MyError</code> to check the kind of error in the exception handler. The common way to do this is demonstrated below.</p> + +<div class="warning"> +<p>Note that the thrown <code>MyError</code> will report incorrect <code>lineNumber</code> and <code>fileName</code> at least in Firefox.</p> +</div> + +<p>See also the <a href="http://stackoverflow.com/questions/1382107/whats-a-good-way-to-extend-error-in-javascript">"What's a good way to extend Error in JavaScript?" discussion on Stackoverflow</a>.</p> + +<pre class="brush: js">// Create a new object, that prototypically inherits from the Error constructor +function MyError(message) { + this.name = 'MyError'; + this.message = message || 'Default Message'; + this.stack = (new Error()).stack; +} +MyError.prototype = Object.create(Error.prototype); +MyError.prototype.constructor = MyError; + +try { + throw new MyError(); +} catch (e) { + console.log(e.name); // 'MyError' + console.log(e.message); // 'Default Message' +} + +try { + throw new MyError('custom message'); +} catch (e) { + console.log(e.name); // 'MyError' + console.log(e.message); // 'custom message' +}</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.11', 'Error')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-error-objects', 'Error')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-error-objects', 'Error')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Error.prototype")}}</li> + <li>{{jsxref("Statements/throw", "throw")}}</li> + <li>{{jsxref("Statements/try...catch", "try...catch")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/error/name/index.html b/files/id/web/javascript/reference/global_objects/error/name/index.html new file mode 100644 index 0000000000..6644fff80a --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/error/name/index.html @@ -0,0 +1,119 @@ +--- +title: Error.prototype.name +slug: Web/JavaScript/Reference/Global_Objects/Error/name +tags: + - Error + - JavaScript + - Property + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Error/name +--- +<div>{{JSRef}}</div> + +<p>Properti <code><strong>name</strong></code> menyatakan nama dari jenis error. Nilai awalnya adalah "Error".</p> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Secara default, misalnya {{jsxref("Error")}} diberi nama "Error". Properti <code>name</code>, sebagai tambahan utuk properti {{jsxref("Error.prototype.message", "message")}}, digunakan oleh method {{jsxref("Error.prototype.toString()")}} untuk membuat sebuah pernyataan dalam bentuk string yang menyatakan error.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Menggunakan_custom_error">Menggunakan custom error</h3> + +<pre class="brush: js">var e = new Error('Inputan tidak lengkap'); // e.name nilainya 'Error' + +e.name = 'ParseError'; +throw e; +// e.toString() akan mengembalikan 'ParseError: Inputan tidak lengkap' +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.11.4.2', 'Error.prototype.name')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-error.prototype.name', 'Error.prototype.name')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-error.prototype.name', 'Error.prototype.name')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_browser">Kompabilitas browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("Error.prototype.message")}}</li> + <li>{{jsxref("Error.prototype.toString()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/function/displayname/index.html b/files/id/web/javascript/reference/global_objects/function/displayname/index.html new file mode 100644 index 0000000000..952014983b --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/function/displayname/index.html @@ -0,0 +1,123 @@ +--- +title: Function.displayName +slug: Web/JavaScript/Reference/Global_Objects/Function/displayName +tags: + - Function + - JavaScript + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Function/displayName +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p>Properti <code><strong><em>function</em>.displayName</strong></code> mengembalikan nama fungsi.</p> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Ketika didefinisikan, properti <code>displayName</code> mengembalikan nama dari sebuah fungsi:</p> + +<pre class="brush: js">function doSomething() {} + +console.log(doSomething.displayName); // "undefined" + +var popup = function(content) { console.log(content); }; + +popup.displayName = 'Show Popup'; + +console.log(popup.displayName); // "Show Popup" +</pre> + +<p>Anda bisa mendefinisikan sebuah fungsi dengan sebuah display nama di {{jsxref("Functions", "function expression", "", 1)}}:</p> + +<pre class="brush: js">var object = { + someMethod: function() {} +}; + +object.someMethod.displayName = 'someMethod'; + +console.log(object.someMethod.displayName); // logs "someMethod" + +try { someMethod } catch(e) { console.log(e); } +// ReferenceError: someMethod is not defined +</pre> + +<p>Anda bisa merubah <code>displayName</code> dari sebuah fungsi secara dinamis:</p> + +<pre class="brush: js">var object = { + // anonymous + someMethod: function(value) { + this.displayName = 'someMethod (' + value + ')'; + } +}; + +console.log(object.someMethod.displayName); // "undefined" + +object.someMethod('123') +console.log(object.someMethod.displayName); // "someMethod (123)" +</pre> + +<h2 id="Contoh">Contoh</h2> + +<p>Biasanya lebih banyak digunakan dengan console dan profiler melalui {{jsxref("Function.name", "func.name")}} untuk menampilkan nama function.</p> + +<p>Dengan menuliskan kode berikut, maka seharusnya akan menampilkan "<code>function My Function()</code>":</p> + +<pre class="brush: js">var a = function() {}; +a.displayName = 'My Function'; + +a; // "function My Function()"</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<p>Bukan bagian dari spesifikasi.</p> + +<h2 id="Kompabilitas_browser">Kompabilitas browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(13)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/id/web/javascript/reference/global_objects/function/index.html b/files/id/web/javascript/reference/global_objects/function/index.html new file mode 100644 index 0000000000..49d1c1a114 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/function/index.html @@ -0,0 +1,241 @@ +--- +title: Function +slug: Web/JavaScript/Reference/Global_Objects/Function +tags: + - Constructor + - Function + - JavaScript + - NeedsTranslation + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/Function +--- +<div>{{JSRef}}</div> + +<p>Konstruktor<strong><code><strong> </strong></code><code>Function</code> </strong>membuat sebuah objek <code>Function</code> baru. Di Javascript setiap fungsi adalah sebuah objek <code>Function</code>.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><code>new Function ([<var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]],] <var>functionBody</var>)</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>Nama yang akan digunakan oleh fungsi sebagai nama formal argumen. Masing-masing harus berupa string yang sesuai dengan identifier JavaScript yang valid atau daftar string dipisahkan dengan koma; contohnya "<code>x</code>", "<code>theValue</code>", atau "<code>a,b</code>".</dd> + <dt><code>functionBody</code></dt> + <dd>String berisi sintaks JavaScript yang terdiri dari definisi fungsi.</dd> +</dl> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Objek <code> Function</code> yang dibuat dengan konstruktor <code>Function</code> diuraikan ketika fungsi dibuat. Hal tersebut kurang efisien dibandingkan dengan mendeklarasikan fungsi dengan <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">function expression</a> atau <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function statement</a> dan memanggilnya dengan kode Anda, karena fungsi-fungsi tersebut diuraikan dengan sisa kode.</p> + +<p>Semua argumen yang diteruskan ke fungsi diperlakukan sebagai nama identifier parameter dalam fungsi yang akan dibuat, dalam urutan yang dilewatkan.</p> + +<div class="note"> +<p><strong>Catatan:</strong> Fungsi dibuat dengan konstruktor <code>Function</code> jangan membuat penutup pada konteks kreasi mereka; Mereka selalu dibuat dalam ruang lingkup global. Saat menjalankannya, mereka hanya bisa mengakses variabel lokal mereka sendiri dan variabel global, bukan variabel dari ruang lingkup dimana konstruktor <code>Function</code> dipanggil. Berbeda dari menggunakan {{jsxref("eval")}} dengan kode untuk fungsi ekspresi.</p> +</div> + +<p>memanggil konstruktor <code>Function</code> sebagai sebuah fungsi (tanpa menggunakan operatur <code>baru</code>) mempunyai efek yang sama seperti memanggilnya sebagai konstruktor</p> + +<h2 id="Properti_dan_Method_Function">Properti dan Method <code>Function</code></h2> + +<p>Objek <code>Function</code> global tidak memiliki method atau properti sendiri. Namun, fungsi itu sendiri mewarisi beberapa method dan properti melalui prototipe dari {{jsxref("Function.prototype")}}.</p> + +<h2 id="Objek_prototipe_Function">Objek prototipe<code> Function</code></h2> + +<h3 id="Properti">Properti</h3> + +<div>{{page('/en-US/docs/JavaScript/Reference/Global_Objects/Function/prototype', 'Properties')}}</div> + +<h3 id="Method">Method</h3> + +<div>{{page('/en-US/docs/JavaScript/Reference/Global_Objects/Function/prototype', 'Methods')}}</div> + +<h2 id="Function_instances"><code>Function</code> instances</h2> + +<p><code>Function</code> instances mewarisi method dan properti dari {{jsxref("Function.prototype")}}. Seperti halnya semua konstruktor, Anda dapat mengubah objek prototipe konstruktor untuk membuat perubahan pada semua <code>Function</code> instances.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Menentukan_arguman_dengan_konstruktor_Function">Menentukan arguman dengan konstruktor <code>Function</code></h3> + +<p>Dibawah ini kode untuk membuat sebuah objek <code>Function</code> yang menggunakan dua argumen.</p> + +<pre class="brush: js">// Contoh dapat dijalankan langsung di konsol JavaScript Anda + +// Buat fungsi yang mengambil dua argumen dan mengembalikan jumlah argumen tersebut +var adder = new Function('a', 'b', 'return a + b'); + +// Memanggil fungsi +adder(2, 6); +// > 8 +</pre> + +<p>Argumen "<code>a</code>" dan "<code>b</code>" adalah nama argumen formal yang digunakan pada function body "<code>return a + b</code>".</p> + +<h3 id="Pintasan_rekursif_untuk_memofikasi_DOM_secara_masif">Pintasan rekursif untuk memofikasi DOM secara masif</h3> + +<p>Membuat fungsi dengan konstruktor <code>Function</code> adalah salah satu cara dinamis untuk membuat objek baru dengan beberapa kode yang dapat dieksekusi ke dalam lingkup global dari suatu fungsi. Contoh berikut (pintasan rekursif untuk memodifikasi DOM secara masif) tidak dimungkinkan tanpa permintaan konstruktor <code>Function </code>untuk setiap kueri baru jika Anda ingin menghindari penutup tiap fungsi.</p> + +<pre class="brush: html"><!doctype html> +<html> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> +<title>MDN Example - a recursive shortcut to massively modify the DOM</title> +<script type="text/javascript"> +var domQuery = (function() { + var aDOMFunc = [ + Element.prototype.removeAttribute, + Element.prototype.setAttribute, + CSSStyleDeclaration.prototype.removeProperty, + CSSStyleDeclaration.prototype.setProperty + ]; + + function setSomething(bStyle, sProp, sVal) { + var bSet = Boolean(sVal), fAction = aDOMFunc[bSet | bStyle << 1], + aArgs = Array.prototype.slice.call(arguments, 1, bSet ? 3 : 2), + aNodeList = bStyle ? this.cssNodes : this.nodes; + + if (bSet && bStyle) { aArgs.push(''); } + for ( + var nItem = 0, nLen = this.nodes.length; + nItem < nLen; + fAction.apply(aNodeList[nItem++], aArgs) + ); + this.follow = setSomething.caller; + return this; + } + + function setStyles(sProp, sVal) { return setSomething.call(this, true, sProp, sVal); } + function setAttribs(sProp, sVal) { return setSomething.call(this, false, sProp, sVal); } + function getSelectors() { return this.selectors; }; + function getNodes() { return this.nodes; }; + + return (function(sSelectors) { + var oQuery = new Function('return arguments.callee.follow.apply(arguments.callee, arguments);'); + oQuery.selectors = sSelectors; + oQuery.nodes = document.querySelectorAll(sSelectors); + oQuery.cssNodes = Array.prototype.map.call(oQuery.nodes, function(oInlineCSS) { return oInlineCSS.style; }); + oQuery.attributes = setAttribs; + oQuery.inlineStyle = setStyles; + oQuery.follow = getNodes; + oQuery.toString = getSelectors; + oQuery.valueOf = getNodes; + return oQuery; + }); +})(); +</script> +</head> + +<body> + +<div class="testClass">Lorem ipsum</div> +<p>Some text</p> +<div class="testClass">dolor sit amet</div> + +<script type="text/javascript"> +domQuery('.testClass') + .attributes('lang', 'en')('title', 'Risus abundat in ore stultorum') + .inlineStyle('background-color', 'black')('color', 'white')('width', '100px')('height', '50px'); +</script> +</body> + +</html> +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.3', 'Function')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-objects', 'Function')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-objects', 'Function')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kesesuaian_Browser">Kesesuaian Browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("Functions", "Functions and function scope")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Statements/function", "function statement")}}</li> + <li>{{jsxref("Operators/function", "function expression")}}</li> + <li>{{jsxref("Statements/function*", "function* statement")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/function/length/index.html b/files/id/web/javascript/reference/global_objects/function/length/index.html new file mode 100644 index 0000000000..901c11b336 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/function/length/index.html @@ -0,0 +1,148 @@ +--- +title: Function.length +slug: Web/JavaScript/Reference/Global_Objects/Function/length +tags: + - Function + - JavaScript + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Function/length +--- +<div>{{JSRef}}</div> + +<p>Properti <code><strong>length</strong></code> menentukan jumlah argumen yang diharapkan oleh fungsi.</p> + +<div>{{js_property_attributes(0,0,1)}}</div> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p><code>length</code> merupakan properti dari objek fungsi, dan mengindikasikan berapa banyak argumen yang diharapkan fungsi, mis. jumlah parameter formal. Jumlah ini mengesampingkan {{jsxref("rest_parameters", "rest parameter", "", 1)}}. Sebaliknya, {{jsxref("Functions_and_function_scope/arguments/length", "arguments.length")}} adalah lokal untuk fungsi dan memberikan jumlah argumen sebenarnya ke fungsi.</p> + +<h3 id="Properti_data_dari_constructor_Function">Properti data dari constructor <code>Function</code></h3> + +<p>Construktor {{jsxref("Function")}} sendiri adalah objek {{jsxref("Function")}}. data properti <code>length</code> bernilai 1. Properti atribut: Writable: <code>false</code>, Enumerable: <code>false</code>, Configurable: <code>true</code>.</p> + +<h3 id="Properti_dari_Function_prototype_object">Properti dari <code>Function</code> prototype object</h3> + +<p>Panjang properti dari prototype objek {{jsxref("Function")}} bernilai 0.</p> + +<h2 id="Contoh">Contoh</h2> + +<pre class="brush: js">console.log(Function.length); /* 1 */ + +console.log((function() {}).length); /* 0 */ +console.log((function(a) {}).length); /* 1 */ +console.log((function(a, b) {}).length); /* 2 etc. */ + +console.log((function(...args) {}).length); +// 0, rest parameter is not counted + +console.log((function(a, b = 1, c) {}).length); +// 1, only parameters before the first one with +// a default value is counted</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.3.5.1', 'Function.length')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-instances-length', 'Function.length')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>The <code>configurable</code> attribute of this property is now <code>true</code>.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-instances-length', 'Function.length')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_browser">Kompabilitas browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Configurable: true</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(37)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Configurable: true</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(37)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("Function")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/function/name/index.html b/files/id/web/javascript/reference/global_objects/function/name/index.html new file mode 100644 index 0000000000..1a35d62020 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/function/name/index.html @@ -0,0 +1,191 @@ +--- +title: Function.name +slug: Web/JavaScript/Reference/Global_Objects/Function/name +tags: + - ECMAScript6 + - Function + - JavaScript + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Function/name +--- +<div>{{JSRef}}</div> + +<p>Properti <code><strong><em>function</em>.name</strong></code> mengembalikan nama fungsi.</p> + +<div>{{js_property_attributes(0,0,1)}}</div> + +<div>Perlu di ingat bahwa ini di dalam non-standard, implementasi pre-ES6 atribut <code>configurable</code> juga <code>false</code>.</div> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Properti <code>name</code> property mengembalikan nama sebuah fungsi , atau (sebelum implementasi ES6) string kosong untuk anonymous functions:</p> + +<pre class="brush: js">function doSomething() {} + +console.log(doSomething.name); // logs "doSomething" +</pre> + +<p>Fungsi di buat menggunakan sintaks <code>new Function(...)</code> atau hanya <code>Function(...)</code> memiliki properti <code>name</code> di set empty string. Pada contoh anonymous functions dibuat, sehingga <code>name</code> mengembalikan empty string:</p> + +<pre class="brush: js">var f = function() {}; +var object = { + someMethod: function() {} +}; + +console.log(f.name == ''); // true +console.log(object.someMethod.name == ''); // also true +</pre> + +<p>Browser yang mengimplementasikan fungsi ES6 mengambil nama dari anonymous function dari posisi syntactic-nya. Contoh:</p> + +<pre class="brush: js">var f = function() {}; +console.log(f.name); // "f"</pre> + +<p>Anda bisa mendefinisikan sebuah fungsi dengan nama di {{jsxref("Operators/Function", "function expression", "", 1)}}:</p> + +<pre class="brush: js">var object = { + someMethod: function object_someMethod() {} +}; +console.log(object.someMethod.name); // logs "object_someMethod" + +try { object_someMethod } catch(e) { console.log(e); } +// ReferenceError: object_someMethod is not defined +</pre> + +<p>Anda tidak bisa mengubah nama fungsi, Properti ini hanya bisa dibaca:</p> + +<pre class="brush: js">var object = { + // anonymous + someMethod: function() {} +}; + +object.someMethod.name = 'someMethod'; +console.log(object.someMethod.name); // empty string, someMethod is anonymous +</pre> + +<p>Untuk mengubah, anda perlu menggunakan {{jsxref("Object.defineProperty()")}}.</p> + +<h2 id="Contoh">Contoh</h2> + +<p>Anda bisa menggunakan <code>obj.constructor.name</code> untuk memeriksa "class" dari sebuah objek:</p> + +<pre class="brush: js">function a() {} + +var b = new a(); + +console.log(b.constructor.name); // logs "a" +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-name', 'name')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-name', 'name')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_browser">Kompabilitas browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(33.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Configurable: true</td> + <td>{{CompatChrome(43.0)}}</td> + <td>{{CompatGeckoDesktop(38)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Inferred names on anonymous functions</td> + <td>{{CompatChrome(51.0)}}</td> + <td>{{CompatNo}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Configurable: true</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(38)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Inferred names on anonymous functions</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(51.0)}}</td> + <td>{{CompatNo}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(51.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] See {{bug(883377)}}.</p> diff --git a/files/id/web/javascript/reference/global_objects/function/prototype/index.html b/files/id/web/javascript/reference/global_objects/function/prototype/index.html new file mode 100644 index 0000000000..d522a363e0 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/function/prototype/index.html @@ -0,0 +1,143 @@ +--- +title: Function.prototype +slug: Web/JavaScript/Reference/Global_Objects/Function/prototype +tags: + - Function + - JavaScript + - Property + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Function +--- +<div>{{JSRef}}</div> + +<p>Properti <code><strong>Function.prototype</strong></code> mewakili objek properti {{jsxref("Function")}} .</p> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Objek {{jsxref("Function")}} turunan dari <code>Function.prototype</code>. <code>Function.prototype</code> tidak dapat di ubah.</p> + +<h2 id="Properti">Properti</h2> + +<dl> + <dt>{{jsxref("Function.arguments")}} {{deprecated_inline}}</dt> + <dd>Sebuah array berdasakan argumen yang diberikan ke sebuah fungsi. Ini telah diabaikan sebagai properti dari {{jsxref("Function")}}, gunakan objek {{jsxref("Functions/arguments", "arguments")}} yang tersedia di dalam fungsi saja.</dd> + <dt><s class="obsoleteElement">{{jsxref("Function.arity")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement">Digunakan untuk menentukan jumlah argumen yang diperlukan fungsi, tapi telah dihapus. Gunakan properti {{jsxref("Function.length", "length")}}.</s></dd> + <dt>{{jsxref("Function.caller")}} {{non-standard_inline}}</dt> + <dd>Menentukan fungsi yang dipanggil oleh fungsi yang sedang dijalankan saat ini.</dd> + <dt>{{jsxref("Function.length")}}</dt> + <dd>Menentukan jumlah argumen yang diperlukan oleh fungsi.</dd> + <dt>{{jsxref("Function.name")}}</dt> + <dd>Nama dari fungsi.</dd> + <dt>{{jsxref("Function.displayName")}} {{non-standard_inline}}</dt> + <dd>Tampilan nama fungsi.</dd> + <dt><code>Function.prototype.constructor</code></dt> + <dd>Menentukan fungsi yang membuat objek prototype. Lihat {{jsxref("Object.prototype.constructor")}} untuk lebih detailnya.</dd> +</dl> + +<h2 id="Method">Method</h2> + +<dl> + <dt>{{jsxref("Function.prototype.apply()")}}</dt> + <dd>Memanggil fungsi dan menentukan nilai <em>this</em> berdasar nilai yang diberikan, argument bisa ditambahkan sebagai objek {{jsxref("Array")}}.</dd> + <dt>{{jsxref("Function.prototype.bind()")}}</dt> + <dd>Membuat fungsi baru dimana, ketika dipanggil, memiliki <em>this</em> yang diberi nilai yang tersedia, dengan urutan tertentu sesudah nilai yang tersedia ketika fungsi di jalankan.</dd> + <dt>{{jsxref("Function.prototype.call()")}}</dt> + <dd>Memanggil (menjalankan) sebuah fungsi dan memberi nilai <em>this</em> dari nilai yang tersedia, argumen bisa ditambahkan sebagaimana mestinya.</dd> + <dt>{{jsxref("Function.prototype.isGenerator()")}} {{non-standard_inline}}</dt> + <dd>Mengembalikan <code>true</code> jika fungsi adalah sebuah <a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">generator</a>; selain itu akan mengembalikan nilai <code>false</code>.</dd> + <dt>{{jsxref("Function.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>Mengembalikan string berdasarkan kode sumber dari fungsi. Mengesampingkan method {{jsxref("Object.prototype.toSource")}}.</dd> + <dt>{{jsxref("Function.prototype.toString()")}}</dt> + <dd>Mengembalikan string berdasarkan kode sumber dari fungsi, mengesampingkan method {{jsxref("Object.prototype.toString")}}.</dd> +</dl> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.3.5.2', 'Function.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-instances-prototype', 'Function.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-instances-prototype', 'Function.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Browser">Kompabilitas Browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li>{{jsxref("Function")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/index.html b/files/id/web/javascript/reference/global_objects/index.html new file mode 100644 index 0000000000..5259bde5b8 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/index.html @@ -0,0 +1,189 @@ +--- +title: Global Objek +slug: Web/JavaScript/Reference/Global_Objects +tags: + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects +--- +<div>{{jsSidebar("Objects")}}</div> + +<p>Pada bagian ini membahas standar javascript, objek built-in, Termasuk didalamnya method dan properti.</p> + +<div class="onlyinclude"> +<p>Istilah "Global Objek" (atau standar objek built-in)disini bukan berarti <strong>Global Objek</strong>. Disini global objek di artikan sebagai <strong>objek pada scope global</strong> (tapi hanya jika ECMAScript 5 mode strict tidak digunakan; pada kasus ini mengembalikan {{jsxref("undefined")}}). <strong>Global objek</strong> sendiri bisa di akses menggunakan operator {{jsxref("Operators/this", "this")}} pada lingkup global. Bahkan, lingkup global <strong>terdiri dari</strong> properti pada global objek, termasuk peoperti yang diwariskan, jika ada.</p> + +<p>Objek lain di lingkup global salah satunya <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Creating_new_objects">dibuat oleh user script</a> atau disediakan oleh aplikasi host. Objek host tersedia di konteks browser, didokumentasi di <a href="/en-US/docs/Web/API/Reference">Referensi API</a>. Untuk informasi lengkap tentang perbedaan antara <a href="/en-US/docs/DOM/DOM_Reference">DOM</a> dan inti <a href="/en-US/docs/Web/JavaScript">JavaScript</a>, lihat <a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">Gambaran teknologi javaScript</a>.</p> + +<h2 id="Objek_standar_berdasarkan_kategori">Objek standar berdasarkan kategori</h2> + +<h3 id="Properti_nilai">Properti nilai</h3> + +<p>Properti global ini mengembalikan nilai simple; tidak memiliki properti ataupun method.</p> + +<ul> + <li>{{jsxref("Global_Objects/Infinity", "Infinity")}}</li> + <li>{{jsxref("Global_Objects/NaN", "NaN")}}</li> + <li>{{jsxref("Global_Objects/undefined", "undefined")}}</li> + <li>{{jsxref("Global_Objects/null", "null")}} literal</li> +</ul> + +<h3 id="Properti_fungsi">Properti fungsi</h3> + +<p>Fungsi global—fungsi yang di panggil secara global bukan pada objek — langsung mengembalikan nilai ke pemenggil.</p> + +<ul> + <li>{{jsxref("Global_Objects/eval", "eval()")}}</li> + <li>{{jsxref("Global_Objects/uneval", "uneval()")}} {{non-standard_inline}}</li> + <li>{{jsxref("Global_Objects/isFinite", "isFinite()")}}</li> + <li>{{jsxref("Global_Objects/isNaN", "isNaN()")}}</li> + <li>{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}</li> + <li>{{jsxref("Global_Objects/parseInt", "parseInt()")}}</li> + <li>{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}</li> + <li>{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</li> + <li>{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}</li> + <li>{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</li> + <li>{{jsxref("Global_Objects/escape", "escape()")}} {{deprecated_inline}}</li> + <li>{{jsxref("Global_Objects/unescape", "unescape()")}} {{deprecated_inline}}</li> +</ul> + +<h3 id="Fundamental_objek">Fundamental objek</h3> + +<p>Ini merupakan fundamental, objek dasar berdasarkan pada semua objek lain yang didasarkan. Ini termasuk objek yang mewakili objek umum, fungsi dan error.</p> + +<ul> + <li>{{jsxref("Global_Objects/Object", "Object")}}</li> + <li>{{jsxref("Global_Objects/Function", "Function")}}</li> + <li>{{jsxref("Global_Objects/Boolean", "Boolean")}}</li> + <li>{{jsxref("Global_Objects/Symbol", "Symbol")}}</li> + <li>{{jsxref("Global_Objects/Error", "Error")}}</li> + <li>{{jsxref("Global_Objects/EvalError", "EvalError")}}</li> + <li>{{jsxref("Global_Objects/InternalError", "InternalError")}}</li> + <li>{{jsxref("Global_Objects/RangeError", "RangeError")}}</li> + <li>{{jsxref("Global_Objects/ReferenceError", "ReferenceError")}}</li> + <li>{{jsxref("Global_Objects/SyntaxError", "SyntaxError")}}</li> + <li>{{jsxref("Global_Objects/TypeError", "TypeError")}}</li> + <li>{{jsxref("Global_Objects/URIError", "URIError")}}</li> +</ul> + +<h3 id="Nomor_dan_tanggal">Nomor dan tanggal</h3> + +<p>Objek dasar yang mewakili angka, tanggal dan kalkulasi matematik.</p> + +<ul> + <li>{{jsxref("Global_Objects/Number", "Number")}}</li> + <li>{{jsxref("Global_Objects/Math", "Math")}}</li> + <li>{{jsxref("Global_Objects/Date", "Date")}}</li> +</ul> + +<h3 id="Pengolah_teks">Pengolah teks</h3> + +<p>Objek yang mewakili string dan dukungan untuk memanipulasinya.</p> + +<ul> + <li>{{jsxref("Global_Objects/String", "String")}}</li> + <li>{{jsxref("Global_Objects/RegExp", "RegExp")}}</li> +</ul> + +<h3 id="Koleksi_Index">Koleksi Index</h3> + +<p>Objek ini mewakili koleksi data berdasarkan nilai index. Ini termasuk (jenis) array dan konstruksi mirip array (array-like).</p> + +<ul> + <li>{{jsxref("Global_Objects/Array", "Array")}}</li> + <li>{{jsxref("Global_Objects/Int8Array", "Int8Array")}}</li> + <li>{{jsxref("Global_Objects/Uint8Array", "Uint8Array")}}</li> + <li>{{jsxref("Global_Objects/Uint8ClampedArray", "Uint8ClampedArray")}}</li> + <li>{{jsxref("Global_Objects/Int16Array", "Int16Array")}}</li> + <li>{{jsxref("Global_Objects/Uint16Array", "Uint16Array")}}</li> + <li>{{jsxref("Global_Objects/Int32Array", "Int32Array")}}</li> + <li>{{jsxref("Global_Objects/Uint32Array", "Uint32Array")}}</li> + <li>{{jsxref("Global_Objects/Float32Array", "Float32Array")}}</li> + <li>{{jsxref("Global_Objects/Float64Array", "Float64Array")}}</li> +</ul> + +<h3 id="Koleksi_keyed">Koleksi keyed</h3> + +<p>Objek ini merupakan koleksi yang menggunakan key; mengandung unsur yang iterable di urutan penyisipan.</p> + +<ul> + <li>{{jsxref("Map")}}</li> + <li>{{jsxref("Set")}}</li> + <li>{{jsxref("WeakMap")}}</li> + <li>{{jsxref("WeakSet")}}</li> +</ul> + +<h3 id="Koleksi_vektor">Koleksi vektor</h3> + +<p>{{Glossary("SIMD")}} tipe data vector adalah objek dimana data diatur arahnya.</p> + +<ul> + <li>{{jsxref("SIMD")}} {{experimental_inline}}</li> + <li>{{jsxref("Float32x4", "SIMD.Float32x4")}} {{experimental_inline}}</li> + <li>{{jsxref("Float64x2", "SIMD.Float64x2")}} {{experimental_inline}}</li> + <li>{{jsxref("Int8x16", "SIMD.Int8x16")}} {{experimental_inline}}</li> + <li>{{jsxref("Int16x8", "SIMD.Int16x8")}} {{experimental_inline}}</li> + <li>{{jsxref("Int32x4", "SIMD.Int32x4")}} {{experimental_inline}}</li> + <li>{{jsxref("Uint8x16", "SIMD.Uint8x16")}} {{experimental_inline}}</li> + <li>{{jsxref("Uint16x8", "SIMD.Uint16x8")}} {{experimental_inline}}</li> + <li>{{jsxref("Uint32x4", "SIMD.Uint32x4")}} {{experimental_inline}}</li> + <li>{{jsxref("Bool8x16", "SIMD.Bool8x16")}} {{experimental_inline}}</li> + <li>{{jsxref("Bool16x8", "SIMD.Bool16x8")}} {{experimental_inline}}</li> + <li>{{jsxref("Bool32x4", "SIMD.Bool32x4")}} {{experimental_inline}}</li> + <li>{{jsxref("Bool64x2", "SIMD.Bool64x2")}} {{experimental_inline}}</li> +</ul> + +<h3 id="Data_terstruktur">Data terstruktur</h3> + +<p>Objek ini mewakili dan berinteraksi dengan buffer data terstruktur dan data yang dikodekan menggunakan JavaScript Object Notation (JSON).</p> + +<ul> + <li>{{jsxref("ArrayBuffer")}}</li> + <li>{{jsxref("SharedArrayBuffer")}} {{experimental_inline}}</li> + <li>{{jsxref("Atomics")}} {{experimental_inline}}</li> + <li>{{jsxref("DataView")}}</li> + <li>{{jsxref("JSON")}}</li> +</ul> + +<h3 id="Kontrol_objek_abstraksi">Kontrol objek abstraksi </h3> + +<ul> + <li>{{jsxref("Promise")}}</li> + <li>{{jsxref("Generator")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> +</ul> + +<h3 id="Refleksi_(Pantulan)">Refleksi (Pantulan)</h3> + +<ul> + <li>{{jsxref("Reflect")}}</li> + <li>{{jsxref("Proxy")}}</li> +</ul> + +<h3 id="Internasionalisasi">Internasionalisasi</h3> + +<p>Penambahan inti ECMAScript untuk fungsi bahasa-sensitif.</p> + +<ul> + <li>{{jsxref("Intl")}}</li> + <li>{{jsxref("Global_Objects/Collator", "Intl.Collator")}}</li> + <li>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li> + <li>{{jsxref("Global_Objects/NumberFormat", "Intl.NumberFormat")}}</li> +</ul> + +<h3 id="Objek_Non-standar">Objek Non-standar</h3> + +<ul> + <li>{{jsxref("Iterator")}} {{non-standard_inline}}</li> + <li>{{jsxref("ParallelArray")}} {{non-standard_inline}}</li> + <li>{{jsxref("StopIteration")}} {{non-standard_inline}}</li> +</ul> + +<h3 id="Lainnya">Lainnya</h3> + +<ul> + <li><code><a href="/id/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a></code></li> +</ul> +</div> + +<p> </p> diff --git a/files/id/web/javascript/reference/global_objects/isnan/index.html b/files/id/web/javascript/reference/global_objects/isnan/index.html new file mode 100644 index 0000000000..b7a6774528 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/isnan/index.html @@ -0,0 +1,186 @@ +--- +title: isNaN() +slug: Web/JavaScript/Reference/Global_Objects/isNaN +translation_of: Web/JavaScript/Reference/Global_Objects/isNaN +--- +<div>{{jsSidebar("Objects")}}</div> + +<p>Fungsi <code><strong>isNaN()</strong></code> menentukan apakah nilai adalah sebuah {{jsxref("NaN")}} atau bukan. Catatan: pemaksaan pada fungsi <code>isNaN</code> memiliki aturan yang <a href="#Description">menarik</a>. Anda mungkin ingin menggunakan {{jsxref("Number.isNaN()")}}, <span id="result_box" lang="id"><span>seperti yang didefinisikan dalam ECMAScript 2015.</span></span></p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>isNaN(v<em>alue</em>)</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>value</code></dt> + <dd>Nilai yang akan di uji.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p><strong><code>true</code></strong> Jika nilai yang di uji adalah {{jsxref("NaN")}}; jika tidak, <strong><code>false</code></strong>.</p> + +<h2 id="Deskripsi">Deskripsi</h2> + +<h3 id="Kebutuhan_akan_fungsi_isNaN">Kebutuhan akan fungsi <code>isNaN</code></h3> + +<p>Mungkin tidak seperti nilai lainnya dalam javascript, Ini tidak memungkinkan untuk mengandalkan operator persamaan (== dan ===) untuk menentukan bahwa nilai adalah {{jsxref("NaN")}} atau bukan, karena <code>NaN == NaN</code> dan <code>NaN === NaN</code> mengevaluasi ke <code>false</code>. Oleh karena itu, diperlukan adanya fungsi <code>isNaN</code>.</p> + +<h3 id="Asal_Mula_Nilai_NaN">Asal Mula Nilai <code>NaN</code></h3> + +<p>Nilai<code>NaN</code> <span id="result_box" lang="id"><span>dihasilkan saat operasi aritmatika menghasilkan nilai <em>undefined</em> atau <em>unrepresentable</em></span></span>. <span id="result_box" lang="id"><span>Nilai tersebut tidak harus mewakili kondisi overflow</span></span>. <code>NaN</code> juga dihasilkan dari percobaan pemaksaan ke nilai numerik dari nilai non-numerik <span id="result_box" lang="id"><span>yang tidak memiliki nilai numerik primitif yang tersedia.</span></span></p> + +<p><span class="short_text" id="result_box" lang="id"><span>Misalnya, membagi nol dengan nol menghasilkan sebuah</span></span> <code>NaN</code> — namun <span class="short_text" id="result_box" lang="id"><span>membagi angka lain dengan nol tidak menghasilkan sebuah <code>NaN</code>.</span></span></p> + +<h3 id="Perilaku_Khusus_yang_membingungkan">Perilaku Khusus yang membingungkan</h3> + +<p><span id="result_box" lang="id"><span>Karena versi paling awal dari spesifikasi fungsi</span></span> <code>isNaN</code> , perilaku untuk argumen non-numerik menjadi membingungkan. Ketika<span id="result_box" lang="id"><span> argumen ke fungsi</span></span> <code>isNaN</code> bukan bertipe <a href="http://es5.github.com/#x8.5" title="http://es5.github.com/#x8.5">Number</a>, Nilainya akan dipaksakan terlebih dahulu ke tipe <a href="http://es5.github.com/#x8.5" title="http://es5.github.com/#x8.5">Number</a>. <span id="result_box" lang="id"><span>Nilai yang dihasilkan kemudian diuji untuk menentukan apakah itu</span></span> {{jsxref("NaN")}}. Jadi untuk non-angka <span id="result_box" lang="id"><span>yang jika dipaksakan pada hasil numerik menghasilkan nilai numerik</span></span> non-NaN (<span id="result_box" lang="id"><span>terutama string kosong dan primitif boolean, yang jika dipaksakan memberi nilai numerik nol atau satu</span></span>), nilai pengembalian "false" mungkin tidak terduga; <span id="result_box" lang="id"><span>String kosong, misalnya, pastinya "not a number"</span></span>. <span id="result_box" lang="id"><span>Kebingungan itu berawal dari kenyataan bahwa istilah</span></span> "not a number", <span id="result_box" lang="id"><span>memiliki arti khusus untuk angka yang diwakili sebagai nilai floating-point IEEE-754</span></span>. <span id="result_box" lang="id"><span>Fungsi harus diinterpretasikan sebagai penjawab pertanyaan, "apakah nilai ini, jika dipaksakan pada nilai numerik, nilai IEEE-754 'Not A Number'?"</span></span></p> + +<p><span class="short_text" id="result_box" lang="id"><span class="alt-edited">Versi terbaru dari ECMAScript (ES2015) berisi fungsi </span></span>{{jsxref("Number.isNaN()")}}. <code>Number.isNaN(x)</code> <span class="short_text" id="result_box" lang="id"><span>akan menjadi cara yang andal untuk menguji apakah</span></span> <code>x</code> adalah <code>NaN</code> atau bukan. Bahkan dengan <code>Number.isNaN</code>, <span id="result_box" lang="id"><span>namun arti <code>NaN</code> tetap merupakan makna numerik yang tepat, dan bukan sekadar,</span></span> "not a number". Sebagai alternatif, untuk ketidakhadiran <code>Number.isNaN</code>, ekspresi <code>(x != x)</code> <span id="result_box" lang="id"><span>adalah cara yang lebih dapat diandalkan untuk menguji apakah variabel x adalah <code>NaN</code></span></span> <span id="result_box" lang="id"><span>atau bukan, karena hasilnya tidak sesuai dengan false positive yang membuat</span></span> <code>isNaN</code> <span id="result_box" lang="id"><span>tidak dapat diandalkan</span></span>.</p> + +<p><span class="short_text" id="result_box" lang="id"><span>Anda bisa memikirkan isNaN sebagai:</span></span></p> + +<pre class="brush: js">var isNaN = function(value) { + return Number.isNaN(Number(value)); +}</pre> + +<h2 id="Contoh">Contoh</h2> + +<pre class="brush: js">isNaN(NaN); // true +isNaN(undefined); // true +isNaN({}); // true + +isNaN(true); // false +isNaN(null); // false +isNaN(37); // false + +// strings +isNaN('37'); // false: "37" <span class="short_text" id="result_box" lang="id"><span>dikonversi ke nomor</span></span> 37 yang mana bukan NaN +isNaN('37.37'); // false: "37.37" <span class="short_text" id="result_box" lang="id"><span>dikonversi ke nomor</span></span> 37.37 yang mana bukan NaN +isNaN('123ABC'); // true: parseInt("123ABC") adalah 123 namun Number("123ABC") adalah NaN +isNaN(''); // false: string kosing dikonversi ke 0 yang mana bukan NaN +isNaN(' '); // false: string dengan spasi dikonversi ke 0 yang mana bukan NaN + +// dates +isNaN(new Date()); // false +isNaN(new Date().toString()); // true + +// <span id="result_box" lang="id"><span>Ini adalah false positif dan alasan mengapa NaN tidak sepenuhnya dapat diandalkan</span></span> +isNaN('blabla'); // true: "blabla" dikonversi ke nomor. + // <span id="result_box" lang="id"><span>Parsing ini sebagai nomor gagal dan mengembalikan NaN</span></span> +</pre> + +<h3 id="Berguna_dalam_perilaku_khusus">Berguna dalam perilaku khusus</h3> + +<p><span id="result_box" lang="id"><span>Ada cara penggunaan </span></span><span lang="id"><span>yang lebih berorientasi untuk memikirkan <code>isNaN</code></span></span> <code>isNaN()</code>: Jika <code>isNaN(x)</code> mengembalikan <code>false</code>, anda bisa menggunakan <code>x</code> <span id="result_box" lang="id"><span>dalam ekspresi aritmatika tidak membuat ekspresi mengembalikan</span></span> <code>NaN</code>. Jika itu mengembalikan<code>true</code>, <code>x</code> <span class="short_text" id="result_box" lang="id"><span>akan membuat setiap ekspresi aritmatika</span></span> mengembalikan <code>NaN</code>. <span class="short_text" id="result_box" lang="id"><span>Ini berarti bahwa dalam JavaScript,</span></span> <code>isNaN(x) == true</code> <span class="short_text" id="result_box" lang="id"><span>setara dengan</span></span> <code>x - 0</code> mengembalikan <code>NaN</code> (<span class="short_text" id="result_box" lang="id"><span>meskipun di JavaScript</span></span> <code>x - 0 == NaN</code> selalu mengembalikan false, <span id="result_box" lang="id"><span>jadi anda tidak bisa mengujinya).</span> <span>Sebenarnya, </span></span><code>isNaN(x)</code>, <code>isNaN(x - 0)</code>, <code>isNaN(Number(x))</code>, <code>Number.isNaN(x - 0)</code>, dan <code>Number.isNaN(Number(x))</code> <span class="short_text" id="result_box" lang="id"><span>selalu kembali sama dan di JavaScript</span></span><code>isNaN(x)</code> <span id="result_box" lang="id"><span>hanya bentuk sesingkat mungkin untuk mengungkapkan masing-masing istilah ini.</span></span></p> + +<p><span id="result_box" lang="id"><span>Anda dapat menggunakan ini, misalnya, untuk menguji apakah sebuah argumen terhadap suatu fungsi secara aritmatika dapat diolah (dapat digunakan "seperti" angka), atau jika tidak dan Anda harus memberikan nilai default atau yang lainnya.</span> <span>Dengan cara ini Anda dapat memiliki fungsi yang memanfaatkan fleksibilitas penuh JavaScript yang disediakan oleh nilai konversi secara implisit bergantung pada konteks.</span></span></p> + +<h2 id="Contoh_2">Contoh</h2> + +<pre class="brush: js">function increment(x) { + if (isNaN(x)) x = 0; + return x + 1; +} + +// <span class="short_text" id="result_box" lang="id"><span>Efek yang sama dengan</span></span> Number.isNaN(): +function increment(x) { + if (Number.isNaN(Number(x))) x = 0; + return x + 1; +} + +// <span class="short_text" id="result_box" lang="id"><span>Dalam kasus berikut untuk argumen fungsi x,</span></span> +// isNaN(x)<span class="short_text" id="result_box" lang="id"><span>selalu salah, meski x memang bukan sebuah</span></span> +// nomor, <span class="short_text" id="result_box" lang="id"><span>namun bisa digunakan seperti itu dalam ekspresi +// aritmatika</span></span> +increment(''); // 1: "" dikonversi ke 0 +increment(new String()); // 1: <span id="result_box" lang="id"><span>Objek String yang mewakili string kosong dikonversi menjadi 0</span></span> +increment([]); // 1: [] dikonversi ke 0 +increment(new Array()); // 1: <span id="result_box" lang="id"><span>Objek array yang mewakili sebuah array kosong dikonversi menjadi 0</span></span> +increment('0'); // 1: "0" dikonversi ke 0 +increment('1'); // 2: "1" dikonversi ke 1 +increment('0.1'); // 1.1: "0.1" dikonversi ke 0.1 +increment('Infinity'); // Infinity: "Infinity" dikonversi ke Infinity +increment(null); // 1: null dikonversi ke 0 +increment(false); // 1: false dikonversi ke 0 +increment(true); // 2: true dikonversi ke 1 +increment(new Date()); // <span id="result_box" lang="id"><span>mengembalikan tanggal/waktu sekarang dalam milidetik ditambah 1</span></span> + +// <span class="short_text" id="result_box" lang="id"><span>Dalam kasus berikut untuk argumen fungsi x,</span></span> +// isNaN(x) <span class="short_text" id="result_box" lang="id"><span>selalu false dan x memang angka</span></span> +increment(-1); // 0 +increment(-0.1); // 0.9 +increment(0); // 1 +increment(1); // 2 +increment(2); // 3 +// ... <span class="short_text" id="result_box" lang="id"><span>dan seterusnya</span></span> ... +increment(Infinity); // Infinity + +// <span class="short_text" id="result_box" lang="id"><span>Dalam kasus berikut untuk argumen fungsi x,</span></span> +// isNaN(x) <span class="short_text" id="result_box" lang="id"><span>selalu true dan x benar-benar bukan angka,</span></span> +// <span id="result_box" lang="id"><span>sehingga fungsi tersebut menggantikannya dengan 0 dan mengembalikan 1</span></span> +increment(String); // 1 +increment(Array); // 1 +increment('blabla'); // 1 +increment('-blabla'); // 1 +increment(0 / 0); // 1 +increment('0 / 0'); // 1 +increment(Infinity / Infinity); // 1 +increment(NaN); // 1 +increment(undefined); // 1 +increment(); // 1 + +// isNaN(x) <span class="short_text" id="result_box" lang="id"><span>selalu sama dengan</span></span> isNaN(Number(x)), +// <span class="short_text" id="result_box" lang="id"><span>namun kehadirannya</span></span> x <span class="short_text" id="result_box" lang="id"><span>adalah wajib disini</span></span>! +isNaN(x) == isNaN(Number(x)); // true <span class="short_text" id="result_box" lang="id"><span>untuk setiap nilai</span></span> x, termasuk x == undefined, + // karena isNaN(undefined) == true dan Number(undefined) mengembalikan NaN, + // namun ... +isNaN() == isNaN(Number()); // false, karena isNaN() == true dan Number() == 0 +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.1.2.4', 'isNaN')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-isnan-number', 'isNaN')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-isnan-number', 'isNaN')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.builtins.isNaN")}}</p> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li>{{jsxref("NaN")}}</li> + <li>{{jsxref("Number.isNaN()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/json/index.html b/files/id/web/javascript/reference/global_objects/json/index.html new file mode 100644 index 0000000000..4f07030358 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/json/index.html @@ -0,0 +1,243 @@ +--- +title: JSON +slug: Web/JavaScript/Reference/Global_Objects/JSON +translation_of: Web/JavaScript/Reference/Global_Objects/JSON +--- +<div>{{JSRef}}</div> + +<p>Didalam object <strong><code>JSON</code></strong> terdapat banyak method untuk memparse <a class="external" href="http://json.org/">JavaScript Object Notation</a> ({{glossary("JSON")}}) dan mengkonversi nilai ke JSON. Hal ini tidak dapat di gunakan atau dibangun, dan selain dari kedua sifat method tersebut tidak memiliki fungsi tersendiri.</p> + +<h2 id="Deskripsi">Deskripsi</h2> + +<h3 id="JavaScript_Object_Notation">JavaScript Object Notation</h3> + +<p>JSON merupakan sebuah syntax untuk menserialisasi objects, array, angka, string, boolean, dan {{jsxref("null")}}. Hal ini dilihat berdasarkan pada syntax javascript. Akan tetapi terpisah dari dari hal tersebut: beberapa javascript bukanlah JSON, dan beberapa JSON juga tidak dapat dikatakan sebagai Javascript. Lihat juga <a href="http://timelessrepo.com/json-isnt-a-javascript-subset">JSON: The JavaScript subset that isn't</a>.</p> + +<table> + <caption>Perbedaan JavaScript dan JSON</caption> + <thead> + <tr> + <th scope="col">Type pada JavaScript</th> + <th scope="col">Perbedaan dengan JSON</th> + </tr> + </thead> + <tbody> + <tr> + <td>Object dan Array</td> + <td>Nama properti harus menggunakan string double quotes; tidak diakhiri dengan koma.</td> + </tr> + <tr> + <td>Angka</td> + <td>Tidak diawali dengan nol; desimal harus di ikuti setidaknya satu digit.</td> + </tr> + <tr> + <td>String</td> + <td> + <p>Hanya beberapa karakter tertentu yang menggunakan escape; Kontrol karakter tertentu tidak diperbolehkan; Pemisah baris Unicode (<a href="http://unicode-table.com/en/2028/">U+2028</a>) dan pemisah paragraf (<a href="http://unicode-table.com/en/2029/">U+2029</a>) dapat digunakan; string harus menggunakan double-quoted. Lihat contoh dimana {{jsxref("JSON.parse()")}} bisa digunakan dan {{jsxref("SyntaxError")}} dilemparkan ketika mengevaluasi kode sebagai javascript:</p> + + <pre class="brush: js"> +var kode = '"\u2028\u2029"'; +JSON.parse(kode); // bisa digunakan. +eval(kode); // gagal! +</pre> + </td> + </tr> + </tbody> +</table> + +<p>Syntax JSON lengkapnya sebagai berikut:</p> + +<pre><var>JSON</var> = <strong>null</strong> + <em>or</em> <strong>true</strong> <em>or</em> <strong>false</strong> + <em>or</em> <var>JSONNumber</var> + <em>or</em> <var>JSONString</var> + <em>or</em> <var>JSONObject</var> + <em>or</em> <var>JSONArray</var> + +<var>JSONNumber</var> = <strong>-</strong> <var>PositiveNumber</var> + <em>or</em> <var>PositiveNumber</var> +<var>PositiveNumber</var> = DecimalNumber + <em>or</em> <var>DecimalNumber</var> <strong>.</strong> <var>Digits</var> + <em>or</em> <var>DecimalNumber</var> <strong>.</strong> <var>Digits</var> <var>ExponentPart</var> + <em>or</em> <var>DecimalNumber</var> <var>ExponentPart</var> +<var>DecimalNumber</var> = <strong>0</strong> + <em>or</em> <var>OneToNine</var> <var>Digits</var> +<var>ExponentPart</var> = <strong>e</strong> <var>Exponent</var> + <em>or</em> <strong>E</strong> <var>Exponent</var> +<var>Exponent</var> = <var>Digits</var> + <em>or</em> <strong>+</strong> <var>Digits</var> + <em>or</em> <strong>-</strong> <var>Digits</var> +<var>Digits</var> = <var>Digit</var> + <em>or</em> <var>Digits</var> <var>Digit</var> +<var>Digit</var> = <strong>0</strong> through <strong>9</strong> +<var>OneToNine</var> = <strong>1</strong> through <strong>9</strong> + +<var>JSONString</var> = <strong>""</strong> + <em>or</em> <strong>"</strong> <var>StringCharacters</var> <strong>"</strong> +<var>StringCharacters</var> = <var>StringCharacter</var> + <em>or</em> <var>StringCharacters</var> <var>StringCharacter</var> +<var>StringCharacter</var> = any character + <em>except</em> <strong>"</strong> <em>or</em> <strong>\</strong> <em>or</em> U+0000 through U+001F + <em>or</em> <var>EscapeSequence</var> +<var>EscapeSequence</var> = <strong>\"</strong> <em>or</em> <strong>\/</strong> <em>or</em> <strong>\\</strong> <em>or</em> <strong>\b</strong> <em>or</em> <strong>\f</strong> <em>or</em> <strong>\n</strong> <em>or</em> <strong>\r</strong> <em>or</em> <strong>\t</strong> + <em>or</em> <strong>\u</strong> <var>HexDigit</var> <var>HexDigit</var> <var>HexDigit</var> <var>HexDigit</var> +<var>HexDigit</var> = <strong>0</strong> through <strong>9</strong> + <em>or</em> <strong>A</strong> through <strong>F</strong> + <em>or</em> <strong>a</strong> through <strong>f</strong> + +<var>JSONObject</var> = <strong>{</strong> <strong>}</strong> + <em>or</em> <strong>{</strong> <var>Members</var> <strong>}</strong> +<var>Members</var> = <var>JSONString</var> <strong>:</strong> <var>JSON</var> + <em>or</em> <var>Members</var> <strong>,</strong> <var>JSONString</var> <strong>:</strong> <var>JSON</var> + +<var>JSONArray</var> = <strong>[</strong> <strong>]</strong> + <em>or</em> <strong>[</strong> <var>ArrayElements</var> <strong>]</strong> +<var>ArrayElements</var> = <var>JSON</var> + <em>or</em> <var>ArrayElements</var> <strong>,</strong> <var>JSON</var> +</pre> + +<p>Whitespace yang tidak signifikan dapat digunakan dimanasaja kecuali didalam <code><var>JSONNumber</var></code> (angka tidak dipisahkan dengan whitespace) atau <code><var>JSONString</var></code> (dimana ditafsirkan sebagai karakter yang sesuai dalam string; atau akan menyebabkan kesalahan). Karakter Tab (<a href="http://unicode-table.com/en/0009/">U+0009</a>), carriage return (<a href="http://unicode-table.com/en/000D/">U+000D</a>), line feed (<a href="http://unicode-table.com/en/000A/">U+000A</a>), dan karakter spasi (<a href="http://unicode-table.com/en/0020/">U+0020</a>) merupakan karakter whitespace yang valid.</p> + +<h2 id="Method">Method</h2> + +<dl> + <dt>{{jsxref("JSON.parse()")}}</dt> + <dd>Memparse string sebagai JSON, biasanya mengubah nilai yang diberikan beserta sifatnya, dan mengembalikan nilai.</dd> + <dt>{{jsxref("JSON.stringify()")}}</dt> + <dd>Mengembalikan string JSON berdasarkan nilai spesifik, biasanya termasuk beberapa properti tertentu saja atau mengganti nilai properti secara user-defined.</dd> +</dl> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Object JSON tidak didukung oleh browser lawas. Anda bisa menyiasatinya dengan memasukkan kode berikut di awal skrip Anda, memungkinkan penggunaan JSON objek dalam implementasi yang secara native tidak mendukung Object JSON (seperti Internet Explorer 6).</p> + +<p>Algoritma berikut adalah tiruan dari objek JSON asli:</p> + +<pre class="brush: js">if (!window.JSON) { + window.JSON = { + parse: function(sJSON) { return eval('(' + sJSON + ')'); }, + stringify: (function () { + var toString = Object.prototype.toString; + var isArray = Array.isArray || function (a) { return toString.call(a) === '[object Array]'; }; + var escMap = {'"': '\\"', '\\': '\\\\', '\b': '\\b', '\f': '\\f', '\n': '\\n', '\r': '\\r', '\t': '\\t'}; + var escFunc = function (m) { return escMap[m] || '\\u' + (m.charCodeAt(0) + 0x10000).toString(16).substr(1); }; + var escRE = /[\\"\u0000-\u001F\u2028\u2029]/g; + return function stringify(value) { + if (value == null) { + return 'null'; + } else if (typeof value === 'number') { + return isFinite(value) ? value.toString() : 'null'; + } else if (typeof value === 'boolean') { + return value.toString(); + } else if (typeof value === 'object') { + if (typeof value.toJSON === 'function') { + return stringify(value.toJSON()); + } else if (isArray(value)) { + var res = '['; + for (var i = 0; i < value.length; i++) + res += (i ? ', ' : '') + stringify(value[i]); + return res + ']'; + } else if (toString.call(value) === '[object Object]') { + var tmp = []; + for (var k in value) { + if (value.hasOwnProperty(k)) + tmp.push(stringify(k) + ': ' + stringify(value[k])); + } + return '{' + tmp.join(', ') + '}'; + } + } + return '"' + value.toString().replace(escRE, escFunc) + '"'; + }; + })() + }; +} +</pre> + +<p>Lebih kompleks dari <a class="external" href="http://remysharp.com/2010/10/08/what-is-a-polyfill/">polyfills</a> yang banyak dikenal untuk object <code>JSON</code> adalah <a class="link-https" href="https://github.com/douglascrockford/JSON-js">JSON2</a> dan <a class="external" href="http://bestiejs.github.com/json3">JSON3</a>.</p> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.12', 'JSON')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-json-object', 'JSON')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-json-object', 'JSON')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>{{CompatIE("8.0")}}</td> + <td>{{CompatOpera("10.5")}}</td> + <td>{{CompatSafari("4.0")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="sect1"> </h2> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li>{{jsxref("Date.prototype.toJSON()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/json/parse/index.html b/files/id/web/javascript/reference/global_objects/json/parse/index.html new file mode 100644 index 0000000000..5eb3f60424 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/json/parse/index.html @@ -0,0 +1,171 @@ +--- +title: JSON.parse() +slug: Web/JavaScript/Reference/Global_Objects/JSON/parse +tags: + - ECMAScript5 + - JSON + - Method + - Referensi +translation_of: Web/JavaScript/Reference/Global_Objects/JSON/parse +--- +<div>{{JSRef}}</div> + +<p>Method <strong><code>JSON.parse()</code></strong> memparse string ke JSON, biasanya mengubah nilai yang dihasilkan oleh parsing.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><code>JSON.parse(<var>text</var>[, <var>reviver</var>])</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>text</code></dt> + <dd>String yang akan di parse ke JSON. Lihat objek {{jsxref("JSON")}} untuk deskripsi lengkap sintaks JSON.</dd> + <dt><code>reviver</code> {{optional_inline}}</dt> + <dd>Jika sebuah fungsi, mendeskripsikan bagaimana nilai asli dihasilkan oleh parsing berubah, sebelum dikembalikan.</dd> +</dl> + +<h3 id="Pemulangan">Pemulangan</h3> + +<p>Mengembalikan {{jsxref("Object")}} sesuai dengan teks JSON yang diberikan.</p> + +<h3 id="Lontaran">Lontaran</h3> + +<p>Melontarkan pengecualian {{jsxref("SyntaxError")}} jika string yang di parse tidak sesuai JSON.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Menggunakan_JSON.parse()">Menggunakan <code>JSON.parse()</code></h3> + +<pre class="brush: js">JSON.parse('{}'); // {} +JSON.parse('true'); // true +JSON.parse('"foo"'); // "foo" +JSON.parse('[1, 5, "false"]'); // [1, 5, "false"] +JSON.parse('null'); // null +</pre> + +<h3 id="Menggunakan_parameter_reviver">Menggunakan parameter <code>reviver</code></h3> + +<p>Jika <code>reviver</code> telah ditentukan, nilai dihitung dengan parsing <em>transformed</em> sebelum dikembalikan. Khususnya, nilai yang terhitung, dan semua propertinya (dimulai dari properti yang paling bersarang dan berlanjut ke nilai asli), secara individu dijalankan melalui <code>reviver</code>, yang di panggil dengan objek yang berada di dalam properti yang akan diproses sebagai <code>this</code> dan dengan nama properti sebagai string dan nilai properti sebagai argumen. jika fungsi <code>reviver</code> mengembalikan {{jsxref("undefined")}} (tidak mengembalikan nilai, contoh, jika eksekusi gagal di akhir fungsi), properti akan dihapus dari objek. Jika tidak, properti akan didefinisikan ulang sebagai sebuah nilai kembali.</p> + +<p><code>reviver</code> dipanggil dengan string kosong dan nilai paling atas mengizinkan tranformsi dari nilai paling atas. Jadi untuk menangani kasus ini dengan baik, biasanya dengan mengembalikan nilai yang diberikan, atau <code>JSON.parse()</code> akan mengembalikan {{jsxref("undefined")}}.</p> + +<pre class="brush: js">JSON.parse('{"p": 5}', function(k, v) { + if (k === '') { return v; } // if topmost value, return it, + return v * 2; // else return v * 2. +}); // { p: 10 } + +JSON.parse('{"1": 1, "2": 2, "3": {"4": 4, "5": {"6": 6}}}', function(k, v) { + console.log(k); // log the current property name, the last is "". + return v; // return the unchanged property value. +}); + +// 1 +// 2 +// 4 +// 6 +// 5 +// 3 +// "" +</pre> + +<h3 id="JSON.parse()_tidak_mengizinkan_trailing_koma"><code>JSON.parse()</code> tidak mengizinkan trailing koma</h3> + +<pre class="example-bad brush: js">// both will <code>throw a SyntaxError</code> +JSON.parse('[1, 2, 3, 4, ]'); +JSON.parse('{"foo" : 1, }'); +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.12.2', 'JSON.parse')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.7.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-json.parse', 'JSON.parse')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-json.parse', 'JSON.parse')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_browser">Kompabilitas browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>{{CompatIE("8.0")}}</td> + <td>{{CompatOpera("10.5")}}</td> + <td>{{CompatSafari("4.0")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Gecko-specific_notes">Gecko-specific notes</h2> + +<p>Pada Gecko 29 {{geckoRelease("29")}}, string JSON yang gagal akan menampilkan pesan kesalahan yang lebih rinci tentang error dalam memparse. Hal ini sangat berguna ketika mendebug data JSON yang besar.</p> + +<pre class="brush: js">JSON.parse('[1, 2, 3, 4,]'); +// SyntaxError: JSON.parse: unexpected character at +// line 1 column 13 of the JSON data +</pre> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li>{{jsxref("JSON.stringify()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/map/clear/index.html b/files/id/web/javascript/reference/global_objects/map/clear/index.html new file mode 100644 index 0000000000..2869835e02 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/map/clear/index.html @@ -0,0 +1,109 @@ +--- +title: Map.prototype.clear() +slug: Web/JavaScript/Reference/Global_Objects/Map/clear +translation_of: Web/JavaScript/Reference/Global_Objects/Map/clear +--- +<div>{{JSRef}}</div> + +<p>Method <code><strong>clear()</strong></code> menghapus semua elemen yang ada pada objek <code>Map</code>.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><code><em>myMap</em>.clear();</code></pre> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Menggunakan_method_clear">Menggunakan method <code>clear</code></h3> + +<pre class="brush: js">var myMap = new Map(); +myMap.set("bar", "baz"); +myMap.set(1, "foo"); + +myMap.size; // 2 +myMap.has("bar"); // true + +myMap.clear(); + +myMap.size; // 0 +myMap.has("bar") // false +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-map.prototype.clear', 'Map.prototype.clear')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-map.prototype.clear', 'Map.prototype.clear')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_browser">Kompabilitas browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>38</td> + <td>{{CompatGeckoDesktop("19.0")}}</td> + <td>11</td> + <td>25</td> + <td>7.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Dukungan dasart</td> + <td>{{CompatNo}}</td> + <td>38</td> + <td>{{CompatGeckoMobile("19.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li>{{jsxref("Map")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/map/delete/index.html b/files/id/web/javascript/reference/global_objects/map/delete/index.html new file mode 100644 index 0000000000..ad9d1922b9 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/map/delete/index.html @@ -0,0 +1,114 @@ +--- +title: Map.prototype.delete() +slug: Web/JavaScript/Reference/Global_Objects/Map/delete +translation_of: Web/JavaScript/Reference/Global_Objects/Map/delete +--- +<div>{{JSRef}}</div> + +<p>Method <code><strong>delete()</strong></code> menghapus elemen yang ditentukan dari objek <code>Map</code>.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="brush: js">myMap.delete(key);</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt>key</dt> + <dd>Diperlukan. Kunci dari elemen untuk menghapusnya dari objek <code>Map</code>.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>Mengembalikan nilai <code>true</code> jika elemen yang ada di dalam objek <code>Map</code> ada dan telah dihapus, atau <code>false</code> jika elemen tidak ada.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Menggunakan_method_delete">Menggunakan method <code>delete</code></h3> + +<pre class="brush: js">var myMap = new Map(); +myMap.set("bar", "foo"); + +myMap.delete("bar"); // Returns true. Berhasil dihapus. +myMap.has("bar"); // Returns false. Elemen "bar" sudah tidak tersedia. +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-map.prototype.delete', 'Map.prototype.delete')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-map.prototype.delete', 'Map.prototype.delete')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Browser">Kompabilitas Browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>38</td> + <td>{{CompatGeckoDesktop("13.0")}}</td> + <td>11</td> + <td>25</td> + <td>7.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatNo}}</td> + <td>38</td> + <td>{{CompatGeckoMobile("13.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("Map")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/map/index.html b/files/id/web/javascript/reference/global_objects/map/index.html new file mode 100644 index 0000000000..9e4a93cfa0 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/map/index.html @@ -0,0 +1,443 @@ +--- +title: Map +slug: Web/JavaScript/Reference/Global_Objects/Map +tags: + - ECMAScript6 + - JavaScript + - Map + - NeedsTranslation + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/Map +--- +<div>{{JSRef}}</div> + +<p>The <strong><code>Map</code></strong> object is a simple key/value map. Any value (both objects and {{Glossary("Primitive", "primitive values")}}) may be used as either a key or a value.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>new Map([iterable]) +</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>iterable</code></dt> + <dd>Iterable is an Array or other iterable object whose elements are key-value pairs (2-element Arrays). Each key-value pair is added to the new Map. <code>null</code> is treated as <code>undefined</code>.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>A Map object iterates its elements in insertion order — a {{jsxref("Statements/for...of", "for...of")}} loop returns an array of <code>[key, value]</code> for each iteration.</p> + +<h3 id="Key_equality">Key equality</h3> + +<p>Key equality is based on the "same-value" algorithm: <code>NaN</code> is considered the same as <code>NaN</code> (even though <code>NaN !== NaN</code>) and all other values are considered equal according to the semantics of the === operator. In earlier versions of the ECMAScript 6 draft <code>-0</code> and <code>+0</code> were considered distinct (even though <code>-0 === +0</code>), this has been changed in later versions and has been adapted in Gecko 29 {{geckoRelease("29")}} ({{bug("952870")}}) and a <a href="https://code.google.com/p/v8/issues/detail?id=3069">recent nightly Chrome</a>.</p> + +<h3 id="Objects_and_maps_compared">Objects and maps compared</h3> + +<p>{{jsxref("Object", "Objects")}} are similar to <code>Maps</code> in that both let you set keys to values, retrieve those values, delete keys, and detect whether something is stored at a key. Because of this (and because there were no built-in alternatives), <code>Objects</code> have been used as <code>Maps</code> historically; however, there are important differences between <code>Objects</code> and <code>Maps</code> that make using a <code>Map</code> better:</p> + +<ul> + <li>An <code>Object</code> has a prototype, so there are default keys in the map. This could be bypassed by using <code>map = Object.create(null)</code> since ES5, but was seldomly done.</li> + <li>The keys of an <code>Object</code> are {{jsxref("String", "Strings")}} and {{jsxref("Symbol", "Symbols")}}, where they can be any value for a <code>Map</code>.</li> + <li>You can get the size of a <code>Map</code> easily while you have to manually keep track of size for an <code>Object</code>.</li> +</ul> + +<p>This does not mean you should use <code>Map</code>s everywhere, objects still are used in most cases. <code>Map</code> instances are only useful for collections, and you should consider adapting your code where you have previously used objects for such. Objects shall be used as records, with fields and methods.<br> + If you're still not sure which one to use, ask yourself the following questions:</p> + +<ul> + <li>Are keys usually unknown until run time, do you need to look them up dynamically?</li> + <li>Do all values have the same type, and can be used interchangeably?</li> + <li>Do you need keys that aren't strings?</li> + <li>Are key-value pairs often added or removed?</li> + <li>Do you have an arbitrary (easily changing) amount of key-value pairs?</li> + <li>Is the collection iterated?</li> +</ul> + +<p>Those all are signs that you want a <code>Map</code> for a collection. If in contrast you have a fixed amount of keys, operate on them individually, and distinguish between their usage, then you want an object.</p> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt><code>Map.length</code></dt> + <dd>The value of the <code>length</code> property is 0.</dd> + <dt>{{jsxref("Map.@@species", "get Map[@@species]")}}</dt> + <dd>The constructor function that is used to create derived objects.</dd> + <dt>{{jsxref("Map.prototype")}}</dt> + <dd>Represents the prototype for the <code>Map</code> constructor. Allows the addition of properties to all <code>Map</code> objects.</dd> +</dl> + +<h2 id="Map_instances"><code>Map</code> instances</h2> + +<p>All <code>Map</code> instances inherit from {{jsxref("Map.prototype")}}.</p> + +<h3 id="Properties_2">Properties</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Map/prototype','Properties')}}</p> + +<h3 id="Methods">Methods</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Map/prototype','Methods')}}</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_the_Map_object">Using the <code>Map</code> object</h3> + +<pre class="brush: js">var myMap = new Map(); + +var keyString = "a string", + keyObj = {}, + keyFunc = function () {}; + +// setting the values +myMap.set(keyString, "value associated with 'a string'"); +myMap.set(keyObj, "value associated with keyObj"); +myMap.set(keyFunc, "value associated with keyFunc"); + +myMap.size; // 3 + +// getting the values +myMap.get(keyString); // "value associated with 'a string'" +myMap.get(keyObj); // "value associated with keyObj" +myMap.get(keyFunc); // "value associated with keyFunc" + +myMap.get("a string"); // "value associated with 'a string'" + // because keyString === 'a string' +myMap.get({}); // undefined, because keyObj !== {} +myMap.get(function() {}) // undefined, because keyFunc !== function () {} +</pre> + +<h3 id="Using_NaN_as_Map_keys">Using <code>NaN</code> as <code>Map</code> keys</h3> + +<p><code>NaN</code> can also be used as a key. Even though every <code>NaN</code> is not equal to itself (<code>NaN !== NaN</code> is true), the following example works, because <code>NaN</code>s are indistinguishable from each other:</p> + +<pre class="brush: js">var myMap = new Map(); +myMap.set(NaN, "not a number"); + +myMap.get(NaN); // "not a number" + +var otherNaN = Number("foo"); +myMap.get(otherNaN); // "not a number" +</pre> + +<h3 id="Iterating_Maps_with_for..of">Iterating <code>Maps</code> with <code>for..of</code></h3> + +<p>Maps can be iterated using a <code>for..of</code> loop:</p> + +<pre class="brush: js">var myMap = new Map(); +myMap.set(0, "zero"); +myMap.set(1, "one"); +for (var [key, value] of myMap) { + console.log(key + " = " + value); +} +// Will show 2 logs; first with "0 = zero" and second with "1 = one" + +for (var key of myMap.keys()) { + console.log(key); +} +// Will show 2 logs; first with "0" and second with "1" + +for (var value of myMap.values()) { + console.log(value); +} +// Will show 2 logs; first with "zero" and second with "one" + +for (var [key, value] of myMap.entries()) { + console.log(key + " = " + value); +} +// Will show 2 logs; first with "0 = zero" and second with "1 = one" +</pre> + +<h3 id="Iterating_Maps_with_forEach()">Iterating <code>Maps</code> with <code>forEach()</code></h3> + +<p>Maps can be iterated using the <code>forEach()</code> method:</p> + +<pre class="brush: js">myMap.forEach(function(value, key) { + console.log(key + " = " + value); +}, myMap) +// Will show 2 logs; first with "0 = zero" and second with "1 = one" +</pre> + +<h3 id="Relation_with_Array_objects">Relation with <code>Array</code> objects</h3> + +<pre class="brush: js">var kvArray = [["key1", "value1"], ["key2", "value2"]]; + +// Use the regular Map constructor to transform a 2D key-value Array into a map +var myMap = new Map(kvArray); + +myMap.get("key1"); // returns "value1" + +// Use the spread operator to transform a map into a 2D key-value Array. +console.log(uneval([...myMap])); // Will show you exactly the same Array as kvArray + +// Or use the spread operator on the keys or values iterator to get +// an array of only the keys or values +console.log(uneval([...myMap.keys()])); // Will show ["key1", "key2"] +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-map-objects', 'Map')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-map-objects', 'Map')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td> + <p>{{ CompatChrome(38) }} [1]</p> + </td> + <td>{{ CompatGeckoDesktop("13") }}</td> + <td>11</td> + <td>25</td> + <td>7.1</td> + </tr> + <tr> + <td>Constructor argument: <code>new Map(iterable)</code></td> + <td>{{ CompatChrome(38) }}</td> + <td>{{ CompatGeckoDesktop("13") }}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>iterable</td> + <td>{{ CompatChrome(38) }}</td> + <td>{{ CompatGeckoDesktop("17") }}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>7.1</td> + </tr> + <tr> + <td><code>Map.clear()</code></td> + <td>{{ CompatChrome(31) }}<br> + {{ CompatChrome(38) }}</td> + <td>{{CompatGeckoDesktop("19")}}</td> + <td>11</td> + <td>25</td> + <td>7.1</td> + </tr> + <tr> + <td><code>Map.keys(), Map.values(), Map.entries()</code></td> + <td>{{ CompatChrome(37) }}<br> + {{ CompatChrome(38) }}</td> + <td>{{CompatGeckoDesktop("20")}}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>7.1</td> + </tr> + <tr> + <td><code>Map.forEach()</code></td> + <td>{{ CompatChrome(36) }}<br> + {{ CompatChrome(38) }}</td> + <td>{{CompatGeckoDesktop("25")}}</td> + <td>11</td> + <td>25</td> + <td>7.1</td> + </tr> + <tr> + <td>Key equality for -0 and 0</td> + <td>{{ CompatChrome(34) }}<br> + {{ CompatChrome(38) }}</td> + <td>{{CompatGeckoDesktop("29")}}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Constructor argument: <code>new Map(null)</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("37")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Monkey-patched <code>set()</code> in Constructor</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("37")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>Map[@@species]</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("41")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>Map()</code> without <code>new</code> throws</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatGeckoDesktop("42") }}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{ CompatChrome(38) }} [1]</td> + <td>{{ CompatGeckoMobile("13") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + <tr> + <td>Constructor argument: <code>new Map(iterable)</code></td> + <td>{{CompatNo}}</td> + <td>{{ CompatChrome(38) }}</td> + <td>{{ CompatGeckoMobile("13") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>iterable</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoMobile("17") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + <tr> + <td><code>Map.clear()</code></td> + <td>{{CompatNo}}</td> + <td>{{ CompatChrome(31) }}<br> + {{ CompatChrome(38) }}</td> + <td>{{CompatGeckoMobile("19")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + <tr> + <td><code>Map.keys(), Map.values(), Map.entries()</code></td> + <td>{{CompatNo}}</td> + <td>{{ CompatChrome(37) }}<br> + {{ CompatChrome(38) }}</td> + <td>{{CompatGeckoMobile("20")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + <tr> + <td><code>Map.forEach()</code></td> + <td>{{CompatNo}}</td> + <td>{{ CompatChrome(36) }}<br> + {{ CompatChrome(38) }}</td> + <td>{{CompatGeckoMobile("25")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + <tr> + <td>Key equality for -0 and 0</td> + <td>{{CompatNo}}</td> + <td>{{ CompatChrome(34) }}<br> + {{ CompatChrome(38) }}</td> + <td>{{CompatGeckoMobile("29")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Constructor argument: <code>new Map(null)</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("37")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Monkey-patched <code>set()</code> in Constructor</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("37")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>Map[@@species]</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("41")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>Map()</code> without <code>new</code> throws</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("42")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Starting with Chrome 31, the feature was available behind a preference. In <code>chrome://flags</code>, activate the entry “Enable Experimental JavaScript”.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=697479">Map and Set bug at Mozilla</a></li> + <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:simple_maps_and_sets">ECMAScript Harmony proposal</a></li> + <li>{{jsxref("Set")}}</li> + <li>{{jsxref("WeakMap")}}</li> + <li>{{jsxref("WeakSet")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/math/abs/index.html b/files/id/web/javascript/reference/global_objects/math/abs/index.html new file mode 100644 index 0000000000..c15b00b315 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/math/abs/index.html @@ -0,0 +1,145 @@ +--- +title: Math.abs() +slug: Web/JavaScript/Reference/Global_Objects/Math/abs +tags: + - Math + - abs + - math abs +translation_of: Web/JavaScript/Reference/Global_Objects/Math/abs +--- +<div>{{JSRef}}</div> + +<p>Fungsi Math.abs() mengembalikan nilai mutlak dari sebuah bilangan, yakni</p> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.abs</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mrow><mo stretchy="false">|</mo><mi>x</mi><mo stretchy="false">|</mo></mrow><mo>=</mo><mrow><mo>{</mo><mtable columnalign="left left"><mtr><mtd><mi>x</mi></mtd><mtd><mtext>if</mtext><mspace width="1em"></mspace><mi>x</mi><mo>></mo><mn>0</mn></mtd></mtr><mtr><mtd><mi>0</mi></mtd><mtd><mtext>if</mtext><mspace width="1em"></mspace><mi>x</mi><mo>=</mo><mn>0</mn></mtd></mtr><mtr><mtd><mo>-</mo><mi>x</mi></mtd><mtd><mtext>if</mtext><mspace width="1em"></mspace><mi>x</mi><mo><</mo><mn>0</mn></mtd></mtr></mtable></mrow></mrow><annotation encoding="TeX">{\mathtt{\operatorname{Math.abs}(x)}} = {|x|} = \begin{cases} x & \text{if} \quad x \geq 0 \\ -x & \text{if} \quad x < 0 \end{cases} </annotation></semantics></math></p> + +<h2 id="Sintak">Sintak</h2> + +<pre class="syntaxbox"><code>Math.abs(<var>x</var>)</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Sebuah bilangan.</dd> +</dl> + +<h3 id="Nilai_kembali">Nilai kembali</h3> + +<p>Nilai mutlak dari bilangan yang diberikan.</p> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Karena <code>abs()</code> merupakan sebuah metode statis dari Math, anda harus menggunakannya/menulisnya sebagai berikut <code>Math.abs()</code>, Bukan sebagai metode dari sebuah object Math yang anda buat (<code>Math</code> bukanlah sebuah konstruktor).</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Prilaku_dari_Math.abs()">Prilaku dari <code>Math.abs()</code></h3> + +<p>Mengabaikan objek kosong, sebuah array dengan lebih dari satu anggota, sebuah string non-numerik atau {{jsxref("undefined")}}/variabel kosong dikembalikan{{jsxref("NaN")}}. Mengabaikan {{jsxref("null")}}, sebuah string kosong atau sebuah array kosong akan menghasilkan 0.</p> + +<pre class="brush: js" dir="rtl">Math.abs('-1'); // 1 +Math.abs(-2); // 2 +Math.abs(null); // 0 +Math.abs(''); // 0 +Math.abs([]); // 0 +Math.abs([2]); // 2 +Math.abs([1,2]); // NaN +Math.abs({}); // NaN +Math.abs('string'); // NaN +Math.abs(); // NaN +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Komentar</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definisi awal. Diimplementasikan pada JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.1', 'Math.abs')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.abs', 'Math.abs')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.abs', 'Math.abs')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatibilitas_browser">Kompatibilitas browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Android</th> + <th>Chrome untuk Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("Math.ceil()")}}</li> + <li>{{jsxref("Math.floor()")}}</li> + <li>{{jsxref("Math.round()")}}</li> + <li>{{jsxref("Math.sign()")}}</li> + <li>{{jsxref("Math.trunc()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/math/ceil/index.html b/files/id/web/javascript/reference/global_objects/math/ceil/index.html new file mode 100644 index 0000000000..cba010ffdb --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/math/ceil/index.html @@ -0,0 +1,174 @@ +--- +title: Math.ceil() +slug: Web/JavaScript/Reference/Global_Objects/Math/ceil +tags: + - JavaScript + - Math + - Metode + - Referensi +translation_of: Web/JavaScript/Reference/Global_Objects/Math/ceil +--- +<div>{{JSRef}}</div> + +<p>Fungsi Math.ceil() adalah memberikan nilai integer lebih-besar-dari terkecil atau sama-dengan (pembulatan ke atas) nilai yang ditentukan.</p> + +<p><strong>Catatan: </strong>Nilai kembalian Math.ceil(null) adalah integer 0 dan tidak memberikan kesalahan NaN.</p> + +<div>{{EmbedInteractiveExample("pages/js/math-ceil.html")}}</div> + + + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><code>Math.ceil(<var>x</var>)</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Sebuah angka.</dd> +</dl> + +<h3 id="Nilai_kembali">Nilai kembali</h3> + +<p>Nilai integer lebih-besar-dari terkecil atau sama-dengan (pembulatan ke atas) nilai yang ditentukan.</p> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Karena <code>ceil()</code> adalah sebuah metode statis dari Math, Anda harus selalu menggunakan sebagai <code>Math.ceil()</code>, bukan sebagai metode dari object Math yang Anda buat (<code>Math</code> bukanlah sebuah konstruktor).</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Menggunakan_Math.ceil()">Menggunakan <code>Math.ceil()</code></h3> + +<p>Berikut adalah contoh penggunaan dari <code>Math.ceil()</code>.</p> + +<pre class="brush: js">Math.ceil(.95); // 1 +Math.ceil(4); // 4 +Math.ceil(7.004); // 8 +Math.ceil(-0.95); // -0 +Math.ceil(-4); // -4 +Math.ceil(-7.004); // -7 +</pre> + +<h3 id="Penyesuaian_desimal">Penyesuaian desimal</h3> + +<pre class="brush: js">// Closure +(function() { + /** + * Penyesuaian desimal dari sebuah angka. + * + * @param {String} type Tipe dari penyesuaian. + * @param {Number} value Angka. + * @param {Integer} exp Eksponen (10 logaritma basis penyesuaian). + * @returns {Number} Nilai yang di sesuaikan. + */ + function decimalAdjust(type, value, exp) { + // jika exp adalah undefined atau nol... + if (typeof exp === 'undefined' || +exp === 0) { + return Math[type](value); + } + value = +value; + exp = +exp; + // Jika nilai adalah bukan sebuah angka atau bilangan integer... + if (isNaN(value) || !(typeof exp === 'number' && exp % 1 === 0)) { + return NaN; + } + // Shift + value = value.toString().split('e'); + value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp))); + // Shift back + value = value.toString().split('e'); + return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp)); + } + + // Decimal round + if (!Math.round10) { + Math.round10 = function(value, exp) { + return decimalAdjust('round', value, exp); + }; + } + // Decimal floor + if (!Math.floor10) { + Math.floor10 = function(value, exp) { + return decimalAdjust('floor', value, exp); + }; + } + // Decimal ceil + if (!Math.ceil10) { + Math.ceil10 = function(value, exp) { + return decimalAdjust('ceil', value, exp); + }; + } +})(); + +// Round +Math.round10(55.55, -1); // 55.6 +Math.round10(55.549, -1); // 55.5 +Math.round10(55, 1); // 60 +Math.round10(54.9, 1); // 50 +Math.round10(-55.55, -1); // -55.5 +Math.round10(-55.551, -1); // -55.6 +Math.round10(-55, 1); // -50 +Math.round10(-55.1, 1); // -60 +// Floor +Math.floor10(55.59, -1); // 55.5 +Math.floor10(59, 1); // 50 +Math.floor10(-55.51, -1); // -55.6 +Math.floor10(-51, 1); // -60 +// Ceil +Math.ceil10(55.51, -1); // 55.6 +Math.ceil10(51, 1); // 60 +Math.ceil10(-55.59, -1); // -55.5 +Math.ceil10(-59, 1); // -50 +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Komen</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definisi awal. Diimplementasikan dalam JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.6', 'Math.ceil')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.ceil', 'Math.ceil')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.ceil', 'Math.ceil')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatibilitas_peramban">Kompatibilitas peramban</h2> + +<div> +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("javascript.builtins.Math.ceil")}}</p> + +<h2 id="Lihat_pula">Lihat pula</h2> + +<ul> + <li>{{jsxref("Math.abs()")}}</li> + <li>{{jsxref("Math.floor()")}}</li> + <li>{{jsxref("Math.round()")}}</li> + <li>{{jsxref("Math.sign()")}}</li> + <li>{{jsxref("Math.trunc()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/math/e/index.html b/files/id/web/javascript/reference/global_objects/math/e/index.html new file mode 100644 index 0000000000..79e9f21f4a --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/math/e/index.html @@ -0,0 +1,81 @@ +--- +title: Math.E +slug: Web/JavaScript/Reference/Global_Objects/Math/E +translation_of: Web/JavaScript/Reference/Global_Objects/Math/E +--- +<div>{{JSRef}}</div> + +<p>Properti <strong><code>Math.E</code></strong> mewakili dasar logaritma alami, e, mendekati 2.718.</p> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.E</mi></mstyle><mo>=</mo><mi>e</mi><mo>≈</mo><mn>2.718</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.E}} = e \approx 2.718</annotation></semantics></math></p> + +<div>{{EmbedInteractiveExample("pages/js/math-e.html")}}</div> + +<p class="hidden">Sumber untuk contoh interaktif ini disimpan di repositori GitHub. Apabila anda ingin berkontribusi dalam proyek contoh interaktif tersebut, silahkan klon <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> dan kirimi kami sebuah pull request.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Karena <code>E</code> adalah sebuah properti matematika statis, saudara selalu menggunakannya sebagai <code>Math.E</code>, daripada sebagai sebuah properti dari objek matematika yang saudara buat. (<code>Math</code> bukan sebuah konstruktor).</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Menggunakan_Math.E">Menggunakan <code>Math.E</code></h3> + +<p>Fungsi berikut menampilkan nilai e:</p> + +<pre class="brush: js">function getNapier() { + return Math.E; +} + +getNapier(); // 2.718281828459045 +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Komentar</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td> + <p>definisi inisial. Diimplementasikan dalam JavaScript 1.0.</p> + </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.1.1', 'Math.E')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.e', 'Math.E')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.e', 'Math.E')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatibilitas_browser">Kompatibilitas browser</h2> + +<p class="hidden">Tabel kompatibilitas pada halaman ini dihasilkan dari data terstruktur. Apabila anda ingin berkontribusi, silahkan kunjungi <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> dan kirimi kami pull request.</p> + +<p>{{Compat("javascript.builtins.Math.E")}}</p> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li>{{jsxref("Math.exp()")}}</li> + <li>{{jsxref("Math.log()")}}</li> + <li>{{jsxref("Math.log1p()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/math/floor/index.html b/files/id/web/javascript/reference/global_objects/math/floor/index.html new file mode 100644 index 0000000000..ecd6e89cdd --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/math/floor/index.html @@ -0,0 +1,210 @@ +--- +title: Math.floor() +slug: Web/JavaScript/Reference/Global_Objects/Math/floor +tags: + - Math + - math floor + - pembulatan + - pembulatan bilangan + - pembulatan kebawah javascript +translation_of: Web/JavaScript/Reference/Global_Objects/Math/floor +--- +<div>{{JSRef}}</div> + +<p>Fungsi Math.floor() mengembalikan bilangan bulat terbesar yang kurang dari atau sama dengan bilangan yang diberikan.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><code>Math.floor(<var>x</var>)</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Sebuah bilangan.</dd> +</dl> + +<h3 id="Nilai_kembali">Nilai kembali</h3> + +<p>Sebuah bilangan yang merepresentasikan bilangan bulat terbesar yang kurang dari atau sama dengan nilai yang diberikan</p> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Karena <code>floor()</code> adalah sebuah metode statis dari <code>Math</code>, sintaks yang harus anda gunakan adalah <code>Math.floor()</code>, bukan sebagai metode dari obyek Math yang anda buat (<font face="Consolas, Liberation Mono, Courier, monospace">Math bukanlah sebuah konstruktor</font>).</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Penggunaan_Math.floor()">Penggunaan <code>Math.floor()</code></h3> + +<pre class="brush: js">Math.floor( 45.95); // 45 +Math.floor( 45.05); // 45 +Math.floor( 4 ); // 4 +Math.floor(-45.05); // -46 +Math.floor(-45.95); // -46 +</pre> + +<h3 id="Penyesuaian_desimal">Penyesuaian desimal</h3> + +<pre class="brush: js">// Closure +(function() { + /** + * Penyesuaian desimal dari sebuah bilangan. + * + * @param {String} type Jenis penyesuaian. + * @param {Number} value Nomor. + * @param {Integer} exp Eksponen (10 logaritma dari penyesuaian dasar). + * @returns {Number} Nilai yang disesuaikan. + */ + function decimalAdjust(jenis, nilai, eks) { + // Jika eks adalah undefined(belum didefinisikan) atau kosong... + if (typeof eks === 'undefined' || +eks === 0) { + return Math[jenis](nilai); + } + nilai = +nilai; + eks= +eks; + // Jika nilai bukan sebuah angka atau eks bukan sebuah bilangan integer... + if (isNaN(nilai) || !(typeof eks === 'number' && eks % 1 === 0)) { + return NaN; + } + // Pengalihan + nilai = nilai.toString().split('e'); + nilai = Math[jenis](+(nilai[0] + 'e' + (nilai[1] ? (+nilai[1] - eks) : -eks))); + // pengalihan kembali + nilai = nilai.toString().split('e'); + return +(nilai[0] + 'e' + (nilai[1] ? (+nilai[1] + eks) : eks)); + } + + // Desimal bulat + if (!Math.round10) { + Math.round10 = function(nilai, eks) { + return decimalAdjust('round', nilai, eks); + }; + } + // Desimal floor + if (!Math.floor10) { + Math.floor10 = function(nilai, eks) { + return decimalAdjust('floor', nilai, eks); + }; + } + // Desimal ceil + if (!Math.ceil10) { + Math.ceil10 = function(nilai, eks) { + return decimalAdjust('ceil', nilai, eks); + }; + } +})(); + +// Round +Math.round10(55.55, -1); // 55.6 +Math.round10(55.549, -1); // 55.5 +Math.round10(55, 1); // 60 +Math.round10(54.9, 1); // 50 +Math.round10(-55.55, -1); // -55.5 +Math.round10(-55.551, -1); // -55.6 +Math.round10(-55, 1); // -50 +Math.round10(-55.1, 1); // -60 +// Floor +Math.floor10(55.59, -1); // 55.5 +Math.floor10(59, 1); // 50 +Math.floor10(-55.51, -1); // -55.6 +Math.floor10(-51, 1); // -60 +// Ceil +Math.ceil10(55.51, -1); // 55.6 +Math.ceil10(51, 1); // 60 +Math.ceil10(-55.59, -1); // -55.5 +Math.ceil10(-59, 1); // -50 +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Komentar</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definisi awal. Diimplementasikan pada JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.9', 'Math.floor')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.floor', 'Math.floor')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.floor', 'Math.floor')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatibilitas_browser">Kompatibilitas browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("Math.abs()")}}</li> + <li>{{jsxref("Math.ceil()")}}</li> + <li>{{jsxref("Math.round()")}}</li> + <li>{{jsxref("Math.sign()")}}</li> + <li>{{jsxref("Math.trunc()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/math/index.html b/files/id/web/javascript/reference/global_objects/math/index.html new file mode 100644 index 0000000000..4d9bb6a9bb --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/math/index.html @@ -0,0 +1,213 @@ +--- +title: Math +slug: Web/JavaScript/Reference/Global_Objects/Math +tags: + - JavaScript + - Math + - NeedsTranslation + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/Math +--- +<div>{{JSRef}}</div> + +<p><strong><code>Math</code></strong> merupakan objek built-in yang memiliki properti dan method untuk perhitungan konstan dan fungsi. bukan Fungsi Objek.</p> + +<h2 id="Description">Description</h2> + +<p>Tidak seperti global objects lain, <code>Math</code> bukanlah constructor. Semua properti dan method dari <code>Math</code> adalah static. You refer to the constant pi as <code>Math.PI</code> and you call the sine function as <code>Math.sin(x)</code>, where <code>x</code> is the method's argument. Constants are defined with the full precision of real numbers in JavaScript.</p> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{jsxref("Math.E")}}</dt> + <dd>Euler's constant and the base of natural logarithms, approximately 2.718.</dd> + <dt>{{jsxref("Math.LN2")}}</dt> + <dd>Natural logarithm of 2, approximately 0.693.</dd> + <dt>{{jsxref("Math.LN10")}}</dt> + <dd>Natural logarithm of 10, approximately 2.303.</dd> + <dt>{{jsxref("Math.LOG2E")}}</dt> + <dd>Base 2 logarithm of E, approximately 1.443.</dd> + <dt>{{jsxref("Math.LOG10E")}}</dt> + <dd>Base 10 logarithm of E, approximately 0.434.</dd> + <dt>{{jsxref("Math.PI")}}</dt> + <dd>Ratio of the circumference of a circle to its diameter, approximately 3.14159.</dd> + <dt>{{jsxref("Math.SQRT1_2")}}</dt> + <dd>Square root of 1/2; equivalently, 1 over the square root of 2, approximately 0.707.</dd> + <dt>{{jsxref("Math.SQRT2")}}</dt> + <dd>Square root of 2, approximately 1.414.</dd> +</dl> + +<h2 id="Method">Method</h2> + +<div class="note"> +<p>Note that the trigonometric functions (<code>sin()</code>, <code>cos()</code>, <code>tan()</code>, <code>asin()</code>, <code>acos()</code>, <code>atan()</code>, <code>atan2()</code>) expect or return angles in radians. To convert radians to degrees, divide by <code>(Math.PI / 180)</code>, and multiply by this to convert the other way.</p> +</div> + +<div class="note"> +<p>Note that a lot of the math functions have a precision that's implementation-dependent. This means that different browsers can give a different result, and even the same JS engine on a different OS or architecture can give different results.</p> +</div> + +<dl> + <dt>{{jsxref("Global_Objects/Math/abs", "Math.abs(x)")}}</dt> + <dd>Returns the absolute value of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/acos", "Math.acos(x)")}}</dt> + <dd>Returns the arccosine of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/acosh", "Math.acosh(x)")}}</dt> + <dd>Returns the hyperbolic arccosine of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/asin", "Math.asin(x)")}}</dt> + <dd>Returns the arcsine of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/asinh", "Math.asinh(x)")}}</dt> + <dd>Returns the hyperbolic arcsine of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/atan", "Math.atan(x)")}}</dt> + <dd>Returns the arctangent of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/atanh", "Math.atanh(x)")}}</dt> + <dd>Returns the hyperbolic arctangent of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/atan2", "Math.atan2(y, x)")}}</dt> + <dd>Returns the arctangent of the quotient of its arguments.</dd> + <dt>{{jsxref("Global_Objects/Math/cbrt", "Math.cbrt(x)")}}</dt> + <dd>Returns the cube root of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/ceil", "Math.ceil(x)")}}</dt> + <dd>Returns the smallest integer greater than or equal to a number.</dd> + <dt>{{jsxref("Global_Objects/Math/clz32", "Math.clz32(x)")}}</dt> + <dd>Returns the number of leading zeroes of a 32-bit integer.</dd> + <dt>{{jsxref("Global_Objects/Math/cos", "Math.cos(x)")}}</dt> + <dd>Returns the cosine of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/cosh", "Math.cosh(x)")}}</dt> + <dd>Returns the hyperbolic cosine of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/exp", "Math.exp(x)")}}</dt> + <dd>Returns E<sup>x</sup>, where <var>x</var> is the argument, and E is Euler's constant (2.718…), the base of the natural logarithm.</dd> + <dt>{{jsxref("Global_Objects/Math/expm1", "Math.expm1(x)")}}</dt> + <dd>Returns subtracting 1 from <code>exp(x)</code>.</dd> + <dt>{{jsxref("Global_Objects/Math/floor", "Math.floor(x)")}}</dt> + <dd>Returns the largest integer less than or equal to a number.</dd> + <dt>{{jsxref("Global_Objects/Math/fround", "Math.fround(x)")}}</dt> + <dd>Returns the nearest <a href="http://en.wikipedia.org/wiki/Single-precision_floating-point_format" title="link to the wikipedia page on single precision">single precision</a> float representation of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/hypot", "Math.hypot([x[, y[, …]]])")}}</dt> + <dd>Returns the square root of the sum of squares of its arguments.</dd> + <dt>{{jsxref("Global_Objects/Math/imul", "Math.imul(x, y)")}}</dt> + <dd>Returns the result of a 32-bit integer multiplication.</dd> + <dt>{{jsxref("Global_Objects/Math/log", "Math.log(x)")}}</dt> + <dd>Returns the natural logarithm (log<sub>e</sub>, also ln) of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/log1p", "Math.log1p(x)")}}</dt> + <dd>Returns the natural logarithm of <code>1 + x</code> (log<sub>e</sub>, also ln) of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/log10", "Math.log10(x)")}}</dt> + <dd>Returns the base 10 logarithm of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/log2", "Math.log2(x)")}}</dt> + <dd>Returns the base 2 logarithm of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/max", "Math.max([x[, y[, …]]])")}}</dt> + <dd>Returns the largest of zero or more numbers.</dd> + <dt>{{jsxref("Global_Objects/Math/min", "Math.min([x[, y[, …]]])")}}</dt> + <dd>Returns the smallest of zero or more numbers.</dd> + <dt>{{jsxref("Global_Objects/Math/pow", "Math.pow(x, y)")}}</dt> + <dd>Returns base to the exponent power, that is, <code>base<sup>exponent</sup></code>.</dd> + <dt>{{jsxref("Global_Objects/Math/random", "Math.random()")}}</dt> + <dd>Returns a pseudo-random number between 0 and 1.</dd> + <dt>{{jsxref("Global_Objects/Math/round", "Math.round(x)")}}</dt> + <dd>Returns the value of a number rounded to the nearest integer.</dd> + <dt>{{jsxref("Global_Objects/Math/sign", "Math.sign(x)")}}</dt> + <dd>Returns the sign of the x, indicating whether x is positive, negative or zero.</dd> + <dt>{{jsxref("Global_Objects/Math/sin", "Math.sin(x)")}}</dt> + <dd>Returns the sine of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/sinh", "Math.sinh(x)")}}</dt> + <dd>Returns the hyperbolic sine of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/sqrt", "Math.sqrt(x)")}}</dt> + <dd>Returns the positive square root of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/tan", "Math.tan(x)")}}</dt> + <dd>Returns the tangent of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/tanh", "Math.tanh(x)")}}</dt> + <dd>Returns the hyperbolic tangent of a number.</dd> + <dt><code>Math.toSource()</code> {{non-standard_inline}}</dt> + <dd>Returns the string <code>"Math"</code>.</dd> + <dt>{{jsxref("Global_Objects/Math/trunc", "Math.trunc(x)")}}</dt> + <dd>Returns the integral part of the number x, removing any fractional digits.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8', 'Math')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math-object', 'Math')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New methods {{jsxref("Math.log10()", "log10()")}}, {{jsxref("Math.log2()", "log2()")}}, {{jsxref("Math.log1p()", "log1p()")}}, {{jsxref("Math.expm1()", "expm1()")}}, {{jsxref("Math.cosh()", "cosh()")}}, {{jsxref("Math.sinh()", "sinh()")}}, {{jsxref("Math.tanh()", "tanh()")}}, {{jsxref("Math.acosh()", "acosh()")}}, {{jsxref("Math.asinh()", "asinh()")}}, {{jsxref("Math.atanh()", "atanh()")}}, {{jsxref("Math.hypot()", "hypot()")}}, {{jsxref("Math.trunc()", "trunc()")}}, {{jsxref("Math.sign()", "sign()")}}, {{jsxref("Math.imul()", "imul()")}}, {{jsxref("Math.fround()", "fround()")}}, {{jsxref("Math.cbrt()", "cbrt()")}} and {{jsxref("Math.clz32()", "clz32()")}} added.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math-object', 'Math')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Number")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/math/ln10/index.html b/files/id/web/javascript/reference/global_objects/math/ln10/index.html new file mode 100644 index 0000000000..04e4fe5468 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/math/ln10/index.html @@ -0,0 +1,81 @@ +--- +title: Math.LN10 +slug: Web/JavaScript/Reference/Global_Objects/Math/LN10 +translation_of: Web/JavaScript/Reference/Global_Objects/Math/LN10 +--- +<div>{{JSRef}}</div> + +<p>Properti <strong><code>Math.LN10</code></strong> mewakili logaritma alami dari 10, mendekati 2.302:</p> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.LN10</mi></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mo stretchy="false">(</mo><mn>10</mn><mo stretchy="false">)</mo><mo>≈</mo><mn>2.302</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.LN10}} = \ln(10) \approx 2.302</annotation></semantics></math></p> + +<div>{{EmbedInteractiveExample("pages/js/math-ln10.html")}}</div> + +<p class="hidden">Sumber dari contoh interaktif ini disimpan di repositori GitHub. Apabila saudara ingin berkontribusi, silahkan klon <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> dan kirimi kami sebuah pull request.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Karena <code>LN10</code> adalah sebuah properti matematika statis, saudara selalu menggunakannya sebagai <code>Math.LN10</code>, daripada sebagai sebuah properti objek matematika yang saudara buat (<code>Math</code> bukan sebuah konstruktor).</p> + +<p><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 40px;"><strong>Contoh</strong></span></font></p> + +<p> + </p><h3 id="Menggunakan_Math.LN10">Menggunakan <code>Math.LN10</code></h3> +<p></p> + +<p>Fungsi berikut menampilkan log alami dari 10:</p> + +<pre class="brush:js">function getNatLog10() { + return Math.LN10; +} + +getNatLog10(); // 2.302585092994046 +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specisifikasi</th> + <th scope="col">Status</th> + <th scope="col">Komentar</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definisi inisial. Diimplementasikan di JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.1.2', 'Math.LN10')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.ln10', 'Math.LN10')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.ln10', 'Math.LN10')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatibilitas_browser">Kompatibilitas browser</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Math.LN10")}}</p> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("Math.exp()")}}</li> + <li>{{jsxref("Math.log()")}}</li> + <li>{{jsxref("Math.log10()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/math/max/index.html b/files/id/web/javascript/reference/global_objects/math/max/index.html new file mode 100644 index 0000000000..aeb1b207ce --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/math/max/index.html @@ -0,0 +1,144 @@ +--- +title: Math.max() +slug: Web/JavaScript/Reference/Global_Objects/Math/max +tags: + - JavaScript + - Math + - Method + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Math/max +--- +<div>{{JSRef}}</div> + +<p>Fungsi <strong><code>Math.max()</code></strong> mengembalikan nilai terbesar dari zero atau lebih besar.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><code>Math.max([<var>value1</var>[, <var>value2</var>[, ...]]])</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>value1, value2, ...</code></dt> + <dd>Nomor.</dd> +</dl> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Karena <code>max()</code> merupakan method static dari <code>Math</code>, anda perlu menggunakan <code>Math.max()</code>, daripada sebagai method dari objek <code>Math</code> yang anda buat (<code>Math</code> bukan constructor).</p> + +<p>Jika tidak diberi argumen, hasilnya akan -{{jsxref("Infinity")}}.</p> + +<p>Jika setidaknya satu argumen tidak dapat dikonversi ke angka, maka hasilnya {{jsxref("NaN")}}.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Penggunaan_Math.max()">Penggunaan <code>Math.max()</code></h3> + +<pre class="brush: js">Math.max(10, 20); // 20 +Math.max(-10, -20); // -10 +Math.max(-10, 20); // 20 +</pre> + +<p>Pada contoh menggunakan fungsi {{jsxref("Function.prototype.apply()")}} untuk mencari nilai elemen maksimum pada sebuah numeric array. <code>getMaxOfArray([1, 2, 3])</code> sama halnya dengan <code>Math.max(1, 2, 3)</code>, tapi anda bisa menggunakan <code>getMaxOfArray()</code> pada programmatikal pembuatan array untuk semua ukuran.</p> + +<pre class="brush: js">function getMaxOfArray(numArray) { + return Math.max.apply(null, numArray); +} +</pre> + +<p>Atau dengan {{jsxref("Operators/Spread_operator", "spread operator")}} baru, mencari nilai terbesar menjadi lebih mudah.</p> + +<pre class="brush: js">var arr = [1, 2, 3]; +var max = Math.max(...arr); +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.11', 'Math.max')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.max', 'Math.max')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.max', 'Math.max')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Browser">Kompabilitas Browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("Math.min()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/math/min/index.html b/files/id/web/javascript/reference/global_objects/math/min/index.html new file mode 100644 index 0000000000..eb557f36bf --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/math/min/index.html @@ -0,0 +1,150 @@ +--- +title: Math.min() +slug: Web/JavaScript/Reference/Global_Objects/Math/min +tags: + - JavaScript + - Math + - Method + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Math/min +--- +<div>{{JSRef}}</div> + +<p>Function <strong><code>Math.min()</code></strong> mengembalikan nilai terkecil dari zero atau lebih kecil.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><code>Math.min([<var>value1</var>[, <var>value2</var>[, ...]]])</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>value1, value2, ...</code></dt> + <dd>Nomor.</dd> +</dl> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Karena <code>min()</code> merupakan static method dari <code>Math</code>, anda perlu menggunakan <code>Math.min()</code>, daripada sebagai method dari objek <code>Math</code> yang anda buat (<code>Math</code> bukanlah konstruktor).</p> + +<p>Jika tidak diberi argumen, hasilnya adalah {{jsxref("Infinity")}}.</p> + +<p>Jika setidaknya satu argumen tidak bisa di konversi ke angka, maka hasilnya{{jsxref("NaN")}}.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Menggunakan_Math.min()">Menggunakan <code>Math.min()</code></h3> + +<p>Mencari nilai terkecil diantara <code>x</code> dan <code>y</code> dan menyimpannya di variabel <code>z</code>:</p> + +<pre class="brush: js">var x = 10, y = -20; +var z = Math.min(x, y); +</pre> + +<h3 id="Mengambil_nilai_dengan_Math.min()">Mengambil nilai dengan <code>Math.min()</code></h3> + +<p><code>Math.min()</code> biasa digunakan untuk mengambil nilai yang terkecil atau sama berdasarkan batasan yang ada. contoh sebagai berikut.</p> + +<pre class="brush: js">var x = f(foo); + +if (x > boundary) { + x = boundary; +} +</pre> + +<p>bisa ditulis sebagai berikut</p> + +<pre class="brush: js">var x = Math.min(f(foo), boundary); +</pre> + +<p>{{jsxref("Math.max()")}} bisa digunakan sama halnya denga mengambil nilai pada setiap batasan.</p> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.12', 'Math.min')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.min', 'Math.min')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.min', 'Math.min')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_browser">Kompabilitas browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("Math.max()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/math/pow/index.html b/files/id/web/javascript/reference/global_objects/math/pow/index.html new file mode 100644 index 0000000000..878fde0e04 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/math/pow/index.html @@ -0,0 +1,53 @@ +--- +title: Math.pow +slug: Web/JavaScript/Reference/Global_Objects/Math/pow +translation_of: Web/JavaScript/Reference/Global_Objects/Math/pow +--- +<h2 id="Summary" name="Summary">Ringkasan</h2> +<p>Mengembalikan <code>bilangan</code> terhadap Pangkat <code>exponent</code>,<span style="line-height: 1.572;"> yaitu, </span><code style="font-size: 14px;">bilangan<sup>eksponen</sup></code><span style="line-height: 1.572;">.</span></p> +<table class="standard-table"> + <thead> + <tr> + <th class="header" colspan="2"><em>Method</em> dari <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Math"><code>Math</code></a></th> + </tr> + </thead> + <tbody> + <tr> + <td>Diimplementasikan pada</td> + <td>JavaScript 1.0</td> + </tr> + <tr> + <td>Edisi ECMAScript</td> + <td>ECMAScript 1st Edition</td> + </tr> + </tbody> +</table> +<h2 id="Syntax" name="Syntax">Sintaks</h2> +<pre class="syntaxbox"><code>Math.pow(<em>bilangan</em>, <em>eksponen</em>) </code></pre> +<h3 id="Parameters" name="Parameters">Parameter</h3> +<dl> + <dt> + <code>bilangan</code></dt> + <dd> + Bilangan pokok.</dd> + <dt> + <code>eksponen</code></dt> + <dd> + Eksponen yang digunakan untuk memangkatkan bilangan pokok.</dd> +</dl> +<h2 id="Description" name="Description">Deskripsi</h2> +<p>Karena <code>pow</code> adalah sebuah <em>static method</em> dari <code>Math</code>, anda senantiasa menggunakannya sebagai <code>Math.pow()</code>, daripada sebagai sebuah <em>method</em> dari sebuah Objek <em><code>Math</code></em> yang anda buat.</p> +<h2 id="Examples" name="Examples">Contoh</h2> +<h3 id="Example:_Using_Math.pow" name="Example:_Using_Math.pow">Contoh: Penggunaan <code>Math.pow</code></h3> +<pre class="brush:js">function raisePower(x,y) { + return Math.pow(x,y) +}</pre> +<p>Jika <code>x</code> adalah 7 dan <code>y</code> adalah 2, raisePower mengembalikan 49 (7 dipangkatkan 2).</p> +<h2 id="See_also" name="See_also">Lihat juga</h2> +<ul> + <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Math/exp" title="JavaScript/Reference/Global_Objects/Math/exp">Math.exp</a></li> + <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Math/log" title="JavaScript/Reference/Global_Objects/Math/log">Math.log</a> + <p> </p> + </li> + +</ul> diff --git a/files/id/web/javascript/reference/global_objects/object/getprototypeof/index.html b/files/id/web/javascript/reference/global_objects/object/getprototypeof/index.html new file mode 100644 index 0000000000..6ac06ec718 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/object/getprototypeof/index.html @@ -0,0 +1,133 @@ +--- +title: Object.getPrototypeOf() +slug: Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf +translation_of: Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf +--- +<div>{{JSRef}}</div> + +<p>Metode <code><strong>Object.getPrototypeOf()</strong></code> mengembalikan nilai prototipe dari obyek yang disebutkan (misalnya, nilai dari properti internal <code>[[Prototype]]</code>).</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><code>Object.getPrototypeOf(<var>obj</var>)</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>Obyek yang memiliki prototipe.</dd> +</dl> + +<h3 id="Nilai_kembali">Nilai kembali</h3> + +<p>Prototipe dari obyek yang diberikan. Jika tidak ada property yang ditemukan, {{jsxref("null")}} yang akan dikembalikan.</p> + +<h2 id="Contoh">Contoh</h2> + +<pre class="brush: js">var proto = {}; +var obj = Object.create(proto); +Object.getPrototypeOf(obj) === proto; // true +</pre> + +<h2 id="Catatan">Catatan</h2> + +<p>Dalam ES5, akan melemparkan eksepsi {{jsxref("TypeError")}} jika parameter <code>obj</code> parameter bukanlah sebuah obyek. Dalam ES6, parameter akan dipaksa menjadi {{jsxref("Object")}}.</p> + +<pre class="brush: js">Object.getPrototypeOf("foo"); +// TypeError: "foo" is not an object (ES5 code) +Object.getPrototypeOf("foo"); +// String.prototype (ES6 code) +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Komentar</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.2', 'Object.getPrototypeOf')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definisi awal.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.getprototypeof', 'Object.getProtoypeOf')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.getprototypeof', 'Object.getProtoypeOf')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatibilitas_perambah">Kompatibilitas perambah</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatChrome("5")}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatOpera("12.10")}}</td> + <td>{{CompatSafari("5")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Catatan_khusus_Opera">Catatan khusus Opera</h2> + +<p>Meskipun Opera dengan versi yang lebih lama belum mendukung <code>Object.getPrototypeOf()</code>, Opera mendukung properti non-standar {{jsxref("Object.proto", "__proto__")}} sejak Opera 10.50.</p> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li> + <li>{{jsxref("Object.setPrototypeOf()")}}</li> + <li>{{jsxref("Object.prototype.__proto__")}}</li> + <li>John Resig's post on <a class="external" href="http://ejohn.org/blog/objectgetprototypeof/">getPrototypeOf</a></li> + <li>{{jsxref("Reflect.getPrototypeOf()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/object/index.html b/files/id/web/javascript/reference/global_objects/object/index.html new file mode 100644 index 0000000000..cc79ab6890 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/object/index.html @@ -0,0 +1,221 @@ +--- +title: Object +slug: Web/JavaScript/Reference/Global_Objects/Object +tags: + - Constructor + - JavaScript + - Object + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/Object +--- +<div>{{JSRef}}</div> + +<p>Konstruktor <code><strong>Object</strong></code> membuat sebuah pembungkus objek.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox">// Persiapan literasi objek +{ [ <var>nameValuePair1</var>[, <var>nameValuePair2</var>[, ...<var>nameValuePairN</var>] ] ] } + +// Panggil konstruktor +new Object([<var>value</var>])</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>nameValuePair1, nameValuePair2, ... nameValuePair<em>N</em></code></dt> + <dd>Pasangan dari nama (strings) dan nilai dimana nama dipisahkan dari nilai menggunakan titik dua (colon).</dd> + <dt><code>value</code></dt> + <dd>Nilai bebas.</dd> +</dl> + +<h2 id="Keterangan">Keterangan</h2> + +<p>Konstruktor <code>Object</code> membuat sebuah pembungkus objek dari nilai yang diberikan. Jika nilainya {{jsxref("null")}} atau {{jsxref("undefined")}}, maka akan menghasilkan dan mengembalikan objek kosong. Sebaliknya, akan mengembalikan sebuah objek dari Type yang bergantung pada nilai yang diberikan. Jika nilai adalah objek, maka nilai akan langsung dikembalikan.</p> + +<p>Ketika memanggil konteks non-constructor, <code>Object</code> berperilaku seperti layaknya <code>new Object()</code>.</p> + +<p>Lihat juga <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">object initializer / literal syntax</a>.</p> + +<h2 id="Properti_dari_konstruktor_Object">Properti dari konstruktor <code>Object</code></h2> + +<dl> + <dt><code>Object.length</code></dt> + <dd>Bernilai 1.</dd> + <dt>{{jsxref("Object.prototype")}}</dt> + <dd>Memungkinkan untuk menambahkan properti ke semua objek dari type Object.</dd> +</dl> + +<h2 id="Method_dari_konstruktor_Object">Method dari konstruktor <code>Object</code></h2> + +<dl> + <dt>{{jsxref("Object.assign()")}}</dt> + <dd>Membuat objek baru dengan menyalin nilai dari semua properti enumerable dari satu atau lebih sumber ke sebuah objek target.</dd> + <dt>{{jsxref("Object.create()")}}</dt> + <dd>Membuat objek baru dengan prototype dan properti objek tertentu.</dd> + <dt>{{jsxref("Object.defineProperty()")}}</dt> + <dd>Menambahkan nama properti berdasarkan deskripsi yang diberikan oleh descriptor pada sebuah objek.</dd> + <dt>{{jsxref("Object.defineProperties()")}}</dt> + <dd>Menambahkan nama properti yang dideskripsikan descriptors pada sebuah object.</dd> + <dt>{{jsxref("Object.entries()")}} {{experimental_inline}}</dt> + <dd>Mengembalikan sebuah array dari enumerable objek dengan pasangan properti <code>[key, value]</code>.</dd> + <dt>{{jsxref("Object.freeze()")}}</dt> + <dd>Membekukan objek: kode lain tidak dapat dihapus atau diubah oleh semua properti.</dd> + <dt>{{jsxref("Object.getOwnPropertyDescriptor()")}}</dt> + <dd>Mengembalikan sebuah properti descriptor untuk nama propeti pada sebuah object.</dd> + <dt>{{jsxref("Object.getOwnPropertyNames()")}}</dt> + <dd>Mengembalikan array berisi nama dari semua objek yang diberikan <strong>own</strong> enumerable dan properti non-enumerable.</dd> + <dt>{{jsxref("Object.getOwnPropertySymbols()")}}</dt> + <dd>Mengembalikan sebuah array dari semua properti simbol yang ditemukan secara langsung atas objek yang diberikan.</dd> + <dt>{{jsxref("Object.getPrototypeOf()")}}</dt> + <dd>Mengembalikan prototype dari objek tertentu.</dd> + <dt>{{jsxref("Object.is()")}}</dt> + <dd>Membandingkan dua nilai yang berbeda (mis. the same)</dd> + <dt>{{jsxref("Object.isExtensible()")}}</dt> + <dd>Menentukan apakah memperluas objek di perbolehkan.</dd> + <dt>{{jsxref("Object.isFrozen()")}}</dt> + <dd>Menentukan apakah objek telah beku.</dd> + <dt>{{jsxref("Object.isSealed()")}}</dt> + <dd>Menentukan apakah objek adalah sealed.</dd> + <dt>{{jsxref("Object.keys()")}}</dt> + <dd>Menegembalikan array berisi nama dari semua objek properti <strong>own</strong> enumerable.</dd> + <dt>{{jsxref("Object.preventExtensions()")}}</dt> + <dd>Mencegah ekstensi dari sebuah objek.</dd> + <dt>{{jsxref("Object.seal()")}}</dt> + <dd>Mencegah kode lain dari penghapusan properti dari sebuah objek.</dd> + <dt>{{jsxref("Object.setPrototypeOf()")}}</dt> + <dd>Mengatur prototype (mis., internal properti <code>[[Prototype]]</code>)</dd> + <dt>{{jsxref("Object.values()")}} {{experimental_inline}}</dt> + <dd>Mengembalikan array dari objek nilai own enumerable.</dd> +</dl> + +<h2 id="Perumpamaan_Object_dan_Object_prototype_objek">Perumpamaan <em><code>Object</code></em> dan <em><code>Object</code></em> prototype objek</h2> + +<p>Pada JavaScript, semua objek diturunkan dari <em><code>Object</code></em>; dan semua objek mewarisi method dan property dari <em>{{jsxref("Object.prototype")}}</em>, meskipun hal tersebut telah di-<em>override </em>(diganti). Sebagai contoh, prototipe konstruktor lain mengesampingkan properti konstruktor dan menyediakan metode <code>toString()</code> yang spesifik. Perubahan ke objek prototipe <code>Object</code> disebarkan ke semua objek kecuali properti dan metode yang telah diubah sebelumnya diganti di sepanjang rantai prototipe.</p> + +<h3 id="Properti">Properti</h3> + +<div>{{page('/id/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', 'Properties') }}</div> + +<h3 id="Method">Method</h3> + +<div>{{page('/id/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', 'Methods') }}</div> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Using_Object_given_undefined_and_null_types">Using <code>Object</code> given <code>undefined</code> and <code>null</code> types</h3> + +<p>Dibawah ini adalah contoh menyimpan objek kosong pada variabel <code>o</code>:</p> + +<pre class="brush: js">var o = new Object(); +</pre> + +<pre class="brush: js">var o = new Object(undefined); +</pre> + +<pre class="brush: js">var o = new Object(null); +</pre> + +<h3 id="Using_Object_to_create_Boolean_objects">Using <code>Object</code> to create <code>Boolean</code> objects</h3> + +<p>Dibawah ini adalah contoh menyimpan objek {{jsxref("Boolean")}} pada variabel <code>o</code>:</p> + +<pre class="brush: js">// equivalent to o = new Boolean(true); +var o = new Object(true); +</pre> + +<pre class="brush: js">// equivalent to o = new Boolean(false); +var o = new Object(Boolean()); +</pre> + +<h2 id="Rincian_Teknis">Rincian Teknis</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definisi awal. Diterapkan di JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2', 'Object')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>-</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object-objects', 'Object')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> + <p>Penambahan Object.assign, Object.getOwnPropertySymbols, Object.setPrototypeOf, Object.is</p> + </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object-objects', 'Object')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Penambahan Object.entries, Object.values, dan Object.getOwnPropertyDescriptors.</td> + </tr> + </tbody> +</table> + +<h2 id="Kesesuaian_browser">Kesesuaian browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">Object initializer</a></li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/object/keys/index.html b/files/id/web/javascript/reference/global_objects/object/keys/index.html new file mode 100644 index 0000000000..cc1c7dc1a9 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/object/keys/index.html @@ -0,0 +1,197 @@ +--- +title: Object.keys() +slug: Web/JavaScript/Reference/Global_Objects/Object/keys +translation_of: Web/JavaScript/Reference/Global_Objects/Object/keys +--- +<div>{{JSRef}}</div> + +<p><code><strong>Object.keys()</strong></code> Metode mengembalikan array dari objek yang diberikan sendiri enumerable properti, dalam urutan yang sama seperti yang disediakan oleh loop {{jsxref("Statements/for...in", "for...in")}} (perbedaan adalah bahwa sebuah loop for-in enumerates properti dalam mata rantai prototipe juga).</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>Object.keys(<var>obj</var>)</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>Objek yang propertinya sendiri enumerable yang harus dikembalikan.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p><code>Object.keys()</code> mengembalikan array yang elemen string yang sesuai dengan properti enumerable yang ditemukan langsung pada objek. Urutan properti adalah sama dengan yang diberikan oleh perulangan / looping melalui properti dari objek secara manual.</p> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: js">var arr = ['a', 'b', 'c']; +console.log(Object.keys(arr)); // console: ['0', '1', '2'] + +// array like object +var obj = { 0: 'a', 1: 'b', 2: 'c' }; +console.log(Object.keys(obj)); // console: ['0', '1', '2'] + +// array like object with random key ordering +var an_obj = { 100: 'a', 2: 'b', 7: 'c' }; +console.log(Object.keys(an_obj)); // console: ['2', '7', '100'] + +// getFoo is property which isn't enumerable +var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } }); +my_obj.foo = 1; + +console.log(Object.keys(my_obj)); // console: ['foo'] +</pre> + +<p>Jika Anda ingin semua properti, bahkan tidak enumerables, lihat {{jsxref("Object.getOwnPropertyNames()")}}.</p> + +<h2 id="Notes">Notes</h2> + +<p>Dalam ES5, jika argumen untuk metode ini bukan merupakan objek (primitive), maka akan menyebabkan {{jsxref("TypeError")}}. Dalam ES6, argumen tidak-objek akan dipaksa untuk sebuah objek.</p> + +<pre class="brush: js">Object.keys("foo"); +// TypeError: "foo" is not an object (ES5 code) + +Object.keys("foo"); +// ["0", "1", "2"] (ES6 code) +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Untuk menambahkan kompatibel <code>Object.keys</code> dukungan dalam lingkungan yang lebih tua yang tidak native mendukung itu, copy potongan berikut:</p> + +<pre class="brush: js">// From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys +if (!Object.keys) { + Object.keys = (function() { + 'use strict'; + var hasOwnProperty = Object.prototype.hasOwnProperty, + hasDontEnumBug = !({ toString: null }).propertyIsEnumerable('toString'), + dontEnums = [ + 'toString', + 'toLocaleString', + 'valueOf', + 'hasOwnProperty', + 'isPrototypeOf', + 'propertyIsEnumerable', + 'constructor' + ], + dontEnumsLength = dontEnums.length; + + return function(obj) { + if (typeof obj !== 'object' && (typeof obj !== 'function' || obj === null)) { + throw new TypeError('Object.keys called on non-object'); + } + + var result = [], prop, i; + + for (prop in obj) { + if (hasOwnProperty.call(obj, prop)) { + result.push(prop); + } + } + + if (hasDontEnumBug) { + for (i = 0; i < dontEnumsLength; i++) { + if (hasOwnProperty.call(obj, dontEnums[i])) { + result.push(dontEnums[i]); + } + } + } + return result; + }; + }()); +} +</pre> + +<p>Harap dicatat bahwa kode di atas termasuk kunci non-enumerable di IE7 (dan mungkin IE8), ketika lewat di sebuah objek dari berbagai window.</p> + +<p>Untuk Browser sederhana Polyfill, lihat <a href="http://tokenposts.blogspot.com.au/2012/04/javascript-objectkeys-browser.html">Javascript - Object.keys Browser Compatibility</a>.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.14', 'Object.keys')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.keys', 'Object.keys')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.keys', 'Object.keys')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("5")}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatOpera("12")}}</td> + <td>{{CompatSafari("5")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li> + <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li> + <li>{{jsxref("Object.create()")}}</li> + <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> + <li>{{jsxref("Object.values()")}} {{experimental_inline}}</li> + <li>{{jsxref("Object.entries()")}} {{experimental_inline}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/object/preventextensions/index.html b/files/id/web/javascript/reference/global_objects/object/preventextensions/index.html new file mode 100644 index 0000000000..3899fef48f --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/object/preventextensions/index.html @@ -0,0 +1,185 @@ +--- +title: Object.preventExtensions() +slug: Web/JavaScript/Reference/Global_Objects/Object/preventExtensions +translation_of: Web/JavaScript/Reference/Global_Objects/Object/preventExtensions +--- +<div>{{JSRef}}</div> + +<p>Metode <code><strong>Object.preventExtensions()</strong></code> mencegah properti-properti baru untuk ditambahkan pada sebuah obyek (mencegah ekstensi di masa depan pada sebuah obyek).</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><code>Object.preventExtensions(<var>obj</var>)</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>Obyek yang akan dibuat menjadi non-ekstensibel.</dd> +</dl> + +<h3 id="Pengembalian_nilai">Pengembalian nilai</h3> + +<p>Obyek yang telah dibuat non-ekstensibel.</p> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p> </p> + +<p>Sebuah obyek disebut ekstensibel jika properti baru dapat ditambahkan ke dalamnya . <code>Object.preventExtensions()</code> menandai suatu obyek untuk menjadi tidak ekstensibel, sehingga tidak akan pernah memiliki properti diluar properti-properti yang dimiliki sebelum ditandai sebagai non-ekstensibel. Perhatikan bahwa properti-properti obyek non-ekstensibel, secara umum, masih dapat <em>dihapus</em>. Mencoba untuk menambah properti baru ke obyek non-ekstensibel akan gagal, baik secara diam-diam atau dengan melemparkan {{jsxref("TypeError")}} (paling umum, tetapi tidak secara eksklusif, ketika berada di {{jsxref("Functions_and_function_scope/Strict_mode", "strict mode", "", 1)}}).</p> + +<p><code>Object.preventExtensions()</code> hanya mencegah penambahan properti sendiri . Sifat masih bisa ditambahkan ke prototipe obyek. Namun, memanggil <code>Object.preventExtensions()</code> pada obyek juga akan mencegah ekstensi / penambahan properti {{jsxref("Object.proto", "__proto__")}} {{deprecated_inline}}.</p> + +<p>Jika ada cara untuk mengubah suatu obyek ekstensibel untuk satu non-ekstensibel, tidak ada cara untuk melakukan yang sebaliknya di ECMAScript 5 .</p> + +<h2 id="Contoh">Contoh</h2> + +<pre class="brush: js">// Object.preventExtensions returns the object being made non-extensible. +var obj = {}; +var obj2 = Object.preventExtensions(obj); +obj === obj2; // true + +// Objects are extensible by default. +var empty = {}; +Object.isExtensible(empty); // === true + +// ...but that can be changed. +Object.preventExtensions(empty); +Object.isExtensible(empty); // === false + +// Object.defineProperty throws when adding a new property to a non-extensible object. +var nonExtensible = { removable: true }; +Object.preventExtensions(nonExtensible); +Object.defineProperty(nonExtensible, 'new', { value: 8675309 }); // throws a TypeError + +// In strict mode, attempting to add new properties to a non-extensible object throws a TypeError. +function fail() { + 'use strict'; + nonExtensible.newProperty = 'FAIL'; // throws a TypeError +} +fail(); + +// EXTENSION (only works in engines supporting __proto__ +// (which is deprecated. Use Object.getPrototypeOf instead)): +// A non-extensible object's prototype is immutable. +var fixed = Object.preventExtensions({}); +fixed.__proto__ = { oh: 'hai' }; // throws a TypeError +</pre> + +<h2 id="Catatan">Catatan</h2> + +<p>Pada ES5, jika argumen pada fungsi metode ini adalah bukan sebuah obyek (sebuah tipe data primitif), maka hal itu akan menyebabkan {{jsxref("TypeError")}}. Pada ES6, sebuah argumen non-obyek akan diperlakukan seperti obyek tersebut obyek biasa yang non-ekstensibel, dan langsung mengembalikan nilai. </p> + +<pre class="brush: js">Object.preventExtensions(1); +// TypeError: 1 is not an object (ES5 code) + +Object.preventExtensions(1); +// 1 (ES6 code) +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Komentar</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.10', 'Object.preventExtensions')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definisi awal. Terimplementasi pada JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.preventextensions', 'Object.preventExtensions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.preventextensions', 'Object.preventExtensions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_kompatibilitas">Browser kompatibilitas</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("6")}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatOpera("12")}}</td> + <td>{{CompatSafari("5.1")}}</td> + </tr> + <tr> + <td>ES6 behavior for non-object argument</td> + <td>{{CompatChrome("44")}}</td> + <td>{{CompatGeckoDesktop("35.0")}}</td> + <td>{{CompatIE("11")}}</td> + <td>{{CompatOpera("31")}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>ES6 behavior for non-object argument</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("35.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Object.isExtensible()")}}</li> + <li>{{jsxref("Object.seal()")}}</li> + <li>{{jsxref("Object.isSealed()")}}</li> + <li>{{jsxref("Object.freeze()")}}</li> + <li>{{jsxref("Object.isFrozen()")}}</li> + <li>{{jsxref("Reflect.preventExtensions()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/promise/catch/index.html b/files/id/web/javascript/reference/global_objects/promise/catch/index.html new file mode 100644 index 0000000000..f2d5e38e8f --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/promise/catch/index.html @@ -0,0 +1,127 @@ +--- +title: Promise.prototype.catch() +slug: Web/JavaScript/Reference/Global_Objects/Promise/catch +tags: + - ECMAScript6 + - Method + - Promise + - Prototype + - Referensi +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/catch +--- +<div>{{JSRef}}</div> + +<p>Method <strong>catch()</strong> mengembalikan <code>Promise</code> dan hanya setuju jika kasusnya gagal. Sama halnya dengan memenggil method {{jsxref("Promise.then", "Promise.prototype.then(undefined, onRejected)")}}.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><var>p.catch(onRejected)</var>; + +p.catch(function(reason) { + // rejection +}); +</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt>onRejected</dt> + <dd> {{jsxref("Function")}} dipanggil ketika <code>Promise</code> ditolak. Fungsi ini memiliki satu argumen, alasan penolakan.</dd> +</dl> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Method <code>catch</code> sangat berguna untuk menangani error di gabungan promis anda.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Penggunaan_method_catch">Penggunaan method <code>catch</code></h3> + +<pre class="brush: js">var p1 = new Promise(function(resolve, reject) { + resolve('Success'); +}); + +p1.then(function(value) { + console.log(value); // "Success!" + throw 'oh, no!'; +}).catch(function(e) { + console.log(e); // "oh, no!" +}).then(function(){ + console.log('after a catch the chain is restored'); +}, function () { + console.log('Not fired due to the catch'); +}); + +// The following behaves the same as above +p1.then(function(value) { + console.log(value); // "Success!" + return Promise.reject('oh, no!'); +}).catch(function(e) { + console.log(e); // "oh, no!" +}).then(function(){ + console.log('after a catch the chain is restored'); +}, function () { + console.log('Not fired due to the catch'); +}); + +</pre> + +<h3 id="Promis_tidak_dapat_mendeteksi_error_pada_asynchronous_callback">Promis tidak dapat mendeteksi error pada asynchronous callback</h3> + +<pre class="brush: js">var p1 = new Promise(function(resolve, reject) { + throw 'Uh-oh!'; +}); + +p1.catch(function(e) { + console.log(e); // "Uh-oh!" +}); + + +var p2 = new Promise(function(resolve, reject) { + setTimeout(function() { + throw 'Uncaught Exception!'; + }, 1000); +}); + +p2.catch(function(e) { + console.log(e); // This is never called +});</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-promise.prototype.catch', 'Promise.prototype.catch')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition in an ECMA standard.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-promise.prototype.catch', 'Promise.prototype.catch')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Browser">Kompabilitas Browser</h2> + +<p> </p> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Promise.catch")}}</p> + +<p> </p> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li>{{jsxref("Promise")}}</li> + <li>{{jsxref("Promise.prototype.then()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/promise/index.html b/files/id/web/javascript/reference/global_objects/promise/index.html new file mode 100644 index 0000000000..240915ba23 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/promise/index.html @@ -0,0 +1,317 @@ +--- +title: Promise +slug: Web/JavaScript/Reference/Global_Objects/Promise +tags: + - ECMAScript6 + - JavaScript + - NeedsTranslation + - Promise + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/Promise +--- +<div>{{JSRef}}</div> + +<p>The <strong><code>Promise</code></strong> object is used for deferred and asynchronous computations. A <code>Promise</code> represents an operation that hasn't completed yet, but is expected in the future.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">new Promise( /* executor */ function(resolve, reject) { ... } );</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt>executor</dt> + <dd>A function that will be passed to other functions via the arguments <code>resolve</code> and <code>reject</code>. The <code>executor</code> function is executed immediately by the Promise implementation which provides the <code>resolve</code> and <code>reject</code> functions (the executor is called before the <code>Promise</code> constructor even returns the created object). The <code>resolve</code> and <code>reject</code> functions are bound to the promise and calling them fulfills or rejects the promise, respectively. The executor is expected to initiate some asynchronous work and then, once that completes, call either the <code>resolve</code> or <code>reject</code> function to resolve the promise's final value or else reject it if an error occurred.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>A <code><strong>Promise</strong></code> represents a proxy for a value not necessarily known when the promise is created. It allows you to associate handlers to an asynchronous action's eventual success value or failure reason. This lets asynchronous methods return values like synchronous methods: instead of the final value, the asynchronous method returns a <em>promise</em> of having a value at some point in the future.</p> + +<p>A <code>Promise</code> is in one of these states:</p> + +<ul> + <li><em>pending</em>: initial state, not fulfilled or rejected.</li> + <li><em>fulfilled</em>: meaning that the operation completed successfully.</li> + <li><em>rejected</em>: meaning that the operation failed.</li> +</ul> + +<p>A pending promise can become either <em>fulfilled</em> with a value, or <em>rejected</em> with a reason (error). When either of these happens, the associated handlers queued up by a promise's <code>then</code> method are called. (If the promise has already been fulfilled or rejected when a corresponding handler is attached, the handler will be called, so there is no race condition between an asynchronous operation completing and its handlers being attached.)</p> + +<p>As the <code>{{jsxref("Promise.then", "Promise.prototype.then()")}}</code> and <code>{{jsxref("Promise.catch", "Promise.prototype.catch()")}}</code> methods return promises, they can be chained—an operation called <em>composition</em>.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8633/promises.png"></p> + +<div class="note"> +<p><strong>Note</strong>: A promise is said to be <em>settled </em>if it is either fulfilled or rejected, but not pending. You will also hear the term <em>resolved</em> used with promises — this means that the promise is settled, or it is locked into a promise chain. Domenic Denicola's <a href="https://github.com/domenic/promises-unwrapping/blob/master/docs/states-and-fates.md">States and fates</a> contains more details about promise terminology.</p> +</div> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt><code>Promise.length</code></dt> + <dd>Length property whose value is 1 (number of constructor arguments).</dd> + <dt>{{jsxref("Promise.prototype")}}</dt> + <dd>Represents the prototype for the <code>Promise</code> constructor.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{jsxref("Promise.all", "Promise.all(iterable)")}}</dt> + <dd>Returns a promise that either resolves when all of the promises in the iterable argument have resolved or rejects as soon as one of the promises in the iterable argument rejects. If the returned promise resolves, it is resolved with an array of the values from the resolved promises in the iterable. If the returned promise rejects, it is rejected with the reason from the promise in the iterable that rejected. This method can be useful for aggregating results of multiple promises together.</dd> + <dt>{{jsxref("Promise.race", "Promise.race(iterable)")}}</dt> + <dd>Returns a promise that resolves or rejects as soon as one of the promises in the iterable resolves or rejects, with the value or reason from that promise.</dd> +</dl> + +<dl> + <dt>{{jsxref("Promise.reject", "Promise.reject(reason)")}}</dt> + <dd>Returns a <code>Promise</code> object that is rejected with the given reason.</dd> +</dl> + +<dl> + <dt>{{jsxref("Promise.resolve", "Promise.resolve(value)")}}</dt> + <dd>Returns a <code>Promise</code> object that is resolved with the given value. If the value is a thenable (i.e. has a <code>then</code> method), the returned promise will "follow" that thenable, adopting its eventual state; otherwise the returned promise will be fulfilled with the value. Generally, if you want to know if a value is a promise or not - {{jsxref("Promise.resolve", "Promise.resolve(value)")}} it instead and work with the return value as a promise.</dd> +</dl> + +<h2 id="Promise_prototype"><code>Promise</code> prototype</h2> + +<h3 id="Properties_2">Properties</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Promise/prototype','Properties')}}</p> + +<h3 id="Methods_2">Methods</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Promise/prototype','Methods')}}</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Creating_a_Promise">Creating a Promise</h3> + +<pre class="brush: html hidden"><button id="btn">Make a promise!</button> +<div id="log"></div> +</pre> + +<p>This small example shows the mechanism of a <code>Promise</code>. The <code>testPromise()</code> method is called each time the {{HTMLElement("button")}} is clicked. It creates a promise that will resolve, using {{domxref("window.setTimeout()")}}, to the promise count (number starting from 1) every 1-3 seconds, at random. The <code>Promise()</code> constructor is used to create the promise.</p> + +<p>The fulfillment of the promise is simply logged, via a fulfill callback set using {{jsxref("Promise.prototype.then()","p1.then()")}}. A few logs shows how the synchronous part of the method is decoupled of the asynchronous completion of the promise.</p> + +<pre class="brush: js">'use strict'; +var promiseCount = 0; + +function testPromise() { + var thisPromiseCount = ++promiseCount; + + var log = document.getElementById('log'); + log.insertAdjacentHTML('beforeend', thisPromiseCount + + ') Started (<small>Sync code started</small>)<br/>'); + + // We make a new promise: we promise a numeric count of this promise, starting from 1 (after waiting 3s) + var p1 = new Promise( + // The resolver function is called with the ability to resolve or + // reject the promise + function(resolve, reject) { + log.insertAdjacentHTML('beforeend', thisPromiseCount + + ') Promise started (<small>Async code started</small>)<br/>'); + // This is only an example to create asynchronism + window.setTimeout( + function() { + // We fulfill the promise ! + resolve(thisPromiseCount); + }, Math.random() * 2000 + 1000); + } + ); + + // We define what to do when the promise is resolved/fulfilled with the then() call, + // and the catch() method defines what to do if the promise is rejected. + p1.then( + // Log the fulfillment value + function(val) { + log.insertAdjacentHTML('beforeend', val + + ') Promise fulfilled (<small>Async code terminated</small>)<br/>'); + }) + .catch( + // Log the rejection reason + function(reason) { + console.log('Handle rejected promise ('+reason+') here.'); + }); + + log.insertAdjacentHTML('beforeend', thisPromiseCount + + ') Promise made (<small>Sync code terminated</small>)<br/>'); +}</pre> + +<pre class="brush:js hidden">if ("Promise" in window) { + var btn = document.getElementById("btn"); + btn.addEventListener("click",testPromise); +} +else { + log = document.getElementById('log'); + log.innerHTML = "Live example not available as your browser doesn't support the <code>Promise<code> interface."; +} +</pre> + +<p>This example is executed when clicking the button. You need a browser supporting <code>Promise</code>. By clicking several times the button in a short amount of time, you'll even see the different promises being fulfilled one after the other.</p> + +<p>{{EmbedLiveSample("Creating_a_Promise", "500", "200")}}</p> + +<h2 id="Example_using_new_XMLHttpRequest()">Example using new XMLHttpRequest()</h2> + +<h3 id="Creating_a_Promise_2">Creating a Promise</h3> + +<p>This example shows the implementation of a method which uses a <code>Promise</code> to report the success or failure of an {{domxref("XMLHttpRequest")}}.</p> + +<pre class="brush: js">'use strict'; + +// A-> $http function is implemented in order to follow the standard Adapter pattern +function $http(url){ + + // A small example of object + var core = { + + // Method that performs the ajax request + ajax : function (method, url, args) { + + // Creating a promise + var promise = new Promise( function (resolve, reject) { + + // Instantiates the XMLHttpRequest + var client = new XMLHttpRequest(); + var uri = url; + + if (args && (method === 'POST' || method === 'PUT')) { + uri += '?'; + var argcount = 0; + for (var key in args) { + if (args.hasOwnProperty(key)) { + if (argcount++) { + uri += '&'; + } + uri += encodeURIComponent(key) + '=' + encodeURIComponent(args[key]); + } + } + } + + client.open(method, uri); + client.send(); + + client.onload = function () { + if (this.status >= 200 && this.status < 300) { + // Performs the function "resolve" when this.status is equal to 2xx + resolve(this.response); + } else { + // Performs the function "reject" when this.status is different than 2xx + reject(this.statusText); + } + }; + client.onerror = function () { + reject(this.statusText); + }; + }); + + // Return the promise + return promise; + } + }; + + // Adapter pattern + return { + 'get' : function(args) { + return core.ajax('GET', url, args); + }, + 'post' : function(args) { + return core.ajax('POST', url, args); + }, + 'put' : function(args) { + return core.ajax('PUT', url, args); + }, + 'delete' : function(args) { + return core.ajax('DELETE', url, args); + } + }; +}; +// End A + +// B-> Here you define its functions and its payload +var mdnAPI = 'https://developer.mozilla.org/en-US/search.json'; +var payload = { + 'topic' : 'js', + 'q' : 'Promise' +}; + +var callback = { + success : function(data){ + console.log(1, 'success', JSON.parse(data)); + }, + error : function(data){ + console.log(2, 'error', JSON.parse(data)); + } +}; +// End B + +// Executes the method call +$http(mdnAPI) + .get(payload) + .then(callback.success) + .catch(callback.error); + +// Executes the method call but an alternative way (1) to handle Promise Reject case +$http(mdnAPI) + .get(payload) + .then(callback.success, callback.error); + +// Executes the method call but an alternative way (2) to handle Promise Reject case +$http(mdnAPI) + .get(payload) + .then(callback.success) + .then(undefined, callback.error); +</pre> + +<h3 id="Loading_an_image_with_XHR">Loading an image with XHR</h3> + +<p>Another simple example using <code>Promise</code> and <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> to load an image is available at the MDN GitHub<a href="https://github.com/mdn/promises-test/blob/gh-pages/index.html"> promise-test</a> repository. You can also <a href="http://mdn.github.io/promises-test/">see it in action</a>. Each step is commented and allows you to follow the Promise and XHR architecture closely.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-promise-objects', 'Promise')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition in an ECMA standard.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-promise-objects', 'Promise')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p> </p> + +<div> + + +<p>{{Compat("javascript.builtins.Promise")}}</p> +</div> + +<p> </p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="http://promisesaplus.com/">Promises/A+ specification</a></li> + <li><a href="http://www.html5rocks.com/en/tutorials/es6/promises/">Jake Archibald: JavaScript Promises: There and Back Again</a></li> + <li><a href="http://de.slideshare.net/domenicdenicola/callbacks-promises-and-coroutines-oh-my-the-evolution-of-asynchronicity-in-javascript">Domenic Denicola: Callbacks, Promises, and Coroutines – Asynchronous Programming Patterns in JavaScript</a></li> + <li><a href="http://www.mattgreer.org/articles/promises-in-wicked-detail/">Matt Greer: JavaScript Promises ... In Wicked Detail</a></li> + <li><a href="https://www.promisejs.org/">Forbes Lindesay: promisejs.org</a></li> + <li><a href="http://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html">Nolan Lawson: We have a problem with promises — Common mistakes with promises</a></li> + <li><a href="https://github.com/jakearchibald/es6-promise/">Promise polyfill</a></li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/promise/reject/index.html b/files/id/web/javascript/reference/global_objects/promise/reject/index.html new file mode 100644 index 0000000000..180fcc5571 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/promise/reject/index.html @@ -0,0 +1,81 @@ +--- +title: Promise.reject() +slug: Web/JavaScript/Reference/Global_Objects/Promise/reject +tags: + - ECMAScript6 + - Method + - Promise + - Referensi +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/reject +--- +<div>{{JSRef}}</div> + +<p>Method <code><strong>Promise.reject(reason)</strong></code> mengembalikan objek <code>Promise</code> yang ditolak dengan alasan yang diberikan.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><var>Promise.reject(reason)</var>;</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt>reason</dt> + <dd>Alasan kenapa <code>Promise</code> ditolak.</dd> +</dl> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Fungsi static <code>Promise.reject</code> mengembalikan <code>Promise</code> yang ditolak. Untuk keperluan debugging dan seleksi penankapan error, sangat berguna untuk membuat <code>reason</code> pada <code>instanceof</code> {{jsxref("Error")}}.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Penggunaan_mthod_static_Promise.reject()">Penggunaan mthod static Promise.reject()</h3> + +<pre class="brush: js">Promise.reject("Testing static reject").then(function(reason) { + // not called +}, function(reason) { + console.log(reason); // "Testing static reject" +}); + +Promise.reject(new Error("fail")).then(function(error) { + // not called +}, function(error) { + console.log(error); // Stacktrace +});</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-promise.reject', 'Promise.reject')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition in an ECMA standard.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-promise.reject', 'Promise.reject')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Browser">Kompabilitas Browser</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Promise.reject")}}</p> + +<p> </p> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li>{{jsxref("Promise")}}</li> + <li><a href="https://github.com/petkaantonov/bluebird#error-handling">Selective error catching using the BlueBird Promise library</a></li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/promise/resolve/index.html b/files/id/web/javascript/reference/global_objects/promise/resolve/index.html new file mode 100644 index 0000000000..d958ab4d52 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/promise/resolve/index.html @@ -0,0 +1,140 @@ +--- +title: Promise.resolve() +slug: Web/JavaScript/Reference/Global_Objects/Promise/resolve +tags: + - ECMAScript6 + - JavaScript + - Method + - Promise +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/resolve +--- +<div>{{JSRef}}</div> + +<p>Method <code><strong>Promise.resolve(value)</strong></code> mengembalikan objek {{jsxref("Promise.then")}} yang diselesaikan dengan nilai yang diberikan. jika nilainya thenable (mis. memiliki {{jsxref("Promise.then", "\"then\" method")}}), promise yang dikembalikan akan "mengikuti" thenable-nya, menggunakan keadaan ini; sebaliknya promise akan dikembalikan sesuai nilai yang terpenuhi.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><var>Promise.resolve(value)</var>; +Promise.resolve(promise); +Promise.resolve(thenable); +</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt>value</dt> + <dd>Argumen untuk diselesaikan oleh <code>Promise</code>. Dapat juga sebuah <code>Promise</code> atau thenable untuk diselesaikan.</dd> +</dl> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Fungsi statis <code>Promise.resolve</code> mengembalikan <code>Promise</code> yang terselesaikan.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Penggunaan_method_static_Promise.resolve">Penggunaan method static <code>Promise.resolve</code></h3> + +<pre class="brush: js">Promise.resolve("Success").then(function(value) { + console.log(value); // "Success" +}, function(value) { + // not called +}); +</pre> + +<h3 id="Penyelesaian_pada_array">Penyelesaian pada array</h3> + +<pre class="brush: js">var p = Promise.resolve([1,2,3]); +p.then(function(v) { + console.log(v[0]); // 1 +}); +</pre> + +<h3 id="Penyelesaian_pada_Promise_lain">Penyelesaian pada <code>Promise </code>lain</h3> + +<pre class="brush: js">var original = Promise.resolve(true); +var cast = Promise.resolve(original); +cast.then(function(v) { + console.log(v); // true +}); +</pre> + +<h3 id="Penyelesaian_thenables_dan_throwing_Errors">Penyelesaian thenables dan throwing Errors</h3> + +<pre class="brush: js">// Resolving a thenable object +var p1 = Promise.resolve({ + then: function(onFulfill, onReject) { onFulfill("fulfilled!"); } +}); +console.log(p1 instanceof Promise) // true, object casted to a Promise + +p1.then(function(v) { + console.log(v); // "fulfilled!" + }, function(e) { + // not called +}); + +// Thenable throws before callback +// Promise rejects +var thenable = { then: function(resolve) { + throw new TypeError("Throwing"); + resolve("Resolving"); +}}; + +var p2 = Promise.resolve(thenable); +p2.then(function(v) { + // not called +}, function(e) { + console.log(e); // TypeError: Throwing +}); + +// Thenable throws after callback +// Promise resolves +var thenable = { then: function(resolve) { + resolve("Resolving"); + throw new TypeError("Throwing"); +}}; + +var p3 = Promise.resolve(thenable); +p3.then(function(v) { + console.log(v); // "Resolving" +}, function(e) { + // not called +}); +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-promise.resolve', 'Promise.resolve')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition in an ECMA standard.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-promise.resolve', 'Promise.resolve')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Browser">Kompabilitas Browser</h2> + +<p> </p> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Promise.resolve")}}</p> + +<p> </p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Promise")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/promise/then/index.html b/files/id/web/javascript/reference/global_objects/promise/then/index.html new file mode 100644 index 0000000000..5a1e275c8c --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/promise/then/index.html @@ -0,0 +1,132 @@ +--- +title: Promise.prototype.then() +slug: Web/JavaScript/Reference/Global_Objects/Promise/then +tags: + - ECMAScript6 + - JavaScript + - Method + - Promise + - Prototype + - Referensi +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/then +--- +<div>{{JSRef}}</div> + +<p>Method <code><strong>then()</strong></code> mengembalikan {{domxref("Promise")}}. Menggunakan dua argumen: fungsi callback untuk kasus sukses dan gagal pada <code>Promise</code>.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><var>p.then(onFulfilled, onRejected)</var>; + +p.then(function(value) { + // fulfillment + }, function(reason) { + // rejection +}); +</pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>onFulfilled</code></dt> + <dd>{{jsxref("Function")}} dipanggil ketika <code>Promise</code> dipenuhi. Fungsi ini memiliki satu argumen, <code>value pemenuhan</code>.</dd> + <dt><code>onRejected</code></dt> + <dd>{{jsxref("Function")}} dipangil ketika <code>Promise</code> ditolak. fungsi ini memiliki satau argumen, alasan penolakan.</dd> +</dl> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Kedua method <code>then</code> dan {{jsxref("Promise.prototype.catch()")}} megembalikan promis, juga dapat dirantaikan — operasi yang disebut <em>composition</em>.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Meggunakan_method_then">Meggunakan method <code>then</code></h3> + +<pre class="brush: js">var p1 = new Promise(function(resolve, reject) { + resolve("Success!"); + // or + // reject ("Error!"); +}); + +p1.then(function(value) { + console.log(value); // Success! +}, function(reason) { + console.log(reason); // Error! +}); +</pre> + +<h3 id="Perantaian">Perantaian</h3> + +<p>Karena method <code>then</code> mengembalikan <code>Promise</code>, anda bisa merantaikan pemanggilan <code>then</code>.</p> + +<pre class="brush: js">var p2 = new Promise(function(resolve, reject) { + resolve(1); +}); + +p2.then(function(value) { + console.log(value); // 1 + return value + 1; +}).then(function(value) { + console.log(value); // 2 +}); + +p2.then(function(value) { + console.log(value); // 1 +}); +</pre> + +<p>Anda juga bisa menggunakan perantaian untuk melaksanakan satu fungsi dengan sebuah Promise berbasis API diatas fungsi lainnya.</p> + +<pre class="brush: js">function fetch_current_data() { + // The <a href="/en-US/docs/Web/API/GlobalFetch/fetch">fetch</a>() API returns a Promise. This function + // exposes a similar API, except the fulfillment + // value of this function's Promise has had more + // work done on it. + return fetch("current-data.json").then((response) => { + if (response.headers.get("content-type") != "application/json") { + throw new TypeError(); + } + var j = response.json(); + // maybe do something with j + return j; // fulfillment value given to user of + // fetch_current_data().then() + }); +} +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-promise.prototype.then', 'Promise.prototype.then')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition in an ECMA standard.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-promise.prototype.then', 'Promise.prototype.then')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Browser">Kompabilitas Browser</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Promise.then")}}</p> + +<p> </p> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("Promise")}}</li> + <li>{{jsxref("Promise.prototype.catch()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/regexp/index.html b/files/id/web/javascript/reference/global_objects/regexp/index.html new file mode 100644 index 0000000000..8bd6dce4b9 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/regexp/index.html @@ -0,0 +1,231 @@ +--- +title: RegExp +slug: Web/JavaScript/Reference/Global_Objects/RegExp +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp +--- +<div>{{JSRef}}</div><p>The <strong><code>RegExp</code></strong>objek digunakan untuk pencocokan teks dengan pola.</p> + +<p>Untuk pengantar ekspresi reguler, baca <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">bab Ekspresi Reguler</a> di <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">Panduan JavaScript</a> .</p> + +<h2 id="Deskripsi">Deskripsi</h2> + +<h3 id="Notasi_dan_konstruktor_literal">Notasi dan konstruktor literal</h3> + +<p>Ada dua cara untuk membuat <code>RegExp</code>objek: <em>notasi literal</em> dan <em>konstruktor</em> .</p> + +<ul> + <li>Parameter <strong>notasi literal</strong> terlampir di antara garis miring dan tidak menggunakan tanda kutip.</li> + <li>Parameter <strong>fungsi konstruktor</strong> tidak tertutup di antara garis miring tetapi menggunakan tanda kutip.</li> +</ul> + +<p>Tiga ekspresi berikut membuat ekspresi reguler yang sama:</p> + +<pre class="notranslate"><code>/ab+c/i +new RegExp(/ab+c/, 'i') // literal notation +new RegExp('ab+c', 'i') // constructor +</code></pre> + +<p>Notasi literal menghasilkan kompilasi dari ekspresi reguler ketika ekspresi dievaluasi. Gunakan notasi literal ketika ekspresi reguler akan tetap konstan. Misalnya, jika Anda menggunakan notasi literal untuk membuat ekspresi reguler yang digunakan dalam satu lingkaran, ekspresi reguler tidak akan dikompilasi ulang pada setiap iterasi.</p> + +<p>Konstruktor objek ekspresi reguler — misalnya, <code>new RegExp('ab+c')</code>—menghasilkan kompilasi runtime dari ekspresi reguler. Gunakan fungsi konstruktor ketika Anda tahu pola ekspresi reguler akan berubah, atau Anda tidak tahu pola dan mendapatkannya dari sumber lain, seperti input pengguna.</p> + +<h3 id="Bendera_dalam_konstruktor">Bendera dalam konstruktor</h3> + +<p>Dimulai dengan ECMAScript 6, <code>new RegExp(/ab+c/, 'i')</code>tidak lagi melempar a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypeError"><code>TypeError</code></a>( <code>"can't supply flags when constructing one RegExp from another"</code>) ketika argumen pertama adalah a <code>RegExp</code>dan <code><var>flags</var></code>argumen kedua hadir. Sebagai <code>RegExp</code>gantinya, argumen baru dibuat.</p> + +<p>Saat menggunakan fungsi konstruktor, aturan pelolosan string normal (mendahului karakter khusus <code>\</code>ketika disertakan dalam string) diperlukan.</p> + +<p>Misalnya, yang berikut ini setara:</p> + +<pre class="notranslate"><code>let re = /\w+/ +let re = new RegExp('\\w+') +</code></pre> + +<h3 id="Properti_Reg-suka_seperti_Perl">Properti Reg-suka seperti Perl</h3> + +<p>Perhatikan bahwa beberapa <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp"><code>RegExp</code></a>properti memiliki nama panjang dan pendek (seperti Perl). Kedua nama selalu merujuk pada nilai yang sama. (Perl adalah bahasa pemrograman tempat JavaScript memodelkan ekspresi regulernya.). Lihat juga <a href="/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#RegExp_Properties">properti yang </a><a href="/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#RegExp_Properties">sudah usang <code>RegExp</code>.</a></p> + +<h2 id="Konstruktor">Konstruktor</h2> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/RegExp"><code>RegExp()</code></a></dt> + <dd>Menciptakan <code>RegExp</code>objek baru .</dd> +</dl> + +<h2 id="Sifat_statis">Sifat statis</h2> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@species"><code>get RegExp[@@species]</code></a></dt> + <dd>The constructor function that is used to create derived objects.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex"><code>RegExp.lastIndex</code></a></dt> + <dd>The index at which to start the next match.</dd> +</dl> + +<h2 id="Instance_properties">Instance properties</h2> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/flags"><code>RegExp.prototype.flags</code></a></dt> + <dd>A string that contains the flags of the <code>RegExp</code> object.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/dotAll"><code>RegExp.prototype.dotAll</code></a></dt> + <dd>Whether <code>.</code> matches newlines or not.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/global"><code>RegExp.prototype.global</code></a></dt> + <dd>Whether to test the regular expression against all possible matches in a string, or only against the first.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/ignoreCase"><code>RegExp.prototype.ignoreCase</code></a></dt> + <dd>Whether to ignore case while attempting a match in a string.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/multiline"><code>RegExp.prototype.multiline</code></a></dt> + <dd>Whether or not to search in strings across multiple lines.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/source"><code>RegExp.prototype.source</code></a></dt> + <dd>The text of the pattern.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/sticky"><code>RegExp.prototype.sticky</code></a></dt> + <dd>Whether or not the search is sticky.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/unicode"><code>RegExp.prototype.unicode</code></a></dt> + <dd>Whether or not Unicode features are enabled.</dd> +</dl> + +<h2 id="Instance_methods">Instance methods</h2> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/compile"><code>RegExp.prototype.compile()</code></a></dt> + <dd>(Re-)compiles a regular expression during execution of a script.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec"><code>RegExp.prototype.exec()</code></a></dt> + <dd>Executes a search for a match in its string parameter.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test"><code>RegExp.prototype.test()</code></a></dt> + <dd>Tests for a match in its string parameter.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/toString"><code>RegExp.prototype.toString()</code></a></dt> + <dd>Returns a string representing the specified object. Overrides the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/toString"><code>Object.prototype.toString()</code></a> method.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@match"><code>RegExp.prototype[@@match]()</code></a></dt> + <dd>Performs match to given string and returns match result.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@matchAll"><code>RegExp.prototype[@@matchAll]()</code></a></dt> + <dd>Returns all matches of the regular expression against a string.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@replace"><code>RegExp.prototype[@@replace]()</code></a></dt> + <dd>Replaces matches in given string with new substring.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@search"><code>RegExp.prototype[@@search]()</code></a></dt> + <dd>Searches the match in given string and returns the index the pattern found in the string.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@split"><code>RegExp.prototype[@@split]()</code></a></dt> + <dd>Splits given string into an array by separating the string into substring.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_a_regular_expression_to_change_data_format">Using a regular expression to change data format</h3> + +<p>The following script uses the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace"><code>replace()</code></a> method of the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String"><code>String</code></a> instance to match a name in the format <em>first last</em> and output it in the format <em>last, first</em>.</p> + +<p>In the replacement text, the script uses <code>$1</code> and <code>$2</code> to indicate the results of the corresponding matching parentheses in the regular expression pattern.</p> + +<pre class="notranslate"><code>let re = /(\w+)\s(\w+)/ +let str = 'John Smith' +let newstr = str.replace(re, '$2, $1') +console.log(newstr) +</code></pre> + +<p>This displays <code>"Smith, John"</code>.</p> + +<h3 id="Using_regular_expression_to_split_lines_with_different_line_endingsends_of_lineline_breaks">Using regular expression to split lines with different line endings/ends of line/line breaks</h3> + +<p>The default line ending varies depending on the platform (Unix, Windows, etc.). The line splitting provided in this example works on all platforms.</p> + +<pre class="notranslate"><code>let text = 'Some text\nAnd some more\r\nAnd yet\rThis is the end' +let lines = text.split(/\r\n|\r|\n/) +console.log(lines) // logs [ 'Some text', 'And some more', 'And yet', 'This is the end' ] +</code></pre> + +<p>Note that the order of the patterns in the regular expression matters.</p> + +<h3 id="Using_regular_expression_on_multiple_lines">Using regular expression on multiple lines</h3> + +<pre class="notranslate"><code>let s = 'Please yes\nmake my day!' + +s.match(/yes.*day/); +// Returns null + +s.match(/yes[^]*day/); +// Returns ["yes\nmake my day"] +</code></pre> + +<h3 id="Using_a_regular_expression_with_the_sticky_flag">Using a regular expression with the sticky flag</h3> + +<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/sticky"><code>sticky</code></a> flag indicates that the regular expression performs sticky matching in the target string by attempting to match starting at <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex"><code>RegExp.prototype.lastIndex</code></a>.</p> + +<pre class="notranslate"><code>let str = '#foo#' +let regex = /foo/y + +regex.lastIndex = 1 +regex.test(str) // true +regex.lastIndex = 5 +regex.test(str) // false (lastIndex is taken into account with sticky flag) +regex.lastIndex // 0 (reset after match failure)</code></pre> + +<h3 id="The_difference_between_the_sticky_flag_and_the_global_flag">The difference between the sticky flag and the global flag</h3> + +<p>With the sticky flag <code>y</code>, the next match has to happen at the <code>lastIndex</code> position, while with the global flag <code>g</code>, the match can happen at the <code>lastIndex</code> position or later:</p> + +<pre class="notranslate"><code>re = /\d/y; +while (r = re.exec("123 456")) console.log(r, "AND re.lastIndex", re.lastIndex); + +// [ '1', index: 0, input: '123 456', groups: undefined ] AND re.lastIndex 1 +// [ '2', index: 1, input: '123 456', groups: undefined ] AND re.lastIndex 2 +// [ '3', index: 2, input: '123 456', groups: undefined ] AND re.lastIndex 3 +// ... and no more match.</code></pre> + +<p>With the global flag <code>g</code>, all 6 digits would be matched, not just 3.</p> + +<h3 id="Regular_expression_and_Unicode_characters">Regular expression and Unicode characters</h3> + +<p>As mentioned above, <code>\w</code> or <code>\W</code> only matches ASCII based characters; for example, <code>a</code> to <code>z</code>, <code>A</code> to <code>Z</code>, <code>0</code> to <code>9</code>, and <code>_</code>.</p> + +<p>To match characters from other languages such as Cyrillic or Hebrew, use <code>\u<var>hhhh</var></code>, where <code><var>hhhh</var></code> is the character's Unicode value in hexadecimal.</p> + +<p>This example demonstrates how one can separate out Unicode characters from a word.</p> + +<pre class="notranslate"><code>let text = 'Образец text на русском языке' +let regex = /[\u0400-\u04FF]+/g + +let match = regex.exec(text) +console.log(match[0]) // logs 'Образец' +console.log(regex.lastIndex) // logs '7' + +let match2 = regex.exec(text) +console.log(match2[0]) // logs 'на' [did not log 'text'] +console.log(regex.lastIndex) // logs '15' + +// and so on +</code></pre> + +<p>The <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes">Unicode property escapes</a> feature introduces a solution, by allowing for a statement as simple as <code>\p{scx=Cyrl}</code>. One can also use an external resource for getting the complete Unicode block range for different scripts, such as <a href="http://kourge.net/projects/regexp-unicode-block" rel="noopener">Regexp-Unicode-block</a>.</p> + +<h3 id="Extracting_sub-domain_name_from_URL">Extracting sub-domain name from URL</h3> + +<pre class="notranslate"><code>let url = 'http://xxx.domain.com' +console.log(/[^.]+/.exec(url)[0].substr(7)) // logs 'xxx' +</code></pre> + +<p>Instead of using regular expressions for parsing URLs, it is usually better to use the browsers built-in URL parser by using the <a href="/en-US/docs/Web/API/URL_API">URL API</a>.</p> + +<h2 id="Specifications">Specifications</h2> + +<table> + <thead> + <tr> + <th scope="col">Specification</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="https://tc39.es/ecma262/#sec-regexp-regular-expression-objects" hreflang="en" lang="en" rel="noopener">ECMAScript (ECMA-262)<br> + <small lang="en-US">The definition of 'RegExp' in that specification.</small></a></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{Compat("javascript.builtins.RegExp")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">Regular Expressions</a> chapter in the <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript Guide</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match"><code>String.prototype.match()</code></a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace"><code>String.prototype.replace()</code></a></li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/string/concat/index.html b/files/id/web/javascript/reference/global_objects/string/concat/index.html new file mode 100644 index 0000000000..0ba2b2a156 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/string/concat/index.html @@ -0,0 +1,134 @@ +--- +title: String.prototype.concat() +slug: Web/JavaScript/Reference/Global_Objects/String/concat +tags: + - JavaScript + - Referensi + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/concat +--- +<div>{{JSRef}}</div> + +<p>Method <strong><code>concat()</code></strong> menggabungkan dua teks atau lebih menjadi sebuah string baru.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>str</var>.concat(<var>string2</var>, <var>string3</var>[, ..., <var>stringN</var>])</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>string2...string<em>N</em></code></dt> + <dd>String untuk menggabungkan string.</dd> +</dl> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Fungsi <code>concat()</code> menggabungkan teks dari satu atau lebih string dan mengembalikanya menjadi sebuah string. Perubahan pada salah satu teks tidak mempengaruhi string lainnya.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Penggunaan_concat()">Penggunaan <code>concat()</code></h3> + +<p>Untuk menggabungkan string menjadi sebuah string baru seperti pada contoh dibawah.</p> + +<pre class="brush: js">var halo = 'Halo, '; +console.log(halo.concat('Didik', ' semoga hari ini menyenangkan.')); + +/* Halo, Didik semoga hari ini menyenangkan. */ +</pre> + +<h2 id="Performa">Performa</h2> + +<p>Sangat disarankan untuk menggunakan {{jsxref("Operators/Assignment_Operators", "assignment operators", "", 1)}} (<code>+</code>, <code>+=</code>) pada method <code>concat()</code>. lihat <a href="http://jsperf.com/concat-vs-plus-vs-join">test performa berikut ini</a>.</p> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.4.6', 'String.prototype.concat')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.concat', 'String.prototype.concat')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.concat', 'String.prototype.concat')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_browser">Kompabilitas browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Android</th> + <th>Chrome untuk Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Array.prototype.concat()")}}</li> + <li>{{jsxref("Operators/Assignment_Operators", "Assignment operators", "", 1)}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/string/fromcharcode/index.html b/files/id/web/javascript/reference/global_objects/string/fromcharcode/index.html new file mode 100644 index 0000000000..786e32883e --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/string/fromcharcode/index.html @@ -0,0 +1,143 @@ +--- +title: String.fromCharCode() +slug: Web/JavaScript/Reference/Global_Objects/String/fromCharCode +tags: + - JavaScript + - Method + - Metode + - Reference + - Referensi + - String + - Unicode +translation_of: Web/JavaScript/Reference/Global_Objects/String/fromCharCode +--- +<div>{{JSRef}}</div> + +<p>Metode statis <strong><code>String.fromCharCode()</code></strong> mengembalikan sebuah string yang dibuat dari barisan nilai Unicode tertentu.</p> + +<h2 id="Sintak">Sintak</h2> + +<pre class="syntaxbox notranslate"><code>String.fromCharCode(<var>num1</var>[, ...[, <var>numN</var>]])</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>num1, ..., num<em>N</em></code></dt> + <dd>Barisan dari angka-angka yang merupakan nilai Unicode.Jangkauannya antara 0 sampai dengan 65535(0xFFFF).Nomor yang lebih besar dari 0xFFFF dipotong.Tidak ada cek validasi yang dilakukan. </dd> +</dl> + +<h3 id="Nilai_kembalian">Nilai kembalian</h3> + +<p>Sebuah string yang di dalamnya terdapat karakter-karakter sesuai nilai Unicode dari barisan angka yang diberikan.</p> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Metode ini mengembalikan sebuah string dan bukan objek {{jsxref("String")}}.</p> + +<p>Karena <code>fromCharCode()</code> merupakan metode statis dari {{jsxref("String")}}, Anda selalu bisa menggunakannya sebagai <code>String.fromCharCode()</code>, daripada sebagai metode dari objek {{jsxref("String")}} yang Anda buat.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Menggunakan_fromCharCode">Menggunakan <code>fromCharCode()</code></h3> + +<p>Contoh di bawah ini mengembalikan string "ABC".</p> + +<pre class="brush: js notranslate">String.fromCharCode(65, 66, 67); // "ABC" +</pre> + +<h2 id="Membuatnya_bekerja_dengan_nilai_yang_lebih_tinggi">Membuatnya bekerja dengan nilai yang lebih tinggi</h2> + +<p>Meskipu nilai Unicode yang umum dapat digambarkan dengan satu angka 16-bit (seperti yang diharapkan pada awal mula standarisasi JavaScript) dan <code>fromCharCode()</code> dapat digunakan untuk mengembalikan sebuah karakter dari nilai yang paling umum (misal. nilai UCS-2 yang merupakan bagian dari UTF-16 dengan karakter yang paling umum digunakan). Untuk menghadapi SEMUA nilai Unicode yang sah (hingga 21 bit), <code>fromCharCode()</code> sendiri tidak dapat menghadapinya. Semenjak nilai code point karakter yang lebih tinggi menggunakan dua angka "pengganti" (dengan nilai yang lebih rendah) untuk membuat sebuah karakter tunggal, {{jsxref("String.fromCodePoint()")}} (bagian dari draf ES6) dapat digunakan untuk menggunakan sepasang angka tersebut, sehingga dapat menampilkan karakter dengan nilai yang lebih tinggi.</p> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Komentar</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definisi awal. Diimplementasikan dalam JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.3.2', 'StringfromCharCode')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.fromcharcodes', 'String.fromCharCode')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.fromcharcodes', 'String.fromCharCode')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_peramban">Kompabilitas peramban</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("String.fromCodePoint()")}}</li> + <li>{{jsxref("String.prototype.charAt()")}}</li> + <li>{{jsxref("String.prototype.charCodeAt()")}}</li> + <li>{{jsxref("String.prototype.codePointAt()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/string/fromcodepoint/index.html b/files/id/web/javascript/reference/global_objects/string/fromcodepoint/index.html new file mode 100644 index 0000000000..dc4024f941 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/string/fromcodepoint/index.html @@ -0,0 +1,149 @@ +--- +title: String.fromCodePoint() +slug: Web/JavaScript/Reference/Global_Objects/String/fromCodePoint +tags: + - ECMAScript 2015 + - JavaScript + - Metode + - Referensi + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/fromCodePoint +--- +<div>{{JSRef}}</div> + +<p>Metode <strong><code>String.fromCodePoint()</code></strong> mengembalikan string yang dibuat dengan menggunakan urutan titik kode yang ditentukan.</p> + +<div>{{EmbedInteractiveExample("pages/js/string-fromcodepoint.html")}}</div> + +<p class="hidden">Sumber untuk contoh interaktif ini disimpan dalam repositori github. Jika anda ingin berkontribusi pada proyek contoh interaktif lainnya, silakan klon <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> dan kirim permintaan penarikan kepada kami.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>String.fromCodePoint(<var>num1</var>[, ...[, <var>numN</var>]])</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>num1, ..., num<em>N</em></code></dt> + <dd>Urutan Poin Kode</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p><span class="tlid-translation translation"><span title="">String yang dibuat dengan menggunakan urutan titik kode yang ditentukan.</span></span></p> + +<h3 id="Exceptions">Exceptions</h3> + +<ul> + <li>A {{jsxref("Errors/Not_a_codepoint", "RangeError")}} adalah sebuah pembatalan jika titik kode Unicode yang valid tidak diberikan (e.g. "RangeError: NaN is not a valid code point").</li> +</ul> + +<h2 id="Description">Description</h2> + +<p>Metode ini mengembalikan string dan bukan sebuah objek. {{jsxref("String")}} .</p> + +<p>Karena <code>fromCodePoint()</code> adalah metode statik dari {{jsxref("String")}}, dan anda selalu menggunakannya sebagai <code>String.fromCodePoint()</code>, alih-alih sebagai sebuah metode yang anda buat {{jsxref("String")}}</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_fromCodePoint()">Using <code>fromCodePoint()</code></h3> + +<pre class="brush: js">String.fromCodePoint(42); // "*" +String.fromCodePoint(65, 90); // "AZ" +String.fromCodePoint(0x404); // "\u0404" +String.fromCodePoint(0x2F804); // "\uD87E\uDC04" +String.fromCodePoint(194564); // "\uD87E\uDC04" +String.fromCodePoint(0x1D306, 0x61, 0x1D307) // "\uD834\uDF06a\uD834\uDF07" + +String.fromCodePoint('_'); // RangeError +String.fromCodePoint(Infinity); // RangeError +String.fromCodePoint(-1); // RangeError +String.fromCodePoint(3.14); // RangeError +String.fromCodePoint(3e-2); // RangeError +String.fromCodePoint(NaN); // RangeError +</pre> + +<pre class="brush: js">// String.fromCharCode() sendiri tidak bisa mendapatkan karakter pada titik kode tinggi seperti itu +// Disisi lain, dapat juga mengembalikan karakter 4-byte dan juga +// yang biasa 2-byte (i.e., dapat mengembalikan satu karakter yang sebenarnya sudah dimiliki +// string 2 daripada 1!) +console.log(String.fromCodePoint(0x2F804)); // atau 194564 dalam bilangan desimal +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Metode <code>String.fromCodePoint</code> telah ditambahkan ke ECMAScript 2015 dan mungkin belum didukung di semua browser web atau lingkungannya. Gunakan kode dibawah ini untuk polyfill:</p> + +<pre class="brush: js">if (!String.fromCodePoint) (function(stringFromCharCode) { + var fromCodePoint = function(_) { + var codeUnits = [], codeLen = 0, result = ""; + for (var index=0, len = arguments.length; index !== len; ++index) { + var codePoint = +arguments[index]; + // correctly handles all cases including `NaN`, `-Infinity`, `+Infinity` + // The surrounding `!(...)` is required to correctly handle `NaN` cases + // The (codePoint>>>0) === codePoint clause handles decimals and negatives + if (!(codePoint < 0x10FFFF && (codePoint>>>0) === codePoint)) + throw RangeError("Invalid code point: " + codePoint); + if (codePoint <= 0xFFFF) { // BMP code point + codeLen = codeUnits.push(codePoint); + } else { // Astral code point; split in surrogate halves + // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae + codePoint -= 0x10000; + codeLen = codeUnits.push( + (codePoint >> 10) + 0xD800, // highSurrogate + (codePoint % 0x400) + 0xDC00 // lowSurrogate + ); + } + if (codeLen >= 0x3fff) { + result += stringFromCharCode.apply(null, codeUnits); + codeUnits.length = 0; + } + } + return result + stringFromCharCode.apply(null, codeUnits); + }; + try { // IE 8 only supports `Object.defineProperty` on DOM elements + Object.defineProperty(String, "fromCodePoint", { + "value": fromCodePoint, "configurable": true, "writable": true + }); + } catch(e) { + String.fromCodePoint = fromCodePoint; + } +}(String.fromCharCode)); +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-string.fromcodepoint', 'String.fromCodePoint')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definisi Awal</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.fromcodepoint', 'String.fromCodePoint')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">Tabel Kompatibilitas di halaman ini dihasilkan dari data terstruktur. Jika anda ingin berkontribusi pada data, silakan berkunjung <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> dan kirimkan permintaan penarikan</p> + +<p>{{Compat("javascript.builtins.String.fromCodePoint")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("String.fromCharCode()")}}</li> + <li>{{jsxref("String.prototype.charAt()")}}</li> + <li>{{jsxref("String.prototype.codePointAt()")}}</li> + <li>{{jsxref("String.prototype.charCodeAt()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/string/index.html b/files/id/web/javascript/reference/global_objects/string/index.html new file mode 100644 index 0000000000..35f78502d5 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/string/index.html @@ -0,0 +1,371 @@ +--- +title: String +slug: Web/JavaScript/Reference/Global_Objects/String +tags: + - ECMAScript6 + - JavaScript + - Reference + - Referensi + - Referensı(2) + - Référence(2) + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String +--- +<div>{{JSRef("Global_Objects", "String")}}</div> + +<h2 id="Summary" name="Summary">Ringkasan</h2> + +<p>Objek global <strong><code>String</code></strong> adalah sebuah pembangun untuk string, atau sebuah rangkaian dari karakter.</p> + +<h2 id="Syntax" name="Syntax">Sintak</h2> + +<p>String secara harfiah berbentuk:</p> + +<pre class="syntaxbox"><code>'string text' +"string text" +"中文 español English हिन्दी العربية português বাংলা русский 日本語 ਪੰਜਾਬੀ 한국어 </code><span style="color: #222222; font-family: consolas,lucida console,monospace; font-size: 12px; line-height: normal; white-space: pre-wrap;">தமிழ்</span><code>" +</code></pre> + +<p>Sejak ECMAScript 6 String secara harfiah dapat juga menjadi <a href="/en-US/docs/Web/JavaScript/Reference/template_strings">Template Strings</a>:</p> + +<pre><code>`hello world`</code> +`hello! + world!` +<code>`hello ${who}`</code> +<code>escape `<a>${who}</a>`</code></pre> + +<p>Selain karakter biasa yang dapat dicetak, karakter spesial dapat disandikan dengan notasi lepas:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Kode</th> + <th scope="col">Keluaran</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>\0</code></td> + <td>karakter NUL</td> + </tr> + <tr> + <td><code>\'</code></td> + <td>petik satu</td> + </tr> + <tr> + <td><code>\"</code></td> + <td>petik dua</td> + </tr> + <tr> + <td><code>\\</code></td> + <td>garis miring</td> + </tr> + <tr> + <td><code>\n</code></td> + <td>baris baru</td> + </tr> + <tr> + <td><code>\r</code></td> + <td>carriage return</td> + </tr> + <tr> + <td><code>\v</code></td> + <td>tab vertikal</td> + </tr> + <tr> + <td><code>\t</code></td> + <td>tab</td> + </tr> + <tr> + <td><code>\b</code></td> + <td>backspace</td> + </tr> + <tr> + <td><code>\f</code></td> + <td>form feed</td> + </tr> + <tr> + <td><code>\uXXXX</code></td> + <td>unicode codepoint</td> + </tr> + <tr> + <td><code>\u{X}</code> ... <code>\u{XXXXXX}</code></td> + <td>unicode codepoint {{experimental_inline}}</td> + </tr> + <tr> + <td><code>\xXX</code></td> + <td>karakter Latin-1</td> + </tr> + </tbody> +</table> + +<p>Atau, menggunakan objek global <code>String</code> langsung:</p> + +<pre class="syntaxbox"><code>String(benda) +new String(benda) +</code></pre> + +<h3 id="Parameters" name="Parameters">Parameter</h3> + +<dl> + <dt><code>benda</code></dt> + <dd>Apapun yang akan diubah ke string.</dd> +</dl> + +<h2 id="Description" name="Description">Deskripsi</h2> + +<p>String berguna untuk membawa data yang dapat diitampilkan dalam bentuk teks. Beberapa operasi yang paling sering digunakan dalam string adalah untuk memeriksa {{jsxref("String.length", "panjangnya")}}, untuk membuat dan menggabungkannya dengan <a href="/en-US/docs/Web/JavaScript/Reference/Operators/String_Operators">operator string + dan +=</a>, mengecek adanya atau lokasi dari substring dengan metode {{jsxref("String.prototype.indexOf()", "indexOf()")}}, atau mendapatkan substring dengan metode {{jsxref("String.prototype.substring()", "substring()")}}.</p> + +<h3 id="Character_access" name="Character_access">Akses karakter</h3> + +<p>Ada dua cara untuk mengakses sebuah karakter dalam string. Cara yang pertama adalah metode {{jsxref("String.prototype.charAt()", "charAt()")}}:</p> + +<pre class="brush: js">return 'cat'.charAt(1); // mengembalikan "a" +</pre> + +<p>Cara yang lain (diperkenalkan dalam ECMAScript 5) adalah menganggap string sebagai objek mirip-susunan, di mana setiap karakter disesuaikan dengan indeks angka:</p> + +<pre class="brush: js">return 'cat'[1]; // mengembalikan "a" +</pre> + +<p>Untuk akses karakter dengan menggunakan notasi kurung, mencoba untuk menghapus atau menetapkan nilai ke propertinya tidak akan berhasil. Properti yang terlibat tidak dapat ditulis maupun diubah. (Lihat {{jsxref("Object.defineProperty()")}} untuk informasi lebih.)</p> + +<h3 id="Comparing_strings" name="Comparing_strings">Membandingkan string</h3> + +<p>Pengembang C mempunyai fungsi <code>strcmp()</code> untuk membandingkan string. Dalam JavaScript, Anda cukup menggunakan <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">operas kurang dari dan lebih dari</a>:</p> + +<pre class="brush: js">var a = 'a'; +var b = 'b'; +if (a < b) { // benar + print(a + ' kurang dari ' + b); +} else if (a > b) { + print(a + ' lebih dari ' + b); +} else { + print(a + ' sama dengan ' + b); +} +</pre> + +<p>Hasil yang serupa dapat didapatkan dengan metode {{jsxref("String.prototype.localeCompare()", "localeCompare()")}} yang diwariskan oleh benda <code>String</code>.</p> + +<h3 id="Perbedaan_antara_string_primitif_dan_objek_String">Perbedaan antara string primitif dan objek <code>String</code></h3> + +<p>Ingat bahwa JavaScript membedakan nilai antara objek <code>String</code> dan string primitif. (Serupa dengan {{jsxref("Global_Objects/Boolean", "Boolean")}} dan {{jsxref("Global_Objects/Number", "Angka")}}.)</p> + +<p>String yang harfiah (ditandai dengan petik satu atau dua) dan string yang dikembalikan dari panggilan <code>String</code> dalam sebuah konteks non-pembangun (misal, tanpa menggunakan kata kunci {{jsxref("Operators/new", "new")}}) adalah string primitif. JavaScript secara otomatis mengubah primitif ke objek <code>String</code>, jadi mungkin untuk menggunakan metode objek <code>String</code> untuk string primitif. Dalam konteks di mana sebuah metode dipanggil pada string primitif atau sebuah pembacaan properti terjadi, JavaScript akan secara otomatis membungkus string primitif dan memanggil metode tersebut atau melakukan pembacaan properti.</p> + +<pre class="brush: js">var s_prim = 'foo'; +var s_obj = new String(s_prim); + +console.log(typeof s_prim); // "string" +console.log(typeof s_obj); // "object" +</pre> + +<p>String primitif dan objek <code>String</code> juga memberikan hasil berbeda saat menggunakan {{jsxref("Global_Objects/eval", "eval()")}}. Primitif melewati <code>eval</code> sebagai kode sumber; Objek <code>String</code> dianggap semua objek lain, dengan mengembalikan objek tersebut. Sebagai contoh:</p> + +<pre class="brush: js">var s1 = '2 + 2'; // membuat sebuah string primitif +var s2 = new String('2 + 2'); // membuat sebuah objek String +console.log(eval(s1)); // mengembalikan angka 4 +console.log(eval(s2)); // mengembalikan string "2 + 2" +</pre> + +<p>Untuk itu, kode mungkin berhenti saat menemui objek <code>String</code> saat mengharapkan string primitif, meskipun secara umum pembuat tidak perlu khawatir tentang perbedaannya.</p> + +<p>Sebuah objek <code>String</code> dapat selalu diubah menjadi kawan primitifnya dengan metode {{jsxref("String.prototype.valueOf()", "valueOf()")}}.</p> + +<pre class="brush: js">console.log(eval(s2.valueOf())); // mengembalikan angka 4 +</pre> + +<div class="note"><strong>Catatan:</strong> Untuk kemungkinan lain ke string dalam JavaScript, mohon baca artikel tentang <a href="/en-US/Add-ons/Code_snippets/StringView"><code>StringView</code> — a C-like representation of strings based on typed arrays</a> (bahasa Inggris).</div> + +<h2 id="Properties" name="Properties">Properti</h2> + +<dl> + <dt>{{jsxref("String.prototype")}}</dt> + <dd>Membolehkan penambahan properti ke sebuahobjek <code>String</code>.</dd> +</dl> + +<div>{{jsOverrides("Function", "Properties", "prototype")}}</div> + +<h2 id="Methods" name="Methods">Metode</h2> + +<dl> + <dt>{{jsxref("String.fromCharCode()")}}</dt> + <dd>Mengembalikan sebuah string yang dibuat dengan menggunakan nilai urutan Unicode.</dd> + <dt>{{jsxref("String.fromCodePoint()")}} {{experimental_inline}}</dt> + <dd>Mengembalikan sebuah string dibuat dengan menggunakan urutan code points.</dd> + <dt>{{jsxref("String.raw()")}} {{experimental_inline}}</dt> + <dd>Mengembalikan sebuah string yang dibuat dari sebuah templat string mentah.</dd> +</dl> + +<div>{{jsOverrides("Function", "Methods", "fromCharCode", "fromCodePoint", "raw")}}</div> + +<h2 id="Metode_umum_String">Metode umum <code>String</code></h2> + +<p>Metode benda <code>String</code> juga terdapat dalam Firefox sejak JavaScript 1.6 (meskipun bukan bagian dari standar ECMAScript) salam objek <code>String</code> untuk menerapkan metode <code>String</code> ke objek lain:</p> + +<pre class="brush: js">var num = 15; +console.log(String.replace(num, /5/, '2')); +</pre> + +<p>{{jsxref("Global_Objects/Array", "Metode umum", "#Metode_umum_Array", 1)}} juga terdapat dalam metode {{jsxref("Global_Objects/Array", "Array")}}.</p> + +<p>Berikut ini sebuah pengisi untuk memberikan dukungan ke peramban yang tidak mendukung:</p> + +<pre class="brush: js">/*globals define*/ +// Menganggap semua metode String telah ada +(function() { + 'use strict'; + + var i, + methods = [ + 'quote', 'substring', 'toLowerCase', 'toUpperCase', 'charAt', + 'charCodeAt', 'indexOf', 'lastIndexOf', 'startsWith', 'endsWith', + 'trim', 'trimLeft', 'trimRight', 'toLocaleLowerCase', + 'toLocaleUpperCase', 'localeCompare', 'match', 'search', + 'replace', 'split', 'substr', 'concat', 'slice' + ], + methodCount = methods.length, + assignStringGeneric = function(methodName) { + var method = String.prototype[methodName]; + String[methodName] = function(arg1) { + return method.apply(arg1, Array.prototype.slice.call(arguments, 1)); + }; + }; + + for (i = 0; i < methodCount; i++) { + assignStringGeneric(methods[i]); + } +}()); +</pre> + +<h2 id="String_instances" name="String_instances">Benda <code>String</code></h2> + +<h3 id="Properti">Properti</h3> + +<div>{{page('/id/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'Properti')}}</div> + +<h3 id="Metode">Metode</h3> + +<h4 id="Methods_unrelated_to_HTML" name="Methods_unrelated_to_HTML">Metode yang tidak terkait dengan HTML</h4> + +<div>{{page('/id/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'Metode_yang_tidak_terkait_dengan_HTML')}}</div> + +<h4 id="HTML_wrapper_methods" name="HTML_wrapper_methods">Metode pembungkus HTML</h4> + +<div>{{page('/id/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'Metode_pembungkus_HTML')}}</div> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Contoh_Pengubahan_String">Contoh: Pengubahan String</h3> + +<p>Ini mungkin untuk menggunakan <code>String</code> sebagai alternatif "lebih aman" dari {{jsxref("String.prototype.toString()", "toString()")}}, meskipun masih dapat secara normal memanggil <code>toString()</code>, ini juga bekerja untuk {{jsxref("Global_Objects/null", "null")}} dan {{jsxref("Global_Objects/undefined", "undefined")}}. Sebagai contoh:</p> + +<pre class="brush: js">var outputStrings = []; +for (var i = 0, n = inputValues.length; i < n; ++i) { + outputStrings.push(String(inputValues[i])); +} +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Komentar</th> + </tr> + <tr> + <td>ECMAScript 1st Edition.</td> + <td>Standard</td> + <td>Definisi pertama.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5', 'String')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string-objects', 'String')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatibilitas_peramban">Kompatibilitas peramban</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatChrome("0.2")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>\u{XXXXXX}</code></td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatGeckoDesktop("40")}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>\u{XXXXXX}</code></td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatGeckoMobile("40")}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{domxref("DOMString")}}</li> + <li><a href="/en-US/Add-ons/Code_snippets/StringView"><code>StringView</code> — a C-like representation of strings based on typed arrays</a></li> + <li><a href="/en-US/docs/Web/API/DOMString/Binary">Binary strings</a></li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/string/indexof/index.html b/files/id/web/javascript/reference/global_objects/string/indexof/index.html new file mode 100644 index 0000000000..3b7f7d0965 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/string/indexof/index.html @@ -0,0 +1,190 @@ +--- +title: String.prototype.indexOf() +slug: Web/JavaScript/Reference/Global_Objects/String/indexOf +translation_of: Web/JavaScript/Reference/Global_Objects/String/indexOf +--- +<div>{{JSRef}}</div> + +<p><strong><code>indexOf()</code></strong> method mengembalikan sebuah <em>index</em> saat memanggil objek {{jsxref("String")}} pertama kali dengan <em>value </em>yang di tentukan, bermula dari pencarian pada <em><code>fromIndex</code></em>. Dan pencarian ini akan mengembalikan index dari karakter pada String, dan akan mengembalikan <em>-1</em> ketika pencarian <em>indexOf </em>ini tak menemukan karakter yang cocok/ value yang sesuai.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>str</var>.indexOf(<var>searchValue</var>[, <var>fromIndex</var>]</code>)</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>searchValue</code></dt> + <dd>Sebuah string yang me-representasikan dari nilai yang ingin di cari.</dd> + <dt><code>fromIndex</code> {{optional_inline}}</dt> + <dd>Index bermulai dari awal hingga bergerak ke depan sepanjang string. Index bisa berupa bilangan bulat atau apa pun. Nilai standarnya adalah <code>0</code>, jadi seluruh index dari array akan dicari. Jika <code>fromIndex < 0</code> seluruh string dicari. Jika <code>fromIndex >= str.length</code>, string tidak dicari dan <code>-1</code> sebagai kembaliannya. Kecuali kalau <code>searchValue</code> adalah string kosong, maka <code>str.length</code> sebagai kembaliannya.</dd> +</dl> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Karakter dalam sebuah <em>string</em> di indeks berurutan dari kiri ke kanan. Index pada karakter pertama yaitu 0, dan index pada karakter terakhir dalam sebuah <em>String </em>di sebut <em>stringName </em>is <code>stringName.length - 1</code>.</p> + +<pre class="brush: js">'Blue Whale'.indexOf('Blue'); // mengembalikan 0 +'Blue Whale'.indexOf('Blute'); // mengembalikan -1 +'Blue Whale'.indexOf('Whale', 0); // mengembalikan 5 +'Blue Whale'.indexOf('Whale', 5); // mengembalikan 5 +'Blue Whale'.indexOf('', 9); // mengembalikan 9 +'Blue Whale'.indexOf('', 10); // mengembalikan 10 +'Blue Whale'.indexOf('', 11); // mengembalikan 10 +</pre> + +<h3 id="Case-sensitivity">Case-sensitivity</h3> + +<p>The <code>indexOf()</code> method sangat <em>case sensitive</em>. Sebagai contoh, <em>expression</em> berikut ini mengembalikan -1:</p> + +<pre class="brush: js">'Blue Whale'.indexOf('blue'); // mengembalikan -1 +</pre> + +<h3 id="Checking_occurrences_Memeriksa_suatu_kejadian">Checking occurrences/ Memeriksa suatu kejadian</h3> + +<p>Catat bahwa '0' tak bernilai <em>true</em> dan '-1' bukan bernilali <em>f<code>alse</code></em>. Oleh karena-nya, ketika memeriksa apakah sebuah <em>String</em> Therefore, when checking if a specific string exists within another string the correct way to check would be:</p> + +<pre class="brush: js">'Blue Whale'.indexOf('Blue') !== -1; // true +'Blue Whale'.indexOf('Bloe') !== -1; // false +</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_indexOf()_and_lastIndexOf()">Using <code>indexOf()</code> and <code>lastIndexOf()</code></h3> + +<p>The following example uses <code>indexOf()</code> and {{jsxref("String.prototype.lastIndexOf()", "lastIndexOf()")}} to locate values in the string <code>"Brave new world"</code>.</p> + +<pre class="brush: js">var anyString = 'Brave new world'; + +console.log('The index of the first w from the beginning is ' + anyString.indexOf('w')); +// logs 8 +console.log('The index of the last w from the beginning is ' + anyString.lastIndexOf('w')); +// logs 10 + +console.log('The index of "new" from the beginning is ' + anyString.indexOf('new')); +// logs 6 +console.log('The index of "new" from the end is ' + anyString.lastIndexOf('new')); +// logs 6 +</pre> + +<h3 id="indexOf()_and_case-sensitivity"><code>indexOf()</code> and case-sensitivity</h3> + +<p>The following example defines two string variables. The variables contain the same string except that the second string contains uppercase letters. The first {{domxref("console.log()")}} method displays 19. But because the <code>indexOf()</code> method is case sensitive, the string <code>"cheddar"</code> is not found in <code>myCapString</code>, so the second <code>console.log()</code> method displays -1.</p> + +<pre class="brush: js">var myString = 'brie, pepper jack, cheddar'; +var myCapString = 'Brie, Pepper Jack, Cheddar'; + +console.log('myString.indexOf("cheddar") is ' + myString.indexOf('cheddar')); +// logs 19 +console.log('myCapString.indexOf("cheddar") is ' + myCapString.indexOf('cheddar')); +// logs -1 +</pre> + +<h3 id="Using_indexOf()_to_count_occurrences_of_a_letter_in_a_string">Using <code>indexOf()</code> to count occurrences of a letter in a string</h3> + +<p>The following example sets <code>count</code> to the number of occurrences of the letter <code>e</code> in the string <code>str</code>:</p> + +<pre class="brush: js">var str = 'To be, or not to be, that is the question.'; +var count = 0; +var pos = str.indexOf('e'); + +while (pos !== -1) { + count++; + pos = str.indexOf('e', pos + 1); +} + +console.log(count); // displays 4 +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.4.7', 'String.prototype.indexOf')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.indexof', 'String.prototype.indexOf')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.indexof', 'String.prototype.indexOf')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("String.prototype.charAt()")}}</li> + <li>{{jsxref("String.prototype.lastIndexOf()")}}</li> + <li>{{jsxref("String.prototype.split()")}}</li> + <li>{{jsxref("Array.prototype.indexOf()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/string/length/index.html b/files/id/web/javascript/reference/global_objects/string/length/index.html new file mode 100644 index 0000000000..6975d8b7d3 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/string/length/index.html @@ -0,0 +1,126 @@ +--- +title: String.length +slug: Web/JavaScript/Reference/Global_Objects/String/length +translation_of: Web/JavaScript/Reference/Global_Objects/String/length +--- +<div>{{JSRef}}</div> + +<p>Properti <strong><code>length</code></strong> mewakili panjang string.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>str</var>.length</code></pre> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Properti ini mengembalikan jumlah unit kode dalam string. {{interwiki("wikipedia", "UTF-16")}}, Format string yang digunakan oleh javascript, Menggunakan 16-bit unit kode tunggal untuk mewakili karakter yang paling umum, tapi perlu menggunakan dua unit kode untuk unit karakter tertentu, sehingga dapat terjadi kemungkinan nilai yang dikembalikan oleh <code>length</code> tidak sesuai dengan jumlah karakter pada string.</p> + +<p>Untuk string kosong, <font face="Consolas, Liberation Mono, Courier, monospace">jumlahnya</font> 0.</p> + +<p>Properti static <code>String.length</code> mengembalikan nilai 1.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Penggunaan_Dasar">Penggunaan Dasar</h3> + +<pre class="brush: js">var x = 'Mozilla'; +var kosong = ''; + +console.log('Mozilla memiliki ' + x.length + ' unit kode'); +/* "Mozilla memiliki 7 unit kode" */ + +console.log('String kosong memiliki jumlah unit kode ' + kosong.length); +/* "String kosong memiliki jumlah unit kode 0" */ +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definisi Inisial. Diimplementasikan dalam JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.5.1', 'String.prototype.length')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-properties-of-string-instances-length', 'String.prototype.length')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-properties-of-string-instances-length', 'String.prototype.length')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Browser">Kompabilitas Browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="sect1"> </h2> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li><a href="http://developer.teradata.com/blog/jasonstrimpel/2011/11/javascript-string-length-and-internationalizing-web-applications">JavaScript <code>String.length</code> dan internasionalisasi Aplikasi Web</a></li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/string/link/index.html b/files/id/web/javascript/reference/global_objects/string/link/index.html new file mode 100644 index 0000000000..914eff9955 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/string/link/index.html @@ -0,0 +1,130 @@ +--- +title: String.prototype.link() +slug: Web/JavaScript/Reference/Global_Objects/String/link +tags: + - JavaScript + - Method + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/link +--- +<div>{{JSRef}}</div> + +<p>Method <strong><code>link()</code></strong> membuat sebuah string seperti halnya kode untuk sebuah elemen HTML {{HTMLElement("a")}} untuk digunakan sebagai link hypertext ke URL lain.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><code><var>str</var>.link(<var>url</var>)</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>url</code></dt> + <dd>String yang menentukan atribut <code>href</code> dai tag <code><a></code>; harus merupakan URL yang valid (relative ataupun absolute), dengan setiap karakter <code>&</code> harus ditulis <code>&amp;</code>, dan setiap karakter <code>"</code> harus ditulis <code>&quot;</code>.</dd> +</dl> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Menggunakan method <code>link()</code> untuk membuat snippet HTML untuk sebuah link hypertext. Mengembalikan string yang kemudian dapat di tambahkan ke dokumen html menggunakan {{domxref("document.write()")}} atau {{domxref("element.innerHTML")}}.</p> + +<p>Link yang dibuat menggunakan method <code>link()</code> akan menjadi elemen di array <code>links</code> dari sebuah objek <code>document</code>. Lihat juga {{domxref("document.links")}}.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Penggunaan_link()">Penggunaan <code>link()</code></h3> + +<p>Pada contoh berikut menampilkan kata "MDN" sebagai sebuah link hypertext yang mengembalikan pengguna ke halaman Mozilla Developer Network.</p> + +<pre class="brush: js">var hotText = 'MDN'; +var URL = 'https://developer.mozilla.org/'; + +console.log('Klik untuk kembali ke ' + hotText.link(URL)); +// Klik untuk kembali ke <a href="https://developer.mozilla.org/">MDN</a> +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.link', 'String.prototype.link')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0. Defined in the (normative) Annex B for Additional ECMAScript Features for Web Browsers.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.link', 'String.prototype.link')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Defined in the (normative) Annex B for Additional ECMAScript Features for Web Browsers.</td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_browser">Kompabilitas browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Catatan_Gecko-specific">Catatan Gecko-specific</h2> + +<ul> + <li>Dimulai pada Gecko 17.0 {{geckoRelease("17")}} tanda <code>"</code> (quotation mark) sekarang secara otomatis digantikan oleh referensi karakter HTML <code>&quot;</code> di parameter <code>url</code>.</li> +</ul> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("String.prototype.anchor()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/string/purwarupa/index.html b/files/id/web/javascript/reference/global_objects/string/purwarupa/index.html new file mode 100644 index 0000000000..3570a3627a --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/string/purwarupa/index.html @@ -0,0 +1,221 @@ +--- +title: String.prototype +slug: Web/JavaScript/Reference/Global_Objects/String/purwarupa +tags: + - JavaScript + - Property + - Prototype + - Reference + - Referensi + - String + - purwarupa +translation_of: Web/JavaScript/Reference/Global_Objects/String +--- +<div>{{JSRef}}</div> + +<p>Properti <strong><code>String.prototype</code></strong> mewakili objek prototype {{jsxref("Global_Objects/String", "String")}}.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Description" name="Description">Deskripsi</h2> + +<p>Semua benda {{jsxref("Global_Objects/String", "String")}} diwariskan dari <code>String.prototype</code>. Perubahan ke objek purwarupa <code>String</code> disebarkan ke semua benda {{jsxref("Global_Objects/String", "String")}}.</p> + +<h2 id="Properties" name="Properties">Properti</h2> + +<dl> + <dt><code>String.prototype.constructor</code></dt> + <dd>Menentukan fungsi yang membuat sebuah purwarupa dari objek.</dd> + <dt>{{jsxref("String.prototype.length")}}</dt> + <dd>Menggambarkan panjang dari string.</dd> + <dt><code><em>N</em></code></dt> + <dd>Digunakan untuk mengakses karakter pada posisi ke-<em>N</em> di mana <em>N</em> adalah sebuah bilangan bulat positif antara 0 dan nilai dari {{jsxref("String.length", "panjang")}} dikurangi satu. Nilai ini baca-saja.</dd> +</dl> + +<h2 id="Methods" name="Methods">Metode</h2> + +<h3 id="Methods_unrelated_to_HTML" name="Methods_unrelated_to_HTML">Metode yang tidak terkait dengan HTML</h3> + +<dl> + <dt>{{jsxref("String.prototype.charAt()")}}</dt> + <dd>Mengembalikan karakter pada indeks yang diberikan.</dd> + <dt>{{jsxref("String.prototype.charCodeAt()")}}</dt> + <dd>Mengembalikan sebuah angka yang menggambarkan nilai Unicode dari karakter pada indeks yang diberikan.</dd> + <dt>{{jsxref("String.prototype.codePointAt()")}} {{experimental_inline}}</dt> + <dd>Mengembalikan sebuah bilangan bulat non negatif yang merupakan nilai penyandian code point UTF-16 pada posisi yang diberikan.</dd> + <dt>{{jsxref("String.prototype.concat()")}}</dt> + <dd>Menggabungkan teks dari dua string dan mengembalikan sebuah string baru.</dd> + <dt>{{jsxref("String.prototype.includes()")}} {{experimental_inline}}</dt> + <dd>Menentukan apakah satu string mungkin terdapat pada string lain.</dd> + <dt>{{jsxref("String.prototype.endsWith()")}} {{experimental_inline}}</dt> + <dd>Menentukan apakah sebuah string berakhir dengan karakter dari string lain.</dd> + <dt>{{jsxref("String.prototype.indexOf()")}}</dt> + <dd>Mengembalikan indeks pada objek {{jsxref("Global_Objects/String", "String")}} terpanggil dari pertemuan pertama dari nilai yang diberikan, atau -1 jika tidak ditemukan.</dd> + <dt>{{jsxref("String.prototype.lastIndexOf()")}}</dt> + <dd>Mengembalikan indeks pada objek {{jsxref("Global_Objects/String", "String")}} terpanggil dari pertemuan terakhir dari nilai yang diberikan, atau -1 jika tidak ditemukan.</dd> + <dt>{{jsxref("String.prototype.localeCompare()")}}</dt> + <dd>Returns a number indicating whether a reference string comes before or after or is the same as the given string in sort order.</dd> + <dt>{{jsxref("String.prototype.match()")}}</dt> + <dd>Digunakan untuk mencocokkan sebuah regular expression pada string.</dd> + <dt>{{jsxref("String.prototype.normalize()")}} {{experimental_inline}}</dt> + <dd>Mengembalikan Unicode Normalization Form dari string terpanggil.</dd> + <dt><s class="obsoleteElement">{{jsxref("String.prototype.quote()")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement">Membungkus string dalam petik ganda ("<code>"</code>").</s></dd> + <dt>{{jsxref("String.prototype.repeat()")}} {{experimental_inline}}</dt> + <dd>Mengembalikan sebuah string yang tersiri dari elemen-elemen dari objek yang diulangi sebanyak yang diberikan.</dd> + <dt>{{jsxref("String.prototype.replace()")}}</dt> + <dd>Digunakan untuk mencari kecocokkan antara sebuah regular expression dan sebuah string, dan untuk menggantikan substring yang cocok dengan substring yang baru.</dd> + <dt>{{jsxref("String.prototype.search()")}}</dt> + <dd>Menjalankan pencarian untuk sebuah kecocokan antara sebuah regular expression dan sebuah string yang diberikan.</dd> + <dt>{{jsxref("String.prototype.slice()")}}</dt> + <dd>Menghasilkan sebuah bagian dari string dan mengembalikan sebuah string baru.</dd> + <dt>{{jsxref("String.prototype.split()")}}</dt> + <dd>Memisahkan sebuah objek {{jsxref("Global_Objects/String", "String")}} ke dalam sebuah susunan dari string dengan memisahkan string ke dalam substring.</dd> + <dt>{{jsxref("String.prototype.startsWith()")}} {{experimental_inline}}</dt> + <dd>Menentukan apakah sebuah string dimulai dengan karakter dari string lain.</dd> + <dt>{{jsxref("String.prototype.substr()")}}</dt> + <dd>Mengembalikan karakter-karakter dalam sebuah string yang dimulai dari indeks yang diberikan sebanyak jumlah karakter yang diberikan.</dd> + <dt>{{jsxref("String.prototype.substring()")}}</dt> + <dd>Mengembalikan karakter-karakter dalam sebuah string antara dua indeks ke dalam string.</dd> + <dt>{{jsxref("String.prototype.toLocaleLowerCase()")}}</dt> + <dd>Karakter-karakter di dalam string diubah menjadi huruf kecil dengan menjunjung tempat sekarang. Kebanyakan bahasa akan mengembalikan hasil yang sama seperti {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}}.</dd> + <dt>{{jsxref("String.prototype.toLocaleUpperCase()")}}</dt> + <dd>Karakter-karakter di dalam string diubah menjadi huruf kapital dengan menjunjung tempat sekarang. Kebanyakan bahasa akan mengembalikan hasil yang sama seperti {{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}}.</dd> + <dt>{{jsxref("String.prototype.toLowerCase()")}}</dt> + <dd>Mengembalikan nilai string terpanggil yang diubah menjadi huruf kecil.</dd> + <dt>{{jsxref("String.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>Mengembalikan sebuah objek harfiah yang menggambarkan objek yang diberikan; Anda dapat menggunakan nilai ini untuk membuat sebuah objek baru. Mengesampingkan metode {{jsxref("Object.prototype.toSource()")}}.</dd> + <dt>{{jsxref("String.prototype.toString()")}}</dt> + <dd>Mengembalikan sebuah string menggambarkan objek yang diberikan. Mengesampingkan metode {{jsxref("Object.prototype.toString()")}}.</dd> + <dt>{{jsxref("String.prototype.toUpperCase()")}}</dt> + <dd>Mengembalikan nilai string terpanggil yang diubah menjadi huruf kapital.</dd> + <dt>{{jsxref("String.prototype.trim()")}}</dt> + <dd>Memotong whitespace dari permulaan dan akhir string. Bagian dari standar ECMAScript 5.</dd> + <dt>{{jsxref("String.prototype.trimLeft()")}} {{non-standard_inline}}</dt> + <dd>Memotong whitespace dari sisi kiri dari string.</dd> + <dt>{{jsxref("String.prototype.trimRight()")}} {{non-standard_inline}}</dt> + <dd>Memotong whitespace dari sisi kanan dari string.</dd> + <dt>{{jsxref("String.prototype.valueOf()")}}</dt> + <dd>Mengembalikan nilai primitif dari objek yang diberikan. Mengesampingkan metode {{jsxref("Object.prototype.valueOf()")}}.</dd> + <dt>{{jsxref("String.prototype.@@iterator()", "String.prototype[@@iterator]()")}} {{experimental_inline}}</dt> + <dd>Mengembalikan sebuah objek <code>Iterator</code> baru yang mengulangi melewati code points dari nilai String, mengembalikan setiap code point sebagai sebuah nilai String.</dd> +</dl> + +<h3 id="HTML_wrapper_methods" name="HTML_wrapper_methods">Metode pembungkus HTML</h3> + +<p>Metode-metode ini merupakan penggunaan terbatas, karena mereka hanya memberikan sebuah subset dari tag dan atribut HTML yang tersedia.</p> + +<dl> + <dt>{{jsxref("String.prototype.anchor()")}}</dt> + <dd>{{htmlattrxref("name", "a", "<a name=\"name\">")}} (menarget hiperteks)</dd> + <dt>{{jsxref("String.prototype.big()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("big")}}</dd> + <dt>{{jsxref("String.prototype.blink()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("blink")}}</dd> + <dt>{{jsxref("String.prototype.bold()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("b")}}</dd> + <dt>{{jsxref("String.prototype.fixed()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("tt")}}</dd> + <dt>{{jsxref("String.prototype.fontcolor()")}} {{deprecated_inline}}</dt> + <dd>{{htmlattrxref("color", "font", "<font color=\"color\">")}}</dd> + <dt>{{jsxref("String.prototype.fontsize()")}} {{deprecated_inline}}</dt> + <dd>{{htmlattrxref("size", "font", "<font size=\"size\">")}}</dd> + <dt>{{jsxref("String.prototype.italics()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("i")}}</dd> + <dt>{{jsxref("String.prototype.link()")}}</dt> + <dd>{{htmlattrxref("href", "a", "<a href=\"url\">")}} (tautan ke URL)</dd> + <dt>{{jsxref("String.prototype.small()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("small")}}</dd> + <dt>{{jsxref("String.prototype.strike()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("strike")}}</dd> + <dt>{{jsxref("String.prototype.sub()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("sub")}}</dd> + <dt>{{jsxref("String.prototype.sup()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("sup")}}</dd> +</dl> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Komentar</th> + </tr> + <tr> + <td>ECMAScript 1st Edition.</td> + <td>Standard</td> + <td>Definisi awal.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.3.1', 'String.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype', 'String.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatibilitas_peramban">Kompatibilitas peramban</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Lihat juga</h2> + +<ul> + <li>{{jsxref("Global_Objects/String", "String")}}</li> + <li>{{jsxref("Function.prototype")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/string/split/index.html b/files/id/web/javascript/reference/global_objects/string/split/index.html new file mode 100644 index 0000000000..21f19d353f --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/string/split/index.html @@ -0,0 +1,241 @@ +--- +title: String.prototype.split() +slug: Web/JavaScript/Reference/Global_Objects/String/split +tags: + - JavaScript + - Method + - Prototype + - Reference + - Regular Expressions + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/split +--- +<div>{{JSRef}}</div> + +<p>Method <strong><code>split()</code></strong> membagi sebuah objek {{jsxref("String")}} ke sebuah array string dengan memisahkannya menjadi substring.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><code><var>str</var>.split([<var>separator</var>[, <var>limit</var>]])</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>separator</code></dt> + <dd>Opsional. Menentukan karakter yang digunakan untuk memisahkan string. <code>separator</code> dapat berupa string atau sebuah {{jsxref("Global_Objects/RegExp", "regular expression", "", 1)}}. Jika <code>separator</code> dihilangkan / tidak digunakan, array yang dikembalikan akan terdiri dari satu elemen yang berisi seluruh string. Jika <code>separator</code> dikosongkan atau empty string, <code>str</code> akan dikonversikan sebagai sebuah array dari karakter.</dd> + <dt><code>limit</code></dt> + <dd> + <p>Opsional. Nilai integer yang digunakan untuk menentukan jumlah batas yang dapat ditemukan. Method <code>split()</code> tetap membagi pada setiap kecocokan pada <code>separator</code>, sampai jumlah pembagi item sama dengan <code>limit</code> atau string jatuh lebih pendek dari <code>separator</code>.</p> + </dd> +</dl> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Method <code>split()</code> mengembalikan array baru.</p> + +<p>Saat ditemukan, <code>separator</code> akan dihapus dari string dan substrings akan di kembalikan ke dalam array. Jika <code>separator</code> tidak ditemukan atau di hilangkan, array terdiri satu elemen array yang terdiri dari keseluruhan string. Jika <code>separator</code> merupakan empty string, <code>str</code> dikonversi menjadi sebuah array karakter.</p> + +<p>Jika <code>separator</code> adalah ekspesi reguler yang terdapat tanda kurung , maka setiap kali <code>separator</code> cocok, hasilnya (termasuk hasil yang tidak didefinisikan) dari penangkap tanda kurung akan di sambungkan ke dalam output array. Namun, tidak semua browser mendukung kemampuan ini.</p> + +<p>{{Note("Ketika string kosong, method <code>split()</code> mengembalikan array berisi satu string kosong, dari pada array kosong. Jika string dan separator keduanya string kosong, array kosong akan dikembalikan.")}}</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Penggunaan_split()">Penggunaan <code>split()</code></h3> + +<p>Contoh berikut menjelaskan fungsi yang membagi string ke dalam sebuah array string menggunakan separator tertentu. Setelah memisahkan string , fungsi menampilkan pesan yang menunjukan string asli (sebelum dibagi), separator yang digunakan, jumlah elemen pada array, dan elemen array secara individual.</p> + +<pre class="brush: js">function splitString(stringToSplit, separator) { + var arrayOfStrings = stringToSplit.split(separator); + + console.log('The original string is: "' + stringToSplit + '"'); + console.log('The separator is: "' + separator + '"'); + console.log('The array has ' + arrayOfStrings.length + ' elements: ' + arrayOfStrings.join(' / ')); +} + +var tempestString = 'Oh brave new world that has such people in it.'; +var monthString = 'Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec'; + +var space = ' '; +var comma = ','; + +splitString(tempestString, space); +splitString(tempestString); +splitString(monthString, comma); +</pre> + +<p>Contoh ini menghasilkan output berikut:</p> + +<pre>The original string is: "Oh brave new world that has such people in it." +The separator is: " " +The array has 10 elements: Oh / brave / new / world / that / has / such / people / in / it. + +The original string is: "Oh brave new world that has such people in it." +The separator is: "undefined" +The array has 1 elements: Oh brave new world that has such people in it. + +The original string is: "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec" +The separator is: "," +The array has 12 elements: Jan / Feb / Mar / Apr / May / Jun / Jul / Aug / Sep / Oct / Nov / Dec +</pre> + +<h3 id="Menghapus_spasi_dari_string">Menghapus spasi dari string</h3> + +<p>Pada contoh berikut, <code>split()</code> mencari 0 atau lebih spasi diikuti semikolon, dan di ikuti 0 atau lebih spasi dan, saat ditemukan, menghapus spasi dari string. <code>nameList</code> merupakan array yang dikembalikan dari hasil <code>split()</code>.</p> + +<pre class="brush: js">var names = 'Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand '; + +console.log(names); + +var re = /\s*;\s*/; +var nameList = names.split(re); + +console.log(nameList); +</pre> + +<p>Dua baris log ini; log baris pertama string asli, dan log baris kedua array yang dihasilkan.</p> + +<pre>Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand +[ "Harry Trump", "Fred Barney", "Helen Rigby", "Bill Abel", "Chris Hand " ] +</pre> + +<h3 id="Mengembalikan_batas_jumlah_pembagi">Mengembalikan batas jumlah pembagi</h3> + +<p>Pada contoh berikut, <code>split()</code> mencari 0 atau lebih spasi didalam string dan mengembalikan 3 pembagian pertama yang ditemukan.</p> + +<pre class="brush: js">var myString = 'Hello World. How are you doing?'; +var splits = myString.split(' ', 3); + +console.log(splits); +</pre> + +<p>Script ini akan menampilkan seperti berikut:</p> + +<pre>Hello,World.,How +</pre> + +<h3 id="Tanda_kurung">Tanda kurung</h3> + +<p>Jika <code>separator</code> terdapat tanda kurung, hasil yang cocok akan dikembalikan ke dalam array.</p> + +<pre class="brush: js">var myString = 'Hello 1 word. Sentence number 2.'; +var splits = myString.split(/(\d)/); + +console.log(splits); +</pre> + +<p>Script tersebut menampilkan seperti berikut:</p> + +<pre>[ 'Hello ', '1', ' word. Sentence number ', '2', '.' ] +</pre> + +<h3 id="Membalikkan_String_menggunakan_split()">Membalikkan String menggunakan <code>split()</code></h3> + +<pre class="brush: js">var str = 'asdfghjkl'; +var strReverse = str.split('').reverse().join(''); // 'lkjhgfdsa' +// split() returns an array on which reverse() and join() can be applied +</pre> + +<p><strong>Bonus:</strong> Gunakan operator {{jsxref("Operators/Comparison_Operators", "===", "#Identity_strict_equality_(===)")}} untuk mengetahui apakah string asli adalah palindrome.</p> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.4.14', 'String.prototype.split')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.split', 'String.prototype.split')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.split', 'String.prototype.split')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Browser">Kompabilitas Browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td> + <table class="compat-table"> + <tbody> + <tr> + <td>Dukungan dasar</td> + <td> </td> + </tr> + </tbody> + </table> + </td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li>{{jsxref("String.prototype.charAt()")}}</li> + <li>{{jsxref("String.prototype.indexOf()")}}</li> + <li>{{jsxref("String.prototype.lastIndexOf()")}}</li> + <li>{{jsxref("Array.prototype.join()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/string/tolowercase/index.html b/files/id/web/javascript/reference/global_objects/string/tolowercase/index.html new file mode 100644 index 0000000000..69fdfd1bec --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/string/tolowercase/index.html @@ -0,0 +1,121 @@ +--- +title: String.prototype.toLowerCase() +slug: Web/JavaScript/Reference/Global_Objects/String/toLowerCase +tags: + - JavaScript + - Method + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/toLowerCase +--- +<div>{{JSRef}}</div> + +<p>Method <strong><code>toLowerCase()</code></strong> mengembalikan nilai string yang dipanggil yang telah dikonversi ke lowercase (huruf kecil).</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><code><var>str</var>.toLowerCase()</code></pre> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Method <code>toLowerCase()</code> mengembaikan nilai dari string yang telah dikonversi ke lowercase. <code>toLowerCase()</code> tidak berdampak pada nilai string pada variabel <code>str</code> itu sendiri.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Penggunaan_toLowerCase()">Penggunaan <code>toLowerCase()</code></h3> + +<pre class="brush: js">console.log('ALPHABET'.toLowerCase()); // 'alphabet' +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.4.16', 'String.prototype.toLowerCase')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.tolowercase', 'String.prototype.toLowerCase')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.tolowercase', 'String.prototype.toLowerCase')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_browser">Kompabilitas browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("String.prototype.toLocaleLowerCase()")}}</li> + <li>{{jsxref("String.prototype.toLocaleUpperCase()")}}</li> + <li>{{jsxref("String.prototype.toUpperCase()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/string/tostring/index.html b/files/id/web/javascript/reference/global_objects/string/tostring/index.html new file mode 100644 index 0000000000..dba9c9f792 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/string/tostring/index.html @@ -0,0 +1,118 @@ +--- +title: String.prototype.toString() +slug: Web/JavaScript/Reference/Global_Objects/String/toString +translation_of: Web/JavaScript/Reference/Global_Objects/String/toString +--- +<div>{{JSRef}}</div> + +<p>Method <strong><code>toString()</code></strong> mengembalikan sebuah string berdasarkan objek spesifik.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><code><var>str</var>.toString()</code></pre> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Objek {{jsxref("String")}} akan menimpa method <code>toString()</code> dari objek {{jsxref("Object")}}; bukan turunan {{jsxref("Object.prototype.toString()")}}. Untuk objek {{jsxref("String")}}, method <code>toString()</code> mengembalikan sebuah string berdasarkan objek dan seperti halnya pada method {{jsxref("String.prototype.valueOf()")}}.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Penggunaan_toString()">Penggunaan <code>toString()</code></h3> + +<p>Pada contoh menampilkan nilai string dari sebuah objek {{jsxref("String")}}:</p> + +<pre class="brush: js">var x = new String('Halo Dunia'); + +console.log(x.toString()); // logs 'Halo Dunia' +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.4.2', 'String.prototype.toString')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.tostring', 'String.prototype.toString')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.tostring', 'String.prototype.toString')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Browser">Kompabilitas Browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Dukungan Dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Dukungan Dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li>{{jsxref("Object.prototype.toSource()")}}</li> + <li>{{jsxref("String.prototype.valueOf()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/string/touppercase/index.html b/files/id/web/javascript/reference/global_objects/string/touppercase/index.html new file mode 100644 index 0000000000..bf8182a590 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/string/touppercase/index.html @@ -0,0 +1,115 @@ +--- +title: String.prototype.toUpperCase() +slug: Web/JavaScript/Reference/Global_Objects/String/toUpperCase +translation_of: Web/JavaScript/Reference/Global_Objects/String/toUpperCase +--- +<div>{{JSRef}}</div> + +<p>Method <strong><code>toUpperCase()</code></strong> mengembalikan nilai string pemanggil dikonversi ke huruf besar.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><code><var>str</var>.toUpperCase()</code></pre> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Method <code>toUpperCase()</code> mengembalikan nilai string diconversikan ke huruf besar. <code>toUpperCase()</code> tidak mempengaruhi nilai string itu sendiri.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Penggunaan_toUpperCase()">Penggunaan <code>toUpperCase()</code></h3> + +<pre class="brush: js">console.log('alphabet'.toUpperCase()); // 'ALPHABET' +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.4.18', 'String.prototype.toUpperCase')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.touppercase', 'String.prototype.toUpperCase')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.touppercase', 'String.prototype.toUpperCase')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_browser">Kompabilitas browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_Pula">Lihat Pula</h2> + +<ul> + <li>{{jsxref("String.prototype.toLocaleLowerCase()")}}</li> + <li>{{jsxref("String.prototype.toLocaleUpperCase()")}}</li> + <li>{{jsxref("String.prototype.toLowerCase()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/typedarray/index.html b/files/id/web/javascript/reference/global_objects/typedarray/index.html new file mode 100644 index 0000000000..e0b8d942c1 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/typedarray/index.html @@ -0,0 +1,344 @@ +--- +title: TypedArray +slug: Web/JavaScript/Reference/Global_Objects/TypedArray +tags: + - JavaScript + - NeedsTranslation + - TopicStub + - TypedArray + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray +--- +<div>{{JSRef}}</div> + +<p>A <strong><em>TypedArray</em></strong> object describes an array-like view of an underlying <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer">binary data buffer</a>. There is no global property named <code>TypedArray</code>, nor is there a directly visible <code>TypedArray</code> constructor. Instead, there are a number of different global properties, whose values are typed array constructors for specific element types, listed below. On the following pages you will find common properties and methods that can be used with any typed array containing elements of any type.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">new<em> TypedArray</em>(length); +new <em>TypedArray</em>(typedArray); +new <em>TypedArray</em>(object); +new <em>TypedArray</em>(buffer [, byteOffset [, length]]); + +where <em>TypedArray()</em> is one of: + +Int8Array(); +Uint8Array(); +Uint8ClampedArray(); +Int16Array(); +Uint16Array(); +Int32Array(); +Uint32Array(); +Float32Array(); +Float64Array(); +</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt>length</dt> + <dd>When called with a <code>length</code> argument, a typed array containing <code>length</code> zeroes is created.</dd> + <dt>typedArray</dt> + <dd>When called with a <code>typedArray</code> argument, which can be an object of any of the typed array types (such as <code>Int32Array</code>), the <code>typedArray</code> gets copied into a new typed array. Each value in <code>typedArray</code> is converted to the corresponding type of the constructor before being copied into the new array.</dd> + <dt>object</dt> + <dd>When called with an <code>object</code> argument, a new typed array is created as if by the <code><em>TypedArray</em>.from()</code> method.</dd> + <dt>buffer, byteOffset, length</dt> + <dd>When called with a <code>buffer</code>, and optionally a <code>byteOffset</code> and a <code>length</code> argument, a new typed array view is created that views the specified {{jsxref("ArrayBuffer")}}. The <code>byteOffset</code> and <code>length</code> parameters specify the memory range that will be exposed by the typed array view. If both are omitted, all of <code>buffer</code> is viewed; if only <code>length</code> is omitted, the remainder of <code>buffer</code> is viewed.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>ECMAScript 6 defines a <em>TypedArray</em> constructor that serves as the <code>[[Prototype]]</code> of all <em>TypedArray</em> constructors. This constructor is not directly exposed: there is no global <code>%TypedArray%</code> or <code>TypedArray</code> property. It is only directly accessible through <code>Object.getPrototypeOf(Int8Array.prototype)</code> and similar. All <em>TypedArray</em>s constructors inherit common properties from the <code>%TypedArray%</code> constructor function. Additionally, all typed array prototypes (<em>TypedArray</em><code>.prototype</code>) have <code>%TypedArray%.prototype</code> as their <code>[[Prototype]]</code>.</p> + +<p>The <code>%TypedArray%</code> constructor on its own is not particularly useful. Calling it or using it in a <code>new</code> expression will throw a <code>TypeError</code>, except when used during object creation in JS engines that support subclassing. There are at present no such engines, so <code>%TypedArray%</code> is only useful to polyfill functions or properties onto all <em>TypedArray</em> constructors.</p> + +<h3 id="Property_access">Property access</h3> + +<p>You can reference elements in the array using standard array index syntax (that is, using bracket notation). However, getting or setting indexed properties on typed arrays will not search in the prototype chain for this property, even when the indices are out of bound. Indexed properties will consult the {{jsxref("ArrayBuffer")}} and will never look at object properties. You can still use named properties, just like with all objects.</p> + +<pre class="brush: js">// Setting and getting using standard array syntax +var int16 = new Int16Array(2); +int16[0] = 42; +console.log(int16[0]); // 42 + +// Indexed properties on prototypes are not consulted (Fx 25) +Int8Array.prototype[20] = "foo"; +(new Int8Array(32))[20]; // 0 +// even when out of bound +Int8Array.prototype[20] = "foo"; +(new Int8Array(8))[20]; // undefined +// or with negative integers +Int8Array.prototype[-1] = "foo"; +(new Int8Array(8))[-1]; // undefined + +// Named properties are allowed, though (Fx 30) +Int8Array.prototype.foo = "bar"; +(new Int8Array(32)).foo; // "bar"</pre> + +<h2 id="TypedArray_objects">TypedArray objects</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Type</td> + <td class="header">Size in bytes</td> + <td class="header">Description</td> + <td class="header">Web IDL type</td> + <td class="header">Equivalent C type</td> + </tr> + <tr> + <td>{{jsxref("Int8Array")}}</td> + <td>1</td> + <td>8-bit two's complement signed integer</td> + <td><code>byte</code></td> + <td><code>int8_t</code></td> + </tr> + <tr> + <td>{{jsxref("Uint8Array")}}</td> + <td>1</td> + <td>8-bit unsigned integer</td> + <td><code>octet</code></td> + <td><code>uint8_t</code></td> + </tr> + <tr> + <td>{{jsxref("Uint8ClampedArray")}}</td> + <td>1</td> + <td>8-bit unsigned integer (clamped)</td> + <td><code>octet</code></td> + <td><code>uint8_t</code></td> + </tr> + <tr> + <td>{{jsxref("Int16Array")}}</td> + <td>2</td> + <td>16-bit two's complement signed integer</td> + <td><code>short</code></td> + <td><code>int16_t</code></td> + </tr> + <tr> + <td>{{jsxref("Uint16Array")}}</td> + <td>2</td> + <td>16-bit unsigned integer</td> + <td><code>unsigned short</code></td> + <td><code>uint16_t</code></td> + </tr> + <tr> + <td>{{jsxref("Int32Array")}}</td> + <td>4</td> + <td>32-bit two's complement signed integer</td> + <td><code>long</code></td> + <td><code>int32_t</code></td> + </tr> + <tr> + <td>{{jsxref("Uint32Array")}}</td> + <td>4</td> + <td>32-bit unsigned integer</td> + <td><code>unsigned long</code></td> + <td><code>uint32_t</code></td> + </tr> + <tr> + <td>{{jsxref("Float32Array")}}</td> + <td>4</td> + <td>32-bit IEEE floating point number</td> + <td><code>unrestricted float</code></td> + <td><code>float</code></td> + </tr> + <tr> + <td>{{jsxref("Float64Array")}}</td> + <td>8</td> + <td>64-bit IEEE floating point number</td> + <td><code>unrestricted double</code></td> + <td><code>double</code></td> + </tr> + </tbody> +</table> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT")}}</dt> + <dd>Returns a number value of the element size for the different typed array objects.</dd> + <dt><em>TypedArray</em>.length</dt> + <dd>Length property whose value is 3.</dd> + <dt>{{jsxref("TypedArray.name")}}</dt> + <dd>Returns the string value of the constructor name. E.g "Int8Array".</dd> + <dt>{{jsxref("TypedArray.@@species", "get TypedArray[@@species]")}}</dt> + <dd>The constructor function that is used to create derived objects.</dd> + <dt>{{jsxref("TypedArray.prototype")}}</dt> + <dd>Prototype for the <em>TypedArray</em> objects.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{jsxref("TypedArray.from()")}}</dt> + <dd>Creates a new typed array from an array-like or iterable object. See also {{jsxref("Array.from()")}}.</dd> + <dt>{{jsxref("TypedArray.of()")}}</dt> + <dd>Creates a new typed array with a variable number of arguments. See also {{jsxref("Array.of()")}}.</dd> +</dl> + +<h2 id="TypedArray_prototype">TypedArray prototype</h2> + +<p>All <em>TypedArray</em>s inherit from {{jsxref("TypedArray.prototype")}}.</p> + +<h3 id="Properties_2">Properties</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/TypedArray/prototype','Properties')}}</p> + +<h3 id="Methods_2">Methods</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/TypedArray/prototype','Methods')}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Typed Array')}}</td> + <td>{{Spec2('Typed Array')}}</td> + <td>Defined as <code>TypedArray</code> and <code>ArrayBufferView</code> interface with typed array view types. Superseded by ECMAScript 6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-typedarray-objects', 'TypedArray Objects')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition in an ECMA standard. Specified behaviour for indexed and named properties. Specified that <code>new</code> is required.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-typedarray-objects', 'TypedArray Objects')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(7.0)}}</td> + <td>{{CompatGeckoDesktop("2")}}</td> + <td>10</td> + <td>11.6</td> + <td>5.1</td> + </tr> + <tr> + <td>Indexed properties not consulting prototype</td> + <td>{{CompatVersionUnknown}} [1]</td> + <td>{{CompatGeckoDesktop("25")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Named properties</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("30")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>new</code> is required</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("44")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>4.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile("2") }}</td> + <td>10</td> + <td>11.6</td> + <td>4.2</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Indexed properties not consulting prototype</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}} [1]</td> + <td>{{ CompatGeckoMobile("25") }}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}} [1]</td> + </tr> + <tr> + <td>Named properties</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile("30") }}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>new</code> is required</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatGeckoMobile("44") }}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] <code>-1</code> and similar are not considered as indexed properties and therefore return the value of the prototype property.</p> + +<h2 id="Compatibility_notes">Compatibility notes</h2> + +<p>Starting with ECMAScript 2015 (ES6), <code>TypedArray</code> constructors require to be constructed with a {{jsxref("Operators/new", "new")}} operator. Calling a <code>TypedArray</code> constructor as a function without <code>new</code>, will throw a {{jsxref("TypeError")}} from now on.</p> + +<pre class="brush: js example-bad">var dv = Int8Array([1, 2, 3]); +// TypeError: calling a builtin Int8Array constructor +// without new is forbidden</pre> + +<pre class="brush: js example-good">var dv = new Int8Array([1, 2, 3]);</pre> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays" title="en/JavaScript typed arrays">JavaScript typed arrays</a></li> + <li>{{jsxref("ArrayBuffer")}}</li> + <li>{{jsxref("DataView")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/global_objects/typedarray/join/index.html b/files/id/web/javascript/reference/global_objects/typedarray/join/index.html new file mode 100644 index 0000000000..84f328ae1b --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/typedarray/join/index.html @@ -0,0 +1,114 @@ +--- +title: TypedArray.prototype.join() +slug: Web/JavaScript/Reference/Global_Objects/TypedArray/join +tags: + - ECMAScript6 + - JavaScript + - Method + - Prototype + - TypedArray +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/join +--- +<div>{{JSRef}}</div> + +<p>Method <code><strong>join()</strong></code> menggabungkan semua elemen dari array menjadi sebuah string. Alogaritma method ini memiliki kesamaan dengan {{jsxref("Array.prototype.join()")}}<em>.</em> <em>TypedArray</em> di sini merupakan salah datu <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_objects">typed array types</a>.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><code><var>typedarray</var>.join(<code>[<var>separator</var> = ',']</code>);</code></pre> + +<h3 id="Parameter">Parameter</h3> + +<dl> + <dt><code>separator</code></dt> + <dd>Opsional. Menentukan sebuah string untuk memisahkan setiap elemen. Separator perlu di konversi ke string jika dianggap penting. Jika dikosongkan, elemen array akan dipisahkan dengan tanda koma (",").</dd> +</dl> + +<h2 id="Contoh">Contoh</h2> + +<pre class="brush: js">var uint8 = new Uint8Array([1,2,3]); +uint8.join(); // '1,2,3' +uint8.join(' / '); // '1 / 2 / 3' +uint8.join(''); // '123' +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-%typedarray%.prototype.join', 'TypedArray.prototype.join')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.join', 'TypedArray.prototype.join')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Browser">Kompabilitas Browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("37")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("37")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("TypedArray")}}</li> + <li>{{jsxref("Array.prototype.join()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/index.html b/files/id/web/javascript/reference/index.html new file mode 100644 index 0000000000..261b76a5b5 --- /dev/null +++ b/files/id/web/javascript/reference/index.html @@ -0,0 +1,48 @@ +--- +title: Referensi JavaScript +slug: Web/JavaScript/Reference +tags: + - JavaScript +translation_of: Web/JavaScript/Reference +--- +<div>{{JsSidebar}}</div> + +<p>Laman ini merupakan bagian dari sesi JavaScript pada MDN yang berfungsi sebagai acuan mengenai bahasa pemrograman JavaScript. Pelajari lebih lanjut <a href="/id/docs/Web/JavaScript/Reference/About">perihal acuan ini</a>.</p> + +<h2 id="Objek_Global">Objek Global</h2> + +<p>Bagian ini mendokumentasikan semua <a href="/id/docs/Web/JavaScript/Reference/Global_Objects">object standar built-in JavaScript</a>, beserta method dan propertinya.</p> + +<div>{{page('/id/docs/Web/JavaScript/Reference/Global_Objects', 'Standard_objects_by_category')}}</div> + +<h2 id="Pernyataan">Pernyataan</h2> + +<p>Bagian ini mendekumentasikan semua <a href="/id/docs/Web/JavaScript/Reference/Statements">pernyataan dan deklarasi JavaScript</a>.</p> + +<div>{{page('/id/docs/Web/JavaScript/Reference/Statements', 'Statements_and_declarations_by_category')}}</div> + +<h2 id="Ungkapan_dan_operator">Ungkapan dan operator</h2> + +<p>Bagian ini mendokumentasikan semua <a href="/id/docs/Web/JavaScript/Reference/Operators">ungkapan dan operator JavaScript </a>.</p> + +<div>{{page('/id/docs/Web/JavaScript/Reference/Operators', 'Expressions_and_operators_by_category')}}</div> + +<h2 id="Fungsi">Fungsi</h2> + +<p>Bagian ini mendokumentasikan tentang <a href="/id/docs/Web/JavaScript/Reference/Functions">Fungsi JavaScrip</a> dan penggunaanya untuk pengembangan aplikasi anda.</p> + +<ul> + <li><a href="/id/docs/Web/JavaScript/Reference/Functions/arguments"><code>arguments</code></a></li> + <li><a href="/id/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Fungsi panah</a></li> + <li><a href="/id/docs/Web/JavaScript/Reference/Functions/Default_parameters">Parameter default</a></li> + <li><a href="/id/docs/Web/JavaScript/Reference/Functions/rest_parameters">Parameter tambahan</a></li> +</ul> + +<h2 id="Acuan_tambahan">Acuan tambahan</h2> + +<ul> + <li><a href="/id/docs/Web/JavaScript/Reference/Lexical_grammar">Leksikal gramatika</a></li> + <li><a href="/id/docs/Web/JavaScript/Data_structures">Struktur dan tipe data</a></li> + <li><a href="/id/docs/Web/JavaScript/Reference/Strict_mode">Modus strict</a></li> + <li><a href="/id/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features">Fitur usang</a></li> +</ul> diff --git a/files/id/web/javascript/reference/lexical_grammar/index.html b/files/id/web/javascript/reference/lexical_grammar/index.html new file mode 100644 index 0000000000..83e5696ccd --- /dev/null +++ b/files/id/web/javascript/reference/lexical_grammar/index.html @@ -0,0 +1,670 @@ +--- +title: Lexical grammar +slug: Web/JavaScript/Reference/Lexical_grammar +translation_of: Web/JavaScript/Reference/Lexical_grammar +--- +<div>{{JsSidebar("More")}}</div> + +<p>Halaman ini menjelaskan tata bahasa leksikal JavaScript. Teks sumber skrip JavaScript dipindai dari kiri ke kanan dan diubah menjadi urutan elemen masukan yang merupakan token, karakter kontrol, terminator baris, komentar atau whitespace. ECMAScript juga mendefinisikan kata kunci dan literal tertentu dan memiliki aturan untuk penyisipan titik koma secara otomatis untuk mengakhiri pernyataan.</p> + +<h2 id="Karakter-karakter_kontrol">Karakter-karakter kontrol</h2> + +<p>Karakter kontrol tidak memiliki representasi visual namun digunakan untuk mengendalikan interpretasi teks.</p> + +<table class="standard-table"> + <caption>Karakter-karakter kontrol format unicode</caption> + <tbody> + <tr> + <th>Kode</th> + <th>Nama</th> + <th>Singkatan</th> + <th>Deskripsi</th> + </tr> + <tr> + <td><code>U+200C</code></td> + <td>Zero width non-joiner</td> + <td><ZWNJ></td> + <td>Ditempatkan di antara karakter untuk mencegah terhubung ke ligatur dalam bahasa tertentu (<a href="http://en.wikipedia.org/wiki/Zero-width_non-joiner">Wikipedia</a>).</td> + </tr> + <tr> + <td><code>U+200D</code></td> + <td>Zero width joiner</td> + <td><ZWJ></td> + <td>Ditempatkan di antara karakter yang biasanya tidak terhubung agar karakter dapat dirender menggunakan bentuknya yang terhubung dalam bahasa tertentu. (<a href="http://en.wikipedia.org/wiki/Zero-width_joiner">Wikipedia</a>).</td> + </tr> + <tr> + <td><code>U+FEFF</code></td> + <td>Byte order mark</td> + <td><BOM></td> + <td>Digunakan pada awal skrip untuk menandainya sebagai Unicode dan urutan byte teks (<a href="http://en.wikipedia.org/wiki/Byte_order_mark">Wikipedia</a>).</td> + </tr> + </tbody> +</table> + +<h2 id="White_space">White space</h2> + +<p>Karakter whitespace meningkatkan keterbacaan teks sumber dan memisahkan token-token. Karakter ini biasanya tidak diperlukan untuk fungsionalitas kode. <a href="http://en.wikipedia.org/wiki/Minification_%28programming%29">Alat minifikasi </a>sering digunakan untuk membuang whitespace agar mengurangi jumlah data yang perlu ditransfer.</p> + +<table class="standard-table"> + <caption>Karakter-karakter whitespace</caption> + <tbody> + <tr> + <th>Kode</th> + <th>Nama</th> + <th>Singkatan</th> + <th>Deskripsi</th> + <th> + <p>Rangkaian pelolosan/Escape</p> + </th> + </tr> + <tr> + <td>U+0009</td> + <td>Tabulasi karakter</td> + <td><HT></td> + <td>Tabulasi horisontal</td> + <td>\t</td> + </tr> + <tr> + <td>U+000B</td> + <td>Tabulasi baris</td> + <td><VT></td> + <td>Tabulasi vertikal</td> + <td>\v</td> + </tr> + <tr> + <td>U+000C</td> + <td>Form feed</td> + <td><FF></td> + <td>Karakter kontrol pemecah halaman (<a href="http://en.wikipedia.org/wiki/Page_break#Form_feed">Wikipedia</a>).</td> + <td>\f</td> + </tr> + <tr> + <td>U+0020</td> + <td>Space</td> + <td><SP></td> + <td>Spasi normal</td> + <td> </td> + </tr> + <tr> + <td>U+00A0</td> + <td>No-break space</td> + <td><NBSP></td> + <td>Spasi normal, tetapi tidak ada petunjuk dimana baris terputus.</td> + <td> </td> + </tr> + <tr> + <td>Others</td> + <td>Other Unicode space characters</td> + <td><USP></td> + <td><a href="http://en.wikipedia.org/wiki/Space_%28punctuation%29#Spaces_in_Unicode">Spasi di Unicode on Wikipedia</a></td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Terminator_baris">Terminator baris</h2> + +<p>Selain karakter whitespace, karakter terminator baris digunakan untuk meningkatkan keterbacaan teks sumber. Namun, dalam beberapa kasus, terminator baris dapat mempengaruhi eksekusi kode JavaScript karena ada beberapa tempat di mana mereka dilarang. Terminator baris juga mempengaruhi proses <a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">penyisipan titik koma otomatis</a>. Terminator baris dicocokkan dengan kelas <strong>\s </strong>dalam <a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Guide/Regular_Expressions">regular expressions</a>.</p> + +<p>Hanya kode Unicode berikut yang diperlakukan sebagai terminator baris di ECMAScript, karakter pemecah baris lainnya diperlakukan sebagai whitespace (misalnya, Next Line, NEL, U+0085 dianggap sebagai whitespace).</p> + +<table class="standard-table"> + <caption>Karakter-karakter terminator baris</caption> + <tbody> + <tr> + <th>Kode</th> + <th>Nama</th> + <th>Singkatan</th> + <th>Deskripsi</th> + <th>Rangkaian pelolosan/escape </th> + </tr> + <tr> + <td>U+000A</td> + <td>Line Feed</td> + <td><LF></td> + <td>Karakter baris baru di sistem UNIX.</td> + <td>\n</td> + </tr> + <tr> + <td>U+000D</td> + <td>Carriage Return</td> + <td><CR></td> + <td>Karakter baris baru di Commodore dan sistem Mac awal.</td> + <td>\r</td> + </tr> + <tr> + <td>U+2028</td> + <td>Line Separator</td> + <td><LS></td> + <td><a href="http://en.wikipedia.org/wiki/Newline">Wikipedia</a></td> + <td> </td> + </tr> + <tr> + <td>U+2029</td> + <td>Paragraph Separator</td> + <td><PS></td> + <td><a href="http://en.wikipedia.org/wiki/Newline">Wikipedia</a></td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Komentar">Komentar</h2> + +<p>Komentar digunakan untuk menambahkan petunjuk, catatan, saran, atau peringatan ke kode JavaScript. Hal ini dapat mempermudah membaca dan memahami. Mereka juga dapat digunakan untuk menonaktifkan kode agar tidak dieksekusi; Ini juga dapat menjadi alat debugging yang berharga.</p> + +<p>JavaScript memiliki dua cara untuk memberi komentar pada kodenya.</p> + +<p>Cara pertama adalah komentar //; Ini membuat semua teks yang mengikutinya pada baris yang sama menjadi sebuah komentar. Sebagai contoh:</p> + +<pre class="brush: js">function komentar() { + // Ini adalah komentar JavaScript satu baris + console.log('Hello world!'); +} +komentar(); +</pre> + +<p>Cara kedua adalah komentar gaya <code>/* */ , yang jauh lebih fleksibel</code>.</p> + +<p>Misalnya, Anda bisa menggunakannya dalam satu baris:</p> + +<pre class="brush: js">function komentar() { + /* Ini adalah komentar JavaScript satu baris */ + console.log('Hello world!'); +} +komentar();</pre> + +<p>Anda juga bisa membuat komentar beberapa baris, seperti ini:</p> + +<pre class="brush: js">function komentar() { + /* Komentar ini merentang dalam beberapa baris. Perhatikan + bahwa kita tidak perlu mengakhir komentar sebelum selesai. */ + console.log('Hello world!'); +} +komentar();</pre> + +<p>Anda juga bisa menggunakannya di tengah baris, jika Anda mau, meskipun ini bisa membuat kode Anda lebih sulit dibaca sehingga harus digunakan dengan hati-hati:</p> + +<pre class="brush: js">function komentar(x) { + console.log('Hello ' + x /* menysipkan nilai dari x */ + ' !'); +} +comment('world');</pre> + +<p>Selain itu, Anda bisa menggunakannya untuk menonaktifkan kode agar tidak berjalan, dengan membungkus kode dalam komentar, seperti ini:</p> + +<pre class="brush: js">function comment() { + /* console.log('Hello world!'); */ +} +comment();</pre> + +<p>Dalam hal ini, pemaggilan <code>console.log()</code> tidak pernah dikeluarkan, karena itu ada di dalam komentar. Sejumlah baris kode dapat dinonaktifkan dengan cara ini.</p> + +<h2 id="Kata_kunci">Kata kunci</h2> + +<h3 id="Reserved_keywords_as_of_ECMAScript_2015">Reserved keywords as of ECMAScript 2015</h3> + +<ul class="threecolumns"> + <li>{{jsxref("Statements/break", "break")}}</li> + <li>{{jsxref("Statements/switch", "case")}}</li> + <li>{{jsxref("Statements/try...catch", "catch")}}</li> + <li>{{jsxref("Statements/class", "class")}}</li> + <li>{{jsxref("Statements/const", "const")}}</li> + <li>{{jsxref("Statements/continue", "continue")}}</li> + <li>{{jsxref("Statements/debugger", "debugger")}}</li> + <li>{{jsxref("Statements/default", "default")}}</li> + <li>{{jsxref("Operators/delete", "delete")}}</li> + <li>{{jsxref("Statements/do...while", "do")}}</li> + <li>{{jsxref("Statements/if...else", "else")}}</li> + <li>{{jsxref("Statements/export", "export")}}</li> + <li>{{jsxref("Statements/class", "extends")}}</li> + <li>{{jsxref("Statements/try...catch", "finally")}}</li> + <li>{{jsxref("Statements/for", "for")}}</li> + <li>{{jsxref("Statements/function", "function")}}</li> + <li>{{jsxref("Statements/if...else", "if")}}</li> + <li>{{jsxref("Statements/import", "import")}}</li> + <li>{{jsxref("Operators/in", "in")}}</li> + <li>{{jsxref("Operators/instanceof", "instanceof")}}</li> + <li>{{jsxref("Operators/new", "new")}}</li> + <li>{{jsxref("Statements/return", "return")}}</li> + <li>{{jsxref("Operators/super", "super")}}</li> + <li>{{jsxref("Statements/switch", "switch")}}</li> + <li>{{jsxref("Operators/this", "this")}}</li> + <li>{{jsxref("Statements/throw", "throw")}}</li> + <li>{{jsxref("Statements/try...catch", "try")}}</li> + <li>{{jsxref("Operators/typeof", "typeof")}}</li> + <li>{{jsxref("Statements/var", "var")}}</li> + <li>{{jsxref("Operators/void", "void")}}</li> + <li>{{jsxref("Statements/while", "while")}}</li> + <li>{{jsxref("Statements/with", "with")}}</li> + <li>{{jsxref("Operators/yield", "yield")}}</li> +</ul> + +<h3 id="Kata_kunci_akan_datang_yang_dicadangkan">Kata kunci akan datang yang dicadangkan</h3> + +<p>Berikut ini disediakan sebagai kata kunci akan datang menurut spesifikasi ECMAScript. Mereka tidak memiliki fungsi khusus saat ini, namun mungkin pada beberapa waktu mendatang, sehingga tidak dapat digunakan sebagai pengidentifikasi.</p> + +<p>Selalu dicadangkan:</p> + +<ul> + <li><code>enum</code></li> +</ul> + +<p>Berikut ini hanya dicadangkan saat ditemukan dalam kode mode strict "ketat":</p> + +<ul class="threecolumns"> + <li><code>implements</code></li> + <li><code>interface</code></li> + <li>{{jsxref("Statements/let", "let")}}</li> + <li><code>package</code></li> + <li><code>private</code></li> + <li><code>protected</code></li> + <li><code>public</code></li> + <li><code>static</code></li> +</ul> + +<p>Berikut ini hanya dicadangkan saat ditemukan dalam kode modul:</p> + +<ul> + <li><code>await</code></li> +</ul> + +<h4 id="Kata_kunci_standart_lama_yang_masih_dingunakan_hingga_sekarang">Kata kunci standart lama yang masih dingunakan hingga sekarang</h4> + +<p>Berikut adalah dicadankan sebagai kata kunci akan datang pada spesifikasi ECMAScript usang (ECMAScript 1 s/d 3).</p> + +<ul class="threecolumns"> + <li><code>abstract</code></li> + <li><code>boolean</code></li> + <li><code>byte</code></li> + <li><code>char</code></li> + <li><code>double</code></li> + <li><code>final</code></li> + <li><code>float</code></li> + <li><code>goto</code></li> + <li><code>int</code></li> + <li><code>long</code></li> + <li><code>native</code></li> + <li><code>short</code></li> + <li><code>synchronized</code></li> + <li><code>throws</code></li> + <li><code>transient</code></li> + <li><code>volatile</code></li> +</ul> + +<p>Selain itu literal-literal null, true, dan false tidak dapat digunakan sebagai pengidentifikasi didalam ECMAScript.</p> + +<h3 id="Penggunaan_kata_dicadangkan">Penggunaan kata dicadangkan</h3> + +<p>Kata yang dicadangkan sebenarnya hanya berlaku untuk pengidentifikasi (vs. <code>IdentifierNames</code> ). Seperti yang dijelaskan di <a href="https://translate.googleusercontent.com/translate_c?depth=1&hl=id&prev=search&rurl=translate.google.co.id&sl=en&sp=nmt4&u=http://es5.github.com/&usg=ALkJrhjBjEUJU4dp4L4cwHxJF9qX9WRmJg#A.1">es5.github.com/#A.1</a>, ini semua adalah <code>IdentifierNames</code> yang tidak mengecualikan <code>ReservedWords</code> .</p> + +<pre class="brush: js">a.import +a['import'] +a = { import: 'test' }. +</pre> + +<p>Di sisi lain, hal-hal berikut ini ilegal karena ini adalah pengidentifikasi, yaitu <code>IdentifierName</code> tanpa kata-kata yang dicadangkan. Pengidentifikasi digunakan untuk <code>FunctionDeclaration</code> dan <code>FunctionExpression</code>.</p> + +<pre class="brush: js">function import() {} // Illegal.</pre> + +<h2 id="Literal">Literal</h2> + +<h3 id="Literal_null">Literal null</h3> + +<p>Lihat juga <a href="/id/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a> untuk informasi lebih lanjut.</p> + +<pre class="brush: js">null</pre> + +<h3 id="Literal_Boolean">Literal Boolean</h3> + +<p>Lihat juga <a href="/id/docs/Web/JavaScript/Reference/Global_Objects/Boolean"><code>Boolean</code></a> untuk informasi lebih lanjut.</p> + +<pre class="brush: js">true +false</pre> + +<h3 id="Literal_numerik">Literal numerik</h3> + +<h4 id="Decimal">Decimal</h4> + +<pre class="brush: js">1234567890 +42 + +// Waspada saat mengunakan nol dimuka: +0888 // 888 diuraikan sebagai desimal +0777 // diuraikan sebagai oktal, 511 dalam desimal +</pre> + +<p>Perhatikan bahwa literal desimal dapat dimulai dengan angka nol ( <code>0</code> ) diikuti oleh digit desimal lainnya, namun jika semua digit setelah angka <code>0</code> teratas lebih kecil dari 8, angka tersebut diartikan sebagai angka oktal. Ini tidak akan melempar JavaScript, lihat {{bug(957513)}}. Lihat juga halaman tentang <a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference/Global_Objects/parseInt#Octal_interpretations_with_no_radix"><code>parseInt()</code></a>.</p> + +<h4 id="Biner">Biner</h4> + +<p>Sintaksis bilangan biner menggunakan nol dimuka diikuti huruf kecil atau huruf besar Latin "B" ( <code>0b</code> atau <code>0B</code> ). Karena sintaksis ini baru di ECMAScript 2015, lihat tabel kompatibilitas browser, di bawah ini. Jika digit setelah <code>0b</code> tidak 0 atau 1, <code><a href="/id/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></code> berikut dilempar: "Missing binary digits after 0b".</p> + +<pre class="brush: js">var FLT_SIGNBIT = 0b10000000000000000000000000000000; // 2147483648 +var FLT_EXPONENT = 0b01111111100000000000000000000000; // 2139095040 +var FLT_MANTISSA = 0B00000000011111111111111111111111; // 8388607</pre> + +<h4 id="Oktal">Oktal</h4> + +<p>Sintaksis bilangan oktal menggunakan nol dimuka diikuti huruf kecil atau huruf besar Latin "O" ( <code>0o</code> atau <code>0O)</code>. Karena sintaks ini baru di ECMAScript 2015, lihat tabel kompatibilitas browser, di bawah ini. Jika digit setelah <code>0o</code> berada di luar kisaran (01234567), <code><a href="https://translate.googleusercontent.com/translate_c?depth=1&hl=id&prev=search&rurl=translate.google.co.id&sl=en&sp=nmt4&u=https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError&usg=ALkJrhiX0-YeC0tkMqUM7J5gbQfM2LI8bA">SyntaxError</a></code> berikut dilempar: "Missing octal digits after 0o".</p> + +<pre class="brush: js">var n = 0O755; // 493 +var m = 0o644; // 420 + +// Juga dimungkinkan hanya menggunakan nol dimuka (lihat tentang desimal diatas) +0755 +0644 +</pre> + +<h4 id="Heksadesimal">Heksadesimal</h4> + +<p>Sintaksis bilangan heksadesimal menggunakan nol dimuka diikuti huruf kecil atau huruf besar Latin "X" ( <code>0x</code> atau <code>0X)</code>. Jika digit setelah 0x berada di luar rentang (0123456789ABCDEF), <code><a href="https://translate.googleusercontent.com/translate_c?depth=1&hl=id&prev=search&rurl=translate.google.co.id&sl=en&sp=nmt4&u=https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError&usg=ALkJrhiX0-YeC0tkMqUM7J5gbQfM2LI8bA">SyntaxError</a></code> berikut dilempar: "Identifier starts immediately after numeric literal".</p> + +<pre class="brush: js">0xFFFFFFFFFFFFFFFFF // 295147905179352830000 +0x123456789ABCDEF // 81985529216486900 +0XA // 10 +</pre> + +<h3 id="Literal_objek">Literal objek</h3> + +<p>Lihat juga <a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference/Global_Objects/Object" title="Konstruktor Objek menciptakan pembungkus objek."><code>Objek</code></a> and <a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference/Operators/Object_initializer">Penginisialisasi objek</a> untuk informasi lebih lanjut.</p> + +<pre class="brush: js">var o = { a: 'foo', b: 'bar', c: 42 }; + +// notasi singkat. baru di ES2015 +var a = 'foo', b = 'bar', c = 42; +var o = {a, b, c}; + +// bukannya +var o = { a: a, b: b, c: c }; +</pre> + +<h3 id="Literal_array">Literal array</h3> + +<p>Lihat juga <a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference/Global_Objects/Array" title="Objek JavaScript Array adalah objek global yang digunakan dalam konstruksi array; Yang tingkat tinggi, daftar-seperti objek."><code>Array</code></a> untuk informasi lebih lanjut.</p> + +<pre class="brush: js">[1954, 1974, 1990, 2014]</pre> + +<h3 id="Literal_string">Literal string</h3> + +<pre class="brush: js">'foo' +"bar"</pre> + +<h4 id="Rangkaian_pelolosanescape_heksadesimal">Rangkaian pelolosan/escape heksadesimal</h4> + +<pre class="brush: js">'\xA9' // "©" +</pre> + +<h4 id="Rangkaian_pelolosanescape_Unicode">Rangkaian pelolosan/escape Unicode</h4> + +<p>Rangkaian pelolosan Unicode memerlukan setidaknya empat karakter diawali <code>\u</code>.</p> + +<pre class="brush: js">'\u00A9' // "©"</pre> + +<h4 id="Penerapan_point_kode_Unicode">Penerapan point kode Unicode</h4> + +<p>Baru di ECMAScript 2015. Dengan pelolosan kode Unicode, tiap karakter dapat diloloskan menggunakan bilangan hexadesimal jadi dimungkinkan untuk menggunkan kode Unicode sampai <code>0x10FFFF</code>. Dengan pelolosan Unicode sederhana terkadang lebih dibutuhkan untuk menulis bagian pengganti secara terpisah untuk mencapai tujuan yang sama.</p> + +<p>Lihat juga <a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference/Global_Objects/String/fromCodePoint" title="Metode String.fromCodePoint () statis mengembalikan sebuah string yang dibuat dengan menggunakan urutan kode poin yang ditentukan."><code>String.fromCodePoint()</code></a> atau <a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference/Global_Objects/String/codePointAt" title="Metode codePointAt () mengembalikan bilangan bulat non-negatif yaitu nilai titik kode Unicode."><code>String.prototype.codePointAt()</code></a>.</p> + +<pre class="brush: js">'\u{2F804}' + +// ekuivalen dengan pelolosan Unicode sederhana +'\uD87E\uDC04'</pre> + +<h3 id="Literal_regular_expression">Literal regular expression</h3> + +<p>Lihat juga <a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference/Global_Objects/RegExp"><code>RegExp</code></a> untuk informasi lebih lanjut.</p> + +<pre class="brush: js">/ab+c/g + +// Suatu literal "kosong" regular expression +// diperlukan grup bukan penangkap +// untuk menghindarkan ambiguitas denga komentar satu baris +/(?:)/</pre> + +<h3 id="Literal_template">Literal template</h3> + +<p>Lihat juga <a href="/id/docs/Web/JavaScript/Reference/template_strings">template strings</a> untuk informasi lebih lanjut.</p> + +<pre class="brush: js">`string text` + +`string text baris 1 + string text baris 2` + +`string text ${expression} string text` + +tag `string text ${expression} string text`</pre> + +<h2 id="Penyisipan_titik_koma_otomatis">Penyisipan titik koma otomatis</h2> + +<p>Beberapa <a href="/id/docs/Web/JavaScript/Reference/Statements">pernyataan JavaScript</a> harus diakhiri dengan titik koma an oleh karena itu dipengaruhi oleh penyisipan otomatis semicolon (ASI):</p> + +<ul> + <li>Pernyataan kosong/empty</li> + <li><code>Pernyataan variabel let</code>, <code>const</code></li> + <li>Deklarasi modul <code>import</code>, <code>export</code></li> + <li>Pernyataan ekspresi</li> + <li><code>debugger</code></li> + <li><code>continue</code>, <code>break</code>, <code>throw</code></li> + <li><code>return</code></li> +</ul> + +<p>Spesifikasi ECMAScript menyebutkan<a href="https://tc39.github.io/ecma262/#sec-rules-of-automatic-semicolon-insertion"> tiga aturan penyisipan titik koma</a>.</p> + +<p>1. Titik koma disisipkan sebelumnya, bila <a href="#Line_terminators">terminator baris</a> or "}" diteramukan yang tidak diizinkan oleh tata bahasa.</p> + +<pre class="brush: js">{ 1 2 } 3 + +// di transformasikan ke ASI kedalam + +{ 1 2 ;} 3;</pre> + +<p>2. Titik koma disisipkan di bagian akhir, saat akhir aliran input token terdeteksi dan parser tidak dapat mengurai aliran input tunggal aliran sebagai program yang lengkap.</p> + +<p>Disini <code>++</code> tidak diperlakukan sebagai <a href="https://translate.googleusercontent.com/translate_c?depth=1&hl=id&prev=search&rurl=translate.google.co.id&sl=en&sp=nmt4&u=https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators&usg=ALkJrhiOfEeVCTWu4sPLc0ZtV2xIdzr_zA#Increment">operator postfix</a> yang menerapkan variabel <code>b</code>, karena terminator baris terjadi antara <code>b</code> dan <code>++</code>.</p> + +<pre class="brush: js">a = b +++c + +// di transformasikan ke ASI kedalam + +a = b; +++c; +</pre> + +<p>3. Titik koma disisipkan pada akhirnya, ketika sebuah pernyataan dengan produksi terbatas dalam tata bahasa diikuti oleh terminator baris. Pernyataan-pernyataan ini dengan aturan "tidak diperlukan terminator baris" adalah:</p> + +<ul> + <li>PostfixExpressions (<code>++</code> and <code>--</code>)</li> + <li><code>continue</code></li> + <li><code>break</code></li> + <li><code>return</code></li> + <li><code>yield</code>, <code>yield*</code></li> + <li><code>module</code></li> +</ul> + +<pre class="brush: js">return +a + b + +// di transformasikan ke ASI kedalam + +return; +a + b; +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2("ES1")}}</td> + <td>Definisi awal.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-7', 'Lexical Conventions')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-ecmascript-language-lexical-grammar', 'Lexical Grammar')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> + <p>Ditambahkan: Literal Bilangan Biner dan Octal, pelolosan kode Unicode, Templates</p> + </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-ecmascript-language-lexical-grammar', 'Lexical Grammar')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Literal numerik biner dan oktal (<code>0b</code> dan <code>0o</code>)</td> + <td>{{CompatChrome(41)}}</td> + <td>12</td> + <td>{{CompatGeckoDesktop(25)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOpera(28)}}</td> + <td>{{CompatSafari(9)}}</td> + </tr> + <tr> + <td>Pelolosan kode Unicode (<code>\u{}</code>)</td> + <td>{{CompatChrome(44)}}</td> + <td>12</td> + <td>{{CompatGeckoDesktop(40)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera(31)}}</td> + <td>{{CompatSafari(9)}}</td> + </tr> + <tr> + <td>Notasi singkat untuk literal objek</td> + <td>{{CompatChrome(43)}}</td> + <td>12</td> + <td>{{CompatGeckoDesktop(33)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(30)}}</td> + <td>{{CompatSafari(9)}}</td> + </tr> + <tr> + <td>Literal template</td> + <td>{{CompatChrome(41)}}</td> + <td>12</td> + <td>{{CompatGeckoDesktop(34)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera(28)}}</td> + <td>{{CompatSafari(9)}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Literal numerik biner dan oktal (<code>0b</code> dan <code>0o</code>)</td> + <td>{{CompatUnknown}}</td> + <td>41</td> + <td>{{CompatGeckomobile(33)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Pelolosan kode Unicode (<code>\u{}</code>)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckomobile(40)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Notasi singkat untuk literal objek</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(33)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Literal template</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(34)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Firefox-specific_notes">Firefox-specific notes</h2> + +<ul> + <li>Sebelum Firefox 5 (JavaScript 1.8.6), kata kunci dicadangkan akan datang dapat digunakan saat tidak menggunakan mode strict. Pelanggaran ECMAScript ini telah diperbaiki di Firefox 5.</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="http://whereswalden.com/2013/08/12/micro-feature-from-es6-now-in-firefox-aurora-and-nightly-binary-and-octal-numbers/">Jeff Walden: </a><a href="http://whereswalden.com/2013/08/12/micro-feature-from-es6-now-in-firefox-aurora-and-nightly-binary-and-octal-numbers/">Bilangan biner dan oktal</a></li> + <li><a href="http://mathiasbynens.be/notes/javascript-escapes">Mathias Bynens: Rangkaian karakter pelolosan JavaScript</a></li> + <li><a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></li> + <li><a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference/Global_Objects/Number" title="The Number JavaScript object is a wrapper object allowing you to work with numerical values. A Number object is created using the Number() constructor."><code>Number</code></a></li> + <li><a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference/Global_Objects/RegExp" title="The RegExp constructor creates a regular expression object for matching text with a pattern."><code>RegExp</code></a></li> + <li><a href="https://developer.mozilla.org/id/docs/Web/JavaScript/Reference/Global_Objects/String" title="The String global object is a constructor for strings, or a sequence of characters."><code>String</code></a></li> +</ul> diff --git a/files/id/web/javascript/reference/operators/conditional_operator/index.html b/files/id/web/javascript/reference/operators/conditional_operator/index.html new file mode 100644 index 0000000000..1a64158acb --- /dev/null +++ b/files/id/web/javascript/reference/operators/conditional_operator/index.html @@ -0,0 +1,167 @@ +--- +title: Operasional Kondisi (ternary) +slug: Web/JavaScript/Reference/Operators/Conditional_Operator +translation_of: Web/JavaScript/Reference/Operators/Conditional_Operator +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>Operasianal kondisional (ternary)</strong> adalah satu-satunya operator yang hanya membutuhkan tiga operator. Operator ini sering digunakan sebagai jalan pintas untuk `if` statement.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>condition</em> ? <em>expr1</em> : <em>expr2</em> </pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>condition (atau conditions)</code></dt> + <dd>Sebuah ekspresi akan menguji apakah menghasilkan <code>true</code> atau <code>false</code>.</dd> +</dl> + +<dl> + <dt><code>expr1</code>, <code>expr2</code></dt> + <dd>Ekspresi yang akan dilakukan setelah kondisi terpenuhi.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>Jika <code>condition</code> menghasilkan <code>true</code>, maka operator ini akan menghasilkan/mengembalikan nilai dari <code>expr1</code>; dan jika sebaliknya, ini akan menghasilkan/mengembalikan nilai dari <code>expr2</code>. Sebagai contoh, untuk menampilkan pesan yang berbeda berdasarkan nilai dari variabel <code>isMember</code>, anda bisa menggunakan contoh kode berikut:</p> + +<pre class="brush: js">var isMember = true; +'The fee is ' + (isMember ? '$2.00' : '$10.00'); //$2.00 +</pre> + +<p>Anda juga dapat mendefinisikan sebuah variabel secara langsung:</p> + +<pre class="brush: js">var elvisLives = Math.PI > 4 ? 'Yep' : 'Nope';</pre> + +<p>Anda juga bisa menggunakan operator ternary secara jamak (catatan: conditional operator adalah associative yang lebih baik):</p> + +<pre class="syntaxbox">var firstCheck = false, secondCheck = false, access = firstCheck ? 'Access denied' : secondCheck ? 'Access denied' : 'Access granted'; +console.log(access); // logs "Access granted"</pre> + +<p>Anda juga dapat menggunakan pengondisian jamak seperti pengondisian jamak pada statement IF pada umumnya:</p> + +<pre class="syntaxbox">var condition1 = true, + condition2 = false, + access = condition1 ? (condition2 ? "true true": "true false") : (condition2 ? "false true" : "false false"); + +console.log(access); // logs "true false" +</pre> + +<p> </p> + +<p>Note: The parentheses are not required, and do not affect the functionality. They are there to help visualize how the outcome is processed.</p> + +<p>You can also use ternary evaluations in free space in order to do different operations:</p> + +<pre class="brush: js">var stop = false, age = 16; + +age > 18 ? location.assign('continue.html') : stop = true; +</pre> + +<p>You can also do more than one single operation per case, separating them with a comma, and enclosing them in parenthesis:</p> + +<pre class="brush: js">var stop = false, age = 23; + +age > 18 ? ( + alert('OK, you can go.'), + location.assign('continue.html') +) : ( + stop = true, + alert('Sorry, you are much too young!') +); +</pre> + +<p>You can also do more than one operation during the assignation of a value. In this case, <strong><em>the last comma-separated value of the parenthesis</em> will be the value to be assigned</strong>.</p> + +<pre class="brush: js">var age = 16; + +var url = age > 18 ? ( + alert('OK, you can go.'), + // alert returns "undefined", but it will be ignored because + // isn't the last comma-separated value of the parenthesis + 'continue.html' // the value to be assigned if age > 18 +) : ( + alert('You are much too young!'), + alert('Sorry :-('), + // etc. etc. + 'stop.html' // the value to be assigned if !(age > 18) +); + +location.assign(url); // "stop.html"</pre> + +<h3 id="Returning_Ternary_Statements">Returning Ternary Statements</h3> + +<p>The ternary operator lends itself well to function returns that would otherwise require an <code>if/else</code> statement.</p> + +<pre class="brush: js">var func1 = function( .. ) { + if (condition1) { return value1 } + else { return value2 } +} + +var func2 = function( .. ) { + return condition1 ? value1 : value2 +}</pre> + +<p>A good way to spot that the ternary will be a suitable replacement for an <code>if/else</code> statement is when the <code>return</code> keyword is used multiple times and is the only expression inside of the if block.</p> + +<p>By breaking the ternary onto multiple lines and making use of extra whitespace, the ternary operator can be used to very cleanly replace a lengthy series of <code>if/else</code> statements. This provides a syntactically light way of expressing the same logic:</p> + +<pre class="brush: js">var func1 = function( .. ) { + if (condition1) { return value1 } + else if (condition2) { return value2 } + else if (condition3) { return value3 } + else { return value4 } +} + +var func2 = function( .. ) { + return condition1 ? value1 + : condition2 ? value2 + : condition3 ? value3 + : value4 +}</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-conditional-operator', 'Conditional Operator')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-conditional-operator', 'Conditional Operator')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.12', 'The conditional operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.12', 'The conditional operator')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.operators.conditional")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if statement</a></li> +</ul> diff --git a/files/id/web/javascript/reference/operators/fungsi/index.html b/files/id/web/javascript/reference/operators/fungsi/index.html new file mode 100644 index 0000000000..5366891a5c --- /dev/null +++ b/files/id/web/javascript/reference/operators/fungsi/index.html @@ -0,0 +1,153 @@ +--- +title: ungkapan fungsi +slug: Web/JavaScript/Reference/Operators/fungsi +tags: + - Fungsi + - JavaScript + - Operator + - Ungkapan Utama +translation_of: Web/JavaScript/Reference/Operators/function +--- +<div>{{jsSidebar("Operators")}}</div> + +<div>Kata kunci <code><strong>fungsi</strong></code> digunakan untuk mendefinisikan <code><strong>fungsi</strong></code> dalam sebuah ungkapan<em>.</em></div> + +<div> </div> + +<h2 id="Sintaksis">Sintaksis</h2> + +<pre class="syntaxbox">function [<em>nama</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) { + pernyataan +}</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>nama</code></dt> + <dd>Bisa dihilangkan apabila fungsi merupaka fungsi <em>anonim</em>. Nama fungsi bersifat lokal, relatif terhadap tubuh fungsi.</dd> + <dt><code>paramN</code></dt> + <dd>Nama argumen yang akan diumpankan kepada fungsi.</dd> + <dt><code>pernyataan</code></dt> + <dd>Pernyataan yang menyusun tubuh fungsi.</dd> +</dl> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Sintaksis ungkapan fungsi nyaris sama apabila dibandingkan dengan sintaksis pernyataan fungsi(lihat <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">pernyataan fungsi</a> untuk lebih jelasnya). Perbedaan utama antara ungkapan fungsi dengan pernyataan fungsi ialah; ungkapan fungsi memperbolehkan <em>nama fungsi </em>untuk tidak digunakan/dihilangkan apabila ungkapan fungsi tersebut merupakan fungsi <em>anonim</em>. Ungkapan fungsi dapat digunakan sebagai <em><strong>IIFE </strong>(immediately Invoked Function Expression)</em>, sebuah fungsi yang otomatis dijalankan apabila didefinisikan. Untuk informasi lebih lanjut, lihat juga bab tentang <a href="/en-US/docs/Web/JavaScript/Reference/Functions">fungsi</a>.</p> + +<h2 id="Contoh">Contoh</h2> + +<p>Dibawah ini merupakan contoh definisi sebuah fungsi tanpa nama yang kemudian ditugaskan kedalam variabel <code>x</code>:</p> + +<pre class="brush: js">var x = function(y) { + return y * y; +}; +</pre> + +<h3 id="Ungkapan_fungsi_bernama_(Named_function_expression)">Ungkapan fungsi bernama (Named function expression)</h3> + +<p>Apabila sebuah fungsi hendak dipanggil dari dalam tubuh fungsi itu sendiri, pergunakanlah ungkapan fungsi bernama. Nama fungsi bersifat lokal relatif terhadap tubuh fungsi. Manfaat penggunaan ungkapan fungsi bernama ialah menghindarkan penggunaan properti non-standar <code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/callee">arguments.callee</a></code>.</p> + +<pre class="brush: js">var math = { + 'factorial': function factorial(n) { + if (n <= 1) + return 1; + return n * factorial(n - 1); + } +}; +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Komentar</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-13', 'Function definition')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-13', 'Function definition')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Definisi awal. Diterapkan pada JavaScript 1.5.</td> + </tr> + </tbody> +</table> + +<h2 id="Kesesuaian_Perambah_(Browser)">Kesesuaian Perambah (Browser)</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Dukungan Mendasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Dukungan Mendasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("Functions_and_function_scope", "Functions and function scope")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Statements/function", "function statement")}}</li> + <li>{{jsxref("Statements/function*", "function* statement")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/operators/index.html b/files/id/web/javascript/reference/operators/index.html new file mode 100644 index 0000000000..ef3afeb763 --- /dev/null +++ b/files/id/web/javascript/reference/operators/index.html @@ -0,0 +1,269 @@ +--- +title: Expressions and operators +slug: Web/JavaScript/Reference/Operators +tags: + - JavaScript + - NeedsTranslation + - Operators + - TopicStub +translation_of: Web/JavaScript/Reference/Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>This chapter documents all the JavaScript language operators, expressions and keywords.</p> + +<h2 id="Ekspresi_and_operator_sesuai_kategori">Ekspresi and operator sesuai kategori</h2> + +<p>Untuk daftar isi sesuai Alfabet, silahkan lihat sisi sebelah kiri artikel ini.</p> + +<h3 id="Primary_expressions">Primary expressions</h3> + +<p>Basic keywords and general expressions in JavaScript.</p> + +<p>Keyword-keyword dasar dan ekspersi-ekspresi umum di javascript</p> + +<dl> + <dt>{{jsxref("Operators/this", "this")}}</dt> + <dd>The <code>this</code> keyword refers to the function's execution context.</dd> + <dt>{{jsxref("Operators/function", "function")}}</dt> + <dd>The <code>function</code> keyword defines a function expression.</dd> + <dt>{{jsxref("Global_Objects/Array", "[]")}}</dt> + <dd>Array literal syntax.</dd> + <dt>{{jsxref("Global_Objects/Object", "{}")}}</dt> + <dd>Object literal syntax.</dd> + <dt>{{jsxref("Global_Objects/RegExp", "/ab+c/i")}}</dt> + <dd>Regular expression literal syntax.</dd> + <dt>{{experimental_inline()}} {{jsxref("Operators/Array_comprehensions", "[for (x of y) x]")}}</dt> + <dd>Array comprehensions.</dd> + <dt>{{experimental_inline()}} {{jsxref("Operators/Generator_comprehensions", "(for (x of y) y)")}}</dt> + <dd>Generator comprehensions.</dd> + <dt>{{jsxref("Operators/Grouping", "( )")}}</dt> + <dd>Grouping operator.</dd> +</dl> + +<h3 id="Left-hand-side_expressions">Left-hand-side expressions</h3> + +<p>Left values are the destination of an assignment.</p> + +<dl> + <dt>{{jsxref("Operators/Property_accessors", "Property accessors", "", 1)}}</dt> + <dd>Member operators provide access to a property or method of an object<br> + (<code>object.property</code> and <code>object["property"]</code>).</dd> + <dt>{{jsxref("Operators/new", "new")}}</dt> + <dd>The <code>new</code> operator creates an instance of a constructor.</dd> + <dt>{{experimental_inline()}} {{jsxref("Operators/super", "super")}}</dt> + <dd>The <code>super</code> keyword calls the parent constructor.</dd> + <dt>{{experimental_inline()}} {{jsxref("Operators/Spread_operator", "...obj")}}</dt> + <dd>The spread operator allows an expression to be expanded in places where multiple arguments (for function calls) or multiple elements (for array literals) are expected.</dd> +</dl> + +<h3 id="Increment_and_decrement">Increment and decrement</h3> + +<p>Postfix/prefix increment and postfix/prefix decrement operators.</p> + +<dl> + <dt>{{jsxref("Operators/Arithmetic_Operators", "A++", "#Increment")}}</dt> + <dd>Postfix increment operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "A--", "#Decrement")}}</dt> + <dd>Postfix decrement operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "++A", "#Increment")}}</dt> + <dd>Prefix increment operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "--A", "#Decrement")}}</dt> + <dd>Prefix decrement operator.</dd> +</dl> + +<h3 id="Unary_operators">Unary operators</h3> + +<p>A unary operation is operation with only one operand.</p> + +<dl> + <dt>{{jsxref("Operators/delete", "delete")}}</dt> + <dd>The <code>delete</code> operator deletes a property from an object.</dd> + <dt>{{jsxref("Operators/void", "void")}}</dt> + <dd>The <code>void</code> operator discards an expression's return value.</dd> + <dt>{{jsxref("Operators/typeof", "typeof")}}</dt> + <dd>The <code>typeof</code> operator determines the type of a given object.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "+", "#Unary_plus")}}</dt> + <dd>The unary plus operator converts its operand to Number type.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "-", "#Unary_negation")}}</dt> + <dd>The unary negation operator converts its operand to Number type and then negates it.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", "~", "#Bitwise_NOT")}}</dt> + <dd>Bitwise NOT operator.</dd> + <dt>{{jsxref("Operators/Logical_Operators", "!", "#Logical_NOT")}}</dt> + <dd>Logical NOT operator.</dd> +</dl> + +<h3 id="Arithmetic_operators">Arithmetic operators</h3> + +<p>Arithmetic operators take numerical values (either literals or variables) as their operands and return a single numerical value.</p> + +<dl> + <dt>{{jsxref("Operators/Arithmetic_Operators", "+", "#Addition")}}</dt> + <dd>Addition operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "-", "#Subtraction")}}</dt> + <dd>Subtraction operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "/", "#Division")}}</dt> + <dd>Division operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "*", "#Multiplication")}}</dt> + <dd>Multiplication operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "%", "#Remainder")}}</dt> + <dd>Remainder operator.</dd> +</dl> + +<h3 id="Relational_operators">Relational operators</h3> + +<p>A comparison operator compares its operands and returns a <code>Boolean</code> value based on whether the comparison is true.</p> + +<dl> + <dt>{{jsxref("Operators/in", "in")}}</dt> + <dd>The <code>in</code> operator determines whether an object has a given property.</dd> + <dt>{{jsxref("Operators/instanceof", "instanceof")}}</dt> + <dd>The <code>instanceof</code> operator determines whether an object is an instance of another object.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "<", "#Less_than_operator")}}</dt> + <dd>Less than operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", ">", "#Greater_than_operator")}}</dt> + <dd>Greater than operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "<=", "#Less_than_or_equal_operator")}}</dt> + <dd>Less than or equal operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", ">=", "#Greater_than_or_equal_operator")}}</dt> + <dd>Greater than or equal operator.</dd> +</dl> + +<h3 id="Equality_operators">Equality operators</h3> + +<p>The result of evaluating an equality operator is always of type <code>Boolean</code> based on whether the comparison is true.</p> + +<dl> + <dt>{{jsxref("Operators/Comparison_Operators", "==", "#Equality")}}</dt> + <dd>Equality operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "!=", "#Inequality")}}</dt> + <dd>Inequality operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "===", "#Identity")}}</dt> + <dd>Identity operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "!==", "#Nonidentity")}}</dt> + <dd>Nonidentity operator.</dd> +</dl> + +<h3 id="Bitwise_shift_operators">Bitwise shift operators</h3> + +<p>Operations to shift all bits of the operand.</p> + +<dl> + <dt>{{jsxref("Operators/Bitwise_Operators", "<<", "#Left_shift")}}</dt> + <dd>Bitwise left shift operator.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", ">>", "#Right_shift")}}</dt> + <dd>Bitwise right shift operator.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", ">>>", "#Unsigned_right_shift")}}</dt> + <dd>Bitwise unsigned right shift operator.</dd> +</dl> + +<h3 id="Binary_bitwise_operators">Binary bitwise operators</h3> + +<p>Bitwise operators treat their operands as a set of 32 bits (zeros and ones) and return standard JavaScript numerical values.</p> + +<dl> + <dt>{{jsxref("Operators/Bitwise_Operators", "&", "#Bitwise_AND")}}</dt> + <dd>Bitwise AND.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", "|", "#Bitwise_OR")}}</dt> + <dd>Bitwise OR.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", "^", "#Bitwise_XOR")}}</dt> + <dd>Bitwise XOR.</dd> +</dl> + +<h3 id="Binary_logical_operators">Binary logical operators</h3> + +<p>Logical operators are typically used with boolean (logical) values, and when they are, they return a boolean value.</p> + +<dl> + <dt>{{jsxref("Operators/Logical_Operators", "&&", "#Logical_AND")}}</dt> + <dd>Logical AND.</dd> + <dt>{{jsxref("Operators/Logical_Operators", "||", "#Logical_OR")}}</dt> + <dd>Logical OR.</dd> +</dl> + +<h3 id="Conditional_(ternary)_operator">Conditional (ternary) operator</h3> + +<dl> + <dt>{{jsxref("Operators/Conditional_Operator", "(condition ? ifTrue : ifFalse)")}}</dt> + <dd> + <p>The conditional operator returns one of two values based on the logical value of the condition.</p> + </dd> +</dl> + +<h3 id="Assignment_operators">Assignment operators</h3> + +<p>An assignment operator assigns a value to its left operand based on the value of its right operand.</p> + +<dl> + <dt>{{jsxref("Operators/Assignment_Operators", "=", "#Assignment")}}</dt> + <dd>Assignment operator.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "*=", "#Multiplication_assignment")}}</dt> + <dd>Multiplication assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "/=", "#Division_assignment")}}</dt> + <dd>Division assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "%=", "#Remainder_assignment")}}</dt> + <dd>Remainder assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "+=", "#Addition_assignment")}}</dt> + <dd>Addition assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "-=", "#Subtraction_assignment")}}</dt> + <dd>Subtraction assignment</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "<<=", "#Left_shift_assignment")}}</dt> + <dd>Left shift assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", ">>=", "#Right_shift_assignment")}}</dt> + <dd>Right shift assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", ">>>=", "#Unsigned_right_shift_assignment")}}</dt> + <dd>Unsigned right shift assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "&=", "#Bitwise_AND_assignment")}}</dt> + <dd>Bitwise AND assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "^=", "#Bitwise_XOR_assignment")}}</dt> + <dd>Bitwise XOR assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "|=", "#Bitwise_OR_assignment")}}</dt> + <dd>Bitwise OR assignment.</dd> + <dt>{{experimental_inline()}} {{jsxref("Operators/Destructuring_assignment", "[a, b] = [1, 2]")}}<br> + {{experimental_inline()}} {{jsxref("Operators/Destructuring_assignment", "{a, b} = {a:1, b:2}")}}</dt> + <dd> + <p>Destructuring assignment allows you to assign the properties of an array or object to variables using syntax that looks similar to array or object literals.</p> + </dd> +</dl> + +<h3 id="Comma_operator">Comma operator</h3> + +<dl> + <dt>{{jsxref("Operators/Comma_Operator", ",")}}</dt> + <dd> + <p>The comma operator allows multiple expressions to be evaluated in a single statement and returns the result of the last expression.</p> + </dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>ECMAScript 1st Edition.</td> + <td>Standard</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11', 'Expressions')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New: Spread operator, destructuring assignment, <code>super</code> keyword, Array comprehensions, Generator comprehensions</td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">Operator precedence</a></li> +</ul> diff --git a/files/id/web/javascript/reference/operators/yield/index.html b/files/id/web/javascript/reference/operators/yield/index.html new file mode 100644 index 0000000000..366f2aaa38 --- /dev/null +++ b/files/id/web/javascript/reference/operators/yield/index.html @@ -0,0 +1,109 @@ +--- +title: yield +slug: Web/JavaScript/Reference/Operators/yield +translation_of: Web/JavaScript/Reference/Operators/yield +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Keyword <code>yield</code> digunakan untuk menghentikan sementara dan melanjutkan sebuah fungsi generator ({{jsxref("Statements/function*", "function*")}} atau <a href="/en-US/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function">legacy generator function</a>).</p> + +<h2 id="Sintak">Sintak</h2> + +<pre class="syntaxbox notranslate">[<em>rv</em>] = <strong>yield</strong> [<em>expression</em>];</pre> + +<dl> + <dt><code>expression</code></dt> + <dd>Mendefeniskan nilai yang akan dikembalikan melalui <a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterator_protocol">iterator protocol</a>. Apabila diabaikan, maka <code>undefined</code> akan dikembalikan.</dd> + <dt><code>rv</code></dt> + <dd> + <p>Mengembalikan nilai opsional yang diberikan pada generator method <code>next()</code> untuk melanjutkan eksekusinya.</p> + </dd> +</dl> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Keyword <code>yield </code>menghentikan secara sementara eksekusi dari fungsi generator dan nilai setelah keyword <code>yield</code> dikembalikan pada pemanggil generator tersebut. <code>yield</code> bisa juga disebut sebagai versi generator dari keyword<code>return</code>.</p> + +<p>Keyword <code>yield</code> sebenarnya mengembalikan sebuah obyek <code>IteratorResult</code> dengan dua properti, <code>value</code> dan <code>done</code>. Properti<code>value</code> adalah hasi dari evaluasi ekspresi <code>yield</code>, dan <code>done</code> yang <code>false</code>, mengindikasikan bahwa fungsi generator tersebut belum selesai sepenuhnya.</p> + +<p>Sekali berhenti pada ekspresi <code>yield</code> , eksekusi dari code generator tersebut akan terus dihentikan sampai generator method <code>next()</code> dipanggil. Setiap kali method generator <code>next()</code> dipanggil, generator melanjutkan eksekusi dan berjalan hingga mencapai salah satu dari kondisi berikut ini :</p> + +<ul> + <li>Sebuah<code>yield</code>, yang menyebabkan generator sekali lagi berhenti sementara dan mengembalikan nilai baru dari generator tersebut. Ketika kemudian<code>next()</code> dipanggil lagi, eksekusi berlanjut dengan statement segera setelah<code>yield</code>.</li> + <li>{{jsxref("Statements/throw", "throw")}} digunakan untuk melontarkan exception dari generator. Ini menghentikan generator sepenuhnya, dan eksekusi berlanjut pada pemanggil seperti normalnya ketika sebuah exception dilontarkan.</li> + <li>Akhir dari fungsi generator tersebut tercapai; pada kasus ini, eksekusi dari generator tersebut berakhir dan sebuah <code>IteratorResult</code> dikembalikan pada pemanggilnya dimana <code>value</code> adalah {{jsxref("undefined")}} dan <code>done</code> adalah <code>true</code>.</li> + <li>Mencapai sebuah statement {{jsxref("Statements/return", "return")}}. Pada kasus ini, eksekusi dari generator tersebut berakhir dan sebuah <code>IteratorResult</code> dikembalikan pada pemanggil dimana <code>value</code> ditentukan oleh statement <code>return</code> dan <code>done</code> adalah <code>true</code>.</li> +</ul> + +<p>JIka sebuah nilai opsional diberikan pada generator method <code>next()</code>, nilai tersebut menjadi nilai yang dikembalikan oleh operasi <code>yield</code> dari generator pada saat itu.</p> + +<p>Di antara kode generator, operator<code>yield</code> -nya, dan kemampuan untuk menentukan sebua nilai awal baru dengan memberikannya pada {{jsxref("Generator.prototype.next()")}}, generator menawarkan power dan kontrol yang luar biasa.</p> + +<h2 id="Contoh">Contoh</h2> + +<p>Kode berikut merupakan deklarasi dari sebuah contoh fungsi generator.</p> + +<pre class="brush: js notranslate">function* countAppleSales () { + var saleList = [3, 7, 5]; + for (var i = 0; i < saleList.length; i++) { + yield saleList[i]; + } +}</pre> + +<p>Setelah sebuah fungsi generator didefenisikan, maka fungsi tersebut dapat digunakan untuk menghasilkan sebuah iterator seperti berikut.</p> + +<pre class="brush: js notranslate">var appleStore = countAppleSales(); // Generator { } +console.log(appleStore.next()); // { value: 3, done: false } +console.log(appleStore.next()); // { value: 7, done: false } +console.log(appleStore.next()); // { value: 5, done: false } +console.log(appleStore.next()); // { value: undefined, done: true }</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Komentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES2015', '#', 'Yield')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#', 'Yield')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Kompatabilitas_Browser">Kompatabilitas Browser</h2> + +<div class="hidden">Tabel kompatabilitas ini dihasilkan dari struktur data. Jika anda ingin berkontribusi pada data, silahkan lihat <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> dan kirimkan kami sebuah pull request.</div> + +<p>{{Compat("javascript.operators.yield")}}</p> + +<h2 id="Catatan_Firefox-specific">Catatan Firefox-specific</h2> + +<ul> + <li>Semenjak Gecko 29 {{geckoRelease(29)}}, the completed generator function no longer throws a {{jsxref("TypeError")}} "generator has already finished". Instead, it returns an <code>IteratorResult</code> object like <code>{ value: undefined, done: true }</code> ({{bug(958951)}}).</li> + <li>Starting with Gecko 33 {{geckoRelease(33)}}, the parsing of the <code>yield</code> expression has been updated to conform with the ES2015 specification ({{bug(981599)}}): + <ul> + <li>The expression after the <code>yield</code> keyword is optional and omitting it no longer throws a {{jsxref("SyntaxError")}}: <code>function* countAppleSales() { yield; }</code></li> + </ul> + </li> +</ul> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">The Iterator protocol</a></li> + <li>{{jsxref("Statements/function*", "function*")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("Operators/yield*", "yield*")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/statements/class/index.html b/files/id/web/javascript/reference/statements/class/index.html new file mode 100644 index 0000000000..6ca35e9c71 --- /dev/null +++ b/files/id/web/javascript/reference/statements/class/index.html @@ -0,0 +1,171 @@ +--- +title: class +slug: Web/JavaScript/Reference/Statements/class +tags: + - Classes + - Declaration + - ECMAScript6 + - Referensi +translation_of: Web/JavaScript/Reference/Statements/class +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Deklarasi <strong>class</strong> digunakan untuk membuat class baru dengan nama menggunakan turunan berbasis prototype.</p> + +<div class="noinclude"> +<p>Anda juga bisa mendefinisikan kelas menggunakan{{jsxref("Operators/class", "class expression", "", 1)}}.</p> +</div> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="brush: js">class <em>name</em> [extends] { + // class body +} +</pre> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Seperti halnya dengan ekspresi class, pembentuk (body) class dari deklarasi class di jalankan pada <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>.</p> + +<p>Deklarasi class bukanlah {{Glossary("Hoisting", "hoisted")}} (Tidak seperti <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function declarations</a>).</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Dasar_deklarasi_class">Dasar deklarasi class</h3> + +<p>Pada contoh, hal pertama yang kita lakukan adalah mendefinisikan class dengan nama Polygon, kemudian membentangkannya ( extend ) untuk membuat class bernama Square. Perlu diperhatikan bahwa super(), digunakan pada constructor, hanya dapat digunakan di konstruktor dan harus dipanggil setelah keyword 'this' dapat digunakan.</p> + +<pre class="brush: js">class Polygon { + constructor(height, width) { + this.name = 'Polygon'; + this.height = height; + this.width = width; + } +} + +class Square extends Polygon { + constructor(length) { + super(length, length); + this.name = 'Square'; + } +}</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Browser">Kompabilitas Browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatChrome(42.0)}}</td> + <td>{{CompatGeckoDesktop(45)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Array subclassing</td> + <td>{{CompatChrome(43.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Allowed in sloppy mode</td> + <td>{{CompatChrome(49.0)}}</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(42.0)}}</td> + <td>{{CompatGeckoMobile(45)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(42.0)}}</td> + </tr> + <tr> + <td>Array subclassing</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(43.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(43.0)}}</td> + </tr> + <tr> + <td>Allowed in sloppy mode</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(49.0)}}</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td>{{CompatChrome(49.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/function"><code>function</code> declaration</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li> +</ul> diff --git a/files/id/web/javascript/reference/statements/do...while/index.html b/files/id/web/javascript/reference/statements/do...while/index.html new file mode 100644 index 0000000000..01c518ad84 --- /dev/null +++ b/files/id/web/javascript/reference/statements/do...while/index.html @@ -0,0 +1,101 @@ +--- +title: do...while +slug: Web/JavaScript/Reference/Statements/do...while +tags: + - JavaScript + - Referensi +translation_of: Web/JavaScript/Reference/Statements/do...while +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Pernyataan <strong><code>do...while</code></strong> digunakan untuk membuat perulangan yang mengeksekusi penyataan tertentu hingga kondisi pemeriksaan penyataan tersebut bernilai <code>false</code>. Kondisi akan diperiksa setelah pernyataan dieksekusi/dijalankan dengan hasil penyataan tersebut yang dijalankan sekurangnya sekali.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-dowhile.html")}}</div> + +<p class="hidden">Kode sumber untuk contoh interaktif ini disimpan di repositori GitHub. Bila Anda ingin berkontribusi ke proyek contoh interaktif, silakan mengkloning <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> dan mengirim permintaan <code>pull</code> kepada kami.</p> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox">do + penyataan +while (kondisi); +</pre> + +<dl> + <dt><code>penyataan</code></dt> + <dd>Sebuah penyataan yang dieksekusi setidaknya sekali dan akan kembali dieksekusi setiap kali kondisi pemeriksaan bernial <code>true</code>. Untuk mengeksekusi lebih dari satu penyataan di dalam perulangan, gunakan pernyataan {{jsxref("Statements/block", "block")}} (<code>{ ... }</code>) untuk mengelompokkan penyataan.</dd> +</dl> + +<dl> + <dt><code>kondisi</code></dt> + <dd>Sebuah ekspresi yang periksa setelah perulangan. Bila kondisi periksa bernilai <code>true</code>, maka <code>pernyataan</code> akan kembali dieksekusi. Bila kondisi periksa bernilai <code>false</code>, maka kendali akan melewati <code>do...while</code> dan meneruskan ke pernyataan selanjutnya.</dd> +</dl> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Penggunaan_do...while">Penggunaan <code>do...while</code></h3> + +<p>Pada contoh berikut, perulangan <code>do...while</code> diiterasikan setidaknya sekali dan kembali di iterasikan sampai nilai <code>i</code> tidak kurang dari 5.</p> + +<h3 id="Kode_HTML">Kode HTML</h3> + +<pre class="brush: html"><div id="example"></div></pre> + +<h3 id="Kode_JavaScript">Kode JavaScript</h3> + +<pre class="brush: js">var result = ''; +var i = 0; +do { + i += 1; + result += i + ' '; +} while (i < 5); +document.getElementById('example').innerHTML = result;</pre> + +<h3 id="Hasil">Hasil</h3> + +<p>{{ EmbedLiveSample('Examples') }}</p> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.2</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.6.1', 'do-while statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-do-while-statement', 'do-while statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Trailing ; is now optional.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-do-while-statement', 'do-while statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatibilitas_Peramban">Kompatibilitas Peramban</h2> + +<div class="hidden">Tabel kompatibilitas ini dibuat dari data terstruktur. Bila Anda ingin berkontribusi data, silakan periksa <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> dan mengirim permintaan <code>pull</code> kepada kami.</div> + +<p>{{Compat("javascript.statements.do_while")}}</p> + +<h2 id="Lihat_pula">Lihat pula</h2> + +<ul> + <li>{{jsxref("Statements/while", "while")}}</li> + <li>{{jsxref("Statements/for", "for")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/statements/empty/index.html b/files/id/web/javascript/reference/statements/empty/index.html new file mode 100644 index 0000000000..26b2bf8d20 --- /dev/null +++ b/files/id/web/javascript/reference/statements/empty/index.html @@ -0,0 +1,147 @@ +--- +title: empty +slug: Web/JavaScript/Reference/Statements/Empty +tags: + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/Empty +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><strong>Pernyataan empty</strong> digunakan untuk menyediakan statement kosong, walaupun begitu sintaks JavaScript tetap menghitungnya sebagai sebuah Pernyataan.</p> + +<h2 id="Sintak">Sintak</h2> + +<pre class="syntaxbox">; +</pre> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Statemen atau penyataan kosong hanya berupa semicolon (;) menunjukkan bahawa tidak ada statement untuk dijalankan, meskipun jika sintak JavaScript membutuhkan salah satunya. Sifat kebalikan, dimana anda ingin menggunakan lebih dari satu statemen, namun javascript hanya memperbolehkan sebuah statemen kosong, anda bisa menggunakan <a href="/en-US/docs/Web/JavaScript/Reference/Statements/block">block statement</a>; yang merupakan gabungan dari beberapa statement menjadi satu.</p> + +<h2 id="Contoh">Contoh</h2> + +<p>Statement kosong terkadang digunakan pada perulangan. Lihat pada contoh dengan body berisi sebuah statement kosong:</p> + +<pre class="brush: js">var arr = [1, 2, 3]; + +// Assign all array values to 0 +for (i = 0; i < arr.length; arr[i++] = 0) /* empty statement */ ; + +console.log(arr) +// [0, 0, 0] +</pre> + +<p><strong>Catatan:</strong> Ini merupakan ide yang bagus dengan menggunakan komentar pada penggunaan statement kosong, karena ini tidak benar - benar jelas seperti halnya penggunaan semicolon (;) pada umumnya. Contoh berikut bisa dikatakan merupakan penggunaan yang tidak disengaja:</p> + +<pre class="brush: js">if (condition); // Perhatian, "if" tidak menjalankan apapun! + killTheUniverse() // Jadi ini akan selalu di jalankan!!! +</pre> + +<p>Contoh lain: Statemen <a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else"><code>if...else</code></a> tanpa tanda kurung keriting (<code>{}</code>). Jika <code>three</code> bernilai <code>true</code>, tidak akan terjadi apapun, <code>four</code> tidak begitu penting, dan juga fungsi <code>launchRocket()</code> pada kasus <code>else</code> tidak akan dijalankan.</p> + +<pre class="brush: js">if (one) + doOne(); +else if (two) + doTwo(); +else if (three) + ; // nothing here +else if (four) + doFour(); +else + launchRocket();</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-empty-statement', 'Empty statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-empty-statement', 'Empty statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.3', 'Empty statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12.3', 'Empty statement')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12.3', 'Empty statement')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Browser">Kompabilitas Browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("Statements/block", "Block statement")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/statements/export/index.html b/files/id/web/javascript/reference/statements/export/index.html new file mode 100644 index 0000000000..1f6d26b71d --- /dev/null +++ b/files/id/web/javascript/reference/statements/export/index.html @@ -0,0 +1,171 @@ +--- +title: export +slug: Web/JavaScript/Reference/Statements/export +translation_of: Web/JavaScript/Reference/Statements/export +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><strong>export statement</strong> digunakan untuk meng-ekspor fungsi, objects atau primitives dari file yang di berikan (atau <em>module</em>).</p> + +<div class="note"> +<p><strong>Catatan:</strong> Fitur ini tidak di implementasikan di browser secara bawaan untuk saat ini. ini hanya diimplementasikan di beberapa transpilers, seperti <a href="https://github.com/google/traceur-compiler">Traceur Compiler</a>, <a href="http://babeljs.io/">Babel</a> atau <a href="https://github.com/rollup/rollup">Rollup</a>.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">export { <var>name1</var>, <var>name2</var>, …, <var>nameN</var> }; +export { <var>variable1</var> as <var>name1</var>, <var>variable2</var> as <var>name2</var>, …, <var>nameN</var> }; +export let <var>name1</var>, <var>name2</var>, …, <var>nameN</var>; // also var +export let <var>name1</var> = …, <var>name2</var> = …, …, <var>nameN</var>; // also var, const + +export default <em>expression</em>; +export default function (…) { … } // also class, function* +export default function name1(…) { … } // also class, function* +export { <var>name1</var> as default, … }; + +export * from …; +export { <var>name1</var>, <var>name2</var>, …, <var>nameN</var> } from …; +export { <var>import1</var> as <var>name1</var>, <var>import2</var> as <var>name2</var>, …, <var>nameN</var> } from …;</pre> + +<dl> + <dt><code>nameN</code></dt> +</dl> + +<p>Identitas yang akan diekspor ( sehingga dapat di impor via <a href="/en-US/docs/Web/JavaScript/Reference/Statements/import">import</a> di lain skrip).</p> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Ada dua jenis tipe yang berbeda-beda dari export, masing-masing sesuai dengan salah satu sintaks di atas:</p> + +<ul> + <li>Named exports: + <pre class="brush: js">export { myFunction }; // exports a function declared earlier +export const foo = Math.sqrt(2); // exports a constant</pre> + </li> + <li>Default exports (hanya satu per script): + <pre class="brush: js">export default function() {} // or '<em>export default class {}</em>' +// there is no semi-colon here</pre> + </li> +</ul> + +<p>Named exports berguna untuk mengekspor beberapa nilai. Selama import, satu akan menggunakan nama yang sama untuk mengacu pada nilai yang sesuai.</p> + +<p>Mengenai default export, hanya ada satu default export per modul. default export bisa menjadi fungsi, class, objek atau yang lainya. Nilai ini dianggap sebagai "Pokok" pengeluaran nilai karena akan menjadi sederhana untuk di import.</p> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Menggunakan_named_exports">Menggunakan named exports</h3> + +<p>dalam modul, kita bisa menggunakan kode berikut:</p> + +<pre class="brush: js">// module "my-module.js" +export function cube(x) { + return x * x * x; +} +const foo = Math.PI + Math.SQRT2; +export { foo }; +</pre> + +<p>Cara ini, di dalam script lain (cf. <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/import">import</a></code>), kita bisa memiliki:</p> + +<pre class="brush: js">import { cube, foo } from 'my-module'; +console.log(cube(3)); // 27 +console.log(foo); // 4.555806215962888</pre> + +<h3 id="Menggunakan_default_export">Menggunakan default export</h3> + +<p>Jika kita ingin mengekspor nilai tunggal atau memiliki nilai fallback untuk modul kita, kita bisa menggunakan default export:</p> + +<pre class="brush: js">// module "my-module.js" +export default function cube(x) { + return x * x * x; +} +</pre> + +<p>Kemudian, di lain skrip, akan lebih mudah untuk mengimpor export default :</p> + +<pre class="brush: js">import cube from 'my-module'; +console.log(cube(3)); // 27 +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-exports', 'Exports')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatibilitas_browser">Kompatibilitas browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("Statements/import", "import")}}</li> + <li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, Hacks blog post by Jason Orendorff</li> + <li><a href="http://exploringjs.com/es6/ch_modules.html">Axel Rauschmayer's book: "Exploring JS: Modules"</a></li> +</ul> diff --git a/files/id/web/javascript/reference/statements/for...in/index.html b/files/id/web/javascript/reference/statements/for...in/index.html new file mode 100644 index 0000000000..0162c204ee --- /dev/null +++ b/files/id/web/javascript/reference/statements/for...in/index.html @@ -0,0 +1,201 @@ +--- +title: for...in +slug: Web/JavaScript/Reference/Statements/for...in +tags: + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/for...in +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><strong>Pernyataan</strong> <strong><code>for...in</code></strong> mengulang setiap <a href="/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">properti enumerable </a>dari sebuah objek, dalam urutan sembarang. Untuk setiap properti yang berbeda, pernyataan dapat dieksekusi.</p> + +<h2 id="Sintak">Sintak</h2> + +<pre class="syntaxbox">for (<var>variable</var> in <var>object</var>) {<em>...</em> +}</pre> + +<dl> + <dt><code>variable</code></dt> + <dd>Sebuah nama properti yang berbeda ditugaskan untuk variabel pada setiap iterasi.</dd> + <dt><code>object</code></dt> + <dd>Objek yang propertinya enumerable yang diiterasi.</dd> +</dl> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Perulangan <code>for...in</code> hanya mengiterasi pada properti enumerable. Objek yang dibuat dari built-in konstruktor seperti Array dan Object telah mewarisi properti non-enumerable dari <code>Object.prototype</code> dan <code>String.prototype</code>, seperti {{jsxref("String")}}'s {{jsxref("String.indexOf", "indexOf()")}} metode atau {{jsxref("Object")}}'s {{jsxref("Object.toString", "toString()")}} metode. Perulangan akan iterate atas semua properti enumerable dari objek itu sendiri dan mereka objek mewarisi dari prototipe konstruktor ini (properti lebih dekat ke objek di properti mata rantai prototipe menggantikan prototipe' properti).</p> + +<h3 id="Penghapusan_penambahan_atau_perubahan_pada_properti">Penghapusan, penambahan atau perubahan pada properti</h3> + +<p>Perulangan <code>for...in </code>mengiterasi properti suatu objek dalam urutan sembarang<code> </code>(lihat {{jsxref("Operators/delete", "delete")}} Operator untuk lebih lanjut tentang mengapa salah satu tidak dapat bergantung pada keteraturan tampak dari iterasi, setidaknya dalam pengaturan lintas-browser). Jika properti yang diubah dalam satu iterasi dan kemudian mengunjungi di lain waktu, nilainya dalam lingkaran adalah nilai pada waktu kemudian. Sebuah properti yang dihapus sebelum telah dikunjungi tidak akan dikunjungi nanti. Sifat ditambahkan ke objek dimana iterasi terjadi baik dapat dikunjungi atau dihilangkan dari iterasi. Secara umum yang terbaik adalah tidak untuk menambah, mengubah atau menghapus properti dari objek selama iterasi, selain properti saat ini sedang mengunjungi. Tidak ada jaminan apakah properti menambahkan akan dikunjungi, apakah properti dimodifikasi (selain yang saat ini) akan dikunjungi sebelum atau setelah dimodifikasi, atau apakah properti dihapus akan dikunjungi sebelum dihapus.</p> + +<h3 id="Iterasi_Array_dan_for...in">Iterasi Array dan <code>for...in</code></h3> + +<div class="note"> +<p><strong>Catatan:</strong> <code>for...in</code> tidak perlu digunakan untuk mengiterasi sebuah {{jsxref("Array")}} dimana urutan indeksnya sangat penting.</p> +</div> + +<p>Index array hanyalah properti enumerable dengan nama integer dan tidak sama dengan properti Objek pada umumnya. Disini tidak akan menjamin jika <code>for...in</code> akan mengembalikan indek pada urutan tertentu. Pernyataan <code>for...in</code> akan mengembalikan semua properti enumerable, termasuk didalamnya dengan nama non–integer dan serta turunannya.</p> + +<p>Karena urutan iterasi merupakan implementation-dependent, pengiterasian pada array mungkin tidak membaca elemen pada urutan yang urut. Karena itu lebih baik menggunakan perulangan {{jsxref("Statements/for", "for")}} dengan menggunakan nomor indek (atau {{jsxref("Array.prototype.forEach()")}} atau {{jsxref("Statements/for...of", "for...of")}} loop) ketika mengiterasi array dimana urutan akses sangat penting.</p> + +<h3 id="Iterasi_hanya_pada_properti_sendiri">Iterasi hanya pada properti sendiri</h3> + +<p>Jika anda hanya ingin mempertimbangkan properti yang melekat pada objek itu sendri, dan bukan prototypes-nya, gunakan {{jsxref("Object.getOwnPropertyNames", "getOwnPropertyNames()")}} atau lakukan {{jsxref("Object.prototype.hasOwnProperty", "hasOwnProperty()")}} cek ({{jsxref("Object.prototype.propertyIsEnumerable", "propertyIsEnumerable")}} juga dapat digunakan). Alternatifnya, jika anda tahu disana tidak ada campur tangan kode luar , anda dapat memperpanjang built-in prototypes dengan metode cek.</p> + +<h2 id="Contoh">Contoh</h2> + +<p>Pada fungsi berikut menggunakan sebuah objek argumen. kemudian mengiterasi pada semua properti enumerable pada objek tersebut dan mengembalikan string dari nama properti dan nilainya.</p> + +<pre class="brush: js">var obj = {a:1, b:2, c:3}; + +for (var prop in obj) { + console.log("obj." + prop + " = " + obj[prop]); +} + +// Output: +// "obj.a = 1" +// "obj.b = 2" +// "obj.c = 3"</pre> + +<p>Fungsi berikut mengiterasi menggunakan {{jsxref("Object.prototype.hasOwnProperty", "hasOwnProperty()")}}: properti turunannya tidak akan di tampilkan.</p> + +<pre class="brush: js">var triangle = {a:1, b:2, c:3}; + +function ColoredTriangle() { + this.color = "red"; +} + +ColoredTriangle.prototype = triangle; + +var obj = new ColoredTriangle(); + +for (var prop in obj) { + if( obj.hasOwnProperty( prop ) ) { + console.log("obj." + prop + " = " + obj[prop]); + } +} + +// Output: +// "obj.color = red" +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Komentar</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'for...in statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-for-in-and-for-of-statements', 'for...in statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.6.4', 'for...in statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12.6.4', 'for...in statement')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12.6.3', 'for...in statement')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Browser">Kompabilitas Browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>10</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fitur</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Dukungan dasar</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Kompabilitas_Ekspresi_Initializer">Kompabilitas: Ekspresi Initializer</h2> + +<p>Pada SpiderMonkey 40 {{geckoRelease(40)}} atau sebelumnya, bisa menggunakan ekspersi initializer (<code>i=0</code>) pada perulangan <code>for...in</code> :</p> + +<pre class="brush: js example-bad">var obj = {a:1, b:2, c:3}; +for(var i=0 in obj) { + console.log(obj[i]); +} +// 1 +// 2 +// 3 +</pre> + +<p>Perilaku non-standard ini sekarang diabaikan pada versi 40 dan selanjutnya akan disajikan dengan {{jsxref("SyntaxError")}} ("for-in loop head declarations may not have initializers") Peringatan pada konsole ({{bug(748550)}} dan {{bug(1164741)}}).</p> + +<p>Pada mesin lain seperti v8 (Chrome), Chakra (IE/Edge), dan JSC (WebKit/Safari) juga telah menyelidiki untuk menghapus perilaku non standar tersebut.</p> + +<h2 id="Lihat_Juga">Lihat Juga</h2> + +<ul> + <li>{{jsxref("Statements/for...of", "for...of")}} - pernyataan serupa yang mengiterasi pada nilai (<em>values) </em>properti.</li> + <li>{{jsxref("Statements/for_each...in", "for each in")}} - pernyataan serupa, namun mengiterasi pada nilai dari properti objek, daripada nama properti sendiri (Usang)</li> + <li>{{jsxref("Statements/for", "for")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">Generator expressions</a> (penggunaan sintak <code>for...in</code> )</li> + <li><a href="/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li> + <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> + <li>{{jsxref("Object.prototype.hasOwnProperty()")}}</li> + <li>{{jsxref("Array.prototype.forEach()")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/statements/fungsi/index.html b/files/id/web/javascript/reference/statements/fungsi/index.html new file mode 100644 index 0000000000..8ac13d31af --- /dev/null +++ b/files/id/web/javascript/reference/statements/fungsi/index.html @@ -0,0 +1,232 @@ +--- +title: Deklarasi Fungsi +slug: Web/JavaScript/Reference/Statements/fungsi +tags: + - JavaScript + - Pernyataan + - Statement +translation_of: Web/JavaScript/Reference/Statements/function +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><strong>Deklarasi fungsi </strong>mendefinisikan sebuah fungsi dengan parameter-parameter yang ditentukan.</p> + +<p>Fungsi juga dapat didefinisikan menggukanan konstruktor {{jsxref("Function")}} dan {{jsxref("Operators/function", "function expression")}}.</p> + +<h2 id="Sintak">Sintak</h2> + +<pre class="syntaxbox">function <em>name</em>([<em>param</em>,[, <em>param</em>,[..., <em>param</em>]]]) { + [<em>statements</em>] +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>Nama dari fungsi.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>Nama dari argumen yang akan dilewatkan kepada fungsi. Jumlah maksimal dari argumen berbeda-beda di setiap mesin.</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>Statemen-statemen yang membentuk tubuh dari sebuah fungsi.</dd> +</dl> + +<h2 id="Deskripsi">Deskripsi</h2> + +<p>Sebuah fungsi yang diciptakan dengan deklarasi fungsi adalah sebuah objek <code>Function </code>dan memiliki semua properti, method-method dan tingkah laku dari objek <code>Function. Lihat </code>{{jsxref("Function")}} untuk informasi mendetail tentang fungsi-fungsi.</p> + +<p>Sebuah fungsi juga dapat diciptakan menggunakan sebuah ekspresi (lihat {{jsxref("Operators/function", "function expression")}}).</p> + +<p>Secara default, fungsi mengembalikan nilai <code>undefined</code>. Untuk mengembalikan nilai lain, fungsi tersebut harus memiliki sebuah {{jsxref("Statements/return", "return")}} statement yang menentukan nilai untuk dikembalikan.</p> + +<h3 id="Fungsi_yang_dibuat_secara_kondisional">Fungsi yang dibuat secara kondisional</h3> + +<p>Fungsi dapat dideklarasikan secara kondisional, yaitu sebuah statement fungsi dapat disarangkan di dalam sebuah statement <code>if</code>. Kebanyakan aplikasi perambah selain Mozilla akan memperlakukan deklarasi kondisional seperti itu sebagai sebuah deklarasi non kondisional dan menciptakan fungsi tersebut meskipun kondisi bernilai benar atau salah, lihat <a href="http://kangax.github.io/nfe/#function-statements">artikel berikut</a> untuk ikhtisar. Untuk alasan tersebut, deklarasi kondisional seharusnya tidak digunakan -- untuk pembuatakan kondisional gunakan ekspresi fungsi sebagai gantinya.</p> + +<h3 id="Pengangkatan_deklarasi_fungsi">Pengangkatan deklarasi fungsi</h3> + +<p>Deklarasi fungsi di javaScript mengangkat definisi fungsi. Kamu dapat menggunakan fungsi sebelum kamu mendeklarasikan fungsi tersebut.</p> + +<pre class="brush: js">hoisted(); // logs "foo" + +function hoisted() { + console.log('foo'); +} +</pre> + +<p>Dicatat bahwa {{jsxref("Operators/function", "function expressions")}} tidak terangkat:</p> + +<pre class="brush: js">notHoisted(); // TypeError: notHoisted is not a function + +var notHoisted = function() { + console.log('bar'); +}; +</pre> + +<h2 id="Contoh">Contoh</h2> + +<h3 id="Menggunakan_fungsi">Menggunakan fungsi</h3> + +<p>Kode berikut mendeklarasikan sebuah fungsi yang mengembalikan jumlah total penjualan ketika diberikan angka dari unit-unit yang terjual dari produk <code>a, b, </code>dan <code>c</code>.</p> + +<pre class="brush: js">function calc_sales(units_a, units_b, units_c) { + return units_a * 79 + units_b * 129 + units_c * 699; +} +</pre> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-13', 'Function definition')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-13', 'Function definition')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-13', 'Function definition')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="Kompabilitas_Perambah">Kompabilitas Perambah</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Allowed in sloppy mode</td> + <td>{{CompatChrome(49.0)}}</td> + <td>{{CompatUnknown}}</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + </tr> + <tr> + <td>Trailing comma in parameters</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("52.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Allowed in sloppy mode</td> + <td>{{CompatNo}}</td> + <td> + <p>{{CompatChrome(49.0)}}</p> + </td> + <td>{{CompatUnknown}}</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td> + <p>{{CompatChrome(49.0)}}</p> + </td> + </tr> + <tr> + <td>Trailing comma in parameters</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("52.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Lihat_juga">Lihat juga</h2> + +<ul> + <li>{{jsxref("Functions_and_function_scope", "Functions and function scope")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Operators/function", "function expression")}}</li> + <li>{{jsxref("Statements/function*", "function* statement")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("Functions/Arrow_functions", "Arrow functions")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> + <li>{{jsxref("Statements/async_function", "async function")}}</li> + <li>{{jsxref("Operators/async_function", "async function expression")}}</li> +</ul> diff --git a/files/id/web/javascript/reference/statements/index.html b/files/id/web/javascript/reference/statements/index.html new file mode 100644 index 0000000000..08840f4e1a --- /dev/null +++ b/files/id/web/javascript/reference/statements/index.html @@ -0,0 +1,139 @@ +--- +title: Statements +slug: Web/JavaScript/Reference/Statements +tags: + - JavaScript + - Referensi + - Statement +translation_of: Web/JavaScript/Reference/Statements +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Aplikasi JavaScript terdiri dari statemen dengan sebuah sintaks tertentu. Sebuah statement dapat terdiri lebih dari satu baris. Setiap statement dapat berupa sebaris kode jika di pisahkan dengan semikolon ( ; ). Bukan merupakan keyword, tapi sekumpulan keyword.</p> + +<h2 id="Statemen_dan_deklarasi_berdasarkan_kategori">Statemen dan deklarasi berdasarkan kategori</h2> + +<p>Untuk daftar berdasarkan alfabet lihat pada sidebar sebelah kiri.</p> + +<h3 id="Control_flow">Control flow</h3> + +<dl> + <dt>{{jsxref("Statements/block", "Block")}}</dt> + <dd>Sebuah block statemen digunakan untuk mengelompokkan zero ( 0 ) atau lebih statement. Block ini dibatasi menggunakan kurung kurawal.</dd> + <dt>{{jsxref("Statements/break", "break")}}</dt> + <dd>Membatasi loop, switch, atau label statement dan transfer kontrol program pada statement berdasakan statemen akhir.</dd> + <dt>{{jsxref("Statements/continue", "continue")}}</dt> + <dd>Terminates execution of the statements in the current iteration of the current or labeled loop, and continues execution of the loop with the next iteration.</dd> + <dt>{{jsxref("Statements/Empty", "Empty")}}</dt> + <dd>An empty statement is used to provide no statement, although the JavaScript syntax would expect one.</dd> + <dt>{{jsxref("Statements/if...else", "if...else")}}</dt> + <dd>Executes a statement if a specified condition is true. If the condition is false, another statement can be executed.</dd> + <dt>{{jsxref("Statements/switch", "switch")}}</dt> + <dd>Evaluates an expression, matching the expression's value to a case clause, and executes statements associated with that case.</dd> + <dt>{{jsxref("Statements/throw", "throw")}}</dt> + <dd>Throws a user-defined exception.</dd> + <dt>{{jsxref("Statements/try...catch", "try...catch")}}</dt> + <dd>Marks a block of statements to try, and specifies a response, should an exception be thrown.</dd> +</dl> + +<h3 id="Deklarasi">Deklarasi</h3> + +<dl> + <dt>{{jsxref("Statements/var", "var")}}</dt> + <dd>Mendeklarasikan variabel, biasanya menginisialisasi ke sebuah nilai.</dd> + <dt>{{jsxref("Statements/let", "let")}}</dt> + <dd>Declares a block scope local variable, optionally initializing it to a value.</dd> + <dt>{{jsxref("Statements/const", "const")}}</dt> + <dd>Declares a read-only named constant.</dd> +</dl> + +<h3 id="Fungsi_dan_class">Fungsi dan class</h3> + +<dl> + <dt>{{jsxref("Statements/function", "function")}}</dt> + <dd>Declares a function with the specified parameters.</dd> + <dt>{{jsxref("Statements/function*", "function*")}}</dt> + <dd>Generators functions enable writing <a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">iterators</a> more easily.</dd> + <dt>{{jsxref("Statements/return", "return")}}</dt> + <dd>Specifies the value to be returned by a function.</dd> + <dt>{{jsxref("Statements/class", "class")}}</dt> + <dd>Declares a class.</dd> +</dl> + +<h3 id="Iterations">Iterations</h3> + +<dl> + <dt>{{jsxref("Statements/do...while", "do...while")}}</dt> + <dd>Creates a loop that executes a specified statement until the test condition evaluates to false. The condition is evaluated after executing the statement, resulting in the specified statement executing at least once.</dd> + <dt>{{jsxref("Statements/for", "for")}}</dt> + <dd>Creates a loop that consists of three optional expressions, enclosed in parentheses and separated by semicolons, followed by a statement executed in the loop.</dd> + <dt>{{deprecated_inline}} {{non-standard_inline()}} {{jsxref("Statements/for_each...in", "for each...in")}}</dt> + <dd>Iterates a specified variable over all values of object's properties. For each distinct property, a specified statement is executed.</dd> + <dt>{{jsxref("Statements/for...in", "for...in")}}</dt> + <dd>Iterates over the enumerable properties of an object, in arbitrary order. For each distinct property, statements can be executed.</dd> + <dt>{{jsxref("Statements/for...of", "for...of")}}</dt> + <dd>Iterates over iterable objects (including {{jsxref("Global_Objects/Array","arrays","","true")}}, array-like objects, <a href="/en-US/docs/JavaScript/Guide/Iterators_and_Generators">iterators and generators</a>), invoking a custom iteration hook with statements to be executed for the value of each distinct property.</dd> + <dt>{{jsxref("Statements/while", "while")}}</dt> + <dd>Creates a loop that executes a specified statement as long as the test condition evaluates to true. The condition is evaluated before executing the statement.</dd> +</dl> + +<h3 id="Others">Others</h3> + +<dl> + <dt>{{jsxref("Statements/debugger", "debugger")}}</dt> + <dd>Invokes any available debugging functionality. If no debugging functionality is available, this statement has no effect.</dd> + <dt>{{jsxref("Statements/export", "export")}}</dt> + <dd>Used to export functions to make them available for imports in external modules, another scripts.</dd> + <dt>{{jsxref("Statements/import", "import")}}</dt> + <dd>Used to import functions exported from an external module, another script.</dd> + <dt>{{jsxref("Statements/label", "label")}}</dt> + <dd>Provides a statement with an identifier that you can refer to using a <code>break</code> or <code>continue</code> statement.</dd> +</dl> + +<dl> + <dt>{{deprecated_inline}} {{jsxref("Statements/with", "with")}}</dt> + <dd>Extends the scope chain for a statement.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12', 'Statements')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12', 'Statements')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12', 'Statements')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New: function*, let, for...of, yield, class</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators">Operators</a></li> +</ul> diff --git a/files/id/web/javascript/sekilas_teknologi_javascript/index.html b/files/id/web/javascript/sekilas_teknologi_javascript/index.html new file mode 100644 index 0000000000..adb6ec5a68 --- /dev/null +++ b/files/id/web/javascript/sekilas_teknologi_javascript/index.html @@ -0,0 +1,87 @@ +--- +title: Ikhtisar Teknologi JavaScript +slug: Web/JavaScript/sekilas_teknologi_JavaScript +translation_of: Web/JavaScript/JavaScript_technologies_overview +--- +<div>{{JsSidebar("Introductory")}}</div> + +<h2 id="Pengantar">Pengantar</h2> + +<p>Jika <a href="/en-US/docs/Web/HTML">HTML</a> untuk mengatur struktur dan konten dari halaman web dan <a href="/en-US/docs/Web/CSS">CSS</a> untuk menetapkan format dan tampilannya, maka <a href="/en-US/docs/Web/JavaScript">JavaScript</a> digunakan untuk menambah interaksi pada halaman web dan menciptakan aplikasi web yang kaya.</p> + +<p>Namun, istilah "JavaScript" seperti yang dikenal pada konteks browser web berisi beberapa elemen yang sangat berbeda. Salah satunya adalah bahasa intinya (ECMAScript), yang lainnya adalah koleksi dari <a href="/en-US/docs/Web/Reference/API">Web APIs</a>, termasuk DOM (Document Object Model).</p> + +<h2 id="Bahasa_inti_(ECMAScript)_JavaScript">Bahasa inti (ECMAScript) JavaScript</h2> + +<p>Bahasa inti dari JavaScript distandarisasi oleh komite ECMA TC39 sebagai bahasa yang bernama <a href="/en-US/docs/JavaScript/Language_Resources">ECMAScript</a>.</p> + +<p>Bahasa inti ini juga digunakan pada lingkungan non-browser, misalnya <a href="http://nodejs.org/">node.js</a>.</p> + +<h3 id="Apa_yang_termasuk_dalam_lingkup_ECMAScript">Apa yang termasuk dalam lingkup ECMAScript?</h3> + +<p>Diantaranya, ECMAScript menetapkan:</p> + +<ul> + <li>Sintaks bahasa (aturan parsing, keywords, control flow, object literal initialization...)</li> + <li>Mekanisme penanganan Error (throw, try/catch, kemampuan membuat tipe Error yang ditetapkan-pengguna)</li> + <li>Tipe (boolean, number, string, function, object...)</li> + <li>Global object. Didalam browser, global object ini adalah window object, namun ECMAScript hanya menetapkan APIs tidak spesifik pada browser, contohnya <code>parseInt</code>, <code>parseFloat</code>, <code>decodeURI</code>, <code>encodeURI</code>...</li> + <li>Mekanisme pewarisan berbasis-prototipe</li> + <li>Built-in objects dan functions (<code>JSON</code>, <code>Math</code>, <code>Array.prototype</code> methods, Object introspection methods...)</li> + <li>Mode strict</li> +</ul> + +<h3 id="Dukungan_browser">Dukungan browser</h3> + +<p>Pada Oktober 2016, versi terbaru dari sebagian besar browser Web sudah menerapkan <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla">ECMAScript 5.1</a> dan <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_2015_support_in_Mozilla">ECMAScript 2015</a>, namun versi yang lebih lama (yang masih digunakan) hanya menerapkan ECMAScript 5.</p> + +<h3 id="Masa_depan">Masa depan</h3> + +<p>ECMAScript Edisi ke-6 mayor telah secara resmi disetujui dan diumumkan sebagai standar pada 17 Juni 1015 oleh ECMA General Assembly. Sejak saat itu Edisi ECMAScript diumumkan secara tahunan.</p> + +<h3 id="API_Internasionalisasi">API Internasionalisasi</h3> + +<p><a href="http://ecma-international.org/ecma-402/1.0/">Spesifikasi API Internasionalisasi ECMAScript</a> merupakan tambahan dari Spesifikasi Bahasa ECMAScript, yang juga distandarisasi oleh Ecma TC39. API internasionalisasi menyediakan kolasi (perbandingan string), format angka, format tanggal dan jam untuk aplikasi JavaScript, memungkinkan aplikasi memilih bahasa dan menyesuaikan fungsi sesuai kebutuhannya. Standar awal telah disetujui pada Desember 2012; status impementasinya dalam browser dicatat di dokumentasi <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Intl"><code>Intl</code> object</a>. Saat ini spesifikasi Internasionalisasi juga disahkan secara tahunan dan browser secara konsisten meningkatkan implementasinya.</p> + +<h2 id="API_DOM">API DOM</h2> + +<h3 id="WebIDL">WebIDL</h3> + +<p><a href="http://www.w3.org/TR/WebIDL/">WebIDL specification</a> memberikan perekat antara teknologi DOM dan ECMAScript.</p> + +<h3 id="Inti_dari_DOM">Inti dari DOM</h3> + +<p>Document Object Model (DOM) adalah <strong>bahasa konvensi independen</strong> lintas platform untuk mewakili dan berinteraksi dengan objects dalam dokumen HTML, XHTML dan XML. Objects didalam <strong>DOM tree</strong> dapat dialamatkan dan dimanipulasi dengan menggunakan methods pada objects. Core Document Object Model yang distandarisasi oleh {{glossary("W3C")}}, menetapkan antarmuka bahasa-agnostik untuk mengabstaraksi dokumen HTML dan XML sebagai objects, dan juga menetapkan mekanisme untuk memanipulasi abstraksi ini. Diantara yang ditetapkan oleh DOM, kita dapat menemukan:</p> + +<ul> + <li>Struktur dokumen, tree model, dan arsitektur DOM Event didalam <a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html">DOM core</a>: <code>Node</code>, <code>Element</code>, <code>DocumentFragment</code>, <code>Document</code>, <code>DOMImplementation</code>, <code>Event</code>, <code>EventTarget</code>, …</li> + <li>Sebuah penetapan yang tidak ketat untuk DOM Event Architecture, termasuk events tertentu didalam <a href="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html">DOM events</a>.</li> + <li>Dan yang lainnya seperti <a href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html">DOM Traversal</a> dan <a href="http://html5.org/specs/dom-range.html">DOM Range</a>.</li> +</ul> + +<p>Dari sudut pandang ECMAScript, objects yang didefinisikan di spesifikasi DOM disebut "host objects".</p> + +<h3 id="HTML_DOM">HTML DOM</h3> + +<p>Bahasa markup Web (<a href="http://www.whatwg.org/html">HTML</a>) yang ditetapkan dari sisi DOM. Seperti dalam konsep abstrak yang dibahas diatas pada Inti DOM, HTML juga didefinisikan sebagai <em>sebuah</em> elemen. The HTML DOM menyertakan properti <code>className</code> pada elemen HTML, or APIs seperti {{ domxref("document.body") }}.</p> + +<p>Spesifikasi HTML juga menetapkan batasan pada dokumen; misalnya, ia memerlukan semua elemen anak dari sebuah <code>ul</code> untuk mewakili sebuah daftar tak urut, elemen <code>li</code> untuk mewakili daftar item. Secara umum, ia juga melarang penggunaan elemen dan atribut yang tidak didefinisikan dalam standar.</p> + +<p>Ingin mengetahui <a href="/en-US/docs/DOM/document"><code>Document</code> object</a>, <a href="/en-US/docs/DOM/window"><code>Window</code> object</a>, dan elemen DOM lainnya? Baca <a href="/en-US/docs/Web/API/Document_Object_Model">DOM documentation</a>.</p> + +<h2 id="API_penting_lainnya">API penting lainnya</h2> + +<ul> + <li>Fungsi <code>setTimeout</code> dan <code>setInterval</code>. Fungsi yang ditetapkan pertama kali pada antarmuka <code><a href="http://www.whatwg.org/html/#window">Window</a></code> didalam standar HTML.</li> + <li><a href="https://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html">XMLHttpRequest</a> memungkinkan untuk mengrim permintaan HTTP asynchronous.</li> + <li><a href="http://dev.w3.org/csswg/cssom/">CSS Object Model</a> abstraksi aturan CSS sebagai objects.</li> + <li><a href="http://www.whatwg.org/specs/web-workers/current-work/">WebWorkers </a>memungkinkan komputasi paralel.</li> + <li><a href="http://www.whatwg.org/C/#network">WebSockets</a> memungkinkan komunikasi tingkat-rendah secara dua arah.</li> + <li><a href="http://www.whatwg.org/html/#2dcontext">Canvas 2D Context</a> merupakan API drawing untuk {{htmlelement("canvas")}}.</li> +</ul> + +<h3 id="Dukungan_browser_2">Dukungan browser</h3> + +<p>Seperti kata pengembang web yang berpengalaman, <a href="http://ejohn.org/blog/the-dom-is-a-mess/">DOM berantakan</a>. Dukungan fitur-fitur DOM antar browser bervarasi, terutama disebabkan karena banyak fitur yang penting dari DOM sangat tidak jelas, spesifikasi (jika ada) dan browser web yang berbeda menambahkan fitur yang tidak kompatibel untuk overlapping use cases (misalnya Internet Explorer event model). Pada Juni 2011, W3C dan khususnya WHATWG menetapkan fitur-fitur lama secara rinci untuk meningkatkan interoperabilitas, dan browser pada akhirnya dapat meningkatkan implementasi mereka berdasarkan spesifikasi ini.</p> + +<p>Sebuah teknik umum, meskipun mungkin bukan yang paling dapat diandalkan, pendekatan kompatibilitas lintas browser adalah dengan menggunakan pustaka JavaScript, yang menggunakan fitur DOM abstrak untuk menjaga API mereka tetap bekerja di browser yang berbeda. Beberapa framework yang paling banyak digunakan adalah <a href="http://jquery.com/">jQuery</a>, <a href="http://www.prototypejs.org/">prototype</a>, dan <a href="http://developer.yahoo.com/yui/">YUI</a>.</p> |