8. Pengantar JavaScript & DOM - agipk.lecture.ub.ac.id · Bagaimana membuat aplikasi berbasis web ... • Adobe Flash • Microsoft Silverlight ... PowerPoint Presentation Author:

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

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