![Page 1: Pemrograman Web Agi Putra Kharisma, S.T., M.T.agipk.lecture.ub.ac.id/files/2014/09/Pengantar-Javascript.pdf · Kegunaan Self Executing Anonymous Function Mengatur lingkup variabel](https://reader031.vdocuments.pub/reader031/viewer/2022020217/5ce9ed8788c99374288b71f7/html5/thumbnails/1.jpg)
Pemrograman Web
Agi Putra Kharisma, S.T., M.T.
![Page 2: Pemrograman Web Agi Putra Kharisma, S.T., M.T.agipk.lecture.ub.ac.id/files/2014/09/Pengantar-Javascript.pdf · Kegunaan Self Executing Anonymous Function Mengatur lingkup variabel](https://reader031.vdocuments.pub/reader031/viewer/2022020217/5ce9ed8788c99374288b71f7/html5/thumbnails/2.jpg)
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?
![Page 3: Pemrograman Web Agi Putra Kharisma, S.T., M.T.agipk.lecture.ub.ac.id/files/2014/09/Pengantar-Javascript.pdf · Kegunaan Self Executing Anonymous Function Mengatur lingkup variabel](https://reader031.vdocuments.pub/reader031/viewer/2022020217/5ce9ed8788c99374288b71f7/html5/thumbnails/3.jpg)
Interaktivitas Pada Web
![Page 4: Pemrograman Web Agi Putra Kharisma, S.T., M.T.agipk.lecture.ub.ac.id/files/2014/09/Pengantar-Javascript.pdf · Kegunaan Self Executing Anonymous Function Mengatur lingkup variabel](https://reader031.vdocuments.pub/reader031/viewer/2022020217/5ce9ed8788c99374288b71f7/html5/thumbnails/4.jpg)
Responsivitas Pada Web
![Page 5: Pemrograman Web Agi Putra Kharisma, S.T., M.T.agipk.lecture.ub.ac.id/files/2014/09/Pengantar-Javascript.pdf · Kegunaan Self Executing Anonymous Function Mengatur lingkup variabel](https://reader031.vdocuments.pub/reader031/viewer/2022020217/5ce9ed8788c99374288b71f7/html5/thumbnails/5.jpg)
Web Lebih Cerdas
![Page 6: Pemrograman Web Agi Putra Kharisma, S.T., M.T.agipk.lecture.ub.ac.id/files/2014/09/Pengantar-Javascript.pdf · Kegunaan Self Executing Anonymous Function Mengatur lingkup variabel](https://reader031.vdocuments.pub/reader031/viewer/2022020217/5ce9ed8788c99374288b71f7/html5/thumbnails/6.jpg)
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
![Page 7: Pemrograman Web Agi Putra Kharisma, S.T., M.T.agipk.lecture.ub.ac.id/files/2014/09/Pengantar-Javascript.pdf · Kegunaan Self Executing Anonymous Function Mengatur lingkup variabel](https://reader031.vdocuments.pub/reader031/viewer/2022020217/5ce9ed8788c99374288b71f7/html5/thumbnails/7.jpg)
http://treasure.diylol.com/uploads/post/image/599851/resized_winter-is-coming-meme-generator-javascript-is-coming-c1c977.jpg
![Page 8: Pemrograman Web Agi Putra Kharisma, S.T., M.T.agipk.lecture.ub.ac.id/files/2014/09/Pengantar-Javascript.pdf · Kegunaan Self Executing Anonymous Function Mengatur lingkup variabel](https://reader031.vdocuments.pub/reader031/viewer/2022020217/5ce9ed8788c99374288b71f7/html5/thumbnails/8.jpg)
Java Dengan Javascript?
http://www.ikdoeict.be/leercentrum/slides/javascript/img/01_syntax/hamster.png
![Page 9: Pemrograman Web Agi Putra Kharisma, S.T., M.T.agipk.lecture.ub.ac.id/files/2014/09/Pengantar-Javascript.pdf · Kegunaan Self Executing Anonymous Function Mengatur lingkup variabel](https://reader031.vdocuments.pub/reader031/viewer/2022020217/5ce9ed8788c99374288b71f7/html5/thumbnails/9.jpg)
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.
![Page 10: Pemrograman Web Agi Putra Kharisma, S.T., M.T.agipk.lecture.ub.ac.id/files/2014/09/Pengantar-Javascript.pdf · Kegunaan Self Executing Anonymous Function Mengatur lingkup variabel](https://reader031.vdocuments.pub/reader031/viewer/2022020217/5ce9ed8788c99374288b71f7/html5/thumbnails/10.jpg)
Beberapa Karakteristik JavaScript Lightweight
Interpreted
Scripting language
Object-Oriented (Prototype based)
Loosely typing
Dynamic typing
Functional
Imperative
First-class function
... dsb
![Page 11: Pemrograman Web Agi Putra Kharisma, S.T., M.T.agipk.lecture.ub.ac.id/files/2014/09/Pengantar-Javascript.pdf · Kegunaan Self Executing Anonymous Function Mengatur lingkup variabel](https://reader031.vdocuments.pub/reader031/viewer/2022020217/5ce9ed8788c99374288b71f7/html5/thumbnails/11.jpg)
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.
![Page 12: Pemrograman Web Agi Putra Kharisma, S.T., M.T.agipk.lecture.ub.ac.id/files/2014/09/Pengantar-Javascript.pdf · Kegunaan Self Executing Anonymous Function Mengatur lingkup variabel](https://reader031.vdocuments.pub/reader031/viewer/2022020217/5ce9ed8788c99374288b71f7/html5/thumbnails/12.jpg)
Lingkup Variabel Global
Lokal
PERHATIAN:
Lingkup variabel pada JavaScript ditentukan berdasarkan lingkup fungsi (function scope), bukan lingkup blok (block scope)
![Page 13: Pemrograman Web Agi Putra Kharisma, S.T., M.T.agipk.lecture.ub.ac.id/files/2014/09/Pengantar-Javascript.pdf · Kegunaan Self Executing Anonymous Function Mengatur lingkup variabel](https://reader031.vdocuments.pub/reader031/viewer/2022020217/5ce9ed8788c99374288b71f7/html5/thumbnails/13.jpg)
Lingkup Eksekusi
Sumber: Mikowski et al – Single Page Web Application
![Page 14: Pemrograman Web Agi Putra Kharisma, S.T., M.T.agipk.lecture.ub.ac.id/files/2014/09/Pengantar-Javascript.pdf · Kegunaan Self Executing Anonymous Function Mengatur lingkup variabel](https://reader031.vdocuments.pub/reader031/viewer/2022020217/5ce9ed8788c99374288b71f7/html5/thumbnails/14.jpg)
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
![Page 15: Pemrograman Web Agi Putra Kharisma, S.T., M.T.agipk.lecture.ub.ac.id/files/2014/09/Pengantar-Javascript.pdf · Kegunaan Self Executing Anonymous Function Mengatur lingkup variabel](https://reader031.vdocuments.pub/reader031/viewer/2022020217/5ce9ed8788c99374288b71f7/html5/thumbnails/15.jpg)
Self Executing Anonymous Function Explicit Invocation
var salam = function() {
console.log("Halo...!!!");
}
salam();
Self-Executing Function
(function() {
console.log("Halo...!!!");
})();
![Page 16: Pemrograman Web Agi Putra Kharisma, S.T., M.T.agipk.lecture.ub.ac.id/files/2014/09/Pengantar-Javascript.pdf · Kegunaan Self Executing Anonymous Function Mengatur lingkup variabel](https://reader031.vdocuments.pub/reader031/viewer/2022020217/5ce9ed8788c99374288b71f7/html5/thumbnails/16.jpg)
Kegunaan Self Executing Anonymous Function Mengatur lingkup variabel (khususnya membuat
variabel privat)
Mencegah kebocoran akses/lingkup variabel
Mencegah pollution of the global namespace
![Page 17: Pemrograman Web Agi Putra Kharisma, S.T., M.T.agipk.lecture.ub.ac.id/files/2014/09/Pengantar-Javascript.pdf · Kegunaan Self Executing Anonymous Function Mengatur lingkup variabel](https://reader031.vdocuments.pub/reader031/viewer/2022020217/5ce9ed8788c99374288b71f7/html5/thumbnails/17.jpg)
Cara Mengakses Javascript Internal <script> ... </script>
Inline <input type="button" value="Hello World"
onClick="alert('Hello Yourself!')">
Eksternal
<script src="somejavascript.js"></script>
![Page 18: Pemrograman Web Agi Putra Kharisma, S.T., M.T.agipk.lecture.ub.ac.id/files/2014/09/Pengantar-Javascript.pdf · Kegunaan Self Executing Anonymous Function Mengatur lingkup variabel](https://reader031.vdocuments.pub/reader031/viewer/2022020217/5ce9ed8788c99374288b71f7/html5/thumbnails/18.jpg)
Bagaimana Javascript Mengakses Elemen – Elemen HTML?
http://www.myfacewhen.net/uploads/2058-thinking.jpg
![Page 20: Pemrograman Web Agi Putra Kharisma, S.T., M.T.agipk.lecture.ub.ac.id/files/2014/09/Pengantar-Javascript.pdf · Kegunaan Self Executing Anonymous Function Mengatur lingkup variabel](https://reader031.vdocuments.pub/reader031/viewer/2022020217/5ce9ed8788c99374288b71f7/html5/thumbnails/20.jpg)
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
![Page 21: Pemrograman Web Agi Putra Kharisma, S.T., M.T.agipk.lecture.ub.ac.id/files/2014/09/Pengantar-Javascript.pdf · Kegunaan Self Executing Anonymous Function Mengatur lingkup variabel](https://reader031.vdocuments.pub/reader031/viewer/2022020217/5ce9ed8788c99374288b71f7/html5/thumbnails/21.jpg)
http://www.globalnerdy.com/wordpress/wp-content/uploads/2014/08/javascript-and-the-good-parts.jpg
![Page 22: Pemrograman Web Agi Putra Kharisma, S.T., M.T.agipk.lecture.ub.ac.id/files/2014/09/Pengantar-Javascript.pdf · Kegunaan Self Executing Anonymous Function Mengatur lingkup variabel](https://reader031.vdocuments.pub/reader031/viewer/2022020217/5ce9ed8788c99374288b71f7/html5/thumbnails/22.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/
![Page 23: Pemrograman Web Agi Putra Kharisma, S.T., M.T.agipk.lecture.ub.ac.id/files/2014/09/Pengantar-Javascript.pdf · Kegunaan Self Executing Anonymous Function Mengatur lingkup variabel](https://reader031.vdocuments.pub/reader031/viewer/2022020217/5ce9ed8788c99374288b71f7/html5/thumbnails/23.jpg)
https://brendaneich.com/files/2011/09/CapitolJS.021.png