1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
|
---
title: Perkenalan
slug: Web/JavaScript/Panduan/pengenalan
tags:
- 'I10n:priority'
- JavaScript
- Pedoman
- Pemula
- Perkenalan
translation_of: Web/JavaScript/Guide/Introduction
---
<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}</div>
<p class="summary">Bab ini mengenalkan dan membahas konsep yang mendasar di javascript.</p>
<h2 id="Apa_yang_perlu_anda_ketahui">Apa yang perlu anda ketahui</h2>
<p>Pada pedoman ini kami anggap Anda memiliki pengetahuan dasar dari:</p>
<ul>
<li>Pemahaman umum dari internet dan World Wide Web ({{Glossary("WWW")}}).</li>
<li>Mengetahui dan memahami bahasa markup atau HyperText Markup Language ({{Glossary("HTML")}}).</li>
<li>Memiliki pengalaman programming. Jika Anda baru belajar programming, silakan coba salah satu tutorial yang terdapat di halaman utama tentang <a href="/id/docs/Web/JavaScript">JavaScript</a>.</li>
</ul>
<h2 id="Tempat_untuk_mencari_informasi_JavaScript">Tempat untuk mencari informasi JavaScript </h2>
<p>Dokumentasi JavaScript di MDN menyediakan materi sebagai berikut:</p>
<ul>
<li><a href="/id/Learn">Belajar Pengembangan Web</a> menyajikan informasi untuk pemula serta mengenalkan konsep dasar programming dan internet.</li>
<li><a href="/id/docs/Web/JavaScript/Guide">Panduan JavaScript</a> (pedoman ini) menyajikan gambaran tentang bahasa JavaScript dan objeknya.</li>
<li><a href="/id/docs/Web/JavaScript/Reference">Referensi JavaScript</a> menyajikan material referensi yang detail untuk JavaScript.</li>
</ul>
<p>Jika Anda baru mengenal JavaScript, mulailah dari <a href="/id/Learn">area belajar</a> dan <a href="/id/docs/Web/JavaScript/Guide">Paduan JavaScript</a>. Ketika Anda sudah mendapatkan pemahaman dasarnya, Anda bisa menggunakan <a href="/id/docs/Web/JavaScript/Reference">Referensi JavaScript </a>untuk melihat lebih detil objek dan statement.</p>
<h2 id="Apa_itu_JavaScript">Apa itu JavaScript?</h2>
<p>JavaScript adalah bahasa scripting <em>cross-platform</em> yang berorientasi objek yang digunakan untuk membuat bagian interaktif dari halaman-halaman web (misal: animasi kompleks, tombol yang dapat di-klik, menu pop-up, dll). Terdapat juga versi <em>server-side</em> yang lebih lanjut dari JavaScript seperti Node.Js yang mana dapat memberikan Anda fungsionalitas lebih pada sebuah website (seperti kolaborasi realtime di antara beberapa komputer). Di dalam <em>host environment </em>(contoh, sebuah <em>web browser</em>), JavaScript dapat dihubungkan ke objek-objek dari <em>environment</em> tersebut untuk menyediakan kendali programmatis terhadapnya. </p>
<p>JavaScript memuat satu library standar yang memuat objek-objek, seperti <code>Array</code>, <code>Date</code>, dan <code>Math</code>, juga set inti dari elemen-elemen bahasa ini seperti operator, struktur kontrol, dan statement. Inti dari JavaScript dapat dikembangkan untuk kegunaan yang beragam dengan cara menambahkan objek-objek tambahan; sebagai contoh:</p>
<ul>
<li>JavaScript<em> client-side</em> memperluas inti bahasa ini dengan cara menyediakan objek-objek untuk mengontrol browser beserta DOM-nya (Document Object Model). Misal, ekstensi pada sisi klien memungkinkan sebuah aplikasi untuk menambahkan elemen-elemen pada sebuah form HTML dan merespon event dari user seperti klik mouse, input form, dan navigasi laman.</li>
<li>JavaScript<em> server-side</em> memperluas inti bahasa ini dengan cara menyediakan objek-objek yang relevan untuk menjalankan JavaScript pada sebuah server. Misal, extensi <em>server-side</em> memungkinkan aplikasi untuk berkomunikasi dengan database, menyediakan informasi yang berkelanjutan dari satu permintaan ke permintaan yang lain dari suatu aplikasi, atau melakukan manipulasi file di server.</li>
</ul>
<h2 id="JavaScript_and_Java" name="JavaScript_and_Java">JavaScript dan Java</h2>
<p>JavaScript dan Java memang memiliki kemiripan pada beberapa hal, namun pada dasarnya saling berbeda. JavaScript menyerupai Java namum tidak memiliki <em>static typing</em> dan <em>strong type checking</em>. JavaScript mengikuti sebagian besar expresi <em>syntax </em>Java, konvensi penamaan serta konstruksi <em>control-flow</em> dasar, yang mana menjadi alasan untuk mengganti namanya dari LiveScript ke JavaScript.</p>
<p>Berbeda dengan sistem <em>compile-time</em> <em>class</em> Java yang dibangun melalui deklarasi, Javascript mendukung sistem <em>runtime </em>yang berbasis pada sebagian kecil tipe data yang mewakili nilai numerik, Boolean, dan string. Javascript memiliki model objek berbasis prototipe ketimbang model objek berbasis kelas yang lebih umum. Model berbasis prototipe menyediakan <em>inheritance </em>dinamis; yaitu, apa yang diturunkan/diwariskan dapat berbeda pada setiap objek. Javascript juga mendukung fungsi tanpa persyaratan deklaratif khusus. Fungsi bisa berupa properti objek, yang dijalankan sebagai tipe metode yang longgar.</p>
<p>JavaScript merupakan bahasa dengan bentuk yang sangat bebas dibandingkan dengan Java. Anda tidak perlu mendeklarasikan semua variabel, kelas, dan metode. Anda tidak perlu khawatir apakah metode itu public, private, atau protected, dan Anda juga tidak perlu mengimplementasikan <em>interface</em>. Variabel, parameter, dan tipe kembalian fungsi juga tidak ditulis secara eksplisit.</p>
<p>Java merupakan bahasa berbasis kelas yang didesain untuk eksekusi yang cepat dan penulisan yang aman. Penulisan yang aman, misalnya, Anda tidak bisa mengubah integer Java menjadi referensi objek atau mengakses private memori dengan membobol <em>bytecode</em>. Model berbasis kelas Java bermaksud bahwa program secara eksklusif terdiri atas sejumlah kelas beserta metode-metodenya. Pewarisan kelas dan penulisan ketat milik Java umumnya membutuhkan hirarki objek yang juga sangat kekat. Syarat-syarat tersebut menjadikan pemrograman Java lebih kompleks ketimbang pemrograman Javascript.</p>
<p>Sebaliknya, JavaScript mewarisi inti dari baris bahasa yang bertipe dinamis dan lebih sederhana sepeti HyperTalk dan dBASE. Bahasa-bahasa scripting tersebut menawarkan fungsionalitas pemrograman ke pengguna yang lebih luas karena <em>syntax</em>-nya yang lebih mudah, berfokus pada fungsi <em>built-in</em>, dan persyaratan yang minimalis untuk membuat objek.</p>
<table class="standard-table">
<caption>JavaScript dibandingkan Java</caption>
<thead>
<tr>
<th scope="col">JavaScript</th>
<th scope="col">Java</th>
</tr>
</thead>
<tbody>
<tr>
<td>Berorientasi objek. Tak ada perbedaan antar tipe objek. <em>Inheritance/ </em>pewarisan melalui mekanisme prototipe, serta properti dan metode bisa ditambahkan kepada objek apapun secara dinamis.</td>
<td>Berbasis kelas. Objek dibagi ke dalam kelas dan instansi dengan semua pewarisan melalui hirarki kelas. Kelas dan instansi tidak dapat memiliki properti atau metode yang ditambahkan secara dinamis.</td>
</tr>
<tr>
<td>Tipe data variabel tidak dideklarasi (<em>dynamic typing</em>, <em>loosely typed</em>).</td>
<td>Tipe data variabel harus dideklarasi (<em>static-typing</em>, <em>strongly typed</em>).</td>
</tr>
<tr>
<td>Tidak bisa menulis ke hard disk secara otomatis.</td>
<td>Bisa menulis ke hard disk secara otomatis.</td>
</tr>
</tbody>
</table>
<p>Untuk informasi lebih lanjut perbedaan antara JavaScript dan Java, lihat bagian <a href="/id/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Detil dari model objek</a>.</p>
<h2 id="JavaScript_and_the_ECMAScript_Specification" name="JavaScript_and_the_ECMAScript_Specification">JavaScript dan spesifikasi ECMAScript</h2>
<p>Javascript distandarisasi melalui <a class="external" href="http://www.ecma-international.org/">Ecma International</a> — asosiasi Eropa yang men-standarisasi sistem informasi dan komunikasi (ECMA merupakan singkatan yang dari <em>European Computer Manufacturers Association</em>) yang mengurusi standarisasi bahasa pemrograman internasional berbasis JavaScript. Versi standarisasi JavaScript ini, yang disebut sebagai ECMAScript, akan berperilaku sama pada setiap aplikasi yang mengikutinya. Perusahaan-perusahaan dapat menggunakan bahasa standar terbuka untuk mengembangkan implementasi JavaScript mereka. Standar ECMAScript didokumentasikan dalam spesifikasi ECMA-262. Kunjungi <a href="/id/docs/Web/JavaScript/New_in_JavaScript">Terbaru di JavaScript</a> untuk mempelajari lebih lanjut tentang berbagai versi dari JavaScript dan spesifikasi edisi ECMAScript.</p>
<p>Standar ECMA-262 juga disetujui oleh <a class="external" href="http://www.iso.ch/">ISO</a> (International Organization for Standardization) sebagai ISO-16262. Anda juga dapat menemukan spesifikasinya di <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">website Ecma International</a>. Spesifikasi ECMAScript tidak memaparkan Document Object Model yang distandarisasi oleh <a class="external" href="http://www.w3.org/">World Wide Web Consortium (W3C)</a> bersama <a href="https://whatwg.org">WHATWG (Web Hypertext Application Technology Working Group)</a>. DOM mendefinisikan cara dimana dokumen objek HTML diekspos ke script Anda. Untuk mendapatkan pemahaman yang lebih baik tentang berbagai teknologi yang digunakan ketika memrogram menggunakan JavaScript, lihat artikel <a href="/id/docs/Web/JavaScript/JavaScript_technologies_overview">ikhtisar teknologi JavaScript</a>.</p>
<h3 id="JavaScript_Documentation_versus_the_ECMAScript_Specification" name="JavaScript_Documentation_versus_the_ECMAScript_Specification">Perbandingan dokumentasi JavaScript dengan spesifikasi ECMAScript</h3>
<p>Spesifikasi ECMAScript adalah seperangkat persyaratan untuk menerapkan ECMAScript; berguna jika Anda ingin menerapkan fitur bahasa yang sesuai standar dalam penerapan atau mesin ECMAScript Anda (seperti SpiderMonkey di Firefox, atau V8 di Chrome).</p>
<p>Dokumen ECMAScript tidak dimaksudkan untuk membantu <em>script programmer</em>; gunakanlah dokumentasi JavaScript untuk informasi dalam penulisan script.</p>
<p>Spesifikasi ECMAScript menggunakan terminologi dan <em>syntax </em>yang mungkin asing bagi programmer JavaScript. Meskpun deskripsi dari bahasa tersebut dapat berbeda dengan ECMAScript, bahasanya sendiri tetap sama. JavaScript mendukung semua fungsionalitas yang diuraikan dalam spesifikasi ECMAScript.</p>
<p>Dokumentasi JavaScript menggambarkan aspek bahasa yang sesuai bagi seorang programmer JavaScript.</p>
<h2 id="Memulai_Javascript">Memulai Javascript</h2>
<p>Memulai JavaScript itu mudah: semua yang dibutuhkan hanyalah Web browser modern untuk menjalankannya. Panduan ini mencakup beberapa fitur JavaScript yang hanya tersedia pada versi terakhir Firefox, sehingga disarankan untuk menggunakan Firefox versi terbaru.</p>
<p>Terdapat dua alat yang dipasang ke dalam Firefox yang berguna dalam bereksperimen dengan JavaScript: Web Console dan Scratchpad.</p>
<h3 id="Web_Console">Web Console</h3>
<p><a href="/id/docs/Tools/Web_Console">Web Consol / Konsol Web</a> memperlihatkan kepada Anda tentang informasi laman Web yang sedang di-load saat ini, dan juga mencakup <a href="/id/docs/Tools/Web_Console#The_command_line_interpreter">commandline / baris perintah</a> yang dapat Anda gunakan untuk mengeksekusi ekspresi JavaScript pada laman saat ini.</p>
<p>Untuk membuka Konsol Web, tekan (Ctrl + Shift + K) pada Windows dan Linux atau tekan (Cmd + Option + K) pada Mac, pilih "<em>Web Console</em>" dari menu "<em>Developer</em>", yang berada di bawah menu "<em>Tools</em>" di Firefox. Konsol akan muncul di bagian bawah jendela browser. Di bagian bawah konsol tersebut adalah command line yang dapat Anda gunakan untuk memasukkan JavaScript, dan outputnya akan muncul pada panel di atasnya.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/16569/2019-04-04_00-15-29.png" style="display: block; height: 1824px; margin-left: auto; margin-right: auto; width: 2784px;"> Konsol tersebut bekerja persis seperti eval: expresi terakhir yang dienter akan dikembalikan. Demi kesederhanaan, bisa dibayangkan jika setiap saat sesuatu dimasukkan ke dalam konsol, ia akan selalu dikelilingi oleh console.log sekitar eval seperti ini.</p>
<pre class="brush: js">function greetMe(yourName) {
alert('Hello ' + yourName);
}
<code>console.log(eval('3 + 5'));</code></pre>
<p> </p>
<h3 id="Scratchpad">Scratchpad</h3>
<p>Konsol Web bagus untuk menjalankan satu baris kode JavaScript, meskipun Anda juga dapat menjalankan banyak baris, tetap saja akan terasa kurang nyaman, dan Anda juga tidak bisa menyimpan sampel kode Anda menggunakan Konsol Web. Jadi untuk contoh yang lebih kompleks, <a href="/id/docs/Tools/Scratchpad">Scratchpad</a> adalah solusinya.</p>
<p>Untuk membuka Scratchpad tekan (Shift + F4), pilih "<em>Scratchpad</em>" dari menu "<em>Developer</em>", yang ada di bawah menu pada Firefox. Selanjutnya akan muncul di window yang terpisah dan merupakan editor yang dapat Anda gunakan untuk menulis dan menjalankan JavaScript di browser. Anda juga dapat menyimpan dan membuka kode dari disk.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/13468/scratchpad.png" style="display: block; height: 375px; margin-left: auto; margin-right: auto; width: 631px;"></p>
<h3 id="Hello_world">Hello world</h3>
<p>Untuk mulai menulis JavaScript, buka Scratchpad dan tulislah kode JavaScript "Hello world" pertama Anda:</p>
<pre class="brush: js">(function(){
"use strict";
/* Start of your code */
function greetMe(yourName) {
alert('Hello ' + yourName);
}
greetMe('World');
/* End of your code */
})();
</pre>
<p>Pilih kode diatas dan tekan Ctrl+R untuk melihatnya berjalan di browser Anda! Di laman-laman berikutnya, panduan ini akan memperkenalkan Anda dengan syntax dan fitur-fitur bahasa JavaScript, sehingga Anda dapat menulis aplikasi yang lebih kompleks. Tapi untuk saat ini, ingatlah untuk selalu memasukkan <code>(function(){"use strict";</code> sebelum kode Anda, dan tambahkan <code>})();</code> di akhir kode Anda. Anda akan mempelajari apa artinya itu, tetapi untuk sekarang mereka bisa dianggap melakukan:</p>
<ol>
<li>Meningkatkan performa secara masif</li>
<li>Mencegah semantik ceroboh dalam JavaScript yang menjatuhkan pemula</li>
<li>Mencegah <em>code snippets</em> yang dieksekusi dalam konsol untuk berinteraksi satu sama lain (misalnya sesuatu yang dibuat dalam suatu eksekusi konsol digunakan untuk eksekusi konsol yang lain).</li>
</ol>
<p>{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}</p>
|
