JAVASCRIPT. Randy Cahya Wihandika, S.ST., M.Kom

JAVASCRIPT Randy Cahya Wihandika, S.ST., M.Kom.

WHAT JAVASCRIPT IS • JavaScript adalah cross platform, client-side programming

language

• JavaScript dan Java memiliki kemiripan sintaks namun tidak

memiliki hubungan di pengembangannya

• Berjalan di browser (client), bukan di server

• Tidak membutuhkan compiler • Kapabilitas JavaScript tergantung dukungan browser • Bahkan user dapat men-disable Javascript di browser

A BRIEF HISTORY • Dibuat oleh Brendan Lich di Netscape pada 1995 dengan nama

LiveScript

• Untuk tujuan marketing, namanya diubah menjadi JavaScript

• Seringkali disingkat menjadi JS • Pada awalnya, JavaScript seringkali disalahgunakan: – Redirect ke halaman lain – Pop-up yang mengganggu

WHAT JAVASCRIPT CAN DO • JavaScript digunakan untuk menambahkan interaktivitas pada

halaman web

• Tiga layer dalam halaman web: – Structural layer: HTML – Presentational layer: CSS – Behavioral layer: JavaScript

• Semua elemen halaman web dapat diakses oleh JavaScript

menggunakan DOM (Document Object Model)

WHAT JAVASCRIPT CAN DO • Contoh penggunaan JavaScript: – Mekanisme validasi informasi yang dimasukkan oleh user pada halaman

login atau register – Mekanisme text suggestion – Mengambil konten dan informasi dari server tanpa membuka halaman baru (AJAX) – Menampilkan dan menyembunyikan suatu bagian halaman

ADDING JAVASCRIPT TO A PAGE • JavaScript dapat ditambahkan ke halaman web secara internal

maupun eksternal (seperti pada CSS)

• Kelebihan dan kekurangan sama dengan CSS

• Internal: <script> alert(‘Hello, world!’);



• Eksternal: <script src="script.js">

ADDING JAVASCRIPT TO A PAGE • Tag <script> tersebut dapat diletakkan di dalam maupun

• Disarankan untuk diletakkan di tempat yang sama (konsisten) • Pada awalnya, kebanyakan developer meletakkan JavaScript di

dalam

<script src=“script1.js”> <script src=“script2.js”> ...



ADDING JAVASCRIPT TO A PAGE • Kini, teknik yang dianggap paling baik adalah meletakkan

JavaScript pada akhir

... ... <script src=“script1.js”> <script src=“script2.js”>

• Browser akan me-load struktur halaman web lebih dulu, baru

kemudian JavaScript

• Dengan begitu, halaman akan lebih cepat muncul, tidak terblok

saat loading JavaScript

BUILT-IN FUNCTIONS Ada beberapa fungsi built-in yang tersedia di JavaScript: • Alert – Digunakan untuk menampilkan informasi kepada user alert(‘Hello, Vokasi!’);

BUILT-IN FUNCTIONS • Confirm – Menampilkan pilihan kepada user dengan tombol OK dan Cancel confirm('Delete file?');

BUILT-IN FUNCTIONS • Prompt – Menerima input dari user prompt('Please enter your name: ');

STATEMENTS • Kode JavaScript disusun dari sekumpulan statement

• Statement adalah perintah kepada browser untuk melakukan

sesuatu

• Sangat disarankan untuk mengakhiri suatu statement dengan titik

koma (;)

• Contoh: alert(‘Hello, Vokasi!’);

COMMENTS • Komentar dapat dibuat dengan dua format: – Single line

– Multiline

// This is single line comment /* And this one

is a multiline comment */

VARIABLES • JavaScript bersifat case-sensitive (var1, Var1, dan VAR1 saling

berbeda)

• Karakter whitespace (spasi, tab, dan enter) diabaikan var nama =

‘Randy’;

• Beberapa aturan penamaan variabel: – Boleh mengandung huruf, angka, dan underscore – Harus diawali dengan huruf atau underscore – Tidak boleh mengandung karakter whitespace; sebagai alternatif, gunakan

underscore – Tidak boleh mengandung special characters (! . , / \ + * = dll)

VARIABLES • Nama variabel yang valid: – nama

– alamat1 – nama_depan

– _nama_belakang

• Nama variabel yang tidak valid: – nama depan – 1alamat

– alamat/kota

VARIABLES • Deklarasi dilakukan dengan keyword var var nama; var height;

var weight;

• Deklarasi dapat dilakukan dalam satu baris var nama, height, weight;

VARIABLES • Variabel yang dideklarasikan dapat langsung diberi nilai

(inisialisasi)

var nama = ‘Randy’; var height = 180; var weight = 71.5;

• Nilai suatu variabel dapat diubah (assignment) nama = ‘Randy Cahya’;

height = 181; weight = 70;

VARIABLES • JavaScript bersifat loosely typed (sebuah variabel dapat diisi

dengan nilai apapun) var1 = 10; var1 = 3.14;

var1 = ‘Hello World!’;

• String dapat dituliskan menggunakan tanda petik tunggal (‘)

maupun tanda petik ganda (“) var first_name = ‘Randy’;

var last_name = “Wihandika”;

CONCATENATION • Beberapa nilai dapat digabung dengan karakter + var name = ‘Randy’; var age = 17; var introduction = ‘My name is ‘ + name; alert(introduction); // My name is Randy alert(‘Hello, ‘ + name); // Hello, Randy alert(‘I am ‘ + age); // I am 17

ARRAYS • Array adalah beberapa nilai yang disimpan di satu variabel var foo = [5, "five", "5"];

• Nilai yang ada di array dapat di-refer dengan indeks

• Indeks pertama adalah nol alert(foo[0]); // "5" alert(foo[1]); // "five" alert(foo[2]); // "5"

• Panjang array dapat didapatkan dengan properti length alert(foo.length); // “3”

LOGIC • Pembandingan antara dua nilai dilakukan dengan operator: – Sama dengan (==)

– Tidak sama dengan (!=) – Kurang dari dan lebih dari (<, <=, >, >=)

username == ‘admin’ password == ‘passwd’ age >= 17

LOGIC • Untuk membandingkan dua nilai beserta tipe datanya, gunakan

operator === dan !==

• Contoh: 5 == ‘5’ //true 5 === ‘5’ //false

0 == ‘’ //true 0 === ‘’ //false ‘’ == false //true ‘’ === false //false

IF STATEMENTS • Digunakan untuk membuat keputusan

• Sintaks: if (condition) { statements }

• Contoh: if (username == ‘admin’ && password == ‘passwd’) { alert(‘Welcome, Admin!’); }

IF-ELSE STATEMENTS • Contoh: if (username == ‘admin’ && password == ‘passwd’) { alert(‘Welome, Admin!’); } else { alert(‘Incorrect username/password’); } if (age >= 17) { alert(‘You are permitted to access the page’); } else { alert(‘You are not permitted to access the page’); }

CONDITIONAL OPERATOR • Shortcut untuk statement IF

• Sintaks: condition ? expr1 : expr2

• Contoh: ‘The fee is ‘ + (isMember ? ‘$2.00’ : ‘$10.00’)

WHILE LOOPS • Mengulang statement dalam blok selama kondisi bernilai true

• Kode berikut menampilkan angka 1 sampai dengan 9 var i = 1;

while (i < 10) { alert(i);

i = i + 1; }

FOR LOOPS • Terdiri dari 3 bagian: inisialisasi, kondisi, dan ekspresi

• Inisialisasi hanya dieksekusi satu kali di awal • Kondisi dicek di setiap perulangan

• Ekspresi dieksekusi di setiap perulangan for (inisialisasi; kondisi; ekspresi) { statement; }

FOR LOOPS • Kode berikut menampilkan angka dari 1 sampai dengan 9 for (var i = 1; i < 10; i++) { alert(i); }

MORE BUILT-IN FUNCTIONS • Date – Mengembalikan tanggal dan waktu saat ini

var now = Date();

• parseInt – Mengkonversi nilai string ke integer

var number = parseInt(‘123’);

• setTimeout – Memanggil suatu fungsi dengan jeda tertentu

setTimeout(submit, 5000);

MORE BUILT-IN FUNCTIONS • parseFloat – Mengkonversi nilai string ke float

var number = parseFloat(‘3.14’);

MATH • Math adalah objek built-in di JavaScript yang memiliki properti

dan fungsi matematis

• Properti: – Math.E:

konstanta Euler

– Math.PI – Math.LN2:

– –

– – –

natural logarithm of 2, ~0.693 Math.LN10: natural logarithm of 10, ~2.303 Math.LOG2E: base 2 logarithm of E, ~1.443 Math.LOG10E: base 10 logarithm of E, ~0.434 Math.SQRT1_2: square root of 1/2, ~0.707 Math.SQRT2: square root of 2, ~1.414

MATH • Fungsi: – Math.abs(x)

– Math.random()

– Math.sin(x)

– Math.ceil(x)

– Math.asin(x)

– Math.floor(x)

– Math.acos(x)

– Math.pow(x,y)

– Math.cos(x)

– Math.sqrt(x)

– Math.tan(x)

– Math.round(x)

– Math.atan(x)

– Math.max()

– Math.log(x)

– Math.min()

– Math.exp(x)

BROWSER OBJECTS • JavaScript memilki akses untuk membaca dan memanipulasi

beberapa bagian browser: – history: –

– – – – – –

akses ke history location: akses ke URL status: akses ke status bar alert(): menampilkan informasi ke user confirm(): meminta konfirmasi ke user dengan tombol OK/Cancel prompt(): mendapatkan input dari user berupa teks close(): menutup window focus(): memberi fokus ke window

BROWSER OBJECTS • Contoh: – Mengarahkan ke URL seperti menekan tombol “Back” history.go(-1); history.back(); – Mengarahkan ke URL seperti menekan tombol “Forward”

history.go(1); history.forward(); – Me-reload halaman

history.go(0);

location.reload();

BROWSER OBJECTS • Contoh: – Mengarahkan ke URL tertentu

location.href = 'http://vokasi.ub.ac.id'; – Mengarahkan hash pada URL menjadi http://vokasi.ub.ac.id#title

location.hash = ‘title’; – Mengarahkan ke protokol https

location.protocol = ‘https:’ – Mengarahkan pathname

location.pathname = 'tentang-vokasi/tujuan';

SELECTORS • Seperti pada CSS, JavaScript juga dapat memilih suatu elemen

HTML untuk dimanipulasi

• Beberapa fungsi yang tersedia: – document.getElementById()

– document.getElementsByTagName() – document.getElementsByClassName()

– document.querySelectorAll()

• document adalah objek halaman web • Kecuali getElementById, semua fungsi mengembalikan daftar list

walaupun hanya satu elemen yang match

SELECTORS • Contoh:

var element = document.getElementById(‘name’); alert(element.innerHTML); // “Randy”

SELECTORS • Contoh:

One

Two

Three

var elements = document.getElementsByTagName(‘p’); alert(elements[0]); alert(elements[1]); alert(elements[2]);

SELECTORS • Contoh:

One

Two

Three

var elements = document.getElementsByClassName(‘paragraph’); alert(elements[0]); alert(elements[1]); alert(elements[2]);

SELECTORS • Fungsi querySelectorAll memilih elemen dengan CSS selector

• Contoh:

Paragraph

var name = document.querySelectorAll(‘#name’); var paragraph = document.querySelectorAll(‘.paragraph’); alert(name);

alert(paragraph);

ACCESSING ELEMENT CONTENTS • Teks/isi dari suatu elemen dapat dibaca dan dimanipulasi

menggunakan properti innerHTML

• Contoh:

var introDiv = document.getElementsByClassName(‘intro’); introDiv.innerHTML = ‘Halo, dunia!’;

ACCESSING ATTRIBUTE VALUE • Nilai suatu atribut elemen dapat diakses dengan fungsi getAttribute

dan setAttribute

• Contoh:

var image= document.getElementById(‘lead-image’); alert(image.getAttribute(‘src’)); // "stratocaster.jpg“

image.setAttribute(‘src’, ‘lespaul.jpg’);

ACCESSING ATTRIBUTE VALUE • Fungsi tersebut juga dapat digunakan untuk memanipulasi: – State suatu checkbox dan radio button (tercentang atau tidak)

– Lokasi CSS eksternal (atribut href dari elemen )

– Men-disable text field – dll

ACCESSING STYLE • Kita bisa mengubah style suatu elemen dengan properti style

• Nama style di CSS yang menggunakan karakter dash (-) diubah

menjadi camel case (background-color menjadi backgroundColor)

• Contoh: var bg = document.getElementById(‘intro’).style.backgroundColor; document.getElementById(‘intro’).style.color = ‘#fff’;

EVENTS • JavaScript dapat menunggu (listening) suatu event dan

melakukan sesuatu saat event tersebut terjadi

• Disebut dengan event binding

• Contoh event: – User mengklik tombol – User mengetik teks ke text field – Dokumen sudah ter-load – Form disubmit – Checkbox dicentang – dll

EVENTS • Ada tiga cara melakukan listening terhadap event pada suatu

elemen:

– Inline pada tag HTML – Menggunakan nama event handler

– Menggunakan fungsi addEventListener

EVENTS • Sama seperti pada CSS, teknik inline tidak disarankan

• Contoh: Click This

function myFunction() {

alert(‘Hello, world!’); }

EVENTS • Kekurangan pemberian event menggunakan nama event

handler: hanya satu event dapat diberikan pada suatu elemen

• Contoh: Click This

var tombol = document.getElementById(‘tombol’); tombol.onclick = function() {

alert(‘Hello, world!’); }

EVENTS • Dengan fungsi addEventListener, kita dapat memberikan lebih dari

satu event pada suatu elemen

• Contoh menggunakan fungsi addEventListener: Click This

var tombol = document.getElementById(‘tombol’); tombol.addEventListener(‘click’, function() {

alert(‘Hello, world!’); });

JAVASCRIPT LIBRARIES • “You don’t have to write everything from scratch.”

• JavaScript library adalah sekumpulan fungsi yang dapat kita

gunakan halaman web kita untuk melakukan operasi-operasi yang umum

• Sangat banyak JavaScript library yang tersedia

• Kebanyakan bersifat gratis dan open source • Beberapa library memiliki tujuan yang spesifik: memproses form,

animasi, chart, matematika, tanggal, dll

JAVASCRIPT LIBRARIES • jQuery (jquery.com) – Ditulis oleh John Resig pada 2005

– JavaScript library yang paling banyak digunakan hingga kini

• Dojo (dojotoolkit.org) • Prototype (prototypejs.org)

• MooTools (mootools.net) • YUI (yulibrary.com) • AngularJS (angularjs.org)

• Backbone.js (backbonejs.org)

SOME GOOD RESOURCES • https://developer.mozilla.org/en-US/docs/Web/JavaScript

• http://www.codecademy.com/en/tracks/javascript • http://code.tutsplus.com/categories/javascript