JavaScript Untuk Pemula
Diunggah oleh
RohiAbdullohJavaScript Untuk Pemula
Diunggah oleh
RohiAbdullohDaftar Isi
Daftar Isi....................................................................................................................................................... 2
1. Mengenal JavaScript............................................................................................................................. 4
a. Pengertian...................................................................................................................................................4
b. Meletakkan Skrip JavaScript.......................................................................................................................4
c. Mengatasi Error pada JavaScript...............................................................................................................6
d. Menampilkan Hasil Program......................................................................................................................7
e. Komentar....................................................................................................................................................8
2. Konsep Dasar JavaScript....................................................................................................................... 9
a. Variabel.......................................................................................................................................................9
b. Tipe Data...................................................................................................................................................10
c. Operator...................................................................................................................................................11
d. Statement Control....................................................................................................................................15
e. Continue dan Break..................................................................................................................................21
f. Function....................................................................................................................................................22
g. Event.........................................................................................................................................................23
h. Kotak Dialog.............................................................................................................................................24
i. Objek String..............................................................................................................................................25
j. Objek Math...............................................................................................................................................27
k. Objek Tanggal dan Waktu........................................................................................................................29
l. Array.........................................................................................................................................................30
3. Objek JavaScript................................................................................................................................. 33
a. Membuat dan Mengakses Objek..............................................................................................................33
b. Mengubah dan Menghapus Property......................................................................................................34
c. Berbagai Nilai Property............................................................................................................................35
4. Perintah setTimeout() dan setInterval().............................................................................................. 36
5. DOM JavaScript.................................................................................................................................. 38
6. BOM JavaScript.................................................................................................................................. 42
7. Storage............................................................................................................................................... 45
8. JSON................................................................................................................................................... 47
Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h | 2
9. AJAX................................................................................................................................................... 49
10. ECMA Script.................................................................................................................................... 51
a. Mengenal ECMAScript..............................................................................................................................51
b. ECMAScript 5 (ES5)...................................................................................................................................51
c. ECMAScript 6 (ES6)...................................................................................................................................55
3 | Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h
a. Mengenal JavaScript
b. Pengertian
JavaScript merupakan bahasa pemrograman web yang pemrosesan ya dilakukan di sisi client.
Karena berjalan di sisi client, JavaScript dapat dijalankan hanya dengan menggunakan
browser. Berbeda dengan PHP yang bekerja di sisi server, untuk menjalankan skrip
JavaScript tidak memerlukan refresh pada browser.
JavaScript biasanya dijalankan ketika ada event tertentu yang terjadi pada halaman web. Baik
event yang dilakukan oleh user, maupun event yang terjadi karena adanya perubahan pada
halaman website.
JavaScript mulai sangat populer sejak munculnya query sebagai salah satu library yang
memudahkan penggunaan JavaScript. Namun seiring munculnya library baru dan framework
baru dengan berbagai kelebihanya, popularitas jQuery mulai tergeser.
c. Meletakkan Skrip JavaScript
Ada berbagai cara meletakkan kode JavaScript pada dokumen HTML. Pembaca bebas
menggunakan cara yang paling sesuai dengan selera, namun biasanya disesuaikan dengan
kebutuhan atau keadaan. Berikut berbagai cara meletakkan kode Javasacript.
1. Menggunakan Event Handler (Inline)
Cara ini biasanya digunakan jika kode JavaScript hanya sedikit atau sekedar memanggil
function. Cara meletakkan kode JavaScript melalui cara ini yaitu dengan meletakkan kode
setelah attribut event pada tag HTML. Pada contoh skrip berikut, akan menampilkan kotak
pesan ketika dokumen baru dibuka dan ketika klik tombol.
File 1_b_1_inline.html
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <title>Inline</title>
5. </head>
6. <body onload="alert('Selamat Datang!')">
7. <button onclick="alert('Anda menekan tombol')">Klik di sini</button>
8. </body>
9. </html>
Hasilnya seperti gambar berikut:
Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h | 4
Gambar 1 . Hasil kode Inline JavaScript
2. Menggunakan Tag <script> (Internal)
Caranya yaitu dengan meletakkan kode JavaScript di dalam tag <script>…</script>. Tag ini
dapat diletakkan di dalam tag <head> maupun <body>. Cara ini biasanya digunakan jika
kode JavaScript terdiri dari beberapa baris tetapi tidak terlalu panjang. Biasanya
menggunakan atribut type="text/javascript" untuk membedakan dengan skrip dari bahasa
lain, tetapi tidak wajib.
File 1_b_2_internal.html
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <title>Internal</title>
5. <script type="text/javascript">
6. alert("Selamat Datang!");
7. </script>
8. </head>
9. <body>
10. <script>
11. document.write("Latihan JavaScript");
12. </script>
13. </body>
14. </html>
Hasilnya seperti gambar berikut:
Gambar 2 . Hasil kode Internal JavaScript
3. Menggunakan tag <script src=””> (Eksternal)
Caranya yaitu dengan memisahkan kode JavaScript dengan kode HTML. Kode JavaScript
disimpan dengan file tersendiri dengan format .js. File tersebut kemudian dipanggil dengan
5 | Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h
tag <script src="nama_file"> </script> pada bagian <head>. Cara ini biasanya digunakan
jika kode JavaScript sangat panjang. Pada skrip berikut kode JavaScript disimpan dengan
nama file 1_b_3_skrip.js dan dipanggil melalui file 1_b_3_eksternal.html.
File 1_b_3_skrip.js
1. function hallo(){
2. alert("Pesan ini dari file 1_b_3_skrip.js!");
3. }
File 1_b_3_eksternal.html
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <title>Eksternal</title>
5. <script src="1_b_3_skrip.js"></script>
6. </head>
7. <body>
8. <button onclick="hallo()">Klik ini</button>
9. </body>
10. </html>
Hasilnya seperti gambar berikut:
Gambar 3 . Hasil kode External JavaScript
d. Mengatasi Error pada JavaScript
Dalam menuliskan program pasti sering mengalami error pada program. Error pada
JavaScript tidak akan menampilkan pesan apapun pada halaman browser seperti PHP, jadi
akan sedikit menyulitkan bagi programmer. Tapi, tidak perlu khawatir, karena beberapa
browser menyediakan tool untuk mengatasi error pada JavaScript. Seperti pada browser
Google Chrome atau Microsoft Edge disediakan menu Developer Tool. Biasanya pesan error
pada program JavaScript akan tampil pada tab Console. Fitur ini dapat diakses dengan cara
klik kanan lalu pilih Inspect (inspeksi) atau tekan Ctrl+Shif+I.
Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h | 6
Gambar 4 . Mengakses Console Log
Pada gambar di atas, tampak pesan error berwarna merah pada bagian kanan browser.
e. Menampilkan Hasil Program
Ada berbagai cara menampilkan hasil program yang dibuat dengan JavaScript baik untuk
tujuan utama dibuatnya program maupun untuk menampilkan pesan kesalahan ketika terjadi
kesalahan pada program.
1. Menampilkan Hasil Program Dengan alert()
Cara ini digunakan yaitu dengan menampilkan hasil program melalui kotak pesan. Caranya
dengan meletakkan teks atau variabel di dalam tanda kurung fungsi alert(). Pada beberapa
contoh sebelumnya juga sudah ditunjukkan beberapa contoh menampilkan hasil program
melalui alert().
2. Menampilkan hasil program dengan write()
Cara ini dilakukan dengan menuliskan teks atau variabel di dalam tanda kurung skrip
document.write(). Hasil program yang ditampilkan dengan cara ini akan langsung tampil
pada halaman web.
3. Menampilkan hasil program di dalam tag HTML
Cara ini dilakukan dengan membuat tag container terlebih dahulu yang diberi atribut id
tertentu. Kemudian mendeteksi tag tersebut dengan method getElementById() dimana id
dituliskan di dalam kurung skrip tersebut. Untuk menampilkan hasil program, tuliskan teks
atau variabel setelah property innerHTML yang dipisahkan dengan tanda sama dengan.
Penggunaan cara ini harus disertai dengan penggunaan event onload.
4. Menampilkan hasil program dengan console log
Cara ini akan menampilkan hasil program pada tab console pada menu Development Tool.
Caranya yaitu dengan menggunakan skrip console.log(). Data atau variabel yang akan
ditampilkan ditulis di dalam kurung. Cara ini biasanya hanya untuk menampilkan informasi
selama proses pembuatan program.
Berikut ini contoh berbagai cara menampilkan data seperti yang telah disebutkan di atas:
File 1_d_menampilkan_data.html
1. <!DOCTYPE HTML>
7 | Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h
2. <html>
3. <head>
4. <script>
5. window.onload = function(){
6. alert('Selamat Datang');
7. document.getElementById('judul').innerHTML = "Mudahnya Belajar JavaScript"
;
8. console.log('Skrip sukses dieksekusi!');
9. }
10. </script>
11. </head>
12. <body>
13. <h2 id="judul"></h2v>
14. <script>
15. document.write('Dengan semangat belajar, aku pasti bisa.');
16. </script>
17. </body>
18. </html>
Hasil dari skrip di atas seperti gambar berikut:
Gambar 5 . Berbagai cara menampilkan data
f. Komentar
Komentar pada pemrograman merupakan teks yang tidak akan dieksekusi sebagai program.
Komentar biasanya untuk memberi keterangan pada skrip program. Cara menuliskan
komentar pada JavaScript yaitu dengan meletakkan tanda // sebelum komentar, jika komentar
hanya satu baris. Jika komentar lebih dari satu baris, maka komentar ditulis di antara tanda /*
dan */. Berikut ini contoh penulisan komentar:
File 1_e_komentar.html
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <script>
5. //Ini komentar satu baris
6.
7. /*
8. Ini komentar lebih dari satu baris
Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h | 8
9. komentar ini tidak akan dieksekusi sebagai program
10. */
11. </script>
12. </head>
13. <body>
14. </body>
15. </html>
g. Konsep Dasar JavaScript
a. Variabel
Variabel digunakan untuk menyimpan data berupa teks, angka, dan sebagainya yang nilainya
dapat diubah-ubah, sehingga memudahkan dalam mengakses data tersebut. Dalam penulisan
variabel, ada aturan yang harus dipatuhi agar tidak menghasilkan error pada program. Dalam
JavaScript, aturan penulisan variabel sebagai berikut:
Jangan menggunakan kata-kata yang menjadi kode JavaScript atau dikenal reserved
keyword. Contohnya: break, bolean, else, and, var, true, enum, switch, this, throw, long,
new, dan sebagainya.
Variabel tidak boleh diawali dengan angka atau simbol. Variabel harus diawali dengan
huruf atau underscore. Contoh: panjang, _tinggi, dan sebagainya. Sedangkan yang tidak
dibolehkan seperti: 7ingi, 4las, @las, dan sebagainya.
Variabel dalam JavaScript bersifat case-sensitive artinya huruf kecil dan huruf besar
dibedakan. Jadi, antara tinggi dan Tinggi adalah dua variabel yang berbeda.
Variabel pada JavaScript dideklarasikan dengan var. Contohnya sebagai berikut:
<script>
var panjang;
var tinggi;
</script>
Selain dengan cara di atas, dapat juga mendeklarasikan beberapa variabel sekaligus dengan
satu var. Misalnya sebagai berikut:
<script>
var panjang, tinggi;
</script>
Variabel juga dapat dideklarasikan dengan langsung mendefinisikan nilai awal. Misalnya
sebagai berikut:
<script>
var panjang = 200;
var tinggi = 150;
var kata = "JavaScript menyenangkan";
</script>
Pada JavaScript terdapat batasan dalam mengakses variabel atau yang disebut scope variable.
JavaScript mengenal variabel global dan variabel local. Variabel global merupakan variabel
yang dapat dipakai dimana saja baik di luar function maupun di dalam function. Sedangkan
variabel local yaitu variabel yang hanya dapat digunakan di dalam function. Variabel yang
dideklarasikan di luar function akan menjadi variabel global dan variabel yang
dideklarasikan di dalam function akan menjadi variabel local. Contohnya sebagai berikut:
9 | Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h
File 2_a_variabel.html
1. <!DOCTYPE HTML>
2. <html>
3. <head></head>
4. <body>
5. <script>
6. var a = "Selamat Datang!";
7. function selamat(){
8. var b = "Selamat pagi!";
9. document.write(a);
10. }
11. selamat();
12. document.write(b);
13. </script>
14. </body>
15. </html>
Hasilnya, hanya nilai variabel a yang ditampilkan seperti gambar berikut:
Gambar 6 . Penggunaan variabel
Pada gambar di atas, variabel a berhasil ditampilkan walaupun dideklarasikan di luar function
dan digunakan di dalam function. Ini namanya variabel global. Sedangkan variabel b tidak
tampil karena dideklarasikan di dalam function dan digunakan di luar function. Ini namanya
variabel local. Variabel local hanya dapat digunakan di dalam function dimana variabel
tersebut dideklarasikan dan tidak dapat digunakan di luar function atau di function lain.
b. Tipe Data
Setiap bahasa pemrograman pasti mengenal yang namanya tipe data. Tipe data pada
JavaScript sedikit berbeda dengan bahasa pemrograman lain. Tipe data pada JavaScript
bersifat seolah-olah sebagai objek. Sehingga setiap variabel pada JavaScript akan langsung
memiliki method.
JavaScript mengenal 3 tipe data dasar yaitu sebagai berikut:
Numbers : contoh 125, 20.50, dsb.
Strings : contoh "Hallo!", "200", dsb.
Boolean : hanya ada dua nilai yaitu True dan False.
Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h | 10
Selain tiga tipe di atas, JavaScript juga mengenal tipe data null dan undefined. Null
merupakan nilai dari sebuah variabel yang tidak diberi nilai saat didefinisikan. Sedangkan
undefined merupakan hasil yang didapat dari proses berikut:
Nilai dari pemanggilan variabel yang belum dideklarasikan.
Nilai dari pemanggilan elemen array yang tidak ada.
Nilai dari pemanggilan property objek yang tidak ada.
Nilai dari pemanggilan function yang tidak mengembalikan nilai.
Nilai dari parameter function yang tidak memiliki argumen.
Dapat disimpulkan bahwa perbedaan antara null dan undefined adalah bahwa null biasanya
diperoleh dari kondisi normal yang sudah direncanakan, sedangkan undefined biasanya
diperoleh dari kesalahan program yang tidak direncanakan.
c. Operator
Operator merupakan sebuah simbol atau kata yang digunakan untuk melakukan operasi
terhadap satu atau lebih data atau variabel sehingga menghasilkan data baru. Variabel atau
data yang dioperasikan disebut dengan operand. Javacript mengenal beberapa jenis operator
yaitu sebagai berikut:
1. Operator Aritmetika
Operator aritmetika merupakan operator yang digunakan untuk melakukan perhitungan data
numerik. Daftar operator aritmatika dan cara penggunaanya dapat dilihat pada tabel berikut:
Operator Keterangan
+ Untuk penjumlahan, misal A = 10 dan B = 4, maka:
A + B menghasilkan 14
- Untuk pengurangan, misal A = 10 dan B = 4, maka:
A - B menghasilkan 6
* Untuk perkalian, misal A = 10 dan B = 4, maka:
A * B menghasilkan 40
/ Untuk pembagian, misal A = 10 dan B = 4, maka:
A / B menghasilkan 2.5
% Untuk mendapatkan sisa pembagian (modulus), misal A = 10 dan B =
4, maka :
A % B menghasilkan 2
++ Berarti ditambah satu, misal A = 10, maka:
A++ menghasilkan 11
-- Berarti dikurangi satu, misal A = 10, maka:
A-- menghasilkan 9
11 | Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h
2. Operator Perbandingan
Operator perbandingan digunakan untuk membandingan dua variabel atau data. Hasil dari
perbandingan tersebut akan menghasilkan nilai true atau false. Daftar operator perbandingan
dan penjelasanya dapat dilihat pada table berikut:
Operator Keterangan
== Berarti sama dengan, misal A = 10 dan B = 4, maka:
(A == B) menghasilkan false
!= Berarti tidak sama dengan, misal A = 10 dan B = 4, maka:
(A != B) menghasilkan true.
> Berarti operand pertama lebih besar dari operand ke dua, misal A = 10
dan B = 4, maka:
(A > B) menghasilkan true
< Berarti operand pertama lebih kecil dari operand kedua, misal A = 10
dan B = 4, maka
(A < B) menghasilkan false
>= Berarti lebih besar atau sama dengan, misal A = 10 dan B = 4, maka:
(A >= B) menghasilkan true dan (10 >= A) juga menghasilkan true
<= Berarti lebih kecil atau sama dengan, misal A = 10 dan B = 4, maka:
(A <= B) menghasilkan false, sedangkan (10 <= A) menghasilkan true
3. Operator Logika
Operator logika digunakan untuk mengoperasikan data boolean. Hasil dari perbandingan
tersebut akan menghasilkan nilai true atau false. Daftar operator logika dan penjelasanya
dapat dilihat pada table berikut:
Operator Keterangan
&& Menghasilkan nilai true jika kedua operand bernilai true (logika And).
Misal A = true dan B = false, maka:
(A && B) menghasilkan false
|| Menghasilkan nilai true jika salah satu atau kedua operand bernilai true
(logika Or). Misal A = true dan B = false, maka:
(A || B) menghasilkan true
! Membalikan nilai sebuah variabel (logika Not). Misal A = true, maka:
(!A) menghasilkan false
4. Operator Bitwise
Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h | 12
Operator bitwise akan membandingkan nilai biner dua bilangan. Misalnya 2 akan dikonversi
ke biner menjadi 10 dan 3 akan dikonversi ke biner menjadi 11. Jika 2 dan 3 dibandingkan
dengan operator bitwise, maka yang dibandingkan adalah nilai biner-nya. Hasil dari operasi
berupa biner yang akan dikonversi lagi dan ditampilkan dalam bentuk desimal. Daftar
operator bitwise dan penjelasanya dapat dilihat pada table berikut:
Operator Keterangan
& Menghasilkan angka 1 jika kedua angka yang dibandingkan 1 dan
menghasilkan 0 jika salah satu atau kedua angka 0 (bitwise And).
Misal, A = 2 (binernya 10) dan B = 3 (binernya 11), maka:
(A & B) menghasilkan 2
Maksudnya: digit pertama 1 dan 1 menghasilkan 1, digit kedua 0 dan 1
menghasilkan 0. Jika digabungkan hasilnya 10 jika didesimalkan
menjadi 2.
| Menghasilkan angka 1 jika salah satu atau kedua angka yang
dibandingkan 1 dan menghasilkan 0 jika kedua angka 0 (bitwise Or).
Misal, A = 2 (binernya 10) dan B = 3 (binernya 11), maka:
(A | B) menghasilkan 3
^ Menghasilkan angka 1 jika salah satu angka yang dibandingkan 1 dan
menghasilkan 0 jika kedua angka 0 atau kedua angka 1 (bitwise Xor).
Misal, A = 2 (binernya 10) dan B = 3 (binernya 11), maka:
(A ^ B) menghasilkan 1
~ Membalikkan suatu angka yang 1 menjadi 0 dan yang 0 menjadi 1
(bitwise Not). Biasanya hasilnya lebih besar satu angka tapi bernilai
negatif. Misal, A = 3 (binernya 11) , maka:
(~A) menghasilkan -4
<< Menggeser ke kiri bit operand pertama sejumlah angka operand kedua
dan diisi dengan 0 (Left Shift). Misal A = 4 (binernya 100), maka:
(A<<2) menghasilkan 16 (binernya 10000)
>> Menggeser ke kanan bit operand pertama sejumlah angka operand
kedua (Right Shift). Misal A = 9 (binernya 1001), maka:
(A>>1) menghasilkan 4 (binernya 100)
>>> Hampir sama dengan >> hanya di sebelah kiri selalu 0.
5. Operator Assignment
Operator ini digunakan untuk memberikan nilai kepada suatu variabel menggunakan tanda
sama dengan. Daftar operator assignment dan penjelasanya dapat dilihat pada tabel berikut:
Operator Keterangan
= Memberi nilai pada suatu variabel dengan nilai, variabel lain atau hasil
perhitungan di sebelah kanan. Misal A = 3 dan B = 4, maka:
13 | Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h
C = A + B menghasilkan nilai C = 3 + 4 yaitu 7
+= Menambah nilai suatu variabel dengan nilai atau variabel lain. Misal A
= 3 dan B = 4, maka:
A += B artinya nilai A ditambah nilai B, sehingga nilai A menjadi 7
-= Mengurangi nilai suatu variabel dengan nilai atau variabel lain. Misal
A = 3 dan B = 4, maka:
B -= A artinya nilai B dikurangi nilai A, sehingga nilai B menjadi 1
*= Mengalikan nilai suatu variabel dengan nilai atau variabel lain. Misal A
= 3 dan B = 4, maka:
B *= A artinya nilai B dikalikan nilai A, sehingga nilai B menjadi 12
/= Membagikan nilai suatu variabel dengan nilai atau variabel lain. Misal
A = 12 dan B = 4, maka:
A /= B artinya nilai A dibagi nilai B, sehingga nilai A menjadi 3
%= Mengambil sisa bagi suatu variabel dengan nilai atau variabel lain.
Misal A = 12 dan B = 4, maka:
A %= B artinya nilai sisa bagi A dengan B, sehingga nilai A menjadi 0
6. Operator Kondisi
Operator ini digunakan untuk memberikan nilai pada suatu variabel sesuai kondisi yang
ditentukan. Jika kondisi true maka akan diberi nilai dengan nilai di sebelah kiri tanda titik
dua, sedangkan jika kondisi false maka akan diberi nilai dengan nilai di sebelah kanan tanda
titik dua. Kondisi diletakkan di dalam kurung diikuti dengan tanda ? yang memisahkan
dengan nilai.
Operator Keterangan
?…:… Tanda tanya memisahkan kondisi dengan nilai, sedangkan tanda titik
dua memisahkan nilai pertama dan nilai kedua. Nilai pertama dipakai
jika kondisi true dan nilai kedua dipakai jika kondisi false.
Berikut contoh beberapa penggunaan operator:
File 2_c_6_operator.html
1. <!DOCTYPE HTML>
2. <html>
3. <head></head>
4. <body>
5. <script>
6. var A = 10, B = 4;
7. var C = A % B;
8. document.write("10 % 4 = " + C + '<br>');
9.
10. A++;
11. document.write('Nilai A sekarang: ' + A + '<br>');
12.
13. var D = A > B;
14. document.write('10 > 4 hasilnya: ' + D + '<br>');
Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h | 14
15.
16. var E = false, F = true;
17. var G = E && F;
18. document.write('false && true hasilnya: ' + G + '<br>');
19.
20. var H = 5, I = 2;
21. var J = H << I;
22. document.write('5 << 2 hasilnya: ' + J + '<br>');
23.
24. A += B;
25. document.write('A += B hasilnya: ' + A + '<br>');
26.
27. var hasil = (A>B) ? "A Lebih Besar dari B" : "A Lebih Kecil dari B";
28. document.write(hasil);
29. </script>
30. </body>
31. </html>
Pada skrip di atas, masing-masing jenis operator diwakili oleh satu operator. Untuk mencoba
operator lain pada masing-masing jenis operator silakan bereksperimen sendiri. Hasil skrip di
atas seperti gambar berikut:
Gambar 7 . Hasil penggunaan operator
d. Statement Control
Statement control pada bahasa pemrograman digunakan untuk menjalankan suatu program
sesuai dengan kondisi tertentu. Ada berbagai jenis statement control pada JavaScript yang
dapat digunakan sesuai kebutuhan.
1. Percabangan dengan if
Percabangan ini digunakan untuk menjalankan suatu program jika kondisi terpenuhi (true)
dan jika kondisi tidak terpenuhi tidak ada alternatif lain untuk dijalankan. Penulisan kondisi
biasanya menggunakan variabel dengan tipe boolean atau menggunakan operator logika
yang akan menghasilkan tipe data boolean.
Penggunaan if dapat ditulis dengan format sebagai berikut:
if(kondisi) pernyataan;
Jika pernyataan lebih dari satu baris, cara di atas tidak dapat digunakan, tapi menggunakan
format berikut:
if(kondisi){
pernyataan baris pertama;
pernyataan baris kedua;
}
15 | Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h
Berikut ini contoh percabangan menggunakan if pada JavaScript:
File 2_d_1_percabangan_if.html
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <script>
5. var umur = 20;
6. var dewasa;
7.
8. if(umur > 17) dewasa = true;
9. if(umur > 20) document.write("Anda sudah boleh menikah");
10.
11. if(dewasa){
12. document.write("<br>Anda sudah bisa buat KTP");
13. document.write("<br>Anda sudah bisa buat SIM");
14. }
15. </script>
16. </head>
17. <body>
18. </body>
19. </html>
Silakan ubah nilai variabel umur untuk menampilkan hasil yang berbeda. Hasil dari skrip di
atas seperti gambar berikut:
Gambar 8 . Hasil percabangan dengan if
Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h | 16
2. Percabangan dengan if … else …
Percabangan ini digunakan untuk menjalankan program jika kondisi terpenuhi, dan jika
kondisi tidak terpenuhi ada alternatif untuk dijalankan. Cara menggunakanya yaitu dengan
format sebagai berikut:
if(kondisi) pernyataan jika terpenuhi;
else pernyataan jika tidak terpenuhi;
Jika pernyataan lebih dari satu baris, maka formatnya menjadi seperti berikut:
if(kondisi){
pernyataan jika terpenuhi;
}else{
pernyataan jika tidak terpenuhi;
}
Berikut ini contoh penggunaan percabangan dengan if …. else …. pada JavaScript:
File 2_d_2_percabaggan_if_else.html
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <script>
5. var angka = 20;
6. if(angka%2 == 0) document.write("Bilangan genap");
7. else document.write("Bilangan ganjil");
8. </script>
9. </head>
10. <body>
11. </body>
12. </html>
Silakan ubah nilai variabel angka untuk menampilkan hasil yang berbeda. Hasil dari perintah
di atas seperti gambar berikut:
Gambar 9 . Hasil percabangan dengan if…else…
3. Percabangan dengan if … else if … else …
Percabangan ini digunakan untuk menjalankan program jika kondisi terpenuhi, dan jika
kondisi tidak terpenuhi ada pengecekan kondisi berikutnya hingga tidak ada lagi kondisi
untuk dicek baru dijalankan alternatif terakhir. Cara menggunakanya yaitu dengan format
sebagai berikut:
if(kondisi){
pernyataan jika kondisi terpenuhi;
}else if(kondisi kedua){
pernyataan jika kondisi kedua terpenuhi;
}else if(kondisi ketiga){
17 | Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h
pernyataan jika kondisi ketiga terpenuhi;
}else{
pernyataan jika tidak ada kondisi terpenuhi;
}
Berikut ini contoh penggunaanya:
File 2_d_3_percabangan_if_elseif_else.html
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <title>Percabangan if ... else if ... else</title>
5. <script>
6. var nilai = 80;
7. if(nilai > 90) document.write("Sangat Baik");
8. else if(nilai > 75) document.write("Baik");
9. else if(nilai > 60) document.write("Cukup");
10. else document.write("Kurang");
11. </script>
12. </head>
13. <body>
14. </body>
15. </html>
Silakan ubah nilai variabel nilai untuk menampilkan hasil yang berbeda. Hasilnya seperti
gambar berikut:
Gambar 10 . Hasil percabangan dengan if…else if…else…
4. Percabangan dengan switch
Percabangan ini merupakan alternatif untuk menggantikan percabangan dengan if … else if
… else. Namun, jika variabel yang dicek sama, cara ini lebih disarankan daripada
menggunakan if … else if … else. Cara penggunaanya yaitu sebagai berikut:
switch (variabel){
case kondisi 1: pernyataan;
break;
case kondisi 2: pernyataan;
break;
case kondisi 3: pernyataan;
break;
default: pernyataan default;
}
Contoh penggunaanya, perhatikan pada skrip berikut:
File 2_d_4_ percabangan_switch.html
1. <!DOCTYPE HTML>
2. <html>
Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h | 18
3. <head>
4. <script>
5. var ukuran = "S";
6. switch(ukuran){
7. case "L": document.write("Large");
8. break;
9. case "M": document.write("Medium");
10. break;
11. default: document.write("Small");
12. }
13. </script>
14. </head>
15. <body>
16. </body>
17. </html>
Ubah nilai variabel ukuran dengan L atau M untuk menampilkan hasil yang berbeda.
Hasilnya seperti gambar berikut:
Gambar 11 . Hasil percabangan dengan switch
5. Perulangan dengan while
Perulangan ini digunakan untuk menjalankan program berulang-ulang selama kondisi yang
ditentukan terpenuhi. Cara penggunaanya yaitu sebagai berikut:
while(kondisi){
pernyataan;
}
Berikut contoh penggunaan perulangan dengan while:
2_d_5_perulangan_while.html
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <script>
5. var hitung = 0;
6. while(hitung < 10){
7. document.write("Hitungan ke: " + hitung + "<br>");
8. hitung++;
9. }
10. document.write("Hitungan terakhir: " + hitung + "<br>");
11. </script>
12. </head>
13. <body>
14. </body>
15. </html>
19 | Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h
Skrip di atas akan menghasilkan seperti gambar berikut:
Gambar 12 . Hasil perulangan dengan while
6. Perulangan dengan do … while
Statement control ini digunakan untuk menjalankan program secara berulang-ulang selama
kondisi yang ditentukan di akhir terpenuhi. Hampir sama dengan while, hanya kondisi ditulis
di akhir. Cara penggunaanya yaitu sebagai berikut:
do{
Pernyataan;
} while(kondisi);
Contoh penggunaanya dapat dilihat pada skrip berikut:
File 2_d_6_perulangan_do_while.html
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <script>
5. var hitung = 0;
6. do{
7. document.write("Hitungan ke: " + hitung + "<br>");
8. hitung++;
9. } while (hitung<10);
10. document.write("Hitungan mencapai " + hitung + "<br>");
11. </script>
12. </head>
13. <body>
14. </body>
15. </html>
Hasilnya sama dengan perulangan menggunakan while.
7. Perulangan dengan for
Perulangan ini digunakan untuk menjalankan program berulang-ulang dengan menentukan
nilai awal, nilai akhir, dan penambahan/pengurangan nilai. Cara penggunaanya sebagai
berikut:
for(inisialisasi counter; kondisi; increment/decrement counter){
pernyataan;
Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h | 20
}
Contoh penggunaanya seperti skrip berikut:
File 2_d_7_perulangan_for.html
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <script>
5. var hitung;
6. for(hitung=0; hitung<10; hitung++){
7. document.write("Hitungan ke: " + hitung + "<br>");
8. }
9. document.write("Hitungan mencapai " + hitung + "<br>");
10. </script>
11. </head>
12. <body>
13. </body>
14. </html>
Hasilnya sama dengan perulangan menggunakan while.
e. Continue dan Break
Continue digunakan untuk melewati suatu perulangan karena kondisi tertentu. Sedangkan
break digunakan untuk menghentikan paksa suatu perulangan sebelum kondisi perulangan
berakhir karena kondisi tertentu.
Contoh penggunaanya dapat diperhatikan pada skrip berikut:
File 2_e_continue_break.html
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <script>
5. var hitung = 0;
6. while(hitung<10){
7. hitung++;
8. if(hitung == 5) continue; //dilewati
9. if(hitung == 8) break; //berhenti
10. document.write("Hitungan ke: " + hitung + "<br>");
11. }
12. document.write("Hitungan berhenti");
13. </script>
14. </head>
15. <body>
16. </body>
17. </html>
Hasil dari skrip di atas seperti gambar berikut:
21 | Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h
Gambar 13 . Contoh penggunana continue dan break
Pada gambar di atas tampak tidak ada hitungan ke-5 dan pada hitungan ke-8 perulangan
dihentikan.
f. Function
Function merupakan blok program yang dapat digunakan secara berulang-ulang dengan
memanggil nama function. Function dapat mengembalikan sebuah nilai dengan perintah
return atau tanpa mengembalikan nilai. Pemanggilan function yang mengembalikan nilai
dapat digunakan sebagai nilai suatu variabel. Cara menulis function yaitu sebagai berikut:
function nama_fungsi(parameter1, parameter 2){
pernyataan;
return variabel;
}
Berikut ini contoh dari penggunaan function.
File 2_f_function.html
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <script>
5. function hitung_luas(p, l){
6. var L = p * l;
7. return L;
8. }
9.
10. function tampilkan_hasil(){
11. var teks = "Luas tanah " + hitung_luas(200, 150) + "m2";
12. document.write(teks);
13. }
14.
15. tampilkan_hasil();
16.
17. </script>
18. </head>
19. <body>
20. </body>
21. </html>
Pada skrip di atas, fungtion hitung_luas() mengembalikan nilai berupa hasil perhitungan
luas. Karena mengembalikan nilai, cara penggunaanya dapat diletakkan pada variabel, pada
skrip di atas pada variabel teks. Sedangkan function tampilkan_hasil() tidak mengembalikan
Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h | 22
nilai, sehingga untuk menggunakanya langsung pada baris tersendiri. Hasilnya seperti gambar
berikut:
Gambar 14 . Contoh penggunaan function
g. Event
Event merupakan suatu perlakuan yang dilakukan terhadap suatu elemen HTML. Ada
berbagai macam event yang dapat digunakan, yaitu sebagai berikut:
onblur, ketika suatu elemen tidak focus
onchange, ketika nilai suatu elemen diubah
onclick, ketika suatu elemen diklik
ondblclick, ketika suatu elemen didobelklik
onerror, ketika error
onfocus, ketika suatu elemen sedang fokus
onkeydown, ketika tombol huruf pada keyboard ditekan
onkeypress, ketika tombol keyboard ditekan
onkeyup, ketika tombol keyboard di lepas
onload, ketika dokumen di-load
onmousedown, ketika tombol mouse ditekan
onmousemove, ketika mouse digerakkan
onmouseout, ketika mouse keluar dari area suatu elemen
onmouseover, ketika mouse melewati area suatu elemen
onmouseup, ketika tombol mouse dilepas setelah diklik
onreset, ketika form direset
onresize, ketika elemen diubah ukuranya
onselect, ketika suatu elemen dipilih
onsubmit, ketika data form dikirim
onunload, ketika keluar dari suatu dokumen
Contoh penggunaanya dapat diperhatikan pada skrip berikut:
23 | Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h
File 2_g_event.html
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <script>
5. function tampilpesan(){
6. alert("Tombol didobelklik");
7. }
8. </script>
9. </head>
10. <body>
11. <button ondblclick="tampilpesan()">
12. Klik dan Dobelklik</button>
13. </body>
14. </html>
Coba jalankan, lalu dobel klik pada tombol, maka akan tampil alert seperti gambar berikut:
Gambar 15 . Contoh penggunaan event
Silakan untuk bereksperimen sendiri dengan mengubah ondblclick dengan event yang lain,
lalu lakukan event yang sesuai.
h. Kotak Dialog
Ada 3 macam kotak dialog pada JavaScript yaitu dengan function alert(), confirm(), dan
prompt(). Alert() digunakan untuk menampilkan pesan tertentu kepada pengguna. Confirm()
hampir sama dengan alert, tetapi terdapat 2 tombol yaitu Oke dan Batal, fungsinya untuk
meminta konfirmasi pada pengguna. Sedangkan prompt() digunakan untuk meminta masukan
data dari pengguna.
Contoh penggunaanya sebagai berikut:
File 2_h_kotak_dialog.html
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <title>Continue dan break</title>
5. <script>
6. alert("Selamat Datang");
7. confirm("Akan melanjutkan?");
8. prompt("Masukan Nama Kamu:", "Nama kamu di sini");
9. </script>
10. </head>
11. <body>
Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h | 24
12. </body>
13. </html>
Hasil untuk kotak dialog dengan confirm() dan prompt() seperti pada gambar berikut:
Gambar 16 . Hasil penggunaan comfirm()
Gambar 17 . Hasil penggunaan prompt()
i. Objek String
Seperti telah dijelaskan sebelumnya bahwa setiap variabel akan menjadi objek sehingga akan
otomatis memiliki property dan method. Untuk variabel dengan tipe data string memiliki
property dan method sebagai berikut:
Property / Method Keterangan
length Menghasilkan jumlah karakter dari suatu teks.
Menghasilkan link sama seperti menggunakan tag <a
anchor(nama)
name="nama">.
big() Menjadikan teks menjadi lebih besar karena diapit tag <big>.
blink() Menjadikan teks berkedip karena diapit tag <blink>.
bold() Menjadikan teks bercetak tebal karena diapit tag <b>.
Menjadikan teks berwarna karena diapit tag <font
fontcolor(warna)
color="warna">.
fontsize(ukuran) Mengubah ukuran teks karena diapit tag <font size="ukuran">.
italics() Menjadikan teks miring karena diapit tag <i>.
25 | Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h
link(url) Merubah teks menjadi link karena diapit tag <a href="url">.
small() Menjadikan teks kecil karena diapit tag <small>.
strike() Menjadikan teks tercoret karena diapit tag <strike>.
sub() Menjadikan teks subscript karena diapit tag <sub>.
sup() Menjadikan teks superscript karena diapit tag <sup>.
toLowerCase() Mengubah teks menjadi huruf kecil.
toUpperCase() Mengubah teks menjadi huruf besar.
charAt(x) Menghasilkan karakter pada posisi x pada string.
Menghasilkan nilai Unicode dari karakter pada posisi x pada
charCodeAt(x)
suatu string
concat(teks1, teks2, …) Menggabungkan dua atau lebih string menjadi satu.
fromCharCode(c1, c2, Menghasilkan string yang dibuat menggunakan urutan dari
….) Unicode.
indexOf(substr, mulai) Mencari dan menghasilkan nomor index.
Menghasilkan nilai unicode value dari karakter pada posisi x
charCodeAt(x)
pada suatu string.
concat(string1, string2,
Menggabungkan beberapa string yang ada di dalam kurung.
…)
fromCharCode(c1, c2, Menghasilkan string yang dibuat menggunakan urutan dari nilai
…) Unicode.
Menghasilkan nomor index dari karakter atau substring yang
indexOf(substr, start)
ada di dalam kurung.
match(regexp) Mencocokkan suatu string dengan pola regular expression.
replace(regexp,
Menukar suatu string berdasarkan pola regular expression.
replace_text)
Mengetes apakah string cocok dengan pola regular expression,
search(regexp)
jika cocok akan menghasilkan index dari yang cocok.
Menghasilkan substring dari suatu string dimulai dari parameter
slice(start, end)
pertama dan diakhiri parameter kedua.
Memecah string menjadi array berdasarkan tanda pemisah yang
split(delimiter, limit)
ditentukan.
Menghasilkan potongan dari suatu string yang dimulai dari
substr(start, length)
parameter pertama sebanyak parameter kedua.
trim() Menghilangkan spasi di sebelah kanan dan kiri string
Berikut contoh penggunaan dari beberapa method dan property di atas. Untuk contoh method
dan property yang lain silakan bereksperimen sendiri.
Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h | 26
File 2_i_string.html
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <title>Manipulasi string</title>
5. <script>
6. var teks = "Saya suka belajar JavaScript";
7. document.write(teks.fontcolor('red') + '<br>');
8. document.write(teks.toUpperCase() + '<br>');
9. document.write(teks.substr(10, 18));
10. </script>
11. </head>
12. <body>
13. </body>
14. </html>
Hasilnya seperti gambar berikut:
Gambar 18 . Contoh manipulasi objek string
j. Objek Math
Objek math digunakan untuk melakukan berbagai operasi matematika. Ada beberapa method
yang digunakan untuk melakukan operasi matematika, yaitu sebagai berikut:
Property / Method Keterangan
PI Menghasilkan nilai PI
Mengkonversi angka x menjadi absolut, sehingga yang
abs(x)
negatif menjadi positif
acos(x) Mendapatkan nilai acos dari x dalam radian
asin(x) Mendapatkan nilai asin dari x dalam radian
atan(x) Mendapatkan nilai atan dari x dalam radian
atan2(y, x) Mendapatkan nilai atan dari sebuah koordinat
Membulatkan bilangan decimal ke angka terdekat di
ceil(x)
atasnya.
cos(x) Mendapatkan nilai cos dari x dalam radian
27 | Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h
Membulatkan bilangan decimal ke angka terdekat di
floor(x)
bawahnya
log(x) Mendapatkan nilai log dari x
max(x, y, z, ..., n) Mendapatkan angka tertinggi di dalam kurung
min(x, y, z, ..., n) Mendapatkan nilai terendah di dalam kurung
pow(x, y) Mendapatkan nilai x pangkat y
random() Mendapatkan angka acak antara 0 dan 1
round(x) Membulatkan bilangan decimal ke angka terdekat
sin(x) Mendapatkan nilai sin dari x dalam radian
sqrt(x) Mendapatkan nilai akar kuadrat dari x
tan(x) Mendapatkan nilai tan dari x
Setiap penggunaan method dan peroperti di atas di awali dengan kata Math. Berikut ini
contoh penggunaan beberapa method di atas untuk melakukan operasi matematika:
File 2_j_operasi_matematika.html
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <title>Operasi Matematika</title>
5. <script>
6. document.write("Akar 81 = " + Math.sqrt(81));
7. document.write("<br>Nilai 5 pangkat 3 = " + Math.pow(5,3));
8. document.write("<br>5.23 dibulatkan menjadi " + Math.round(5.23));
9. </script>
10. </head>
11. <body>
12. </body>
13. </html>
Hasilnya seperti gambar berikut:
Gambar 19 . Contoh operasi matematika
Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h | 28
k. Objek Tanggal dan Waktu
Tanggal dan waktu juga merupakan objek yang memiliki property dan method. Ada berbagai
method untuk memanipulasi tanggal atau waktu. Untuk menggunakan method tersebut, harus
memanggil objek Date() terlebih dahulu seperti berikut:
var tanggal = new Date();
Selanjutnya method tersebut digunakan pada variabel tanggal. Adapun daftar method yang
bisa dipakai sebagai berikut:
Property / Method Keterangan
getDate() Menghasilkan tanggal dalam satu bulan.
getDay() Menghasilkan nama hari.
getHours() Menghasilkan jam dimulai dari 0 hingga 23
getMinutes() Menghasilkan menit.
getSeconds() Menghasilkan detik.
getMonth() Menghasilkan bulan dimulai dari 0 hingga 11
getFullYear() Menghasilkan tahun
getTime() Menghasilkan waktu yang lengkap.
Berikut ini contoh penggunaan beberapa method di atas untuk memanipulasi data tanggal dan
waktu:
File 2_k_tanggal_waktu.html
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <script>
5. var waktu = new Date();
6. document.write('Hari ini: ' + waktu.getDate() + '/'
+ waktu.getMonth() + '/' + waktu.getFullYear() );
7. </script>
8. </head>
9. <body>
10. </body>
11. </html>
Hasilnya seperti gambar berikut:
29 | Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h
Gambar 20 . Contoh manipulasi objek tanggal
Pada ECMAScript 5 dikenalkan method Date.now() yang menghasilkan angka mili dimulai
dari nol pada 1 Januari 1970 pukul 00:00.
l. Array
Array merupakan sebuah variabel yang dapat menampung beberapa data sekaligus yang
terindeks secara teratur. Untuk mendeklarasikan array ada beberapa cara yaitu sebagai
berikut:
Cara 1
var buah = new Array();
buah[0] = “Mangga”;
buah[1] = “Apel”;
buah[2] = “Jeruk”;
Cara 2
Var buah = new Array(“Mangga”, “Apel”, “Jeruk”);
Cara 3
Var buah = [“Mangga”, “Apel”, “Jeruk”];
Cara menggunakan array yaitu dengan menyebutkan nama variabel dan indeks yang
diletakkan di dalam kurung siku. Misalnya:
document.write(buah[1]);
Skrip di atas akan menghasilkan tulisan "Mangga", karena indeks dimulai dari 0.
Beberapa property dan method yang bisa digunakan untuk memanipulasi array yaitu sebagai
berikut:
Property /
Keterangan
Method
length Menghasilkan jumlah elemen dalam satu array
Digunakan untuk menggabungkan nilai array menjadi string yang
join(separator)
dipisahkan dengan tanda yang ditentukan.
Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h | 30
concat(array2,
Menggabungkan dua array atau lebih menjadi array baru.
array3, …)
pop() Menghapus elemen terakhir pada array.
push(item1, item2,
Menambahkan satu atau lebih elemen baru ke bagian akhir array.
…)
reverse() Membalik urutan elemen array.
shift() Menghapus elemen pertama dari suatu array
unshift(item1,
Menambahkan satu atau lebih elemen pada awal array.
item2, …)
sort() Mengurutkan elemen array.
splice(index,
Menghapus atau menambahkan item pada array.
length,
toString() Mengkoversi array ke string.
Berikut contoh manipulasi array dengan beberapa method di atas:
File 2_l_array.html
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <script>
5. var buah = ["Mangga", "Apel", "Jeruk"];
6. document.write(buah + '<br>');
7. buah.push("Melon");
8. document.write(buah + '<br>');
9. buah.reverse();
10. document.write(buah + '<br>');
11. </script>
12. </head>
13. <body>
14. </body>
15. </html>
Hasilnya seperti gambar berikut:
Gambar 21 . Hasil manipulasi array
31 | Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h
Sejak diperkenalkan ECMAScript 5 (ES5), objek array mendapat berbagai tambahan method
baru, seperti pada tabel berikut:
Property / Method Keterangan
Array.isArray(objek) Mengecek apakah sebuah objek merupakan array atau bukan
forEach(function) Memanggil sebuah function 1 kali untuk masin-masing anggota
array
map(function) Memanggil function untuk masing-masing anggota array dan
hasilnya mengubah nilai array
filter(function) Membuat array baru dari sebuah array dengan persyaratan yang
ditentukan pada function
reduce(function) Menghasilkan nilai tunggal dengan melakukan operasi pada
masin-masing anggota array
reduceRight(function) Memiliki fungsi sama dengan reduce(), tetapi operasi dilakukan
dari anggota paling kanan ke kiri
every(function) Mengecek apakah semua anggota array memiliki kriteria sesuai
persyaratan pada function
Mengecek akapakah beberapa anggota array memiliki kriteria
some(function)
sesuai persyaratan pada function
Mencari posisi sebuah nilai yang disebutkan pada tanda kurung
indexOf()
pada sebuah array
Memiliki fungsi sama dengan indexOf(), tetapi posisi dihitung
lastIndexOf()
dari anggota paling akhir
Berikut contoh penggunaan dari beberapa method di atas:
File 2_l_array_es5.html
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4.
5. <script>
6. var teks = "";
7. var angka = [2,3,4,5];
8. document.write("Cek Array: " + Array.isArray(angka));
9.
10. angka.forEach(function(val){
11. teks += "angka " + val + " ";
12. });
13. document.write("<br>Hasil forEach(): " + teks);
14.
15. angka.map(function(val){
16. return val * 2;
17. });
18. document.write("<br>Hasil map(): " + angka);
19.
20. var genap = angka.filter(function(val){
21. return val%2 == 0;
22. });
Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h | 32
23. document.write("<br>Hasil filter(): " + genap);
24.
25. var total = angka.reduce(function(t, val){
26. return t + val;
27. });
28. document.write("<br>Hasil reduce(): " + total);
29.
30. var semuagenap = angka.every(function(val){
31. return val%2 == 0;
32. });
33. document.write("<br>Hasil every(): " + semuagenap);
34. </script>
35.
36. </head>
37. <body>
38. </body>
39. </html>
Pada skrip di atas terdapat array angka yang diolah dengan berbagai method pada ES5,
hasilnya seperti gambar berikut:
Gambar 22 . Hasil manipulasi array dengan fitur baru ES5
m.Objek JavaScript
JavaScript menggunakan Protitype-based OOP (PBO), artinya objek pada JavaScript hanya
sebuah kumpulan nilai dan tidak dibuat menggukan class seperti pada bahasa pemrograman
yang lain. Property dari objek JavaScript dapat berisi tipe data dasar, juga dapat berisi array,
function atau objek. Jadi, memungkinkan adanya objek di dalam objek.
a. Membuat dan Mengakses Objek
Untuk membuat objek pada JavaScript sama dengan membuat variabel tetapi nilainya diawali
tanda { dan diakhiri tanda }. Masing-masing property dipisahkan dengan koma (,).
Sedangkan antara property dan nilainya dipisahkan titik dua (:).
Untuk mengakses objek property dari sebuah objek dapat dengan format objek[‘property’]
atau dengan format objek.property. Namun, lebih sering digunakan format yang kedua.
Berikut contoh skrip membuat dan mengakses objek.
File 3_a_membuat_objek.html
33 | Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <script>
5. komputer = {
6. so : 'Linux',
7. ram : 'DDR3 2 GB',
8. hardisk : '1T'
9. }
10.
11. document.write(komputer['ram'] + ' RAM, ');
12. document.write(komputer.hardisk + ' Hardisk');
13. </script>
14. </head>
15. <body></body>
16. </html>
Pada skrip di atas, membuat objek dengan nama komputer, di dalamnya terdapat 3 property
yaitu so, ram dan hardisk. Di bawahnya mencoba mengakses dengan 2 cara, hasilnya seperti
gambar berikut:
Gambar 23 . Membuat dan mengakses objek
b. Mengubah dan Menghapus Property
Property dari objek dapat diubah kapan pun dengan cara memberi nilai pada property
dipisahkan dengan sama dengan (=). Bahkan jika property yang diubah ternyata tidak ada,
property akan ditambahkan. Sedangkan untuk menghapus property dapat menggunakan
perintah delete. Contohnya seperti berikut:
File 3_b_mengubah_property.html
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <script>
5. komputer = {
6. so : 'Linux',
7. ram : 'DDR3 2 GB',
8. hardisk : '1T'
9. }
10.
11. komputer.ram = 'DDR4 4 GB';
12. document.write(komputer.ram + ' RAM, ');
13.
14. komputer.merk = 'Lenovo';
15. document.write('Merk ' + komputer.merk);
16.
Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h | 34
17. delete komputer.so;
18. document.write(', SO ' + komputer.so)
19. </script>
20. </head>
21. <body></body>
22. </html>
Pada skrip di atas mencoba mengubah property ram menjadi “DDR4 4 GB”. Kemudian
menambahkan property merk dengan nilai “Lenovo”. Terakhir menghapus property so,
sehingga ketika diakses akan menghasilkan Undefined. Hasilnya seperti gambar berikut:
Gambar 24 . Mengubah dan menghapus property
c. Berbagai Nilai Property
Seperti telah dijelaskan sebelumnya, nilai dari property selain menggunakan tipe data dasar
juga dapat diberi nilai array, function maupun objek. Untuk membuktikanya, buat saja skrip
berikut:
File 3_c_nilai_property.html
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <script>
5. komputer = {
6. so : 'Linux',
7. ram : 'DDR3 2 GB',
8. aplikasi : ['Ms. Word', 'Ms. Excel', 'Adobe Photoshop'],
9. hidup : function(){
10. var text = 'Komputer telah dihidupkan';
11. text.toUpperCase();
12. return text;
13. },
14. monitor: {
15. merk : 'Samsung',
16. ukuran : '21 in',
17. warna : 'putih'
18. }
19. }
20.
21. document.write('Aplikasi edit foto: ' + komputer.aplikasi[2]);
22. document.write('<br>' + komputer.hidup());
23. document.write('<br>Warna monitor: ' + komputer.monitor.warna);
24. </script>
35 | Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h
25. </head>
26. <body></body>
27. </html>
Pada skrip di atas ditambah property aplikasi dengan nilai berupa array, property hidup
dengan nilai berupa function dan property monitor dengan nilai berupa objek. Property
dengan nilai function disebut juga method. Pada bagian bawah ditunjukkan cara mengakses
property dari masing-masing nilai. Hasilnya seperti gambar berikut:
Gambar 25 . Contoh berbagai nilai property
d. Perintah setTimeout() dan setInterval()
Perintah setTimeout() digunakan untuk menjalankan suatu program setelah batas waktu
yang ditentukan dan hanya dijalankan 1 kali. Perintah ini biasanya disimpan dalam suatu
variabel sebagai identitas yang dapat digunakan untuk membatalkan program dengan perintah
clearTimeout(). Ketika perintah clearTimeout() dijalankan, maka program yang seharusnya
dijalankan pada batas waktu tertentu dengan setTimeout() tidak jadi dijalankan. Format
penggunaan setTimeout() seperti berikut:
variableId = setTimeout(expression, timeout);
VariableId adalah variabel yang menjadi identitas. Expression adalah function yang akan
menjalankan program. Sedangkan timeout adalah batas dijalankanya program dalam
milisecond, artinya 1000 berarti 1 detik.
Perintah setInterval() digunakan untuk menjalankan program berkali-kali dengan jarak
waktu tertentu. Perintah ini dapat digunakan untuk membuat animasi pada JavaScript.
Perintah ini juga biasa disimpan dalam suatu variabel yang dapat digunakan untuk
menghentikan program dengan perintah clearInterval(). Format penggunaan setInterval()
sebagai berikut:
variableId = setInterval(expression, timeout);
Sebagai contoh, perhatikan skrip berikut:
File 4_setInterval_setTimeOut.html
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <script>
5. var angka = 0;
6. var timer;
Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h | 36
7. var timeout;
8.
9. function jalankanTimer(){
10. timeout = setTimeout('setTimer()', 3000);
11. }
12.
13. function setTimer(){
14. timer = setInterval('tampilkanAngka()', 100);
15. }
16.
17. function tampilkanAngka(){
18. document.getElementById('timer').innerHTML = angka;
19. angka++;
20. }
21.
22. function hentikanTimer(){
23. clearInterval(timer);
24. }
25.
26. function hentikanTimeout(){
27. clearTimeout(timeout);
28. }
29.
30. </script>
31. </head>
32. <body>
33. <h1 id="timer">0</h1>
34. <button onclick="jalankanTimer()">Jalankan Timer</button>
35. <button onclick="hentikanTimer()">Hentikan Timer</button>
36. <button onclick="hentikanTimeout()">Hentikan Timeout</button>
37. </body>
38. </html>
Skrip di atas terdiri dari 5 function. Function pertama yaitu jalankanTimer() dijalankan
ketika tombol Jalankan Timer diklik. Karena pada function tersebut menggunakan perintah
setTimeout() dengan durasi 3000 milisecond, maka program dijalankan setelah 3 detik.
Program yang dijalankan yaitu function setTimer() yang menggunakan perintah
setInterval() dengan durasi 200 milisecond untuk menjalankan perintah function
tampilkanAngka(). Function ini akan menampilkan angka kemudian menaikkan nilai angka.
Dengan demikian ketika tombol Jalankan Timer diklik, 3 detik kemudian angka akan
ditampilkan dan meningkat terus menerus dengan interval 200 milisecond. Tombol Hentikan
Timer akan menjalankan function hentikanTimer() yang digunakan untuk menghentikan
timer. Sedangkan tombol Hentikan Timeout akan menjalankan function hentikanTimeout()
yaitu membatalkan perintah setTimeout pada function jalankanTimer(). Hasilnya seperti
gambar berikut:
37 | Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h
Gambar 26 . Contoh perintah setInterval() dan setTimeout()
e. DOM JavaScript
DOM merupakan singkatan dari Document Object Model, yaitu model objek dari sebuah
dokumen HTML yang dapat dimanfaatkan oleh JavaScript untuk mengolah dokumen HTML.
Dengan memanfaatkan DOM, JavaScript dapat melakukan berbagai macam tindakan
terhadap dokumen HTML.
1. Menemukan Elemen
Untuk menemukan elemen HTML, ada berbagai cara yang dapat dilakukan oleh JavaScript,
diantaranya sebagai berikut:
Property / Method Keterangan
document.getElementById(id) Menemukan elemen dengan id
document.getElementsByTagName(na
Menemukan beberapa elemen dengan nama tag
me)
document.getElementsByClassName(na Menemukan beberapa elemen dengan nama
me) class
document.querySelectorAll(selector) Menemukan elemen dengan selector CSS
Perlu diperhatikan untuk getElementById() tidak menggunakan s pada kata element karena
atribut id hanya dapat digunakan oleh 1 elemen. Sedangkan yang lainya menggunakan s dan
data elemen yang dihasilkan berupa data array. Untuk memilih salah satu elemen yang
dihasilkan dapat menggunakan index layaknya menggunakan array.
2. Mengubah Elemen
Setelah menemukan elemen, selanjutnya elemen dapat diubah dengan menggunakan methode
dan property berikut:
Property / Method Keterangan
element.innerHTML = “konten” Mengubah konten suatu elemen dengan konten
yang baru
element.nama_atribut = “nilai
Mengubah nilai atribut dari sebuah elemen.
atribut”
element.style.property_css = nilai
Mengubah style CSS suatu elemen.
property
element.setAttribute(nama_atribut,
Mengubah nilai atribut
nilai)
Kata element pada kolom method mengacu pada elemen yang dihasilkan setelah menemukan
elemen. Biasanya berupa variabel yang menyimpan data elemen.
Nama atribut pada baris kedua dapat diganti dengan atribut yang ingin diubah, misalnya: title,
align, src, dan sebagainya. Sedangkan property css pada baris ketiga diganti dengan nama
property css yang ingin diubah, tetapi tidak menggunakan penghubung ”-” melainkan kata
Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h | 38
kedua diawali huruf besar, jika nama property lebih dari satu kata, misanya: fontFamily,
textAlign, marginLeft, dan sebagainya.
3. Menambahkan dan Menghapus Elemen
Selain mengubah elemen, dapat juga menambah atau menghapus elemen. Methode yang
digunakan yaitu:
Property / Method Keterangan
document.createElement(element) Membuat elemen baru
document.removeChild(element) Menghapus elemen
document.appendChild(element) Menambahkan elemen HTML
document.replaceChild(kata baru, kata
Mengubah sebuah kata dalam satu elemen
lama)
document.write(text) Menuliskan teks pada dokumen HTML
4. Navigasi Elemen
Sebuah dokumen HTML tersusun secara hirarki. Elemen yang berada di level paling atas
disebut root. Setiap elemen pasti mempunyai induk elemen, kecuali root. Beberapa elemen
kadang memiliki induk yang sama. Hubungan antara elemen yang memiliki induk sama
disebut sibling.
Yang dimaksud dengan navigasi elemen yaitu memilih elemen lain dalam hubunganya
dengan hirarki elemen berdasarkan elemen yang telah ditemukan. Beberapa property yang
dapat digunakan untuk navigasi elemen yaitu:
Property Keterangan
parentNode Mendapatkan elemen induk
childNodes[urutan] Mendapatkan elemen yang menginduk. Urutan diisi nomor urut
elemen dimulai dari nol.
firstChild Mendapatkan elemen urutan pertama yang menginduk
lastChild Mendapatkan elemen urutan terakhir yang menginduk
nextSibling Mendapatkan elemen setelahnya
previousSibling Mendapatkan elemen sebelumnya
5. Menangani Event
Untuk menangani event dapat menggunakan atribut event HTML, seperti: onclick,
onmouseover, onkeydown, dan sebagainya. Selain itu, event juga dapat ditambahkan dengan
method .addEventListener(”click”, nama_function). Kata nama_function diganti dengan
39 | Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h
function yang dijalankan ketika event dilakukan. Event yang dibuat dengan method ini dapat
dihapus dengan method .removeEventListener().
6. Menangani Objek HTML
Selain menangani elemen, DOM juga dapat menangani objek HTML yang terdiri dari
property-property berikut:
Property Keterangan
document.anchors Menemukan semua elemen <a> yang memiliki atribut
name
document.baseURI Mendapatkan URI absolut dari dokumen
document.body Menemukan elemen <body>
document.cookie Mendapatkan cookie dokumen
document.doctype Mendapatkan doctype dokumen
document.documentElement Menemukan elemen <html>
document.documentMode Mendapatkan mode yang digunakan oleh browser
document.documentURI Mendapatkan URI dokumen
document.domain Mendapatkan nama domain dokumen pada server
document.domConfig Mendapatkan konfigurasi DOM
document.embeds Menemukan semua elemen <embed>
document.forms Menemukan semua elemen <form>
document.head Menemukan semua eleman <head>
document.images Menemukan semua elemen <img>
document.implementation Mendapatkan implementasi DOM
document.inputEncoding Mendapatkan encoding karakter yang digunakan
document.lastModified Mendapakan waktu terakhir dokumen dimodifikasi
document.links Menemukan semua elemen <area> and <a> yang
memiliki atribut href
document.readyState Mendapatakan status loading dokumen
document.referrer Mendapatkan referrer dari URI
document.scripts Menemukan semua elemen <script>
document.title Menemukan elemen <title>
Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h | 40
document.URL Mendapatkan URL lengkap dokumen
Berikut contoh penggunaan DOM pada JavaScript dalam mengolah dokumen HTML:
File 5_dom.html
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. </head>
5. <body>
6. <h2 id="judul"></h2>
7. <p class="paragraf">Tombol akan menghilang jika diklik </p>
8. <script>
9. var judul = document.getElementById("judul");
10. judul.innerHTML = "Penggunaan DOM pada JavaScript";
11. judul.title = "Atribut title telah diubah";
12. judul.style.textTransform = "uppercase";
13. judul.style.color = "red";
14.
15. var paragraf = document.getElementsByClassName("paragraf");
16. var tombol = document.createElement("button");
17. tombol.innerHTML = "Hapus";
18. tombol.addEventListener("click", hapus);
19. paragraf[0].appendChild(tombol);
20.
21. function hapus(){
22. paragraf[0].removeChild(tombol);
23. }
24. </script>
25. </body>
26. </html>
Agar skrip DOM dapat berjalan, tuliskan skrip di bawah dokumen HTML. Pada skrip di atas
ada 2 elemen yaitu <h1> dan <p>. Elemen <h1> dipilih dengan method getElementById(),
kemudian ditambahkan teks di dalmnya dan diatur style-nya dengan property style diikuti
property CSS.
Elemen <p> dipilih dengan method getElementsByClassName(), sehingga menghasilkan
data array. Karena berupa array, untuk modifikasi elemen tersebut dengan menyebut
indexnya seperti pada skrip di atas ditulis paragraf[0]. Selanjutnya di dalam paragraf
ditambah tombol dengan method createElement() dan appendChild(), dan dikasih tulisan
Hapus. Kemudian tombol tersebut ditambahkan event klik yang ditangani oleh function
hapus() untuk meghapus kembali tombol. Hasilnya seperti pada gamber berikut:
41 | Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h
Gambar 27 . Contoh penggunaan DOM
f. BOM JavaScript
BOM merupakan singkatan dari Browser Object Model, yaitu model objek dari browser yang
dapat dimanfaatkan oleh JavaScript manipulasi fitur-fitur pada browser. Berbagai objek
beserta method dan property yang termasuk dalam BOM diantaranya:
Property / Method Keterangan
window.open() Membuka jendela baru
window.close() Menutup jendele browser
window.moveTo() Memindahkan jendela browser
window.resizeTo() Mengubah ukuran jendela browser
window.print() Mencetak halaman yang dibuka
window.innerWidth Mendapatkan lebar bagian dalam browser tidak termasuk
scrollbar
window.innerHeight Mendapatkan tinggi bagian dalam browser tidak termasuk
toolbar dan scrollbar
screen.width Mendapatkan lebar layar
screen.height Mendapatkan tinggi layar
screen.awailwidth Mendapatkan lebar layar tanpa fitur interface seperti taskbar
screen.availHeight Mendapatkan tinggi layar tanap fitur interface
screen.colorDepth Mendapatkan nomor bit yang digunakan untuk menampilkan
warna, biasanya 24 bit atau 32 bit
location.href Mendapatkan nilai URL dari halaman aktif
location.hostname Mendapatkan nama domain dari web host
location.pathname Mendapatkan nama path dan nama file dari halaman aktif
location.protocol Mendapatkan protocol web yang digunakan apakah http: atau
https:
Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h | 42
location.port Mendapatkan nomor port yang digunakan
location.assign() Load sebuah dokumen baru
history.back() Menuju ke halaman yang dibuka sebelumnya atau seperti
menekan tombol back
history.forward() Menuju ke halaman yang dibuka setelahnya
navigator.appName Mendapatkan nama aplikasi browser yang digunakan
navigator.appCodeName Mendapatkan code name aplikasi browser
navigator.platform Mendapatkan nama sistem operasi yang digunakan.
navigator.onLine Mendapatkan status online browser dengan hasil true atau
false
Objek yang tidak diawali dengan kata window sebenarnya juga termasuk property window,
namun dapat ditulis dengan menghilangkan awalan window. Jadi, untuk location.href
misalnya dapat ditulis dengan window.location.href atau location.href. Begitu juga dengan
objek yang lainya.
Method yang paling sering digunakan biasanya yaitu window.open(). Method ini memiliki
beberapa parameter yang dapat diberikan dan harus dipahami dengan baik. Berikut parameter
yang dapat diberikan:
Parameter Keterangan
URL Optional. URL yang akan ditampilkan pada jendela baru. Jika
tidak ditentukan maka jendela baru akan kosong.
name Optional. Menentukan atribut target atau nama jendela yang
dibuka. Berikut nilai yang didukung:
_blank – URL dibuka pada jendela baru atau tab baru. Ini
merupakan nilai default.
_parent – URL di buka pada parent frame.
_self - URL akan menggantikan halaman saat ini.
_top - URL akan menggantikan semua frameset yang mungkin
dimuat
name – Jika diisi tulisan bebas, aka akan menjadi nama identitas
dari jendela yang dibuka
specs Optional. Menentukan pengaturan jendela baru dengan
dipisahkan oleh koma tanpa spasi. Berikut nilai yang didukung:
height=…. – Menentukan tinggi jendela dalam pixel,
minimal 100.
width=…. – Menentukan lebar jendela dalam pixel, minimal
100.
left=…. – Menenetukan jarak posisi jendela sebelah kiri.
43 | Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h
top=…. – Menentukan jarak posisi jendela sebelah atas.
location=yes|no|1|0 – Menampilkan address bar atau tidak.
Hanya untuk Opera.
menubar=yes|no|1|0 – Menampilkan menu bar atau tidak.
scrollbar=yes|no|1|0 – Menampilkan scroll bar atau tidak.
status=yes|no|1|0 – Menampilkan status bar atau tidak.
toolbar=yes|no|1|0 – Menampilkan tool bar atau tidak.
titlebar=yes|no|1|0 – Menampilkan title bar atau tidak.
Pengaturan ini kadang diabaikan kecuali aplikasi pemanggil
adalah aplikasi HTML atau kotak dialog tepercaya.
resizeable=yes|no|1|0 – Menentukan jendela baru dapat
diubah ukuranya atau tidak.
replace Optional. Menentukan URL yang dibuka menggantikan URL
saat ini pada daftar history atau tidak. Dapat diisi true atau false.
Sebagai contoh penggunaan BOM, berikut ada dua file di mana file kedua akan dibuka
melalui file pertama:
File 6_1_bom.html
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. </head>
5. <body>
6. <button onclick="bukaJendela()">Buka Jendela</button>
7. <script>
8.
9. function bukaJendela(){
10. window.open("6_2_jendela_baru.html", "Jendela Baru",
11. "width=300,height=150,left=100,top=150,menubar=no,
12. resizeable=no");
13. }
14.
15. </script>
16. </body>
17. </html>
Pada skrip di atas terdapat sebuah tombol untuk membuka jendela baru dengan method
window.open() dengan berbagai pengaturan. Selanjutnya dibuat file kedua yang akan dibuka
pada jendela baru dengan skrip seperti berikut:
File 6_2_jendela_baru.html
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. </head>
5. <body>
6. <button onclick="window.close()">Tutup Jendela</button>
7. <button onclick="window.print()">Cetak</button>
Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h | 44
8. <script>
9.
10. document.write("<br>Nama browser: " + navigator.appName);
11. document.write("<br>Nama OS: " + navigator.platform);
12. document.write("<br>Lebar Jendela: " + window.innerWidth);
13. document.write("<br>Tinggi Jendela: " + window.innerHeight);
14. document.write("<br>Lebar Layar: " + screen.width);
15.
16. </script>
17. </body>
18. </html>
Pada skrip di atas terdapat tombol untuk menutup jendela, tombol untuk mencetak halaman
dan beberapa tulisan yang berisi informasi tentang browser, OS dan informasi layar. Jika
dijalankan, hasilnya sebagai berikut:
Gambar 28 . Contoh penggunaan BOM
g. Storage
Ada dua jenis penyimpanan yaitu localStorage dan sessionStorage. LocalStorage digunakan
untuk menyimpan data pada browser dan data akan tetap tersimpan walaupun browser ditutup
atau komputer dimatikan sekalipun. Sedangkan sessionStorage digunakan untuk menyimpan
data pada browser hanya pada satu sesi dan data akan dihapus ketika browser ditutup.
Property dan method yang digunakan pada localStorage dan sessionStorage yaitu:
45 | Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h
Property / Method Keterangan
key(n) Mendapatkan nama key atau nama data urutan ke-n pada
penyimpanan dimulai dari 0.
length Mendapatkan jumlah item data yang disimpan pada
storage
getItem(nama_key) Mendapatkan data dari storage dengan nama yang
disebutkan
setItem(nama_key, Menyimpan data ke storage
data_disimpan)
removeItem(nama_key) Menghapus data pada storage dengan nama yang
disebutkan
clear() Mengosongkan semua data tersimpan pada storage
Berikut contoh penggunaan localStorage dan sessionStorage:
File 7_storage.html
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. </head>
5. <body>
6. <button onclick="simpanTerus()">Simpan Terus</button>
7. <button onclick="simpanSementara()">Simpan Sementara</button>
8. <h4 id="terus"></h4>
9. <h4 id="sementara"></h4>
10.
11. <script>
12.
13. function simpanTerus(){
14. localStorage.setItem("terus", "Ini akan tetap tersimpan ketika browser ditutup");
15. tampilData();
16. }
17.
18. function simpanSementara(){
19. sessionStorage.setItem("sementara", "Ini akan hilang ketika browser ditutup");
20. tampilData();
21. }
22.
23. tampilData();
24. function tampilData(){
25. var ls = localStorage.getItem("terus");
26. document.getElementById("terus").innerHTML = ls;
27.
28. var ss = sessionStorage.getItem("sementara");
29. document.getElementById("sementara").innerHTML = ss;
30. }
31. </script>
32.
33. </body>
34. </html>
Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h | 46
Pada skrip di atas terdapat 2 tombol, satunya untuk menyimpan data ke localStorage ketika
diklik dan satunya untuk menyimpan data pada sesssionStorage. Selanjutnya, masing-masing
data akan ditampilkan pada halaman browser. Setelah browser ditutup dan dibuka lagi, data
yang disimpan pada localStorage akan tetap tampil, sedangkan yang disimpan pada
sessionStorage tidak tampil karena datanya telah dihapus, seperti terlihat pada gambar
berikut:
Gambar 29 . Contoh penggunaan storage
h. JSON
JSON adalah singkatan dari JavaScript Object Notation, yaitu format format data yang
digunakan untuk keperluan penyimpanan dan pertukaran data. Dalam bidang web, JSON
biasanya digunakan untuk mengambil data dari server atau mengirim data ke server. Secara
fungsinya JSON sama dengan XML, tapi JSON lebih cepat dan lebih mudah dibaca. Karena
kelebihanya ini, JSON lebih sering digunakan daripada XML sebagai pendahulunya.
Format sintaks JSON hampir mirip dengan objek pada JavaScript, tetapi key pada JSON
harus berupa string. Contohnya sebagai berikut:
{ "nama" : "Faqih Mumtaz" }
Dari skrip di atas, dapat dilihat bahwa pada dasarnya JSON berupa pasangan key dan value.
Value pada JSON dapat berupa salah satu dari tipe data berikut:
String
Number
Object
Array
Boolean
Null
Sedangkan tipe data yang tidak dapat menjadi value pada JSON yaitu sebagai berikut:
Function
Date
Undefined
Ketika JSON digunakan sebagai pertukaran data dari atau ke server, data harus berupa string.
JaveScript memiliki method khusus untuk menangani hal tersebut, yaitu:
47 | Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h
JSON.stringify(), digunakan untuk mengkonversi objek JavaScript menjadi string yang
menggunakan notasi JSON.
JSON.parse(), digunakan untuk mengkonversi string dengan notasi JSON menjadi objek
JavaScript.
Berikut contoh penggunaan dari kedua method tersebut.
File 8_json.html
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. </head>
5. <body>
6. <script>
7.
8. var data = { nama : 'Faqih', umur: '2 Tahun', kota: 'Tegal'};
9. document.write(JSON.stringify(data));
10.
11. var teks = '{"nama":"Daffa","umur":"5 Tahun","kota":"Tegal"}';
12.
13. var biodata = JSON.parse(teks);
14. document.write("<br>Nama: " + biodata.nama);
15. document.write("<br>Umur: " + biodata.umur);
16. document.write("<br>Kota: " + biodata.kota);
17.
18. </script>
19. </body>
20. </html>
Pada skrip di atas, variabel data meruapakan objek, kemudian ditampilkan dengan
mengkonversinya menjadi string. Selanjutnya, variabel teks merupakan string yang
menggunakan aturan penulisan JSON. Kemudian dikonversi menjadi objek dengan nama
variabel biodata. Untuk menampilkanya tentu dengan mengakses property dari objek
tersebut yaitu dengan menyebutkan nama objek diikuti titik dan nama property, seperti
biodata.nama. Jika dijalankan hasilnya seperti gambar berikut:
Gambar 30 . Contoh penanganan JSON
i. AJAX
Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h | 48
AJAX adalah singkatan dari Asyncronous JavaScript and XML, yaitu sebuah teknik untuk
mengirimkan request ke server tanpa melakukan reload halaman. Jika pada web tanpa AJAX,
untuk mengubah tampilan pada konten halaman tentu harus load ulang seluruh halaman.
Dengan AJAX, maka tidak perlu seluruh konten halaman yang di-load, hanya pada bagian
yang tertentu saja yang melakukan refresh.
Sebagian besar framework maupun library JavaScript biasanya menyediakan cara khusus
untuk melakukan AJAX yang biasanya lebih simpel dan lebih mudah dipahami daripada cara
aslinya. Oleh karena itu, penggunaan AJAX lebih disarankan menggunakan cara yang
disediakan framwork atau library yang digunakan. Pembahasan AJAX di sini sifatnya hanya
sebagai pengetahuan saja agar memahami konsep AJAX.
Berikut beberapa method dan property yang digunakan untuk melakukan proses AJAX.
Property / Method Keterangan
new XMLHttpRequest() Membuat objek XMLHttpRequest baru
abort() Membatalkan request yang sedang berjalan
getAllResponseHeaders() Mendapatkan semua informasi header
getResponseHeader() Mendapatkan informasi header lebih spesifik
open(method, url, async, Melakukan request dengan parameter sebagai berikut:
user, psw) method: tipe request GET atau POST
url: lokasi file
async: menggunakan asynchronous atau synchronous
user: nama user
psw: password
send() Mengirim request ke server. Jika menggunakan method
POST, dalam kurung diisi string yang dikirimkan.
setRequestHeader() Menambahkan label header to be dikirim
onreadystatechange Menentukan function untuk dipanggil ketika property
readyState berubah
readyState Menyimpan status dari XMLHttpRequest. Arti dari status
tersebut yaitu:
0: request tidak diinisialisasi
1: koneksi server dibuat
2: request diterima
3: memproses request
4: request selesai and response telah siap
responseText Mendapatkan data hasil respons dalam bentuk string.
responseXML Mendapatkan data hasil respons dalam bentuk file XML
status Mendapatkan status-number dari request
200: "OK"
403: "Forbidden"
49 | Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h
404: "Not Found"
statusText Mendapatkan teks status (misal "OK" atau"Not Found")
Berikut contoh skrip AJAX untuk mendapatkan data dari server dengan PHP:
File 9_ajax.html
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. </head>
5. <body>
6.
7. <p><b>Ketikan nama pada kotak input berikut:</b></p>
8.
9. <form>
10. Nama: <input type="text" onkeyup="tampilkanSaran(this.value)">
11. </form>
12. <p>Saran: <span id="saran"></span></p>
13.
14. <script>
15. function tampilkanSaran(str){
16. if (str.length == 0) {
17. document.getElementById("saran").innerHTML = "";
18. return;
19. } else {
20. var http = new XMLHttpRequest();
21. http.onreadystatechange = function() {
22. if (this.readyState == 4 && this.status == 200) {
23. document.getElementById("saran").innerHTML = this.responseText;
24. }
25. };
26. http.open("GET", "http://localhost/ajax/9_ajax.php?q=" + str, true);
27. http.send();
28. }
29. }
30. </script>
31.
32. </body>
33. </html>
Pada skrip di atas terdapat sebuah input, dimana ketika mengetikan sesuatu maka akan
mengirimkan request ke server dan memberikan saran sesuai data yang terdapat pada server.
Untuk skrip pada sisi servernya dapat dibuat menggunakan PHP sebagai berikut:
File ajax/9_ajax.php
1. <?php
2. header('Access-Control-Allow-Origin: *');
3.
4. $nama = ["Ana", "Andi", "Budi", "Beni", "Dodi", "Daffa", "Faqih", "Hafiz", "Nabil", "N
anda", "Latif", "Sifa"];
5. $q = $_REQUEST["q"];
6. $saran = "";
7.
8. if ($q !== "") {
9. $q = strtolower($q);
10. $len=strlen($q);
11. foreach($nama as $n) {
Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h | 50
12. if (stristr($q, substr($n, 0, $len))) {
13. if ($saran === "") {
14. $saran = $n;
15. } else {
16. $saran .= ", $n";
17. }
18. }
19. }
20. }
21.
22. echo $saran === "" ? "Tidak ada saran" : $saran;
23. ?>
Pada skrip di atas terdapat data nama yang mengandung array data nama-nama orang. Data
ini yang akan menjadi saran ketika mengetikan nama pada input. Jika dijalankan hasilnya
sebagai berikut:
Gambar 31 . Contoh penggunaan AJAX
j. ECMA Script
a. Mengenal ECMAScript
ECMAScript merupakan bahasa pemrograman yang telah distandarkan oleh ECMA
International. Salah satunya adalah JavaScript. Dalam perkembanganya, JavaScript telah
mengalami berbagai perbaikan dan pengembangan. Perbuahan paling terkenal yaitu
ECMAScript 5 (ES5) yang dirilis tahun 2009 dan ECMAScript 6 (ES6) yang dirilis pada
tahun 2015 dan dikenal juga dengan nama ECMAScript 2015.
b. ECMAScript 5 (ES5)
Pada ES5 telah ditambahkan fitur baru pada JavaSript yang sebagian besar mengenai
manipulasi array. Fitur ini telah dibahas pada pembahasan array. Fitur lain yang juga baru
pada ES5 yaitu JSON.parse() dan JSON.stringify(). Keduanya juga telah dibahas pada
pembahasan JSON. Method trim() pada objek string juga merupakan fitur baru dari ES5.
Selain beberapa fitur yang telah dibahas sebelumnya, ada beberapa fitur lain yang juga baru
pada ES 5 yaitu sebagai berikut:
1. Perintah “use strict”
51 | Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h
Perintah “use strict” digunakan agar penulisan JavaScript harus mengikuti aturan
pemrograman yang benar. Misalnya pada pendefinisian variabel pada JavaScript tidak harus
menulikan kata var di depan variabel. Jika menggunakan “use strict”, maka tindakan tersebut
akan menjadi tindakan yang salah dan menyebabkan error program. Penggunaan “use strinct”
merupakan pilihan yang boleh diambil atau tidak oleh programmer. Tapi dengan
menggunakanya penulisan kode program menjadi lebih disiplin dan mengurangi resiko
terjadinya bug pada program.
Cara menggunakan “use strict” yaitu dengan menuliskan kata “use strict” pada awal program
atau pada awal baris di dalam blok function. Contohnya sebagai berikut:
File 10_b_1_use_strict.html
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. </head>
5. <body>
6. <script>
7. "use strict";
8.
9. nama = "Faqih";
10. console.log(nama);
11. </script>
12. </body>
13. </html>
Skrip di atas akan menghasilkan error seperti gambar berikut:
Gambar 32 . Menggunakan “use strict”
2. Setter dan Getter
Pada ES5, sebuah objek dapat diberi setter dan getter. Setter digunakan untuk mengubah nilai
suatu property, sedangkan getter untuk mendapatkan nilai suatu property. Contoh
penggunaanya sebagai berikut:
File 10_b_2_setter_getter.html
1. <!DOCTYPE HTML>
2. <html>
Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h | 52
3. <head>
4. </head>
5. <body>
6. <script>
7. var nama = {
8. awal: "Daffa",
9. akhir : "Sidqi",
10. get lengkap() {
11. return this.awal + " " + this.akhir;
12. },
13. set ubahAwal(awal){
14. this.awal = awal;
15. },
16. set ubahAkhir(akhir){
17. this.akhir = akhir;
18. }
19. };
20.
21. nama.ubahAwal = "Faqih";
22. nama.ubahAkhir = "Mumtaz";
23. document.write(nama.lengkap);
24. </script>
25. </body>
26. </html>
Hasil dari skrip di atas akan menghasilkan tulisan “Faqih Mumtaz” ketika dijalankan.
3. Method Untuk Objek
Pada ES5 ditambahkan beberapa method yang dapat digunakan untuk modifikasi objek
JavaScript. Beberapa method tersebut yaitu:
Property / Method Keterangan
Object.defineProperty(objek, property, Menambah atau mengubah property objek
descriptor)
Object.definePropertyes(objek, descriptor) Menambah atau mengubah banyak
property sekaligus pada objek
Object.getOwnPropertyDescriptor(objek, Mendapatkan descriptor dari sebuah
proprti) property
Object.getOwnPropertyNames(objek) Mendapatkan semua nama property objek
menjadi sebuah array
Object.keys(objek) Mendapatkan semua property yang tidak
disembunyikan dan menjadikanya sebuah
array
Object.PrototypeOf(objek) Mengakses prototype sebuah objek
Object.PreventExtensions(objek) Mencegah penambahan property pada
objek
Object.isExtensible(objek) Mengecek apakah objek dapat
ditambahkan property
Object.seal(objek) Mencegah mengubah property pada objek
Object.isSealed(objek) Mengecek apakah objek dapat diubah
53 | Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h
propertynya
Object.freeze(objek) Mencegah semua perubahan pada objek
Object.isFrozen(objek) Mengecek apakah objek dibekukan (tidak
dapat dilakukan semua perubahan)
Pada beberapa method di atas, yang dimaksud dengan descriptor yaitu beberapa pengaturan
pada property, seperti:
values : Memberikan nilai dari property.
writeable : Mengatur apakah nilai dari peroperty dapat diubah atau tidak. Diisi dengan
true atau false.
enumerable : Mengatur apakah property disembunyikan atau tidak. Diisi dengan
true atau false. Jika diisi false berarti disembunyikan.
configurable : Mengatur apakah property dapat diatur ulang atau tidak. Diisi dengan true
atau false.
Contoh penggunaan dari beberapa method di atas yaitu sebagai berikut:
File 10_b_3_object_method.html
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. </head>
5. <body>
6.
7. <script>
8. var biodata = {
9. nama: "Daffa Sidqi",
10. kota: "Tegal",
11. umur: "5 Tahun"
12. };
13.
14. Object.defineProperty(biodata, "umur", {
15. writable: true,
16. enumerable: false,
17. configurable: true
18. });
19.
20. var semuaproperti = Object.getOwnPropertyNames(biodata);
21. var properti = Object.keys(biodata);
22.
23. document.write(semuaproperti);
24. document.write("<br>" + properti);
25. </script>
26.
27. </body>
28. </html>
Pada skrip di atas, property umu pada objek biodata disembunyikan dengan memberi nilai
enumerable:false. Hasilnya, property umur akan ditampilkan ketika diakses dengan
Object.getOwnProperty() dan disembunyikan ketika diakses dengan Object.keys().
Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h | 54
Gambar 33 . Contoh penggunaan object method
4. Aturan sintaks baru
Pada ES5 ada peraturan baru dalam penulisan sintaks JavaScript, yaitu sebagai berikut:
Penggunaan tanda [ ] untuk mendapatkan karakter pada string yang juga sama dengan
fungsi charAt().
Penggunaan trailing commas atau disebut juga final commas pada array atau objek, yaitu
koma setelah nilai terakhir pada array atau setelah property terakhir pada objek.
Memungkinkan menuliskan string lebih dari 1 baris dengan menambahkan tanda \ pada
akhir baris sebelum melakukan enter ke baris berikutnya.
Menjadikan reserved word yaitu kata yang termasuk bagian dari skrip JavaScript, sebagai
property objek.
c. ECMAScript 6 (ES6)
Dibandingkan dengan fitur baru pada ES5, pada ES6 lebih banyak lagi fitur baru yang
diperkenalkan. Bahkan, perubahanya tergolong cukup banyak. Berhubung kebanyakan
framework baik Vue.js, React maupun Angular sudah menerapkan ES6, maka wajib untuk
mengenal berbagai fitur pada ES6 agar lebih mudah dalam mempelajari ketiganya. Bagi yang
sudah pernah belajar JavaScript tapi belum mempelajari ES6, maka ketika belajar Vue.js,
React dan Angular akan merasa banyak sintaks yang asing, mengingat banyaknya perubahan
yang terjadi pada ES6.
ES6 diperkenalkan pada tahun 2015 dan dikenal juga dengan ECMAScript 2015. Walaupun
ada versi baru pada setiap tahunya, tapi ES6 paling banyak mendapat perhatian karena pada
tahun-tahun berikutnya tidak ada perubahan yang terlalu besar layaknya pada ES6.
55 | Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h
Fitur-fitur baru yang diperkenalkan pada ES6 diantaranya yaitu sebagai berikut:
1. Let dan const
Let digunakan untuk mendeklarasikan sebuah variabel. Fungsinya hampir sama dengan var,
tetapi let lebih disarankan karena dapat mengatasi masalah yang ada pada var. Berikut
perbedaan antara var dan let:
Var memiliki scope global, seangkan let memiliki scope local. Artinya, variabel yang
dideklarasikan dengan let hanya akan dikenali pada blok dimana variable dideklarasikan.
Var dapat mendeklarasikan variabel dengan nama yang sama bahkan pada strict mode,
sedangkan let akan menghasilkan error jika mendeklarasikan variabel dengan nama sama.
Variabel tetap dapat diakses ketika digunakan sebelum dideklarasikan oleh var,
sedangkan variabel yang dideklarasikan oleh let akan menghasilkan eror ketika digunakan
sebelum dideklarasikan.
Sedangkan const digunakan untuk mendeklarasikan konstanta, yaitu variabel yang nilainya
tidak dapat diubah.
Berikut contoh penggunaan var, let dan const:
File 10_c_1_let_const.html
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. </head>
5. <body>
6.
7. <script>
8. var x = "Variabel dengan var";
9. var x = "Deklarasikan ulang var";
10. function tampilkanX(){
11. let x = "Variabel dengan let";
12. //let x = "Deklarasikan ulang let";
13. x = "Variabel x diubah";
14. document.write(x);
15. }
16.
17. tampilkanX();
18. document.write("<br>" + x);
19.
20. const y = 3;
21. //y = 4;
22. document.write("<br>Hasil const: " + y);
23. </script>
24.
25. </body>
26. </html>
Pada variabel x di buat di luar function dengan var dan di dalam function dengan let.
Penggunaan let di dalam function tidak mempengaruhi nilai x. Pada skrip di atas, var x
dideklarasikan 2 kali dan tidak menimbulkan eror, sedangkan pada let akan mengasilkan eror.
Eror juga didapat ketika mencoba mengubah nilai konstanta yang dibuat denan const. Hasil
dari skrip di atas dapat dilihat pada gambar berikut:
Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h | 56
Gambar 34 . Contoh penggunaan let dan const
2. Template String
Pada ES6, untuk membuat string yang melebihi 1 baris tidak perlu lagi menggunakan tanda \
atau menggunakan tanda +. Tetapi string harus ditulis di dalam tanda backtick (` … `).
Bahkan di dalam string dapat disertakan variabel dengan lebih mudah. Berikut contoh
pengunaanya:
File 10_c_2_template_string.html
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. </head>
5. <body>
6.
7. <script>
8. var nama = "Faqih";
9. var produk = {nama: "Baju", harga: 100000};
10.
11. var stringES5 = "Halo " + nama + ", " +
12. "maukah beli " + produk.nama + " ini, " +
13. "Harganya " + produk.harga;
14. document.write(stringES5);
15.
16. var stringES6 = `<br>Halo ${nama}
17. maukah beli ${produk.nama} ini,
18. Harganya ${produk.harga}`;
19. document.write(stringES6);
20. </script>
21.
22. </body>
23. </html>
Pada skrip di atas terdapat 2 string yang ditulis dengan cara berbeda, yaitu stringES5 yang
menggunakan cara ES5 dan stringES6 yang menggunakan cara ES6. Keduanya memiliki
hasil sama, tapi cara penulisan ES6 tentu lebih simpel.
3. Arrow Function
Arrow function yaitu cara baru dalam penulisan function pada JavaScript. Yang perlu
dipahami dalam penggunaan arrow function yaitu:
Lebih disarankan menggunakan const daripada var.
Tidak perlu menggunakan kata function.
Body function ditulis setelah tanda =>.
Jika parameter hanya 1, tidak perlu diletakkan di dalam tanda ().
57 | Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h
Jika body function hanya 1 baris, tidak perlu menggunakan tanda {}, kecuali
menggunakan return.
Dari beberapa aturan di atas, penulisan function dapat dilakukukan seperti pada contoh
berikut:
File 10_c_3_arrow_function.html
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. </head>
5. <body>
6.
7. <script>
8. //ES5
9. var hitung = function(a,b){
10. return a + b;
11. }
12. document.write("Hasl 2 + 4 = " + hitung(2,4));
13.
14. //ES6 tanpa parameter
15. const halo = () => document.write("<br>Halo ES6!");
16. halo();
17.
18. //ES6 1 parameter
19. const panggil = nama => document.write("<br>Halo " + nama);
20. panggil("Daffa");
21.
22. //ES6 beberapa parameter
23. const jumlah = (a,b) => {
24. return a + b
25. };
26. document.write("<br>Hasil 2 + 4 = " + jumlah(2,4));
27. </script>
28.
29. </body>
30. </html>
Pada skrip di atas dapat dilihat bagaimana perbedaan penulisan function antara ES5 dan ES6.
Keduanya masih tetap dapat digunakan, namun dalam penggunaan framework biasanya
penulisan dengan arrow function lebih banyak digunakan.
4. Default Parameter
Pada ES6, sebuah function dapat memiliki default parameter, sehingga ketika memanggil
function tanpa menyertakan argumen, maka akan digunakan nilai default. Contohnya sebagai
berikut:
File 10_c_4_defalut_parameter.html
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. </head>
5. <body>
6.
7. <script>
8. var hitung = function(a,b=4){
9. return a + b;
10. }
11. document.write(hitung(2));
Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h | 58
12.
13. </script>
14.
15. </body>
16. </html>
Pada skrip di atas, walaupun dalam menggunakan function hanya menyertakan 1 argumen,
function tetap dapat dijalankan dengan parameter kedua menggunakan nilai default. Skrip di
atas menghasilkan angka 6.
5. Spread operator dan rest parameter
Spread Operator merupakan simbol titik tiga (…) yang digunakan untuk memecah array atau
objek sehingga dapat digabungkan atau ditambahkan pada array atau objek lain, atau dapat
digunakan sebagai single argument ketika menggunakan function. Sedangkan rest parameter
yaitu parameter yang ditulis menggunakan simbol titik tiga (…) yang menyimpan data setiap
argument menjadi sebuah array, sehingga memungkinkan penggunaan function dengan
jumlah argumen yang tidak terbatas.
Contoh keduanya dapat dilihat pada skrip berikut:
File 10_c_5_spread_rest_prameter.html
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. </head>
5. <body>
6.
7. <script>
8. var a = [3,4];
9. var b = [1,2, ...a];
10. console.log(b);
11.
12. var c = {y:2, z:3};
13. var d = {x:1, ...c};
14. console.log(d);
15.
16. function hitung(a,b, ...c){
17. console.log(c);
18. }
19. hitung(2,4,"oke",false,5);
20. </script>
21.
22. </body>
23. </html>
Pada skrip di atas terdapat contoh penggunaan spread operator pada array, yaitu array a
ditambahkan ke array b. Hasilnya array b menjadi [1,2,3,4]. Berikutnya adalah contoh
spread operator pada objek, yaitu objek c digabungkan ke objek d. Hasilnya objek d menjadi
{x:1, y:2, z:3}. Pada bagian bawah adalah contoh rest parameter. Pada function hitung(),
parameter ketiga adalah rest parameter. Ketika function digunakan, maka argumen ketiga
dan seterusnya akan disimpan pada array c ketika function dijalankan. Hasilnya pada console
log berupa array c yaitu [“oke”, false, 5].
6. For … of
59 | Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h
For…of digunakan untuk melakukan perulangan pada sebuah array dan menghasilkan nilai
dari anggota array pada setiap perulangan. Contoh penggunaanya seperti skrip berikut:
File 10_c_6_for_of.html
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. </head>
5. <body>
6.
7. <script>
8. var daftarbuku = [
9. "7 in 1 Pemrograman Web Untuk Pemula",
10. "7 in 1 Pemrograman Web Tingkat Lanjut",
11. "Mudah Membuat Aplikasi Android dengan Ionic 3"
12. ];
13.
14. for(buku of daftarbuku){
15. document.write(buku + "<br>");
16. }
17.
18. </script>
19.
20. </body>
21. </html>
Hasil dari skrip di atas dapat dilihat pada gambar berikut:
Gambar 35 . Contoh penggunaan for…of
7. Desturucturing assignment
Destructuring assignment yaitu memecah data dari sebuah objek atau array menjadi lebih
sederhana. Contoh penerapanya seperti skrip berikut:
File 10_c_7_destructuring_assignment.html
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. </head>
5. <body>
6.
7. <script>
8. var profil = {
9. awal: "Daffa",
10. akhir: "Shidqi",
11. kota: "Tegal",
12. hobi: ["bercerita", "olahraga", "musik"]
13. };
14.
Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h | 60
15. var {awal, akhir, kota, hobi: [a,b,c]} = profil;
16.
17. document.write("Saya "+ awal +" "+ akhir +" dari "+ kota);
18. document.write("<br>Salah satu hobi saya adalah "+ c);
19. </script>
20.
21. </body>
22. </html>
Pada skrip di atas, yang dicetak tebal adalah contoh destructuring assignment. Dengan
adanya skrip tersebut, untuk mengakses data pada objek menjadi lebih mudah. Misal untuk
mengakses nama awal yang biasanya dengan profil.awal menjadi awal saja. Untuk
mengakses hobi musik yang biasanya dengan profil.hobi[2] menjadi cukup c saja.
8. Class
Class merupakan kerangka dari sebuah objek pada pemrograman OOP. Pada ES6 sudah
mendukung OOP layaknya bahasa pemrograman lain yang menggunakan konsep class. Class
dapat memiliki properti dan method. Class dapat memiliki constructor yang menginisialisasi
member class.
Pada ES6 juga mengenal inheritance atau pewarisan class layaknya konsep OOP pada bahasa
pemrograman lain. Penulisanya pun sama yaitu dengan menambahkan kata extends diikuti
nama class yang diwarisi setelah nama class yang mau mewarisi.
Berikut contoh penggunaan class dan inheritance pada ES6:
File 10_c_8_class.html
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. </head>
5. <body>
6.
7. <script>
8. class Pekerja{
9. constructor(noPekerja, nama, gaji){
10. this.bonus = gaji * 0.1;
11. this.noPekerja = noPekerja;
12. this.nama = nama;
13. }
14.
15. getDetail(){
16. return "Nomor pekerja " + this.noPekerja + " dengan nama " + this.nama;
17. }
18.
19. }
20.
21. class Manajer extends Pekerja {
22. constructor(noPekerja, nama, gaji, noLaporan) {
23. super(noPekerja, nama, gaji);
24. this.noLaporan = noLaporan;
25. }
26.
27. getDetail(){
28. let detail = super.getDetail();
29. return detail + ", memiliki " + this.noLaporan + " laporan";
30. }
31. }
32.
61 | Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h
33. var manajer = new Manajer("E001", "Daffa Shidqi", 10000000, 10);
34.
35. document.write(manajer.getDetail());
36. document.write("<br>Bonus: " + manajer.bonus);
37. </script>
38.
39. </body>
40. </html>
Pada skrip di atas ada 2 class yaitu class Pekerja dan class Manajer yang mewarisi class
Pekerja. Class pekerja mempunyai property bonus, noPekerja, nama dan gaji, serta
memiliki method getDetail(). Karena class Manajer mewarisi class Pekerja, maka class
Manajer otomatis memiliki property dan method pada class Pekerja.
Pada class Manajer bagian constructor, memanggil constructor class induk yaitu class Pekerja
dengan perintah super(). Selanjutnya method getDetail() akan meng-everide (menggantikan)
method getDetail() pada class induk. Pada method ini terdapat skrip yang mengakses method
getDetail() dari class induk dan menyimpanya pada variabel detail. Untuk mengakses method
dari class induk ditambahkan perintah super sebelum nama method.
Pada skrip bagian bawah, dibuat objek manajer yang menggunakan class Manajer dengan
menyertakan argumen sesuai parameter yang disediakank pada constructor pada class
Manajer. Hasilnya seperti gambar berikut:
Gambar 36 . Contoh class pada ES6
9. Module
Module merupakan file JavaScript yang didalamnya terdapat variabel, function atau objek
yang diekspor dan dapat diimpor oleh file lain. Penggunaan module memiliki banyak manfaat
diantaranya:
Mudah dimaintain karena skrip dipisahkan dalam berbagai file sesuai fungsinya.
Memungkinkan digunakan secara berulang-ulang, sehingga tidak perlu membuat function
atau objek yang sama pada beberapa file.
Memudahkan dalam pengorganisasian file.
Dalam membuat module, variabel, function atau objek diekspor dengan sintaks export. Jika
diekspor sebagai default, maka saat impor tidak perlu penambahan tanda { }. Sedangkan jika
tanpa default, saat impor harus pakai tanda { }.
Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h | 62
Saat melakukan impor dapat menyebut satu per satu semua data yang diekspor atau
menggunakan simbol asterisk (*) untuk mengimpor semua data yang diekspor. Jika
menggunakan tanda ini, maka wajib menggunakan nama alias.
Jika menggunakan modul pada tag <script> wajib menambahkan atribut type=”module”.
Modul hanya dapat dijalankan jika file HTML di akses dari web server.
Contoh penggunaan module dapat dilihat seperti skrip berikut:
File modules/modul.js
1. const nama = "Faqih Mumtaz";
2.
3. const detail = {
4. nama: "Faqih Mumtaz",
5. kota: "Tegal",
6. hobi: ["membaca", "programming"]
7. }
8.
9. export {nama as default, detail};
10.
11. export const tampilkan = () =>{
12. console.log("Saya "+ nama +" asal "+ detail.kota);
13. }
Pada skrip di atas terdapat variabel nama yang diekspor sebagai default dan diekspor
bersamaan dengan objek detail pada baris tersendiri. Sedangkan function tampilkan
diekspor sendiri dengan ditulis langsung saat function didefinisikan. Selanjutnya, file modul
disimpan dengan format.js. Untuk menggunakan modul di atas dapat melalui skrip JavaScript
yang ditulis di dalam HTML sebagai berikut:
File 10_c_9_module.html
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. </head>
5. <body>
6.
7. <script type="module">
8. import nama, {detail, tampilkan} from './modules/modul.js';
9.
10. console.log('Nama: '+ nama);
11. console.log('Kota: '+ detail.kota);
12. tampilkan();
13. </script>
14.
15. </body>
16. </html>
Pada skrip di atas, variabel nama di tulis di luar tanda { }, karena diekspor sebagai default.
Sedangkan detail dan tampilkan di tulis di dalam tanda { }, karena tidak diekspor sebagai
default. Hasil dari skrip di atas dapat dilihat pada gambar berikut:
63 | Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h
Gambar 37 . Contoh penggunaan modul
10. Property dan method baru
Selain fitur-fitur yang telah disebutkan, pada ES6 juga ditambahkan property dan method
baru. Beberapa property dan method yang ditambahkan diantaranya sebagai berikut:
Property / Method Keterangan
Object.assign(objek, property Menambahkan satu atau lebih property baru pada
baru) objek
find(function) Diterapkan pada array untuk menemukan nilai dengan
kriteria tertentu
findIndex(function) Diterapkan pada array untuk menemukan nilai yang
memiliki index dengan kriteria tertentu
repeat(jumlah repeat) Diterapkan pada string untuk mengulang sebanyak
jumlah repeat yang ditentukan
startsWith(string, index) Diterapkan pada string untuk mengecek apakah
mengandung string pada index yang ditentukan
endsWith(string, index) Diterapkan pada string untuk mengecak apakah
mengandung string pada index yang ditentukan
dimulai dari akhir string
Number.isNan() Mengecek apakah termasuk non-number
Number.isFinite() Mengecek apakah termasuk finte number
Number.isSafeInteger(number) Mengecek apakah sebuah angka berada pada safe
range
Panduan JavaScript Untuk Pemula – R o h i A b d u l l o h | 64
Anda mungkin juga menyukai
- Sample Menguasai React JS Untuk Pemula PDFBelum ada peringkatSample Menguasai React JS Untuk Pemula PDF100 halaman
- Silabus Menejemen Produksi Naska Dan PenyutradaraanBelum ada peringkatSilabus Menejemen Produksi Naska Dan Penyutradaraan7 halaman
- Modul Pemrograman Berbasis Object PDFBelum ada peringkatModul Pemrograman Berbasis Object PDF83 halaman
- Ebook VisualBasic 2008 Untuk Berbagai Keperluan Programming (EbookGratis - Web.id)Belum ada peringkatEbook VisualBasic 2008 Untuk Berbagai Keperluan Programming (EbookGratis - Web.id)228 halaman
- Cloud Computing Nodejs 121226072217 Phpapp02Belum ada peringkatCloud Computing Nodejs 121226072217 Phpapp0294 halaman
- Modul Pemrograman Berbasis Objek-UBSI JakartaBelum ada peringkatModul Pemrograman Berbasis Objek-UBSI Jakarta83 halaman
- Panduan Memulai Project Laravel 5.4 v160617Belum ada peringkatPanduan Memulai Project Laravel 5.4 v16061787 halaman
- Teori Dan Implementasi Pemograman C# 2018 PDFBelum ada peringkatTeori Dan Implementasi Pemograman C# 2018 PDF158 halaman
- (2022) Pengembangan Web PHP (Hypertext Prepocessor) (Yayasan Prima Agus Teknik) (Z-Library)Belum ada peringkat(2022) Pengembangan Web PHP (Hypertext Prepocessor) (Yayasan Prima Agus Teknik) (Z-Library)241 halaman
- 558671-javascript-untuk-aplikasi-web-67a3f231Belum ada peringkat558671-javascript-untuk-aplikasi-web-67a3f23116 halaman
- Modul Praktikum Pemrograman Aplikasi Java-UnHarBelum ada peringkatModul Praktikum Pemrograman Aplikasi Java-UnHar94 halaman
- Modul_praktikum Algoritma PemrogramanBelum ada peringkatModul_praktikum Algoritma Pemrograman172 halaman
- Promosi Dan Launching Hasil ProduksiBelum ada peringkatPromosi Dan Launching Hasil Produksi26 halaman
- RPP Sistem Informasi Dan Komunikasi DigitalBelum ada peringkatRPP Sistem Informasi Dan Komunikasi Digital29 halaman
- Silabus Sistem Informasi Dan Komunikasi DigitalBelum ada peringkatSilabus Sistem Informasi Dan Komunikasi Digital14 halaman
- RPP Menejemen Produksi Naskah Dan PenyutradaraanBelum ada peringkatRPP Menejemen Produksi Naskah Dan Penyutradaraan17 halaman
- Pemrograman Berorientasi Objek dengan Visual C#Dari EverandPemrograman Berorientasi Objek dengan Visual C#
- Mari Belajar Pemrograman Berorientasi Objek menggunakan Visual C# 6.0Dari EverandMari Belajar Pemrograman Berorientasi Objek menggunakan Visual C# 6.0
- Silabus Menejemen Produksi Naska Dan PenyutradaraanSilabus Menejemen Produksi Naska Dan Penyutradaraan
- Ebook VisualBasic 2008 Untuk Berbagai Keperluan Programming (EbookGratis - Web.id)Ebook VisualBasic 2008 Untuk Berbagai Keperluan Programming (EbookGratis - Web.id)
- (2022) Pengembangan Web PHP (Hypertext Prepocessor) (Yayasan Prima Agus Teknik) (Z-Library)(2022) Pengembangan Web PHP (Hypertext Prepocessor) (Yayasan Prima Agus Teknik) (Z-Library)
- Pemrograman Python untuk Pemula: PemrogramanDari EverandPemrograman Python untuk Pemula: Pemrograman
- Membuat Aplikasi Bisnis Menggunakan Visual Studio Lightswitch 2013Dari EverandMembuat Aplikasi Bisnis Menggunakan Visual Studio Lightswitch 2013