Desain slide ini dadaptasi dari University of San Fransisco
8. Pengantar JavaScript & DOM
PTI15010
Pemrograman Web
Agi Putra Kharisma, S.T., M.T.
Genap 2014/2015
Permasalahan
1. Bagaimana membuat aplikasi berbasis web menjadi lebih interaktif pada web browser?
2. Bagaimana membuat aplikasi berbabis web menjadi lebih responsif pada web broswer?
3. 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
Hubungan 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
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
Mencari Elemen HTML
Berdasarkan ID
document.getElementById()
Berdasarkan nama tag
document.getElementsByTagName()
Berdasarkan nama class
document.getElementsByClassName()
Contoh Memanipulasi Elemen HTML
Mengganti isi
element.innerHTML=
Mengganti atribut
element.attribute=
element.setAttribute(attribute,value)
Mengganti style
element.style.property=
Contoh Menambah Elemen Pada Body HTML
• Membuat elemen
var element = document.createElement(“tagname”)
• Membuat text node
var content = document.createTextNode(“text”)
• Memasukkan text node ke dalam elemen
element.appendChild(content)
• Menyisipkan elemen pada body dokumen HTML
document.body.appendChild(element)
Events
• Mouse
• onclick
• onmousedown
• onmouseup
• onmouseenter
• onmouseleave
• onmousemove
• ... dsb
• ... dsb
Contoh Menambah Events onclick
Melaui HTML
<element onclick=“.......”>
Melalui JavasScript
object.onclick=function(){ ..... }
Melalui JavasScript dengan method addEventListener()
Tidak didukung Internet Explorer <= 8
object.addEventListener(“click”, ...... }
Contoh (1)
<button onclick="getElementById('demo').innerHTML=Date()">What
is the time?</button>
Contoh (2)
<p id="demo" onclick="myFunction()">Click me to change my text
color.</p>
<script>
function myFunction() {
document.getElementById("demo").style.color = "red";
}
</script>
Mencari Objek HTML (1)
Mencari Objek HTML (2)
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