Sample Menguasai React JS Untuk Pemula PDF

iii
DILARANG KERAS MEMBAGIKAN ATAU

MEMPERJUAL BELIKAN SEBAGIAN
ATAU SELURUH ISI BUKU INI TANPA
IJIN PENULIS
Sanksi Pelanggaran Pasal 113
Undang-Undang Nomor 28 Tahun 2014 tentang Hak Cipta
1. Setiap Orang yang dengan tanpa hak melakukan pelanggaran hak ekonomi sebagaimana
dimaksud dalam Pasal 9 ayat (1) huruf i untuk Penggunaan Secara Komersial dipidana
dengan pidana penjara paling lama 1 (satu) tahun dan/atau pidana denda paling
banyak Rp100.000.000 (seratus juta rupiah).
2. Setiap Orang yang dengan tanpa hak dan/atau tanpa izin Pencipta atau pemegang Hak Cipta
melakukan pelanggaran hak ekonomi Pencipta sebagaimana dimaksud dalam Pasal 9 ayat
(1) huruf c, huruf d, huruf f, dan/atau huruf h untuk Penggunaan Secara Komersial dipidana
dengan pidana penjara paling lama 3 (tiga) tahun dan/atau pidana denda paling
banyak Rp500.000.000,00 (lima ratus juta rupiah).
3. Setiap Orang yang dengan tanpa hak dan/atau tanpa izin Pencipta atau pemegang Hak Cipta
melakukan pelanggaran hak ekonomi Pencipta sebagaimana dimaksud dalam Pasal 9 ayat
(1) huruf a, huruf b, huruf e, dan/atau huruf g untuk Penggunaan Secara Komersial dipidana
dengan pidana penjara paling lama 4 (empat) tahun dan/atau pidana denda paling
banyak Rp1.000.000.000,00 (satu miliar rupiah).
4. Setiap Orang yang memenuhi unsur sebagaimana dimaksud pada ayat (3) yang dilakukan
dalam bentuk pembajakan, dipidana dengan pidana penjara paling lama 10 (sepuluh)
tahun dan/atau pidana denda paling banyak Rp4.000.000.000,00 (empat miliar rupiah).
i
KATA PENGANTAR
Puji syukur penulis sampaikan ke hadirat Allah SWT, karena berkat

anugerah-Nya penulis dapat menyelesaikan buku ini hingga sampai ke
tangan pembaca. Penulis berharap buku ini dapat memberi manfaat yang
banyak bagi para pembaca.
JavaScript memiliki peran yang sangat penting dalam perkembangan
teknologi di bidang web. JavaScript bahkan menjadi satu-satunya bahasa
pemrograman di sisi client yang banyak digunakan saat ini. Jadi, sudah
jadi keharusan bagi programer web menguasai salah satu framework
JavaScript. Salah satu framework yang paling populer dan banyak
digunakan saat ini yaitu React yang dikembangkan oleh Facebook.
Buku ini ditujukan bagi siapa saja yang ingin menguasai React.
Pembahasan dimulai teori dasar JavaScript, sehingga buku ini dapat
diikuti oleh orang yang baru mengenal JavaScript sekalipun. Buku ini
dibuat dengan skrip berwarna, harapannya akan lebih mudah diikuti dan
dipahami. Setiap pembahasan disertai contoh skrip dan hasilnya. File-file
latihan pada buku ini diminta melalui email penulis dengan menyertakan
bukti pembelian buku.
Akhir kata, penulis menyadari masih banyak terdapat kekurangan dalam

buku ini. Pembaca dapat mengirimkan kritik, saran atau pertanyaan ke
email penulis rohi.abdulloh@gmail.com.
Tegal, Jawa Tengah, November 2020
Rohi Abdulloh
ii
DAFTAR ISI
BAB 1 PETUNJUK PENGGUNAAN BUKU .......................................................................... 1

1.1. Untuk Siapa Buku Ini ............................................................................................ 1
1.2. Kenapa React ............................................................................................................ 2
1.3. Aplikasi Pendukung ............................................................................................... 2
1.4. Mendapatkan File Latihan ................................................................................. 4
1.5. Cara Penggunaan File Latihan .......................................................................... 4
BAB 2 DASAR PEMROGRAMAN JAVASCRIPT ................................................................... 7

2.1. Mengenal Javascript .............................................................................................. 7
2.1.1. Pengertian ............................................................................................. 8
2.1.2. Meletakkan Skrip Javascript ........................................................ 8
2.1.3. Mengatasi Error pada Javascript ............................................ 11
2.1.4. Menampilkan Hasil Program .................................................... 12
2.1.5. Komentar ........................................................................................... 14
2.2. Konsep Dasar Javascript .................................................................................. 14
2.2.1. Variabel ............................................................................................... 14
2.2.2. Tipe Data ............................................................................................ 17
iii
2.2.3. Operator ............................................................................................. 17
2.2.4. Statement Control .......................................................................... 24
2.2.5. Continue dan Break ....................................................................... 32
2.3. Function ................................................................................................................... 33
2.4. Event .......................................................................................................................... 34
2.5. Kotak Dialog ........................................................................................................... 37
2.6. Objek String ............................................................................................................ 38
2.7. Objek Math ............................................................................................................. 42
2.8. Objek Tanggal dan Waktu ............................................................................... 44
2.9. Array .......................................................................................................................... 45
2.10. Objek JavaScript ................................................................................................... 50
2.10.1. Membuat dan Mengakses Objek ............................................. 50
2.10.2. Mengubah dan Menghapus Properti .................................... 52
2.10.3. Berbagai Nilai Properti ................................................................ 53
2.11. Memahami setInterval() dan setTimeOut() .......................................... 54
2.12. DOM JavaScript ..................................................................................................... 57
2.13. BOM JavaScript ..................................................................................................... 63
2.14. Storage ...................................................................................................................... 68
2.15. JSON ........................................................................................................................... 71
2.16. AJAX ........................................................................................................................... 73
2.17. ECMAScript ............................................................................................................ 77
2.17.1. Mengenal ECMAScript ................................................................. 77
2.17.2. ECMAScript 5 (ES5) ....................................................................... 77
2.17.3. ECMAScript 6 (ES6) ..................................................................... 83
iv
BAB 3 TEORI DASAR REACT ..........................................................................................97
3.1. Mengenal React .................................................................................................... 97
3.1.1. Pengertian React ............................................................................ 97
3.1.2. Keunggulan React .......................................................................... 98
3.1.3. Install React ...................................................................................... 99
3.1.4. Menerapkan React pada HTML ............................................ 100
3.1.5. Menggunakan JSX ........................................................................ 102
3.1.6. Build React ..................................................................................... 102
3.2. Konsep Dasar React ........................................................................................ 102
3.2.1. Elemen .............................................................................................. 102
3.2.2. Component dan Props .............................................................. 104
3.2.3. State ................................................................................................... 106
3.2.4. Lifecycle ........................................................................................... 108
3.2.5. Events ............................................................................................... 115
3.2.6. Conditional Rendering .............................................................. 117
3.2.7. List ...................................................................................................... 119
3.2.8. Form .................................................................................................. 121
3.2.9. Style ................................................................................................... 129
3.2.10. Hook .................................................................................................. 133
BAB 4 MENGGUNAKAN COMPONENT LIBRARY .......................................................... 137

4.1. Membuat Date Picker ...................................................................................... 138
4.2. Validasi Form ...................................................................................................... 139
4.3. Autocomplete pada Form ............................................................................. 142
4.4. Masking pada Input Teks ............................................................................. 144
4.5. Texteditor pada WYSIWYG .......................................................................... 146
v
4.6. Tabel Yang Kaya Fitur .................................................................................... 147
4.7. Menampilkan Data Dengan Chart ............................................................ 149
4.8. Upload dan Crop Gambar ............................................................................. 151
4.9. Menerapkan Image Viewer .......................................................................... 154
4.10. Membuat Slideshow Gambar ...................................................................... 155
BAB 5 MENGGUNAKAN MATERIAL UI ....................................................................... 159

5.1. Mengenal Material UI ..................................................................................... 160
5.1.1. Pengertian ...................................................................................... 159
5.1.2. Keuntungan Menggunakan Materil UI .............................. 160
5.1.3. Install Material UI ....................................................................... 161
5.2. Material UI System ........................................................................................... 161
5.2.1. Menggunakan Style Function ................................................ 161
5.2.2. Pallete ............................................................................................... 162
5.2.3. Typography .................................................................................... 163
5.2.4. Spacing ............................................................................................. 163
5.2.5. Border ............................................................................................... 164
5.2.6. Shadow ............................................................................................. 164
5.2.7. Sizing ................................................................................................. 165
5.2.8. Position ............................................................................................ 166
5.2.9. Display .............................................................................................. 166
5.2.10. Flexbox ............................................................................................. 168
5.3. Komponen Material UI ................................................................................... 171
5.3.1. Menggunakan Komponen ....................................................... 171
5.3.2. Layout ............................................................................................... 172
5.3.3. Icon .................................................................................................... 179
vi
5.3.4. Data Display ................................................................................... 181
5.3.5. Input .................................................................................................. 192
5.3.6. Surfaces ............................................................................................ 211
5.3.7. Navigation ....................................................................................... 221
5.3.8. Feedback ......................................................................................... 239
5.3.9. Utils .................................................................................................... 250
5.3.10. Lab ...................................................................................................... 267
5.4. Material UI Style ............................................................................................... 285
5.4.1. Menggunakna Style Library ................................................... 285
5.4.2. Menggunakna Styled Component ....................................... 287
5.4.3. Mengubah Tema Desain ........................................................... 287
BAB 6 MENERAPKAN ROUTING DAN AJAX ................................................................. 293

6.1. Mengenal Routing ............................................................................................ 293
6.2. Route pada React .............................................................................................. 294
6.2.1. Install React Router .................................................................... 294
6.2.2. Routing Dasar ............................................................................... 294
6.2.3. Routing Bertingkat ..................................................................... 296
6.2.4. Routing Dengan Parameter .................................................... 299
6.2.5. Proteksi Halaman ........................................................................ 302
6.3. Mengenal AJAX .................................................................................................. 307
6.4. AJAX pada React ................................................................................................ 309
6.4.1. Install Axios .................................................................................... 309
6.4.2. Skrip Dasar AJAX Dengan Axios ........................................... 309
6.4.3. Menampilkan Data Dengan AJAX ........................................ 310
6.4.4. Menambahkan Data Dengan AJAX ...................................... 315
vii
6.4.5. Mengedit Data Dengan AJAX .................................................. 318
6.4.6. Menghapus Data Dengan AJAX ............................................. 323
6.4.7. Upload File Dengan AJAX ........................................................ 327
BAB 7 INTEGRASI DENGAN LARAVEL DAN INERTIA ................................................ 333

7.1. Mengenal Laravel ............................................................................................. 333
7.2. Mengenal Inertia ............................................................................................... 334
7.3. Membuat Aplikasi dengan React, Laravel dan Inertia ................... 334
7.3.1. Persiapan Project Laravel ....................................................... 335
7.3.2. Menambahkan Autentikasi .................................................... 353
7.3.3. Manajemen Data Kategori ...................................................... 359
7.3.4. Manajemen Data Produk ......................................................... 371
7.3.5. Memperbaiki Dashbord ........................................................... 392
viii
PETUNJUK PENGGUNAAN
BUKU
1.1 Untuk Siapa Buku Ini

Buku ini ditujukan untuk siapapun yang ingin mempelajari
pemrograman web modern. Buku ini disusun dimulai dari pembahasan
dasar JavaScript, sehingga yang masih awam dengan JavaScript pun
dapat menggunakan buku ini. Bagi yang sudah mengenal JavaScript
dapat melewati bab dasar atau memilih materi-materi JavaScript yang
penting saja, seperti pembahasan EcmaScript 5 dan EcmaScript 6.
Karena untuk memahami skrip pada React, harus paham dulu skrip
JavaScript pada EcmaScript 5 dan EcmaScript 6.
Hasil akhir dari mempelajari buku ini yaitu dapat membuat Single Page
Application (SPA) berbasis React dan Laravel. SPA yaitu aplikasi yang
setiap perpindahan halamanya tanpa melakukan refresh pada browser,
sehingga aplikasi lebih reaktif dan cepat. Aplikasi semacam ini sudah
banyak di gunakan, terutama pada web-web perusahaan besar seperti
Facebook, Google, Alibaba dan masih banyak lagi, termasuk startup
papan atas di Indonesia. Untuk membuat aplikasi semacam ini
dibutuhkan pemahaman JavaScript yang baik. React merupakan salah
satu library JavaScript yang akan sangat memudahkan dalam membuat
SPA yang dikombinasikan dengan Laravel.
1 | Menguasai React JS Untuk Pemula – Rohi Abdulloh

Bisa dikatakan, buku ini akan mengajari dari yang tidak tahu tentang
JavaScript sama sekali menjadi ahli dalam JavaScript. Bahkan secara
tidak langsung, pembaca juga akan belajar dasar-dasar Laravel, karena
pada bab terakhir akan dibahas langkah-langkah membuat projek
aplikasi dengan konsep SPA menggunakan React dan Laravel.
1.2 Kenapa React

Ada 3 framework paling popular untuk membuat aplikasi web pada sisi
client, yaitu Angular, React dan Vue.js. Di antara ketiganya, React
memiliki pengguna yang paling banyak, baik di Indonesia maupun di
dunia. Kesimpulan ini didapat dari google trends, repository github, dan
web-web popular lain. Sebagian besar menempatkan React diatas yang
lain. Walaupun ini tidak berarti yang lain kurang baik. Penulis sendiri
tertarik untuk menulis tentang framework lain di lain waktu.
Alasan lain pembaca wajib menguasai React, yaitu karena React menjadi
dasar untuk menguasai React Native. React Native merupakan
framework berbasis JavaScript untuk membuat aplikasi mobile baik
android maupun IOS dengan kualitas native. Semoga penulis bisa
membahas ini juga di lain waktu. 
Sebagai framework yang dibuat oleh Facebook, dan telah digunakan
pada aplikasi-aplikasi Facebook, tentu sudah tidak diragukan lagi
bagaimana React telah membuat aplikasi menjadi begitu nyaman saat
digunakan. Tidak heran aplikasi-aplikasi Facebook selalu menjadi nomor
1 di antara pesaingnya. Pembahasan lebih lanjut mengenai React akan
dibahas pada bab 3.
1.3 Aplikasi Pendukung

Agar dapat mengikuti setiap pembahasan pada buku ini dibutuhkan
aplikasi pendukung yang harus di download. Berikut daftar aplikasi yang
dibutuhkan:
Menguasai React JS Untuk Pemula – Rohi Abdulloh | 2

 Web browser
Ini menjadi syarat utama karena aplikasi yang dibuat berbasis web
yang harus dibuka lewat browser. Dalam buku ini penulis
menggunakan Microsoft Edge dan Google Chrome. Namun, pembaca
dapat menggunakan browser lain yang disukai, asal diusahakan
menggunakan versi terbaru.
 Text Editor
Aplikasi ini juga mutlak harus disediakan untuk mengetikkan skrip
dan mengatur file-file yang dibahas pada buku. Pembaca bebas
menggunakan editor yang biasa digunakan seperti Sublime Text,
Visual Studio Editor, atau yang sejenis.
 Xampp
Aplikasi ini digunakan sebagai server lokal. Selain ada skrip PHP
pada pembahasan AJAX yang harus dijalankan di server, fitur
terbaru dari JavaScript seperti modul juga harus dijalankan di
server, termasuk React yang menjadi pembahasan utama juga wajib
dijalankan di server. Dalam penulisan buku ini penulis
menggunakan Xampp 7.4.11 dengan PHP versi 7.4. Aplikasi Xampp
dapat didownload di www.apachefriends.org/download.html.
 Node.js
Aplikasi ini untuk menjalankan NPM yang digunakan untuk
menginstal library-library JavaScript dengan mudah dari internet.
Semua library JavaScript yang dibahas pada buku ini diinstal
menggunakan NPM. Disarankan menggunakan Node.js versi 12.16.2
atau di atasnya yang dapat di-download di nodejs.org/en/download.
 Composer
Jika NPM digunakan untuk menginstal library JavaScript, Composer
memiliki fungsi yang hampir sama, tetapi khusus untuk library
berbasis PHP. Salah satunya untuk menginstal Laravel. Disarankan
gunakan Composer terbaru yang dapat di-download di
getcomposer.org.

1.4 Mendapatkan File Latihan
Setiap latihan yang dibahas pada buku ini penulis dokumentasikan
dalam bentuk file yang dapat diperoleh melalui email penulis
rohi.abdulloh@gmail.com. Cukup kirimkan bukti pembelian buku ini ke
email tersebut, pembaca akan mendapatkan link download Google Drive
berisi semua latihan yang dibahas. Struktur skrip pada file latihan tentu
lebih rapi karena tidak terpotong pada bagian skrip yang panjang. Jika
ada skrip yang susah dipahami karena terpotong sehingga strukturnya
jadi kurang rapi, atau ada skrip yang error saat dijalankan ketika
mencoba mempraktikkan, pembaca dapat melihat skrip aslinya pada file
pendukung.
1.5 Cara Menggunakan File Pendukung

Isi pada file pendukung terdiri dari beberapa folder untuk
mengelompokkan file-file latihan sesuai pembahasannya. Berikut
penjelasan masing-masing folder beserta isi file di dalamnya:
 Javascript
Folder ini berisi file-file latihan bab 2 tentang dasar JavaScript yang
disimpan dalam format HTML agar dapat langsung dilihat hasilnya saat
dijalankan. Untuk menjalankan file-file latihan pada folder dapat
langsung dobel klik file-nya. Kecuali file 2_17_12_module.html yang harus
dijalankan di server. Untuk menjalankannya dapat di-copy ke folder
xampp/htdocs bersama folder modules dan isinya. Jalankan dengan
mengetikkan localhost/nama_folder/nama_file pada browser. Pada folder
Javascript juga terdapat folder ajax yang berisi file PHP yang harus di-
copy ke folder xampp/htdocs ketika menjalankan file 1_16_ajax.html.
Untuk menjalankan AJAX, pastikan Apache dan MySQL pada Xampp
Controls dalam status start.
 React_cdn
Folder ini berisi file-file pembahasan dasar React yang dibahas pada bab
3. Walaupun berupa file HTML, file-file di dalamnya tidak dapat langsung
dibuka dengan cara dobel klik. Disarankan membukanya menggunakan

server xampp, jadi harus di-copy dulu ke folder xampp/htdocs.
Selanjutnya jalankan Apache pada Xampp Controls. File-file tersebut
dapat dibuka dengan mengetikkan alamat file pada browser, misalnya:
localhost/react_cdn/3_1_4_sintaks_dasar.html atau localhost/react_cdn
saja lalu klik file yang ingin dibuka.
 React_cra
Folder ini berisi proyek React yang dibuat menggunakan Create React
App. File-file latihan disimpan pada folder dengan nama bab dimana file
tersebut dibahas yang terletak di folder src. File latihan yang disimpan
pada folder ini meliputi sebagian kecil file latihan bab 3 dan file-file
latihan dari bab 4 sampai bab 6. Untuk menjalankan skrip di dalamnya,
copy dulu isi skrip ke file src/App.js, lalu dapat dijalankan melalui
Command Prompt dengan perintah npm start.
 React_ajax
Folder ini berisi file-file PHP yang digunakan untuk praktik AJAX pada
bab 6. Ketika menjalankan AJAX yang dibahas pada bab 6, maka folder
ini harus di-copy ke folder xampp/htdocs dan jalankan Apache dan
MySQL pada Xampp Controls. Jangan lupa buat database react_ajax dan
import file react_ajax.sql pada folder ini ke database.
 React_laravel
Folder ini berisi proyek aplikasi Laravel yang diintegrasikan dengan
React dan Inertia. Cara menjalankan aplikasi tersebut yaitu melalui
beberapa langkah berikut:
1. Ekstraksi file proyek ke folder xampp/htdocs.
2. Buat database melalui PHPMyAdmin dengan nama react_laravel.
Jika database dibuat dengan nama yang berbeda, maka harus
diubah pengaturan database-nya pada file .env.
3. Jalankan perintah php artisan migrate pada Command Prompt
untuk menambahkan tabel ke database.
4. Jalankan perintah php artisan serve untuk menjalankan server.
5. Ketikkan localhost:8000 pada browser untuk membuka aplikasi.

DASAR PEMROGRAMAN
JAVASCRIPT
2.1 Mengenal JavaScript
2.2.1 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.

2.2.2 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 2_1_2_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:

Gambar 5.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 2_1_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>

Gambar 5.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 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 2_1_2_skrip.js dan dipanggil melalui file
2_1_2_eksternal.html.
File 2_1_2_skrip.js
1. function hallo(){
2. alert("Pesan ini dari file 2_1_2_skrip.js!");
3. }
File 2_1_2_eksternal.html
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <title>Eksternal</title>
5. <script src="2_1_2_skrip.js"></script>
6. </head>
7. <body>
8. <button onclick="hallo()">Klik ini</button>
9. </body>
10. </html>

Gambar 5.3 Hasil kode External JavaScript
2.2.3 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.
Gambar 5.4 Mengakses Console Log

Pada gambar di atas, tampak pesan error berwarna merah pada bagian
kanan browser.
2.2.4 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 2_1_4_menampilkan_data.html
1. <!DOCTYPE HTML>
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 past
i bisa.');
16. </script>
17. </body>
18. </html>
Hasil dari skrip di atas seperti gambar berikut:
Gambar 5.5 Berbagai cara menampilkan data

2.2.5 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 2_1_5_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
9. komentar ini tidak akan dieksekusi sebagai prog
ram
10. */
11. </script>
12. </head>
13. <body>
14. </body>
15. </html>
2.2 Konsep Dasar JavaScript
2.2.1 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:

File 2_2_1_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 5.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.

2.2.2 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.
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.
2.2.3 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
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
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:
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
B -= A artinya nilai B dikurangi nilai A, sehingga nilai
B menjadi 1
*= Mengalikan nilai suatu variabel dengan nilai atau
B *= A artinya nilai B dikalikan nilai A, sehingga nilai
B menjadi 12
/= Membagikan nilai suatu variabel dengan nilai atau
A /= B artinya nilai A dibagi nilai B, sehingga nilai A
menjadi 3
%= Mengambil sisa bagi suatu variabel dengan nilai atau
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_2_3_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>');
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 L
ebih 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 5.7 Hasil penggunaan operator
2.2.4 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;

}
Berikut ini contoh percabangan menggunakan if pada JavaScript:

File 2_2_4_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 me
nikah");
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.
Gambar 5.8 Hasil percabangan dengan if

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_2_4_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 5.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){
pernyataan jika kondisi ketiga terpenuhi;
}else{
pernyataan jika tidak ada kondisi terpenuhi;
}
Berikut ini contoh penggunaanya:

File 2_2_4_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.
Gambar 5.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;
break;
break;
default: pernyataan default;
}
Contoh penggunaanya, perhatikan pada skrip berikut:

1. <!DOCTYPE HTML>
2. <html>
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 5.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_2_4_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>
Skrip di atas akan menghasilkan seperti gambar berikut:
Gambar 5.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_2_4_perulangan_do_while.html
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <script>
5. var hitung = 0;
6. do{
>");
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;
}
Contoh penggunaanya seperti skrip berikut:

File 2_2_4_perulangan_for.html
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <script>
5. var hitung;
6. for(hitung=0; hitung<10; hitung++){
>");
8. }

9. document.write("Hitungan mencapai " + hitung + "<
br>");
10. </script>
11. </head>
12. <body>
13. </body>
14. </html>
Hasilnya sama dengan perulangan menggunakan while.
2.2.5 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_2_5_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
>");
11. }
12. document.write("Hitungan berhenti");
13. </script>
14. </head>
15. <body>
16. </body>
17. </html>

Gambar 5.13 Contoh penggunana continue dan break
Pada gambar di atas tampak tidak ada hitungan ke-5 dan pada hitungan
ke-8 perulangan dihentikan.
2.3 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_3_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, 15
0) + "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 nilai,
sehingga untuk menggunakanya langsung pada baris tersendiri. Hasilnya
seperti gambar berikut:
Gambar 5.14 Contoh penggunaan function
2.4 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:

File 2_4_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 5.15 Contoh penggunaan event
Silakan untuk bereksperimen sendiri dengan mengubah ondblclick

dengan event yang lain, lalu lakukan event yang sesuai.

2.5 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_5_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>
12. </body>
13. </html>
Hasil untuk kotak dialog dengan confirm() dan prompt() seperti pada
gambar berikut:

Gambar 5.16 Hasil penggunaan comfirm()
Gambar 5.17 Hasil penggunaan prompt()
2.6 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
anchor(nama)
tag <a name="nama">.
Menjadikan teks menjadi lebih besar karena
big()
diapit tag <big>.
Menjadikan teks berkedip karena diapit tag
blink()
<blink>.
Menjadikan teks bercetak tebal karena diapit
bold()
tag <b>.
Menjadikan teks berwarna karena diapit tag
fontcolor(warna)
<font color="warna">.
Mengubah ukuran teks karena diapit tag <font
fontsize(ukuran)
size="ukuran">.
italics() Menjadikan teks miring karena diapit tag <i>.
Merubah teks menjadi link karena diapit tag
link(url)
<a href="url">.
Menjadikan teks kecil karena diapit tag
small()
<small>.
Menjadikan teks tercoret karena diapit tag
strike()
<strike>.
Menjadikan teks subscript karena diapit tag
sub()
<sub>.
Menjadikan teks superscript karena diapit tag
sup()
<sup>.
toLowerCase() Mengubah teks menjadi huruf kecil.
toUpperCase() Mengubah teks menjadi huruf besar.
Menghasilkan karakter pada posisi x pada
charAt(x)
string.

Menghasilkan nilai Unicode dari karakter pada
charCodeAt(x)
posisi x pada suatu string
Menggabungkan dua atau lebih string menjadi
concat(teks1, teks2, …)
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
charCodeAt(x)
pada posisi 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
indexOf(substr, start)
substring yang ada di dalam kurung.
Mencocokkan suatu string dengan pola regular
match(regexp)
expression.
replace(regexp, Menukar suatu string berdasarkan pola
replace_text) regular expression.
Mengetes apakah string cocok dengan pola
search(regexp) regular expression, jika cocok akan
menghasilkan index dari yang cocok.
Menghasilkan substring dari suatu string
slice(start, end) dimulai dari parameter pertama dan diakhiri
parameter kedua.
Memecah string menjadi array berdasarkan
split(delimiter, limit)
tanda pemisah yang ditentukan.
Menghasilkan potongan dari suatu string yang
substr(start, length) dimulai dari 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.
File 2_6_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>
Gambar 5.18 Contoh manipulasi objek string

2.7 Objek Math
Objek math digunakan untuk melakukan berbagai operasi matematika.
Ada beberapa method yang digunakan untuk melakukan operasi
matematika, yaitu sebagai berikut:
PI Menghasilkan nilai PI
Mengkonversi angka x menjadi absolut, sehingga
abs(x)
yang 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
ceil(x)
di atasnya.
cos(x) Mendapatkan nilai cos dari x dalam radian
Membulatkan bilangan decimal ke angka terdekat
floor(x)
di 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_7_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 " + M
ath.round(5.23));
9. </script>
10. </head>
11. <body>
12. </body>
13. </html>
Gambar 5.19 Contoh operasi matematika

2.8 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:
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_8_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>
Gambar 5.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.
2.9 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:
length Menghasilkan jumlah elemen dalam satu array

Digunakan untuk menggabungkan nilai array
join(separator) menjadi string yang dipisahkan dengan tanda
yang ditentukan.
concat(array2, Menggabungkan dua array atau lebih menjadi
array3, …) array baru.
pop() Menghapus elemen terakhir pada array.
Menambahkan satu atau lebih elemen baru ke
push(item1, item2, …)
bagian akhir array.
reverse() Membalik urutan elemen array.
shift() Menghapus elemen pertama dari suatu array
unshift(item1, item2, Menambahkan satu atau lebih elemen pada
…) awal array.
sort() Mengurutkan elemen array.
Menghapus atau menambahkan item pada
splice(index, length,
array.
toString() Mengkoversi array ke string.

Berikut contoh manipulasi array dengan beberapa method di atas:
File 2_9_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");
9. buah.reverse();
11. </script>
12. </head>
13. <body>
14. </body>
15. </html>
Gambar 5.21 Hasil manipulasi array
Sejak diperkenalkan ECMAScript 5 (ES5), objek array mendapat

berbagai tambahan method baru, seperti pada tabel berikut:
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
some(function) memiliki kriteria sesuai persyaratan pada
function
Mencari posisi sebuah nilai yang disebutkan
indexOf()
pada tanda kurung pada sebuah array
Memiliki fungsi sama dengan indexOf(), tetapi
lastIndexOf()
posisi dihitung dari anggota paling akhir
Berikut contoh penggunaan dari beberapa method di atas:

File 2_9_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. });
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 5.22 Hasil manipulasi array dengan fitur baru ES5
2.10 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.
2.2.1 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 2_10_1_membuat_objek.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. 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 5.23 Membuat dan mengakses objek

2.2.2 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 2_10_2_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.
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 5.24 Mengubah dan menghapus property
2.2.3 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 2_10_3_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 Ph
otoshop'],
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.m
onitor.warna);
24. </script>
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 5.25 Contoh berbagai nilai property
2.11 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 6_11_setInterval_setTimeOut.html
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <script>
5. var angka = 0;
6. var timer;
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 = a
ngka;
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</bu
tton>
35. <button onclick="hentikanTimer()">Hentikan Timer</bu
tton>
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().

Gambar 5.26 Contoh perintah setInterval() dan setTimeout()
2.12 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:
Menemukan elemen
document.getElementById(id)
dengan id
Menemukan beberapa
document.getElementsByTagName(name)
elemen dengan nama tag
document.getElementsByClassName(name) Menemukan beberapa
elemen dengan nama
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:
element.innerHTML = “konten” Mengubah konten suatu

elemen dengan konten
yang baru
element.nama_atribut = “nilai atribut” Mengubah nilai atribut
dari sebuah elemen.
element.style.property_css = nilai property Mengubah style CSS suatu
elemen.
element.setAttribute(nama_atribut, nilai) Mengubah nilai atribut
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 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:

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
lama) dalam satu elemen
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 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>
document.URL Mendapatkan URL lengkap dokumen
Berikut contoh penggunaan DOM pada JavaScript dalam mengolah

dokumen HTML:

File 2_12_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("para
graf");
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:
Gambar 5.27 Contoh penggunaan DOM
2.13 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:
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:
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.
 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 2_13_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("2_13_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 2_12_jendela_baru.html
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. </head>
5. <body>
6. <button onclick="window.close()">Tutup Jendela</butt
on>
7. <button onclick="window.print()">Cetak</button>
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 5.28 Contoh penggunaan BOM
2.14 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:

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 2_14_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 tersimp
an 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>
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 5.29 Contoh penggunaan storage

2.15 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:
 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 2_15_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: 'Teg
al'};
9. document.write(JSON.stringify(data));
10.
11. var teks = '{"nama":"Daffa","umur":"5 Tahun","kota":"Teg
al"}';
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 5.30 Contoh penanganan JSON
2.16 AJAX
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.
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
user, psw) sebagai berikut:
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"

404: "Not Found"
statusText Mendapatkan teks status (misal "OK"

atau"Not Found")
Berikut contoh skrip AJAX untuk mendapatkan data dari server dengan
PHP:
File 2_16_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.valu
e)">
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/2_16_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/2_16_ajax.php
1. <?php
2. header('Access-Control-Allow-Origin: *');
3.
4. $nama = ["Ana", "Andi", "Budi", "Beni", "Dodi", "Daffa", "
Faqih", "Hafiz", "Nabil", "Nanda", "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) {
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 5.31 Contoh penggunaan AJAX
2.17 ECMA Script
2.2.1 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.
2.2.2 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”
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 2_17_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 5.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 2_17_2_setter_getter.html
1. <!DOCTYPE HTML>
2. <html>
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:
Object.defineProperty(objek, property, Menambah atau mengubah

descriptor) property objek
Object.definePropertyes(objek, Menambah atau mengubah
descriptor) banyak property sekaligus
pada objek
Object.getOwnPropertyDescriptor(objek, Mendapatkan descriptor dari
proprti) sebuah 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 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 2_17_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().
Gambar 5.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.
2.2.3 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.
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 2_17_4_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:
Gambar 5.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 2_17_5_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 ().
 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 2_17_6_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 2_17_7_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));
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 2_17_8_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
For…of digunakan untuk melakukan perulangan pada sebuah array dan
menghasilkan nilai dari anggota array pada setiap perulangan. Contoh
penggunaanya seperti skrip berikut:
File 2_17_9_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 5.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 2_17_10_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.
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 2_17_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 na
ma " + this.nama;
17. }
18.
19. }

Sample Menguasai React JS Untuk Pemula PDF

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Sample Menguasai React JS Untuk Pemula PDF

Diunggah oleh

Hak Cipta:

Format Tersedia

iii

DILARANG KERAS MEMBAGIKAN ATAU

Sanksi Pelanggaran Pasal 113

Undang-Undang Nomor 28 Tahun 2014 tentang Hak Cipta

Puji syukur penulis sampaikan ke hadirat Allah SWT, karena berkat

Akhir kata, penulis menyadari masih banyak terdapat kekurangan dalam

BAB 1 PETUNJUK PENGGUNAAN BUKU .......................................................................... 1

BAB 2 DASAR PEMROGRAMAN JAVASCRIPT ................................................................... 7

BAB 4 MENGGUNAKAN COMPONENT LIBRARY .......................................................... 137

BAB 5 MENGGUNAKAN MATERIAL UI ....................................................................... 159

BAB 6 MENERAPKAN ROUTING DAN AJAX ................................................................. 293

BAB 7 INTEGRASI DENGAN LARAVEL DAN INERTIA ................................................ 333

1.1 Untuk Siapa Buku Ini

1 | Menguasai React JS Untuk Pemula – Rohi Abdulloh

1.2 Kenapa React

1.3 Aplikasi Pendukung

Menguasai React JS Untuk Pemula – Rohi Abdulloh | 2

3 | Menguasai React JS Untuk Pemula – Rohi Abdulloh

1.5 Cara Menggunakan File Pendukung

Menguasai React JS Untuk Pemula – Rohi Abdulloh | 4

5 | Menguasai React JS Untuk Pemula – Rohi Abdulloh

2.1 Mengenal JavaScript

JavaScript merupakan bahasa pemrograman web yang pemrosesan ya

7 | Menguasai React JS Untuk Pemula – Rohi Abdulloh

Ada berbagai cara meletakkan kode JavaScript pada dokumen HTML.

Hasilnya seperti gambar berikut:

Menguasai React JS Untuk Pemula – Rohi Abdulloh | 8

2. Menggunakan Tag <script> (Internal)

Hasilnya seperti gambar berikut:

9 | Menguasai React JS Untuk Pemula – Rohi Abdulloh

3. Menggunakan tag <script src=””> (Eksternal)

Hasilnya seperti gambar berikut:

Menguasai React JS Untuk Pemula – Rohi Abdulloh | 10

2.2.3 Mengatasi Error pada JavaScript

Dalam menuliskan program pasti sering mengalami error pada program.

Gambar 5.4 Mengakses Console Log

11 | Menguasai React JS Untuk Pemula – Rohi Abdulloh

2.2.4 Menampilkan Hasil Program

Ada berbagai cara menampilkan hasil program yang dibuat dengan

Menguasai React JS Untuk Pemula – Rohi Abdulloh | 12

Hasil dari skrip di atas seperti gambar berikut:

Gambar 5.5 Berbagai cara menampilkan data

13 | Menguasai React JS Untuk Pemula – Rohi Abdulloh

Komentar pada pemrograman merupakan teks yang tidak akan

2.2 Konsep Dasar JavaScript

Variabel digunakan untuk menyimpan data berupa teks, angka, dan

Menguasai React JS Untuk Pemula – Rohi Abdulloh | 14

Selain dengan cara di atas, dapat juga mendeklarasikan beberapa

Variabel juga dapat dideklarasikan dengan langsung mendefinisikan nilai

Pada JavaScript terdapat batasan dalam mengakses variabel atau yang

15 | Menguasai React JS Untuk Pemula – Rohi Abdulloh

Hasilnya, hanya nilai variabel a yang ditampilkan seperti gambar

Gambar 5.6 Penggunaan variabel

Pada gambar di atas, variabel a berhasil ditampilkan walaupun

Menguasai React JS Untuk Pemula – Rohi Abdulloh | 16

Setiap bahasa pemrograman pasti mengenal yang namanya tipe data.

Operator merupakan sebuah simbol atau kata yang digunakan untuk

17 | Menguasai React JS Untuk Pemula – Rohi Abdulloh

+ Untuk penjumlahan, misal A = 10 dan B = 4, maka:

Menguasai React JS Untuk Pemula – Rohi Abdulloh | 18

== Berarti sama dengan, misal A = 10 dan B = 4, maka:

&& Menghasilkan nilai true jika kedua operand bernilai

19 | Menguasai React JS Untuk Pemula – Rohi Abdulloh