Pengantar JavaScript Agi Putra Kharisma, S.T., M.T.
Java Dengan Javascript? http://www.ikdoeict.be/leercentrum/slides/javascript/img/01_syntax/hamster.png
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?
HTML, CSS, JavaScript HTML (Struktur Dokumen) CSS (Tampilan Dokumen) JavaScript (Perilaku Dokumen)
Contoh Arsitektur Aplikasi Berbasis Web http://www.techsfo.com/blog/wp-content/uploads/2012/08/webarch.png
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.
Beberapa Karakteristik JavaScript Lightweight Interpreted Object-Oriented (Prototype based) Scripting language Loosely typing Dynamic typing Functional Imperative First-class function... dsb
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
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
Sumber: Mikowski et al Single Page Web Application Lingkup Eksekusi
Variable Hoisting Ketika suatu variabel dideklarasikan pada JavaScript, maka deklarasi tersebut akan diangkat pada bagian atas lingkup fungsionalitasnya.
Variable Hoisting In Action function penjara() { console.log(tahanan_1); var tahanan_1 = "Halo...!!!" console.log(tahanan_1); } penjara();
JavaScript Object: Object Literal var MahasiswaS1 = { sks : 144, gelar : "Sarjana", salam : function() { console.log("halo, saya mahasiswa S1"); } }
Prototype var MahasiswaS1 = { sks : 144, gelar : "Sarjana", salam : function() { console.log("halo, saya mahasiswa S1"); } } var boni = Object.create(MahasiswaS1); boni.nama = "Boni";
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.
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.
Self Executing Anonymous Function Explicit Invocation var salam = function() { console.log("halo...!!!"); } Self-Executing Function (function() { console.log("halo...!!!"); })(); salam();
Kegunaan Self Executing Anonymous Function Mengatur lingkup variabel (khususnya membuat variabel privat) Mencegah kebocoran akses/lingkup variabel Mencegah pollution of the global namespace
DOM http://www.w3schools.com/js/js_htmldom.asp
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 http://www.w3schools.com/js/js_htmldom.asp
The DOM Is A Mess http://ejohn.org/blog/the-dom-is-a-mess/
Yang Perlu Diperhatikan Browser compatibility
Gunakanlah JavaScript Library http://www.similartech.com/categories/javascript
Next DOM, Ajax dan JQuery