pengantar javascript · menjadi lebih interaktif pada web browser? •bagaimana membuat aplikasi...
TRANSCRIPT
![Page 1: Pengantar JavaScript · menjadi lebih interaktif pada web browser? •Bagaimana membuat aplikasi berbabis web menjadi lebih responsif pada web broswer? •Bagaimana membuat aplikasi](https://reader034.vdocuments.pub/reader034/viewer/2022050412/5f88d8a02a040e40b253a0b2/html5/thumbnails/1.jpg)
Pengantar JavaScript
Agi Putra Kharisma, S.T., M.T.
![Page 2: Pengantar JavaScript · menjadi lebih interaktif pada web browser? •Bagaimana membuat aplikasi berbabis web menjadi lebih responsif pada web broswer? •Bagaimana membuat aplikasi](https://reader034.vdocuments.pub/reader034/viewer/2022050412/5f88d8a02a040e40b253a0b2/html5/thumbnails/2.jpg)
Java Dengan Javascript?
http://www.ikdoeict.be/leercentrum/slides/javascript/img/01_syntax/hamster.png
![Page 3: Pengantar JavaScript · menjadi lebih interaktif pada web browser? •Bagaimana membuat aplikasi berbabis web menjadi lebih responsif pada web broswer? •Bagaimana membuat aplikasi](https://reader034.vdocuments.pub/reader034/viewer/2022050412/5f88d8a02a040e40b253a0b2/html5/thumbnails/3.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 4: Pengantar JavaScript · menjadi lebih interaktif pada web browser? •Bagaimana membuat aplikasi berbabis web menjadi lebih responsif pada web broswer? •Bagaimana membuat aplikasi](https://reader034.vdocuments.pub/reader034/viewer/2022050412/5f88d8a02a040e40b253a0b2/html5/thumbnails/4.jpg)
HTML, CSS, JavaScript
HTML
(Struktur Dokumen)
CSS (Tampilan Dokumen)
JavaScript (Perilaku Dokumen)
![Page 5: Pengantar JavaScript · menjadi lebih interaktif pada web browser? •Bagaimana membuat aplikasi berbabis web menjadi lebih responsif pada web broswer? •Bagaimana membuat aplikasi](https://reader034.vdocuments.pub/reader034/viewer/2022050412/5f88d8a02a040e40b253a0b2/html5/thumbnails/5.jpg)
Contoh Arsitektur Aplikasi Berbasis Web
http://www.techsfo.com/blog/wp-content/uploads/2012/08/webarch.png
![Page 6: Pengantar JavaScript · menjadi lebih interaktif pada web browser? •Bagaimana membuat aplikasi berbabis web menjadi lebih responsif pada web broswer? •Bagaimana membuat aplikasi](https://reader034.vdocuments.pub/reader034/viewer/2022050412/5f88d8a02a040e40b253a0b2/html5/thumbnails/6.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 7: Pengantar JavaScript · menjadi lebih interaktif pada web browser? •Bagaimana membuat aplikasi berbabis web menjadi lebih responsif pada web broswer? •Bagaimana membuat aplikasi](https://reader034.vdocuments.pub/reader034/viewer/2022050412/5f88d8a02a040e40b253a0b2/html5/thumbnails/7.jpg)
Beberapa Karakteristik JavaScript
• Lightweight • Interpreted • Object-Oriented (Prototype based) • Scripting language • Loosely typing • Dynamic typing • Functional • Imperative • First-class function • ... dsb
![Page 8: Pengantar JavaScript · menjadi lebih interaktif pada web browser? •Bagaimana membuat aplikasi berbabis web menjadi lebih responsif pada web broswer? •Bagaimana membuat aplikasi](https://reader034.vdocuments.pub/reader034/viewer/2022050412/5f88d8a02a040e40b253a0b2/html5/thumbnails/8.jpg)
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
![Page 9: Pengantar JavaScript · menjadi lebih interaktif pada web browser? •Bagaimana membuat aplikasi berbabis web menjadi lebih responsif pada web broswer? •Bagaimana membuat aplikasi](https://reader034.vdocuments.pub/reader034/viewer/2022050412/5f88d8a02a040e40b253a0b2/html5/thumbnails/9.jpg)
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
![Page 10: Pengantar JavaScript · menjadi lebih interaktif pada web browser? •Bagaimana membuat aplikasi berbabis web menjadi lebih responsif pada web broswer? •Bagaimana membuat aplikasi](https://reader034.vdocuments.pub/reader034/viewer/2022050412/5f88d8a02a040e40b253a0b2/html5/thumbnails/10.jpg)
Lingkup Eksekusi
Sumber: Mikowski et al – Single Page Web Application
![Page 11: Pengantar JavaScript · menjadi lebih interaktif pada web browser? •Bagaimana membuat aplikasi berbabis web menjadi lebih responsif pada web broswer? •Bagaimana membuat aplikasi](https://reader034.vdocuments.pub/reader034/viewer/2022050412/5f88d8a02a040e40b253a0b2/html5/thumbnails/11.jpg)
Variable Hoisting
• Ketika suatu variabel dideklarasikan pada JavaScript, maka deklarasi tersebut akan ‘diangkat’ pada bagian atas lingkup fungsionalitasnya.
![Page 12: Pengantar JavaScript · menjadi lebih interaktif pada web browser? •Bagaimana membuat aplikasi berbabis web menjadi lebih responsif pada web broswer? •Bagaimana membuat aplikasi](https://reader034.vdocuments.pub/reader034/viewer/2022050412/5f88d8a02a040e40b253a0b2/html5/thumbnails/12.jpg)
Variable Hoisting In Action
function penjara() {
console.log(tahanan_1);
var tahanan_1 = "Halo...!!!"
console.log(tahanan_1);
}
penjara();
![Page 13: Pengantar JavaScript · menjadi lebih interaktif pada web browser? •Bagaimana membuat aplikasi berbabis web menjadi lebih responsif pada web broswer? •Bagaimana membuat aplikasi](https://reader034.vdocuments.pub/reader034/viewer/2022050412/5f88d8a02a040e40b253a0b2/html5/thumbnails/13.jpg)
JavaScript Object: Object Literal
var MahasiswaS1 = {
sks : 144,
gelar : "Sarjana",
salam : function() {
console.log("Halo, saya mahasiswa S1");
}
}
![Page 14: Pengantar JavaScript · menjadi lebih interaktif pada web browser? •Bagaimana membuat aplikasi berbabis web menjadi lebih responsif pada web broswer? •Bagaimana membuat aplikasi](https://reader034.vdocuments.pub/reader034/viewer/2022050412/5f88d8a02a040e40b253a0b2/html5/thumbnails/14.jpg)
Prototype
var MahasiswaS1 = {
sks : 144,
gelar : "Sarjana",
salam : function() {
console.log("Halo, saya mahasiswa S1");
}
}
var boni = Object.create(MahasiswaS1);
boni.nama = "Boni";
![Page 15: Pengantar JavaScript · menjadi lebih interaktif pada web browser? •Bagaimana membuat aplikasi berbabis web menjadi lebih responsif pada web broswer? •Bagaimana membuat aplikasi](https://reader034.vdocuments.pub/reader034/viewer/2022050412/5f88d8a02a040e40b253a0b2/html5/thumbnails/15.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 16: Pengantar JavaScript · menjadi lebih interaktif pada web browser? •Bagaimana membuat aplikasi berbabis web menjadi lebih responsif pada web broswer? •Bagaimana membuat aplikasi](https://reader034.vdocuments.pub/reader034/viewer/2022050412/5f88d8a02a040e40b253a0b2/html5/thumbnails/16.jpg)
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.
![Page 17: Pengantar JavaScript · menjadi lebih interaktif pada web browser? •Bagaimana membuat aplikasi berbabis web menjadi lebih responsif pada web broswer? •Bagaimana membuat aplikasi](https://reader034.vdocuments.pub/reader034/viewer/2022050412/5f88d8a02a040e40b253a0b2/html5/thumbnails/17.jpg)
Self Executing Anonymous Function
Explicit Invocation
var salam = function() {
console.log("Halo...!!!");
}
salam();
Self-Executing Function
(function() {
console.log("Halo...!!!");
})();
![Page 18: Pengantar JavaScript · menjadi lebih interaktif pada web browser? •Bagaimana membuat aplikasi berbabis web menjadi lebih responsif pada web broswer? •Bagaimana membuat aplikasi](https://reader034.vdocuments.pub/reader034/viewer/2022050412/5f88d8a02a040e40b253a0b2/html5/thumbnails/18.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 20: Pengantar JavaScript · menjadi lebih interaktif pada web browser? •Bagaimana membuat aplikasi berbabis web menjadi lebih responsif pada web broswer? •Bagaimana membuat aplikasi](https://reader034.vdocuments.pub/reader034/viewer/2022050412/5f88d8a02a040e40b253a0b2/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: Pengantar JavaScript · menjadi lebih interaktif pada web browser? •Bagaimana membuat aplikasi berbabis web menjadi lebih responsif pada web broswer? •Bagaimana membuat aplikasi](https://reader034.vdocuments.pub/reader034/viewer/2022050412/5f88d8a02a040e40b253a0b2/html5/thumbnails/21.jpg)
The DOM Is A Mess
http://ejohn.org/blog/the-dom-is-a-mess/
![Page 22: Pengantar JavaScript · menjadi lebih interaktif pada web browser? •Bagaimana membuat aplikasi berbabis web menjadi lebih responsif pada web broswer? •Bagaimana membuat aplikasi](https://reader034.vdocuments.pub/reader034/viewer/2022050412/5f88d8a02a040e40b253a0b2/html5/thumbnails/22.jpg)
Yang Perlu Diperhatikan • Browser compatibility
![Page 23: Pengantar JavaScript · menjadi lebih interaktif pada web browser? •Bagaimana membuat aplikasi berbabis web menjadi lebih responsif pada web broswer? •Bagaimana membuat aplikasi](https://reader034.vdocuments.pub/reader034/viewer/2022050412/5f88d8a02a040e40b253a0b2/html5/thumbnails/23.jpg)
Gunakanlah JavaScript Library
http://www.similartech.com/categories/javascript
![Page 24: Pengantar JavaScript · menjadi lebih interaktif pada web browser? •Bagaimana membuat aplikasi berbabis web menjadi lebih responsif pada web broswer? •Bagaimana membuat aplikasi](https://reader034.vdocuments.pub/reader034/viewer/2022050412/5f88d8a02a040e40b253a0b2/html5/thumbnails/24.jpg)
Next
• DOM, Ajax dan JQuery