Pemrograman Web

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

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?

Interaktivitas Pada Web

Responsivitas Pada Web

Web Lebih Cerdas

Solusi Client-Side Programming:

Java Applets

Microsoft ActiveX

Microsoft VBScript

Adobe Flash

Microsoft Silverlight

HTML + CSS + JavaScript

http://www.troll.me/images/pissed-off-obama/we-need-a-solution-a-final-solution.jpg

http://treasure.diylol.com/uploads/post/image/599851/resized_winter-is-coming-meme-generator-javascript-is-coming-c1c977.jpg

Java Dengan Javascript?

http://www.ikdoeict.be/leercentrum/slides/javascript/img/01_syntax/hamster.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

Scripting language

Object-Oriented (Prototype based)

Loosely typing

Dynamic typing

Functional

Imperative

First-class function

... dsb

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.

Lingkup Variabel Global

Lokal

PERHATIAN:

Lingkup variabel pada JavaScript ditentukan berdasarkan lingkup fungsi (function scope), bukan lingkup blok (block scope)

Lingkup Eksekusi

Sumber: Mikowski et al – Single Page Web Application

Variable Hoisting Ketika suatu variabel dideklarasikan pada JavaScript

(dengan var), maka deklarasi tersebut akan ‘diangkat’ pada bagian atas lingkup fungsionalitasnya.

http://3.bp.blogspot.com/-2h7xoy007N4/UtQpkyrEh-I/AAAAAAAAAOU/xhJpDJ3ExU0/s1600/hoisted.png

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

Cara Mengakses Javascript Internal <script> ... </script>

Inline <input type="button" value="Hello World"

onClick="alert('Hello Yourself!')">

Eksternal

<script src="somejavascript.js"></script>

Bagaimana Javascript Mengakses Elemen – Elemen HTML?

http://www.myfacewhen.net/uploads/2058-thinking.jpg

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

http://www.globalnerdy.com/wordpress/wp-content/uploads/2014/08/javascript-and-the-good-parts.jpg

Contoh ‘kegilaan’ Javascript

alert(NaN === NaN);

var someVar = [];

alert(someVar == false);

var someVar = [];

if (someVar) alert('hello');

Contoh Lain: http://www.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/

https://brendaneich.com/files/2011/09/CapitolJS.021.png