diff options
author | Ryan Johnson <rjohnson@mozilla.com> | 2021-04-29 16:16:42 -0700 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-04-29 16:16:42 -0700 |
commit | 95aca4b4d8fa62815d4bd412fff1a364f842814a (patch) | |
tree | 5e57661720fe9058d5c7db637e764800b50f9060 /files/id/web/javascript/guide | |
parent | ee3b1c87e3c8e72ca130943eed260ad642246581 (diff) | |
download | translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.gz translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.bz2 translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.zip |
remove retired locales (#699)
Diffstat (limited to 'files/id/web/javascript/guide')
-rw-r--r-- | files/id/web/javascript/guide/grammar_and_types/index.html | 649 | ||||
-rw-r--r-- | files/id/web/javascript/guide/index.html | 120 | ||||
-rw-r--r-- | files/id/web/javascript/guide/introduction/index.html | 157 | ||||
-rw-r--r-- | files/id/web/javascript/guide/loops_and_iteration/index.html | 331 | ||||
-rw-r--r-- | files/id/web/javascript/guide/numbers_and_dates/index.html | 377 | ||||
-rw-r--r-- | files/id/web/javascript/guide/working_with_objects/index.html | 493 |
6 files changed, 0 insertions, 2127 deletions
diff --git a/files/id/web/javascript/guide/grammar_and_types/index.html b/files/id/web/javascript/guide/grammar_and_types/index.html deleted file mode 100644 index 78eec69d04..0000000000 --- a/files/id/web/javascript/guide/grammar_and_types/index.html +++ /dev/null @@ -1,649 +0,0 @@ ---- -title: Tata Bahasa dan Tipe -slug: Web/JavaScript/Guide/Grammar_and_types -tags: - - JavaScript - - Panduan -translation_of: Web/JavaScript/Guide/Grammar_and_types -original_slug: Web/JavaScript/Panduan/Values,_variables,_and_literals ---- -<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/guide/index.html b/files/id/web/javascript/guide/index.html deleted file mode 100644 index e1a506b560..0000000000 --- a/files/id/web/javascript/guide/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: Panduan JavaScript -slug: Web/JavaScript/Guide -translation_of: Web/JavaScript/Guide -original_slug: Web/JavaScript/Panduan ---- -<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/guide/introduction/index.html b/files/id/web/javascript/guide/introduction/index.html deleted file mode 100644 index bfe4c9072c..0000000000 --- a/files/id/web/javascript/guide/introduction/index.html +++ /dev/null @@ -1,157 +0,0 @@ ---- -title: Perkenalan -slug: Web/JavaScript/Guide/Introduction -tags: - - I10n:priority - - JavaScript - - Pedoman - - Pemula - - Perkenalan -translation_of: Web/JavaScript/Guide/Introduction -original_slug: Web/JavaScript/Panduan/pengenalan ---- -<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/guide/loops_and_iteration/index.html b/files/id/web/javascript/guide/loops_and_iteration/index.html deleted file mode 100644 index 506b033350..0000000000 --- a/files/id/web/javascript/guide/loops_and_iteration/index.html +++ /dev/null @@ -1,331 +0,0 @@ ---- -title: Loops and iteration -slug: Web/JavaScript/Guide/Loops_and_iteration -translation_of: Web/JavaScript/Guide/Loops_and_iteration -original_slug: Web/JavaScript/Panduan/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/guide/numbers_and_dates/index.html b/files/id/web/javascript/guide/numbers_and_dates/index.html deleted file mode 100644 index 81ff248515..0000000000 --- a/files/id/web/javascript/guide/numbers_and_dates/index.html +++ /dev/null @@ -1,377 +0,0 @@ ---- -title: Numbers and dates -slug: Web/JavaScript/Guide/Numbers_and_dates -translation_of: Web/JavaScript/Guide/Numbers_and_dates -original_slug: Web/JavaScript/Panduan/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/guide/working_with_objects/index.html b/files/id/web/javascript/guide/working_with_objects/index.html deleted file mode 100644 index 4baf443489..0000000000 --- a/files/id/web/javascript/guide/working_with_objects/index.html +++ /dev/null @@ -1,493 +0,0 @@ ---- -title: Bekerja dengan objek -slug: Web/JavaScript/Guide/Working_with_Objects -tags: - - I10n:priority - - JavaScript - - Konstruktor - - Membandingkan objek - - Objek - - Panduan - - Pemula - - dokumen -translation_of: Web/JavaScript/Guide/Working_with_Objects -original_slug: Web/JavaScript/Panduan/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> |