Pengantar JavaScript. Agi Putra Kharisma, S.T., M.T.

Transkripsi

1 Pengantar JavaScript Agi Putra Kharisma, S.T., M.T.

2 Java Dengan Javascript?

3 Rumusan Masalah Bagaimana membuat aplikasi berbasis web menjadi lebih interaktif pada web browser? Bagaimana membuat aplikasi berbabis web menjadi lebih responsif pada web broswer? Bagaimana membuat aplikasi berbasis web menjadi lebih cerdas pada web browser?

4 HTML, CSS, JavaScript HTML (Struktur Dokumen) CSS (Tampilan Dokumen) JavaScript (Perilaku Dokumen)

5 Contoh Arsitektur Aplikasi Berbasis Web

6 JavaScript Pertama kali dikembangkan oleh Brendan Eich Mocha LiveScript JavaScript Kini distandarisasi oleh ECMAScript Awalnya dibuat dan dikembangkan di bawah perusahaan Netscape Communications, kini menjadi merk dagang milik Oracle Corporation JavaScript tidak hanya berjalan di web browser, tetapi juga berjalan di lingkungan lainnya, misalnya desktop dan server.

7 Beberapa Karakteristik JavaScript Lightweight Interpreted Object-Oriented (Prototype based) Scripting language Loosely typing Dynamic typing Functional Imperative First-class function... dsb

8 Lingkup Variabel (1) var tahanan_1 = 'Saya tidak terpenjara'; //global function penjara(){ } var tahanan_2 = 'Saya terpenjara'; // lokal penjara(); console.log(tahanan_1); console.log(tahanan_2); // error -> variabel lokal

9 Lingkup Variabel (2) tahanan_1 = 'Saya tidak terpenjara'; // global var tahanan_2 = 'Saya tidak terpenjara'; //global function penjara(){ tahanan_3 = 'Saya melarikan diri'; // global var tahanan_4 = 'Saya terpenjara'; // lokal } penjara(); console.log(tahanan_1); // Saya tidak terpenjara console.log(tahanan_2); // Saya tidak terpenjara console.log(tahanan_3); // Saya melarikan diri console.log(tahanan_4); // error -> variabel lokal

10 Sumber: Mikowski et al Single Page Web Application Lingkup Eksekusi

11 Variable Hoisting Ketika suatu variabel dideklarasikan pada JavaScript, maka deklarasi tersebut akan diangkat pada bagian atas lingkup fungsionalitasnya.

12 Variable Hoisting In Action function penjara() { console.log(tahanan_1); var tahanan_1 = "Halo...!!!" console.log(tahanan_1); } penjara();

13 JavaScript Object: Object Literal var MahasiswaS1 = { sks : 144, gelar : "Sarjana", salam : function() { console.log("halo, saya mahasiswa S1"); } }

14 Prototype var MahasiswaS1 = { sks : 144, gelar : "Sarjana", salam : function() { console.log("halo, saya mahasiswa S1"); } } var boni = Object.create(MahasiswaS1); boni.nama = "Boni";

15 Function Javascript mendukung paradigma functional programming, dimana fungsi adalah first-class object. Kita dapat menyimpan fungsi dalam suatu variabel, sebagai atribut fungsi lainnya, atau bahkan sebagai nilai balikan (return value) dari fungsi lain.

16 Menyimpan Fungsi Dalam Variabel Fungsi Dalam Variabel var salam = function() { console.log("halo...!!!"); } Cara Konvensional function salam() { console.log("halo...!!!"); } salam(); salam(); Fungsi yang tidak memiliki nama, yaitu function(), disebut fungsi anonim.

17 Self Executing Anonymous Function Explicit Invocation var salam = function() { console.log("halo...!!!"); } Self-Executing Function (function() { console.log("halo...!!!"); })(); salam();

18 Kegunaan Self Executing Anonymous Function Mengatur lingkup variabel (khususnya membuat variabel privat) Mencegah kebocoran akses/lingkup variabel Mencegah pollution of the global namespace

19 DOM

20 Javascript & DOM JavaScript can change all the HTML elements in the page JavaScript can change all the HTML attributes in the page JavaScript can change all the CSS styles in the page JavaScript can remove existing HTML elements and attributes JavaScript can add new HTML elements and attributes JavaScript can react to all existing HTML events in the page JavaScript can create new HTML events in the page

21 The DOM Is A Mess

22 Yang Perlu Diperhatikan Browser compatibility

23 Gunakanlah JavaScript Library

24 Next DOM, Ajax dan JQuery