8.

Pengantar JavaScript & DOM

PTI15010
Pemrograman Web
Agi Putra Kharisma, S.T., M.T.
Genap 2014/2015

Desain slide ini dadaptasi dari University of San Fransisco

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 Self-Executing Function

var salam = function() { (function() {

console.log("Halo...!!!"); console.log("Halo...!!!");
} })();

salam();
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
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