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

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

Fungsi

Fungsi • Fungsi adalah bagian kode yang hanya akan dieksekusi ketika dipanggil • Sintaks untuk membuat fungsi di JavaScript adalah: function ([argumen]) { <statemen> }

• Contoh: function greet() { alert(‘Hello, world!’); }

• Fungsi tersebut dapat dipanggil dengan: greet();

Fungsi • Beberapa bagian penulisan sebuah fungsi: • • • •

Keyword function Nama fungsi Kurung buka, argumen (opsional), kurung tutup Kurung kurawal buka, statemen (opsional), kurung kurawal tutup

• Aturan penamaan fungsi sama dengan aturan penamaan variabel • Beberapa contoh fungsi built-in di JavaScript adalah alert(), prompt(), dan confirm()

Fungsi • Sebuah fungsi dapat menerima masukan yang disebut dengan argumen • Contoh: function addNumbers(a, b) { //statemen }

• Beberapa argumen dipisahkan dengan koma • Fungsi tersebut dipanggil dengan: addNumbers(10, 20);

• Sebuah fungsi tidak harus memiliki argumen (contoh: fungsi greet()) • Tidak ada batasan jumlah argumen maksimum

Fungsi • Sebuah fungsi dapat mengembalikan sebuah nilai menggunakan keyword return • Contoh: function addNumbers(a, b) { var c = a + b; return c; }

• Fungsi tersebut dipanggil dengan: var jumlah = addNumbers(10, 20); alert(addNumbers(10, 20));

Fungsi • Sebuah fungsi tidak dapat mengembalikan lebih dari satu nilai sekaligus • Contoh: function coba() { var a = 10, b = 20, c = 30; // syntax error return a, b, c; }

Fungsi • Untuk mengatasinya, kita bisa gunakan array • Contoh: function coba() { var a = 10, b = 20, c = 30; // this is ok return [a, b, c]; }

Fungsi • Eksekusi sebuah fungsi berakhir pada akhir body (}) atau statemen return • Statemen setelah statemen return tidak akan dieksekusi • Contoh: function addNumbers(a, b) { var c = a + b; return c; // This will not be executed alert(‘Jumlahnya adalah: ‘, c); }

Elements

Adding & Removing Elements • Kita dapat memanipulasi elemen HTML (node) secara on the fly (saat halaman web dibuka) • Beberapa fungsi yang digunakan: • • • • •

createElement() appendChild() insertBefore() replaceChild() removeChild()

createElement() • Fungsi untuk membuat elemen baru • Tidak secara otomatis menambahkan elemen tersebut ke halaman • Elemen tersebut hanya berada di lingkup JavaScript sampai kita menambahkannya ke halaman • Contoh: var newDiv = document.createElement(‘div’);

appendChild() • Fungsi ini digunakan untuk menambahkan elemen yang telah dibuat secara on the fly ke halaman • Elemen tersebut ditambahkan ke dalam elemen lain yang berfungsi sebagai parent element • Contoh: var ourDiv = document.getElementById(‘our-div’); var newParagraph = document.createElement(‘p’); ourDiv.appendChild(newParagraph);

insertBefore() • Fungsi ini hampir sama dengan fungsi appendChild(), hanya saja elemen yang baru akan ditambahkan sebelum suatu elemen • Contoh:

Our paragraph text

var ourDiv = document.getElementById('our-div'); var paragraph = document.getElementById('our-paragraph'); var newHeading = document.createElement('h1'); ourDiv.insertBefore(newHeading, paragraph);

replaceChild() • Fungsi ini digunakan untuk me-replace suatu elemen dengan elemen yang lain • Fungsi ini menerima dua parameter: • Parameter pertama: elemen yang baru • Parameter kedua: elemen yang digantikan

• Contoh:

var ourDiv = document.getElementById('our-div'); var swapMe = document.getElementById('swap-me'); var newImg = document.createElement('img'); newImg.setAttribute('src', 'path/to/image.jpg'); ourDiv.replaceChild(newImg, swapMe);

removeChild() • Digunakan untuk menghapus sebuah elemen • Dipanggil dari parent element-nya • Contoh:

Harga BBM naik!

var parentDiv = document.getElementById('parent'); var removeMe = document.getElementById('remove-me'); parentDiv.removeChild(removeMe);

JavaScript Console

JavaScript Console • Merupakan bagian dari developer tools yang ada di browser • Untuk membuka developer tools di Google Chrome: Tools > More tools > JavaScript console atau Ctrl+Shift+J atau F12 • Berfungsi untuk menginspeksi obyek-obyek yang ada di JavaScript dengan dua cara: • Melalui fungsi-fungsi yang ada di Console API

• Melalui console secara langsung

JavaScript Console • Fungsi-fungsi yang ada di Console API: • • • • • • • • • • •

console.assert(expression, object) console.clear() console.count(label) console.debug(object [, object, ...]) console.dir(object) console.dirxml(object) console.error(object [, object, ...]) console.group(object[, object, ...]) console.groupCollapsed(object[, object, ...]) console.groupEnd() console.info(object [, object, ...])

JavaScript Console • Fungsi-fungsi yang ada di Console API: • • • • • • • • • •

console.log(object [, object, ...]) console.profile([label]) console.profileEnd() console.time(label) console.timeEnd(label) console.timeline(label) console.timelineEnd() console.timeStamp([label]) console.trace(object) console.warn(object [, object, ...])

console.log() • Menampilkan informasi dari JavaScript ke console • Menggunakan beberapa parameter yang akan ditampilkan dengan dipisahkan spasi • Identik dengan console.debug() dan console.info() • Contoh: var name = ‘John’; console.log(‘My name is‘, name);

console.log() • Dapat menggunakan formatting • Contoh: var name = 'John'; var age = 17; console.log("%s's age is %d", name, age);

console.group() • Mengelompokkan beberapa statemen console.log() yang diakhiri dengan console.groupEnd() • Contoh: console.group('Group1'); console.log('One'); console.log('Two'); console.log('Three'); console.groupEnd('Group1');

console.count() • Menuliskan berapa kali fungsi ini dipanggil dari baris yang sama dan dengan label yang sama • Contoh: for (var i = 0; i < 3; i++) { console.count('Login called'); }

console.trace() • Menampilkan stack trace dari pemanggilan fungsi ini • Contoh: function fn1() { fn2(); } function fn2() { console.trace('Message'); } fn1();

console.error() • Menampilkan sebuah informasi error beserta stack trace-nya • Contoh: function fn1() { fn2(); } function fn2() { console.error('Error occurs'); } fn1();

console.warn() • Menampilkan pesan warning dengan ikon • Contoh: console.warn('Warning: variable a may not be initialized.');

console.time() • Memulai timer dengan suatu label • Saat fungsi console.timeEnd() dipanggil dengan label yang sama, timer akan dihentikan dan waktunya akan ditampilkan • Contoh: console.time(‘Contoh’); //operasi console.timeEnd(‘Contoh’);

JavaScript Console • Kita dapat mengeksekusi statemen-statemen JavaScript melalui console secara langsung • Berfungsi untuk menginspeksi kode JavaScript • Contoh: var name = 'John', age = 17;

Regular Expression

Regular Expression • Regular expression adalah pola yang digunakan untuk pencocokan kombinasi karakter di string • Ada di (hampir) semua bahasa pemrograman • Contoh: • • • • •

Validasi username Validasi email Validasi alamat IP Validasi tanggal Validasi nomor kartu kredit

Regular Expression • Di JavaScript, obyek regular expression dapat dibuat dengan dua cara: • var re = /<pattern>/; • var re = new RegExp(‘<pattern>’);

• Contoh: • var re = /abc/; • var re = new RegExp(‘abc’);

Regular Expression • Kemudian dapat dilakukan pencocokan dengan fungsi test() yang menghasilkan nilai boolean: var matches = re.test(‘slabcraft’); //true

• Pencocokan juga dapat dilakukan dari string: var matches = ‘slabcraft’.search(re); //2

• Jika ditemukan kecocokan, maka fungsi tersebut mengembalikan indeks kecocokannya • Jika tidak, maka fungsi tersebut mengembalikan nilai -1

Regular Expression • Contoh validasi email ub.ac.id: var re = /^[a-zA-Z0-9_]+@ub\.ac\.id$/;

• Penggunaan: var email = ‘[email protected]’; if (re.test(email)) { alert(‘Email address is valid’); } else { alert(‘Email addres is invalid’); }

Regular Expression • Pola regular expression dibentuk dari karakter-karakter sederhana atau karakter-karakter yang memiliki makna tertentu • Contoh: • var re = /abc/; • var re = /^[a-zA-Z0-9_]+@ub\.ac\.id$/;

Regular Expression • Contoh: pola /abc/ bermakna “harus mengandung string abc” dan akan cocok dengan string: • ‘abcde’ • ‘abc123’

tetapi tidak cocok dengan string: • ‘a1b2c3’ • ‘a.b.c’

Regular Expression • Karakter ^ bermakna awal dari suatu string • Contoh: pola /^a/ bermakna “karakter pertama harus huruf a” dan akan cocok dengan string: • ‘abcde’ • ‘abc123’

tetapi tidak cocok dengan string: • ‘123abc’ • ‘.abc’

Regular Expression • Karakter $ bermakna akhir dari suatu string • Contoh: pola /z$/ bermakna “karakter pertama harus huruf a” dan akan cocok dengan string: • ‘vwxyz’ • ‘123z’

tetapi tidak cocok dengan string: • ‘xyz123’ • ‘xyz.’

Regular Expression • Karakter * bermakna suatu karakter boleh ada atau tidak • Contoh: pola /x*/ bermakna “boleh mengandung huruf x atau tidak” dan akan cocok dengan string: • ‘xyz’ • ‘1x2’ • ‘abc’

Regular Expression • Karakter + bermakna suatu karakter boleh ada atau tidak • Contoh: pola /x+/ bermakna “harus mengandung minimal 1 huruf x” dan akan cocok dengan string: • ‘xyz’ • ‘1x2’

tetapi tidak cocok dengan string: • ‘abc123’ • ‘a1b2c3

Regular Expression • Karakter . mewakili karakter apapun • Contoh: pola /ab./ bermakna “harus ada suatu karakter setelah string ab” dan akan cocok dengan string: • ‘abc’ • ‘123ab123’

tetapi tidak cocok dengan string: • ‘ab’ • ‘123ab’

Regular Expression • Karakter | bermakna “atau” • Contoh: pola /green|red/ bermakna “mengandung string green atau red” dan akan cocok dengan string: • ‘green apple’ • ‘red apple’

tetapi tidak cocok dengan string: • ‘good apple’

AJAX

AJAX • Asynchronous JavaScript and XML • Asynchronous berarti komunikasi dilakukan tanpa reload halaman • Dapat mengirim dan menerima informasi dalam berbagai format: plain text, HTML, XML, dan JSON • Menggunakan obyek XMLHttpRequest untuk berkomunikasi dengan server

AJAX • Langkah-langkah membuat komunikasi berbasis AJAX: 1. Membuat instance dari XMLHttpRequest var xhr = new XMLHttpRequest();

2. Menambahkan event listener onreadystatechange saat data berhasil diterima dari server httpRequest.onreadystatechange = function() { if (xhr.readyState !== 4) { // 4 = respons dari server telah diterima return; }

if (xhr.status === 200) { // 200 = tidak ada error di server } }

AJAX • Langkah-langkah membuat komunikasi berbasis AJAX: 3. Menspesifikasikan URL xhr.open('GET', ‘http://www.example.com/ajax.txt’); • Parameter pertama: metode HTTP request (GET, POST, HEAD, dll) • Parameter kedua: URL tujuan; berlaku same-origin policy • Parameter ketiga: true: asynchronous (default); false: synchronous

4. Memulai komunikasi xhr.send(); • Data tambahan dapat dikirim ke server dengan memberikan parameter pada fungsi send() • Contoh: xhr.send(‘test string’);

AJAX • Kita juga dapat mengirim data suatu form via AJAX:

var formData = new FormData(form); formData.append('secret_token', '1234567890'); // extra data xhr.send(formData);

Same-Origin Policy • Untuk alasan keamanan, komunikasi (termasuk AJAX) hanya bisa dilakukan pada domain yang sama • Jika komunikasi dilakukan pada domain yang berbeda, akan muncul error “Access not allowed” • Contoh: domain ptiik.ub.ac.id tidak diperbolehkan untuk mengakses domain vokasi.ub.ac.id • Komunikasi pada domain yang berbeda dapat dilakukan dengan konfigurasi khusus (CORS)

Same-Origin Policy • Contoh: akses dari http://store.company.com/dir/page.html URL

Outcome

Reason

http://store.company.com/dir2/other.html

Success

http://store.company.com/dir/inner/another.html

Success

https://store.company.com/secure.html

Failure

Different protocol

http://store.company.com:81/dir/etc.html

Failure

Different port

http://news.company.com/dir/other.html

Failure

Different host

Cross-Origin Resource Sharing • Mekanisme yang memungkinkan komunikasi antara domain yang berbeda • Konfigurasi dilakukan di sisi server • Akses diberikan dengan menambahkan baris di HTTP response header • Akses dapat diberikan kepada domain tertentu atau semua domain secara global • Contoh: Access-Control-Allow-Origin: http://foo.example Access-Control-Allow-Origin: *

JavaScript Object Notation

JavaScript Object Notation • JSON adalah format data plain text yang mudah ditulis dan diterjemahkan • JSON tidak tergantung bahasa pemrograman apapun • Bahasa pemrograman yang berbeda dapat bertukar data dalam format JSON • JSON juga digunakan pada komunikasi via AJAX untuk mengirim beberapa informasi sekaligus

JavaScript Object Notation • Contoh: var person = { name: ‘John’, age: 17, children: [‘Sam’, ‘Jackie’, ‘Tony’] }

• Data dapat diakses seperti berikut: alert(person.name); alert(person.age); alert(person.children[0]); alert(person.children[1]); alert(person.children[2]);

JavaScript Object Notation • Saat dikirim ke platform lain, data JSON ditulis dalam bentuk plain text var person = {name: ‘John’, age: 17}; // obyek JSON var data = “{name: ‘John’, age: 17}”; // plain text

• Ada fungsi yang native di JavaScript untuk menkonversi obyek JSON dari dan ke plain text: var data = JSON.stringify(person); // konversi dari obyek ke plain text var parsed = JSON.parse(data); // konversi dari plain text ke obyek

• Di banyak bahasa pemrograman yang lain, tersedia library-library untuk melakukan konversi serupa

JSON vs XML • XML memiliki fungsi yang sama dengan JSON var person = { name: ‘John’, age: 17, children: [‘Sam’, ‘Jackie’, ‘Tony’] } Sam Jackie Tony

console.log(‘Alhamdulillah’);