Otodidak Pemrograman JavaScript

Transkripsi

1

2 Otodidak Pemrograman JavaScript

3 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 Rp (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 Rp ,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 Rp ,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 Rp ,00 (empat miliar rupiah).

4 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 ISBN: [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

5 Otodidak Pemrograman JavaScript Jubilee Enterprise PENERBIT PT ELEX MEDIA KOMPUTINDO

6 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 v

7 DAFTAR ISI KATA PENGANTAR... V DAFTAR ISI...VII BAB 1 MENGENAL JAVASCRIPT Karakteristik Javascript Tool dan Syarat yang Dibutuhkan...2 Fungsi Javascript dalam Desain Website Kelemahan Javascript Kode Javascript Pertama: Halo Dunia!...3 Menjalankan Javascript Pengaturan Browser Disable/Enable Javascript Pesan Error...7 BAB 2 MENULIS JAVASCRIPT Memasukkan Kode Javascript Menggunakan Tag <script> Memasukkan Kode Javascript Menggunakan Tag <script src= > Memasukkan Kode Javascript Menggunakan Event Handler Menggunakan URL Lebih Jauh Menggunakan <script> Solusi 1: Meletakkan Javascript di Akhir HTML Solusi 2: Menggunakan Event onload...21 BAB 3 MENAMPILKAN HASIL JAVASCRIPT Mengenal Fungsi Alert Mengenal Console.log...26 vii

8 BAB 4 ATURAN PENULISAN JAVASCRIPT Case Sensitive Whitespace Menulis Komentar...30 Cara Penulisan Identifier Reserved Word...31 Semi Colon...34 BAB 5 MEMBUAT VARIABEL Cara Membuat Variabel Mengenal Variable Scope...36 Mengenal Tipe Data Konsep Objek pada Tipe Data Dasar Bekerja dengan Tipe Data Angka...40 Mengenal Operator Aritmatika Mengenal Urutan Prioritas Operator Aritmatika...41 NaN dan Infinity...43 BAB 6 OBJEK ANGKA DAN MATH Method toexponential()...45 Method tofixed() Method toprecision() Method tostring()...48 Objek Math Fungsi pada Objek Math...50 BAB 7 BEKERJA DENGAN STRING Menggunakan Karakter Khusus (Escape Sequences) Operator untuk String String dan Array...55 Properti dan Method Objek String Properti String.Length...56 Method String.charAt() Method String.charCodeAt() Method String.concat()...57 Method String.indexOf() Method String.localeCompare() Method String.match()...58 Method String.replace()...59 BAB 8 BOOLEAN Konversi Tipe Data Menjadi Boolean Method untuk Boolean...62 viii

9 BAB 9 PERBANDINGAN Operator Sama Dengan Operator Identik Dengan (===) Operator Tidak Sama Dengan Operator Tidak Identik Dengan Operator Kurang Dari dan Kurang atau Sama dengan Dari Operator Besar dari dan Besar atau Sama dengan Dari Operasi Logika...66 BAB 10 NULL DAN UNDEFINED Mengenal Null Mengenal Undefined...67 BAB 11 KONVERSI TIPE DATA Mengubah Tipe Data Menggunakan Operator Konversi Menggunakan Fungsi Fungsi Number Fungsi parseint() dan parsefloat() Fungsi String() Fungsi Boolean Menggunakan typeof...73 BAB 12 STRUKTUR LOGIKA DAN PERULANGAN Nested If Else If Mengenal Switch Perulangan For Perulangan While dan Do While Perulangan Do While...82 BAB 13 MENGENAL FRAMEWORK JAVASCRIPT Apa itu AngularJS? Kelebihan AngularJS Sebagai Framework Javascript Cara Download AngularJS Menggunakan NetBeans Menginstal Node.js Membuat Aplikasi Sederhana Include AngularJS Mengarahkan pada aplikasi AngularJS Menambahkan View Controller ix

10 13.7 Cara Alternatif Menggunakan AngularJS Alur Kerja AngularJS BAB 14 MENGENAL DIRECTIVE Directive ng-repeat ng-click ng-model ng-init Contoh Penggunaan Semua Directive Membuat Custom Directive Scope dalam AngularJS Child Scope Isolated Scope Fungsi Link dalam AngularJS Contoh Custom Directive BAB 15 MENGENAL KOMPONEN Expression Menggunakan Angka Menggunakan String Menggunakan Object Menggunakan Array Controller Filter Uppercase Lowercase Currency Filter Orderby Table HTML DOM Directive ng-disabled Directive ng-show Directive ng-hide Directive ng-click Modul Modul Aplikasi Modul Controller Menggunakan Modul Form Event x

11 ng-click Validasi Data BAB 16 INCLUDE DAN VIEWS Include Contoh Penggunaan Ajax View Directive ng-view Directive ng-template Layanan $routeprovider TENTANG PENULIS xi

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

13 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 clientside. 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. 2

14 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 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> 3

15 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 4

16 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 5