Otodidak Pemrograman JavaScript

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).

Otodidak Pemrograman JavaScript

Jubilee Enterprise © 2017, PT Elex Media Komputindo, Jakarta Hak cipta dilindungi undang-undang Diterbitkan pertama kali oleh Penerbit PT Elex Media Komputindo Kelompok Gramedia, Anggota IKAPI, Jakarta 2017

717050925 ISBN: 978-602-04-2241-1

[eEp]

Dilarang keras menerjemahkan, memfotokopi, atau memperbanyak sebagian atau seluruh isi buku ini tanpa izin tertulis dari penerbit. Dicetak oleh Percetakan PT Gramedia, Jakarta Isi di luar tanggung jawab percetakan

Otodidak Pemrograman JavaScript

Jubilee Enterprise

PENERBIT PT ELEX MEDIA KOMPUTINDO

v

KATA PENGANTAR

Javascript merupakan bahasa pemrograman wajib yang harus dikuasai oleh web developer, khususnya yang fokus pada pemrograman. Javascript bukanlah bahasa pemrograman baru sebab sejak awal tahun 2000, bahasa ini sudah banyak digunakan. Perkembangannya terasa lebih dahsyat setelah muncul berbagai framework Javascript yang salah satunya akan dibahas juga di dalam buku ini.

Belum terlambat untuk mempelajari Javascript karena bahasa ini akan terus berkembang beberapa tahun mendatang, dan belum ada pesaing tangguh untuk menyaingi client-side scripting ini.

Semoga dengan membaca buku ini, Anda dapat mengenal Javascript dengan cepat dan mudah.

Selamat berkarya!

Yogyakarta, 12 April 2017 Jubilee Enterprise “We Make Bestseller Book”

Thinkjubilee.com

vii

DAFTAR ISI

KATA PENGANTAR................................................................................ V DAFTAR ISI ........................................................................................VII BAB 1 MENGENAL JAVASCRIPT ........................................................... 1

1.1 Karakteristik Javascript..............................................................1 1.2 Tool dan Syarat yang Dibutuhkan .............................................2 1.3 Fungsi Javascript dalam Desain Website ...................................2 1.4 Kelemahan Javascript ...............................................................2 1.5 Kode Javascript Pertama: Halo Dunia! ......................................3 1.6 Menjalankan Javascript..............................................................5 1.7 Pengaturan Browser ..................................................................6

1.7.1 Disable/Enable Javascript.....................................................6 1.7.2 Pesan Error ..........................................................................7

BAB 2 MENULIS JAVASCRIPT ............................................................ 11 2.1 Memasukkan Kode Javascript Menggunakan Tag

<script>.................................................................................11 2.2 Memasukkan Kode Javascript Menggunakan Tag <script

src=””>..................................................................................13 2.3 Memasukkan Kode Javascript Menggunakan Event

Handler ...................................................................................15 2.3.1 Menggunakan URL.............................................................16

2.4 Lebih Jauh Menggunakan <script>........................................17 2.4.1 Solusi 1: Meletakkan Javascript di Akhir HTML...................20 2.4.2 Solusi 2: Menggunakan Event onload.................................21

BAB 3 MENAMPILKAN HASIL JAVASCRIPT ........................................... 23 3.2 Mengenal Fungsi Alert.............................................................25 3.3 Mengenal Console.log .............................................................26

viii

BAB 4 ATURAN PENULISAN JAVASCRIPT ............................................. 29 4.1 Case Sensitive .........................................................................29 4.2 Whitespace..............................................................................29 4.3 Menulis Komentar ...................................................................30 4.4 Cara Penulisan Identifier ..........................................................31 4.5 Reserved Word ........................................................................31 4.6 Semi Colon .............................................................................34

BAB 5 MEMBUAT VARIABEL .............................................................. 35 5.1 Cara Membuat Variabel ...........................................................35 5.2 Mengenal Variable Scope ........................................................36 5.3 Mengenal Tipe Data ................................................................39 5.4 Konsep Objek pada Tipe Data Dasar.......................................39 5.5 Bekerja dengan Tipe Data Angka ............................................40 5.6 Mengenal Operator Aritmatika.................................................41

5.6.1 Mengenal Urutan Prioritas Operator Aritmatika...................41 5.6.2 NaN dan Infinity .................................................................43

BAB 6 OBJEK ANGKA DAN MATH ...................................................... 45 6.1 Method toExponential() ...........................................................45 6.2 Method toFixed() .....................................................................46 6.3 Method toPrecision() ...............................................................47 6.4 Method toString() ....................................................................48 6.5 Objek Math .............................................................................49 6.6 Fungsi pada Objek Math .........................................................50

BAB 7 BEKERJA DENGAN STRING...................................................... 53 7.1 Menggunakan Karakter Khusus (Escape Sequences) ..............53 7.2 Operator untuk String .............................................................54 7.3 String dan Array ......................................................................55 7.4 Properti dan Method Objek String ...........................................56

7.4.1 Properti String.Length ........................................................56 7.4.2 Method String.charAt() .......................................................56 7.4.3 Method String.charCodeAt() ...............................................56 7.4.4 Method String.concat().......................................................57 7.4.5 Method String.indexOf() .....................................................57 7.4.6 Method String.localeCompare()..........................................58 7.4.7 Method String.match() .......................................................58 7.4.8 Method String.replace() ......................................................59

BAB 8 BOOLEAN............................................................................. 61 8.1 Konversi Tipe Data Menjadi Boolean .......................................61 8.2 Method untuk Boolean ............................................................62

ix

BAB 9 PERBANDINGAN..................................................................... 63 9.1 Operator Sama Dengan ..........................................................63 9.2 Operator Identik Dengan (===).............................................64 9.3 Operator Tidak Sama Dengan.................................................64 9.4 Operator Tidak Identik Dengan ...............................................65 9.5 Operator Kurang Dari dan Kurang atau Sama dengan

Dari .........................................................................................65 9.6 Operator Besar dari dan Besar atau Sama dengan Dari...........65 9.7 Operasi Logika ........................................................................66

BAB 10 NULL DAN UNDEFINED ........................................................... 67 10.1 Mengenal Null .........................................................................67 10.2 Mengenal Undefined................................................................67

BAB 11 KONVERSI TIPE DATA ............................................................ 69 11.1 Mengubah Tipe Data Menggunakan Operator .........................69 11.2 Konversi Menggunakan Fungsi................................................70

11.2.1 Fungsi Number ..................................................................70 11.2.2 Fungsi parseInt() dan parseFloat()......................................71 11.2.3 Fungsi String() ...................................................................72 11.2.4 Fungsi Boolean..................................................................72

11.3 Menggunakan typeof ...............................................................73 BAB 12 STRUKTUR LOGIKA DAN PERULANGAN...................................... 75

12.1 Nested If..................................................................................76 12.2 Else If ......................................................................................77 12.3 Mengenal Switch .....................................................................78 12.4 Perulangan For .......................................................................79 12.5 Perulangan While dan Do While ..............................................81 12.6 Perulangan Do While...............................................................82

BAB 13 MENGENAL FRAMEWORK JAVASCRIPT ...................................... 85 13.1 Apa itu AngularJS?..................................................................86 13.2 Kelebihan AngularJS Sebagai Framework Javascript...............87 13.3 Cara Download AngularJS.......................................................88 13.4 Menggunakan NetBeans .........................................................90 13.5 Menginstal Node.js ..................................................................94 13.6 Membuat Aplikasi Sederhana ..................................................95

13.6.1 Include AngularJS..............................................................99 13.6.2 Mengarahkan pada aplikasi AngularJS .............................100 13.6.3 Menambahkan View .........................................................100 13.6.4 Controller .........................................................................101

x

13.7 Cara Alternatif Menggunakan AngularJS ...............................101 13.8 Alur Kerja AngularJS .............................................................107

BAB 14 MENGENAL DIRECTIVE..........................................................111 14.1 Directive ................................................................................111

14.1.1 ng-repeat .........................................................................111 14.1.2 ng-click ............................................................................113 14.1.3 ng-model .........................................................................114 14.1.4 ng-init ..............................................................................116

14.2 Contoh Penggunaan Semua Directive ...................................116 14.3 Membuat Custom Directive ...................................................119 14.4 Scope dalam AngularJS ........................................................125

14.4.1 Child Scope .....................................................................128 14.4.2 Isolated Scope .................................................................129

14.5 Fungsi Link dalam AngularJS................................................136 14.6 Contoh Custom Directive ......................................................137

BAB 15 MENGENAL KOMPONEN........................................................145 15.1 Expression.............................................................................145

15.1.1 Menggunakan Angka .......................................................145 15.1.2 Menggunakan String ........................................................145 15.1.3 Menggunakan Object .......................................................146 15.1.4 Menggunakan Array .........................................................146

15.2 Controller ..............................................................................150 15.3 Filter .....................................................................................153

15.3.1 Uppercase........................................................................154 15.3.2 Lowercase........................................................................154 15.3.3 Currency ..........................................................................154 15.3.4 Filter ................................................................................155 15.3.5 Orderby............................................................................155

15.4 Table.....................................................................................158 15.5 HTML DOM...........................................................................161

15.5.1 Directive ng-disabled........................................................161 15.5.2 Directive ng-show.............................................................162 15.5.3 Directive ng-hide ..............................................................162 15.5.4 Directive ng-click..............................................................162

15.6 Modul....................................................................................164 15.6.1 Modul Aplikasi ..................................................................164 15.6.2 Modul Controller ..............................................................164 15.6.3 Menggunakan Modul........................................................165

15.7 Form.....................................................................................168 15.8 Event.....................................................................................169

xi

15.8.1 ng-click ............................................................................169 15.8.2 Validasi Data ....................................................................170

BAB 16 INCLUDE DAN VIEWS ............................................................175 16.1 Include ..................................................................................175

16.1.1 Contoh Penggunaan ........................................................176 16.2 Ajax .......................................................................................178 16.3 View ......................................................................................181

16.3.1 Directive ng-view ..............................................................181 16.3.2 Directive ng-template .......................................................181 16.3.3 Layanan $routeProvider....................................................182

TENTANG PENULIS ........................................................................... 187

1

MENGENAL JAVASCRIPT

Kalau Anda ingin menjadi seorang web developer yang dapat mendesain maupun melakukan pemrograman sekaligus, maka Javascript merupakan bahasa pemrograman wajib yang harus dikuasai. Javascript adalah bahasa pemrograman yang berkembang pesat. Buku ini mengajarkan kepada Anda langkah demi langkah mengenal Javascript.

1.1 Karakteristik Javascript

Javascript memiliki karakteristik sebagai berikut: Bahasa pemrograman berjenis high-level programming (syntax dan

struktur mudah dipahami karena menggunakan bahasa yang dimengerti manusia).

Bersifat client-side (hanya membutuhkan browser untuk menguji Javascript).

Berorientasi object (cocok buat Anda yang ingin masuk ke dalam konsep pemrograman berbasis objek).

Bersifat loosely typed (tidak membutuhkan deklarasi variabel terlebih dulu).

2

1.2 Tool dan Syarat yang Dibutuhkan

Untuk mempelajari dan membuat pemrograman website menggunakan Javascript, Anda tidak membutuhkan tool khusus. Minimal Anda memiliki dua tool standar berikut:

Text-Editor: silakan gunakan Notepad. Jika ingin text-editor yang lebih canggih, gunakan Notepad++. Namun apabila Anda ingin mempelajari framework Javascript yang akan dibahas nanti, disarankan untuk menggunakan NetBeans yang lebih lengkap fiturnya.

Browser: Anda bisa memilih Firefox, Chrome, atau lainnya.

HTML: Sebaiknya Anda sudah menguasai HTML terlebih dulu karena Javascript ditulis di antara tag-tag HTML.

1.3 Fungsi Javascript dalam Desain Website

Pemrograman dasar untuk pembuatan website adalah HTML. Namun HTML hanya bisa menghasilkan dokumen statis dan non-interaktif. Javascript diciptakan untuk mengatasi kelemahan ini. Apabila Anda ingin membuat situs yang dapat berinteraksi antara user dengan website secara cepat tanpa harus melibatkan web server, maka digunakanlah Javascript. Tanpa koneksi internet sekalipun, data yang diinput oleh user dapat langsung diproses. Hal ini terjadi karena Javascript bersifat client-side. Javascript dapat digunakan untuk berbagai keperluan. Bahkan, HTML5 baru bisa menghasilkan output optimal apabila Anda melibatkan Javascript.

1.4 Kelemahan Javascript

Di balik kehandalan dan popularitasnya, Javascript juga memiliki kelemahan-kelemahan. Berikut di antara kelemahan tersebut:

Pengakses internet dapat mematikan fitur Javascript pada browser sehingga ada kemungkinan website itu menjadi tidak berjalan semestinya bagi si pengakses.

3

Javascript dianggap pemrograman yang ‘tidak aman’ karena kode pemrograman dapat dilihat dan dimodifikasi oleh pengakses website.

Sangat tergantung pada kompabilitas browser terhadap kode-kode Javascript. Itu artinya, pemrograman Javascript saat ini mungkin tidak di-support oleh browser versi lama.

1.5 Kode Javascript Pertama: Halo Dunia!

Apakah Anda siap membuat website dengan memanfaatkan Javascript? Di bawah ini tersaji kode-kode pemrograman HTML dan Javascript yang dapat Anda coba: 1. Luncurkan Notepad++.

2. Ketik kode pemrograman di bawah ini: <!DOCTYPE html> <html> <head> <title>Halo Dunia! Belajar Javascript bersama Jubilee </title> <script type="text/javascript"> function halo_dunia() { var halo=document.getElementById("div_halo_dunia"); halo.innerHTML+="<p>Belajar Javascript Bareng Jubilee</p>"; } </script> </head> <body> <h1>Belajar Javascript</h1> <p>Saya belajar Javascript bareng Jubilee (Thinkjubilee.com)</p> <br/> <button id="tekan" onclick="halo_dunia()">Tekan Aku</button> <div id="div_halo_dunia"> </div> </body> </html>

4

Gambar 1.1 Menulis kode-kode Javascript menggunakan Notepad++

3. Tekan tombol Ctrl+S untuk menyimpan kode pemrograman tersebut.

4. Simpan dengan nama halodunia.html dan tekan tombol Save.

Gambar 1.2 Simpan dalam format HTML

5

1.6 Menjalankan Javascript

Menjalankan Javascript tidak membutuhkan persiapan khusus. Cukup cari file di atas (contoh: halodunia.html) menggunakan Windows Explorer. Kemudian klik-ganda dan secara otomatis browser akan terbuka. Selanjutnya, tampilan web di dalam browser pun akan ditampilkan.

Gambar 1.3 Tampilan website yang telah diberi kode-kode Javascript

Pada saat tombol Tekan Aku diklik, maka akan tampil teks yang telah disiapkan pada kode-kode di atas. Hasilnya menjadi seperti ini.

Gambar 1.4 Teks akan muncul begitu tombol ditekan