Pengantar JavaScript · menjadi lebih interaktif pada web browser? •Bagaimana membuat aplikasi...
Transcript of Pengantar JavaScript · menjadi lebih interaktif pada web browser? •Bagaimana membuat aplikasi...
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
Lingkup Eksekusi
Sumber: Mikowski et al – Single Page Web Application
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...!!!");
}
salam();
Cara Konvensional
function salam() {
console.log("Halo...!!!");
}
salam();
Fungsi yang tidak memiliki nama, yaitu function(), disebut fungsi anonim.
Self Executing Anonymous Function
Explicit Invocation
var salam = function() {
console.log("Halo...!!!");
}
salam();
Self-Executing Function
(function() {
console.log("Halo...!!!");
})();
Kegunaan Self Executing Anonymous Function
• Mengatur lingkup variabel (khususnya membuat variabel privat)
• Mencegah kebocoran akses/lingkup variabel
• Mencegah pollution of the global namespace
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