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

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