Modul 5 Praktikum Rekayasa Web

Modul Praktikum Rekayasa Web

 

 

Pertemuan ke-5:

BOM, jQuery, AJAX

 

 

 

 

 

 

 

Disusun oleh

Dr. Uung Ungkawa, MT

 

 


Modul 5

BOM, jQuery, AJAX

 

Tujuan :

  1. Menunjang mata kuliah Rekayasa Web
  2. Mengetahui, mengenal dan memahami Javascript, BOM, jQuery dan AJAX
  3. Mengenal dan memahami pemrograman web sisi klien dengan Javascript

Jenis Praktikum :

  1. Eksplorasi Javascript, jQuery, AJAX

Persyaratan :

  1. Praktikan harus menyiapkan terminal (Windows) perintah.
  2. Praktikan harus menyiapkan penyunting teks (text editor). Disrankan menggunakan Eclipse, Visual Studio Code, Netbean, Notepad++.
  3. Praktikan harus menyiapkan browser (Chrome, Firefox).

Perangkat praktikum :

  1. PC / Notebook

Materi

Modul ini membahas BOM (Browser Object Model) yang beguna untuk menangani browser. Browser menampilkan halaman web dalam jendela (window) dan menggunakan layar (screen) sebagai lahan untuk jemndela tersebut. Oleh karena itu, di sini disajikan BOM untuk window dan screen.

Materi berikutnya adalah jQuery yang merupakan pustaka Javascript. Dengan pustaka, kita bisa melakukan lebih banyak pekerjaan karena menghemat waktu. Sebagaimana kita kenal, pustaka merupakan kumpulan fungsi, prosedur, metode yang dapat mempermudah dan menyederhanakan program.

Setelah banyak mengeksplorasi Javascript (selanjutnya disingkat JS), perlu juga dikaji konsep dan pemrograman JS untuk AJAX. Dengan AJAX, aplikasi dapat membaca data dari server setelah halaman dimuat, memperbarui halaman web tanpa muat ulang halaman dan mengirim data ke server di belakang layar.

BOM

Objek window merupakan window browser dan didukung oleh semua browser. Semua objek, fungsi dan variabel JS global otomatis menjadi member (bagian) objek window ini. Variabel global adalah properti dari dari objek window, fungsi global adalah metode dari objek window bahkan objek document merupakan properti dari objek window, sehingga document.getElementById(“id1”); berasal dari window. document.getElementById(“id1”);.

Window

Ada dua properti yang dapat digunakan untuk menentukan ukuran window browser, keduanya memberikan nilai dalam pixel: window.innerHeight dan window.innerWidth. Perlu dicatat bahwa window browser tidak termasuk toolbar dan scrollbar. Metode window yang lain adalah:

window.open() untuk membuka window baru

window.close() untuk menutup window aktif

window.moveTo() untuk memindahkan window aktif

window.resizeTo() untuk mengubah ukuran window aktif

Screen

Objek window.screen dapat dituliskan tanpa awalan window, dengan sejumlah properti sebagai berikut:

screen.width; //untuk mengambil lebar layar dalam pixel.

screen.height; //untuk mengambil tinggi layar dalam pixel.

screen.availWidth; //lebar yang tersisa setelah taskbar dan UI

screen.availHeight; //lebar yang tersisa setelah taskbar dan UI

Lokasi

Objek window.location digunakan untuk mengambil alamat halaman yang aktif dan mengalihkan browser ke halaman baru. Beberapa contohnya:

window.location.href; //memberi href (URL) halaman yg sekarang

window.location.hostname; //memberi nama domain

window.location.pathname //memberi path dan nama file halaman sekarang

window.location.protocol; //memberi protokol yang (http: or httpssmile

window.location.assign(); //memuat dokumen baru

History

Objek window.history boleh dituliskan tanpa awalan window. Untuk melindungi privasi pengguna, ada batasan bagaimana JS mengakses objek ini. Ada dua metode di sini:

history.back(); //sama seperti klik panah mundur di browser

history.forward(); //sama seperti klik panah maju di browser

Navigator

Objek window.navigator berisi informasi tentang browser pengunjung. Objek ini boleh ditulis tanpa awalan window. Beberapa properti:

navigator.appName; //memberi nama aplikasi seperti Netscape

navigator.appCodeName; // memberi kode nama aplikasi seperti Mozilla: yang merupakan kode aplikasi untuk Chrome, Fireforx, IE, Safari dan Opera

navigator.platform; //mengambil sistem operasi

Popup

JS memiliki tiga jenis kotak popup: alert box (peringatan), confirm box (konfirmasi) dan prompt box (permintaan). Alert box sering digunakan jika kita ingin memastikan informasi sampai ke pengguna. Ketika muncul kotak alert, pengguna harus mengklik tombol “OK” untuk lanjut. Metode window.alert() dapat ditulis tanpa awalan window.

Kotak konfirmasi sering digunakan jika ingin pengguna memverifikasi atau menerima sesuatu. Ketika kotak konfirmasi muncul, pengguna harus mengklik “OK” atau “Cancel” untuk lanjut. Jika mengklik “OK” kotak mengembalikan nilai true dan jika “Cancel”, mengembalikan nilai false.

Kotak permintaan sering digunakan agar pengguna memasukkan nilai sebelum memasuki halaman web. Ketika kotak permintaan muncul, pengguna harus mengklik “OK” atau “Cancel” untuk lanjut setelah memasukkan nilai tertentu. Jika mengklik “OK” kotak mengembalikan nilai yang dimasukkan dan jika “Cancel”, kotak mengembalikan nilai null.

Timing Event

Objek window memungkinkan untuk eksekusi kode JS pada rentang tiap rentang (interval) waktu tertentu. Rentang waktu ini disebut timing event (kejadian berwaktu). Dua metode untuk menentukan timing event:

setTimeout(fungsi, milidetik) //eksekusi fungsi setelah menunggu sekian milidetik

setInterval(fungsi, milidetik) //eksekusi fungsi setiap rentang waktu tertentu

Untuk menghapus event ini digunakan: clearTimeout dan clearInterval.

Cookies

Cookies memungkinkan kita menyimpan informasi pengguna di halaman web. Cookies berupa data yang disimpan dalam file teks ukuran kecil di komputer pengguna. Ketika server web sudah mengirim halaman web ke browser, koneksi diputus dan server melupakan apapun tentang pengguna. Cookies dibuat untuk mengatasi masalah ini yakni bagaimana mengingat informasi pengguna, misal:

Ketika pengguna mengunjungi halaman web, namanya bisa disimpan di dalam cookie.

Berikutnya, jika pengguna kembali mengunjungi halaman ini, cookie mengingat namanya.

Cookie disimpan dalam bentuk pasangan nama-nilai:

username = Unyil Surunyil

Ketika browser meminta halaman web ke server, cookie milik halaman itu ditambahkan ke request (permintaan). Dengan cara ini server mendapatkan data yang diperlukan untuk mengingat informasi tentang pengguna. (Cookie harus enable). JS dapat membuat, membaca, menghapus cookie dengan properti document.cookie:

document.cookie = “username = Unyil Surunyil”; //membuat/mengubah cookie

document.cookie = “username = Unyil Surunyil; expires=Thu 18 Dec 2020 12:00:00 UTC”; //membuat cookie dengan masa kedaluarsa

document.cookie = “username = Unyil Surunyil; path=/”; //membuat cookie dengan path

var ck = document.cookie; //membaca semua isi cookie

Untuk menghapus cookie, cukup diset mundur tanggal kedaluarsanya saja, misal ke tahun 2019.

jQuery

jQuery adalah pustaka JS, yang menyederhanakan pemrograman JS. Jadi jQuery dibuat agar jauh lebih mempermudah penggunaan JS dalam web. Ada ungkapan: menulis sedikit, melakukan banyak. jQuery mengambil banyak pekerjaan yang biasanya memerlukan banyak baris kode JS untuk melakukannya, dan mengemasnya dalam metode yang dipanggil hanya dengan satu baris perintah. Pustakan jQuery berisi fitur-fitur berikut:

Manipulasi HTML/DOM

Manipulasi CSS

Metode-metode event HTML

Efek dan animasi

AJAX

Utilitas

jQuery memiliki plugin untuk banyak pekerjaan tadi dan juga menjadi pustaka yang paling populer dan paling bisa diperluas. jQuery telah dibuat sedemikian agar bisa berjalan di semua browser tanpa masalah.

Menyertakan jQuery

Ada dua cara untuk dapat menggunakan jQuery:

Mengunduh pustaka jQuery dari situsnya, jQuery.com

Menyertakan jQuery dari CDN (Content Delivery Network) seperti Google.

Ada dua versi jQuery untuk diunduh:

Versi Produksi - untuk situs web yang sudah tayang karena sudah diminmalkan dan dikompres.

Versi Pengembangan - untuk pengembangan dan pengujian (tidak dikompres dan kode bisa dibaca).

Kedua versi tersebut dapat diunduh dari situs jQuery tersebut. Pustaka ini berupa file tunggal dan mengacunya di dalam tag <script> dan bagian head, ditempatkan di halaman yang menggunakannya:

<head>

<script src="jquery-3.5.1.min.js"></script>

</head>

Jika tidak ingin menyimpan kode jQuery ini, bisa menyertakannya dari CDN. Google adalah contoh yang merumahi (hosting) jQuery:

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</head>

Sintaks

Dengan jQuery kita memilih elemen HTML dan melakukan sesuatu tindakan terhadapnya. Jadi sintaksnya adlah, pemilih dan diikuti tindakan:

$(pemilih).tindakan()

Tanda $ untuk menentukan/akses jQuery

(pemilih) untuk query (menemukan) elemen HTML

tindakan() yang akan dilakukan terhadap elemen yang dipilih.

Contoh:

$(this).hide() - menyembunyikan elemen yang aktif saat ini

$("p").hide() - menyembunyikan semua elemen <p>.

$(".test").hide() - menyembunyikan semua elemen dengan class="test".

$("#test").hide() - menyembunyikan elemen dengan id="test".

Event Dokumen siap

Event ini berguna untuk mencegah jQuery berjalan saat dokumen belum selesai dimuat (siap). Perlu untuk menunggu dokumen benar-benar dimuat dan siap sebelum menjalankan jQuery. Berikut ini beberapa contoh tindakan yang akan gagal jika metode dijalankan sebelum dokumen siap:

Menyembunyikan elemen yang belum terbentuk.

Mendapatkan ukuran gambat yang belum dimuat.

Sintak untuk memastikan kesiapan dokumen:

$(document).ready(function(){

// metode jQuery dijalankan di sini

});

Pemilih jQuery

Pemilih (selector) jQuery digunakan untuk mendapatkan (memilih) elemen HTML berdasarkan nama, id, kelas, jenis, atribut, nilai atribut dan lainnya. Kebanyakan berdasarkan pemilih CSS dan ada juga yang ditambahkan dari jQuery. Semua pemilih dalam jQuery diawali tanda dolar: $(pemilih).

$("*")

memilih semua elemen

$(this)

memilih elemen HTML yang aktif saat ini

$("p.intro")

memilih semua elemen <p> dengan class="intro"

$("p:first")

memilih elemen <p> yang pertama

$("ul li:first")

memilih elemen <li> pertama dari <ul> yang pertama

$("ul li:first-child")

memilih elemen <li> pertama di setiap <ul>

$("[href]")

memilih semua elemen dengan atribut href

$("a[target='_blank']")

memilih semua elemen <a> dengan atribut target dengan nilai "_blank"

$("a[target!='_blank']")

memilih semua elemen <a> dengan atribut target dengan nilai BUKAN "_blank"

$(":button")

memilih semua elemen <button> dan elemen <input> dengan type = "button"

$("tr:even")

memilih semua elemen <tr> genap

$("tr:odd")

memilih semua elemen <tr> ganjil

 

Referensi pemilih selengkapnya dapat dilihat di sini.

Event

Semua tindakan pengguna yang dapat direspon halaman web disebut event. Suatu event menunjukkan momen yang tepat ketika sesuatu terjadi. Misal:

menggerakkan mouse ke atas suatu elemen

memilih tombol radio

mengklik suatu elemen

Istilah fires sering digunakan terhadap event, saat event terjadi. Berikut beberapa contoh event:

Mouse Events

Keyboard Events

Form Events

Document/Window Events

click

keypress

submit

load

dblclick

keydown

change

resize

mouseenter

keyup

focus

scroll

mouseleave

 

blur

unload

 

Sintak jQuery untuk Metode Event

Untuk memberikan event klik ke semua paragraf di suatu halaman, bisa dituliskan seperti:

$("p").click();

Langkah berikutnya adalah menentukan apa yang harus diperbuat jika event terjadi. Di sini kita harus memberikan suatu fungsi ke event tersebut:

$("p").click(function(){

// tentukan apa yang ingin dilakukan, di sini

});

Metode on() digunakan untuk memasang event handler ke suatu elemen. Kode berikut memasang event click dan fungsi yang menanganinya.:

$("p").on("click", function(){

$(this).hide();

});

Efek

Yang dimaksud jQuery Effect adalah metode yang memberi dampak pada elemen yang dipilih misalnya menyembunyikan elemen, atau menampakkannya. Berikut ini dibahas beberapa efek jQuery.

Hide/Show

Efek hide/show digunakan untuk menyembunyikan dan menampakkan elemen. Sintaksnya adalah:

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

Parameter speed bersifat opsional dan menentukan kecepatan penyembunyian/penampakan dengan nilai “slow”, “fast” atau dengan angka dalam milidetik. Parameter callback juga bersifat opsional yaitu fungsi yang akan dieksekusi setelah proses penyembunyian/penampakan elemen selesai. Untuk bisa melakukan penyembunyian dan penampakan secara bergantian, gunakan toggle() dengan sintaks sama seperti hide/show:

$(selector).toggle(speed,callback);

Fade

Dengan fade kita bisa menyembunyikan/menampakkan elemen secara gradual kekedapannya (kedap cahaya = tidak tembus cahaya): fadeIn() untuk penampakan, fadeOut() untuk penyembunyian, fadeToggle() untuk fade in dan out secara bergantian dan fadeTo() untuk penampakan pada nilai kekedapan tertentu dengan sintaks:

$(selector).fadeIn(speed,callback);

$(selector).fadeOut(speed,callback);

$(selector).fadeToggle(speed,callback);

$(selector).fadeTo(speed,opacity,callback);

Nilai opacity menentukan nilai real kekedapan antara 0 sampai 1. Nilai 0 berarti transparan dan 1 berarti kedap. Nilai parameter lainnya sama seperti efek sebelumnya.

Slide

Efek slide mencptakan efek melipat/membuka sambil bergeser/meluncur: slideDown() membuka sambil meluncur ke bawah, slideUp berarti menutup dengan melipat ke atas dan slideToggle melipat dan membuka secara bergantian, dengan sintaks:

$(selector).slideDown(speed,callback);

$(selector).slideUp(speed,callback);

$(selector).slideToggle(speed,callback);

Nilai parameter sama seperti efek sebelumnya.

Animate

Metode animate() digunakan untuk membuat animasi dengan sintaks:

$(selector).animate({params},speed,callback);

Parameter params bersifat wajib dan menentukan properti CSS yang dianimasi. Parameter speed bersifat opsional dan menentukan durasi dengan nilai “slow”, “fast” atau dengan angka dalam milidetik. Parameter callback bersifat opsional dan menentukan fungsi yang dieksekusi setelah proses animasi selesai. Contoh berikut menunjukkan animasi sederhana: menggerakkan elemen div ke kanan sampai mencapai titik left 250px:

$("button").click(function(){

$("div").animate({left: '250px'}, “slow”);

});

Hampir semua properti CSS dapat dimanipulasi di dalam metode animasi() hanya saja harus ada ketentuan lain: nama properti harus diubah menjadi notasi camel-case jika terdiri dari dua kata seperti font-size, menjadi fontSize, padding-left menjadi paddingLeft dan seterusnya. Animasi warna membutuhkan plugin yang harus diunduh dari situs jQuery.com. Animasi membolehkan lebih dari satu bentuk dan akan dilaksanakan satu persatu sesuai antrian.

Stop

Metode stop() dapat digunakan untuk menghentikan proses animasi atau efek jQuery, dengan sintaks:

$(selector).stop(stopAll,goToEnd);

Parameter opsional stopAll menentukan apakah semua antrian animasi harus clear (berhenti) atau tidak. Nilai defaultnya false, yang berarti hanya animasi yang aktif saja yang dihentikan dan membolehkan animasi dalam antrian berikutnya dijalankan setelahnya. Parameter opsional goToEnd emenentukan apakah menghentikan animasi segera atau tidak. Nilai defaultnya false yang berarti tidak.

Fungsi Callback

Statemen JS dieksekusi baris demi baris, satu per satu. Akan tetapi, dengan efek, baris berikutnya dapat dieksekusi meskipun efek belum selesai. Untuk mencegah hal ini, gunakan fungsi callback yang dieksekusi setelah efek selesai. Coba banding kedua kode berikut: yang pertama dengan callback dan yang kedua tanpa callback:

$("button").click(function(){

$("p").hide("slow", function(){

alert("The paragraph is now hidden");

});

});

Kode kedua, tanpa callback:

$("button").click(function(){

$("p").hide("slow");

alert("The paragraph is now hidden");

});

Chaining

Dalam jQuery, kita dapat membuat rentetan beberapa tindakan/metode dalam satu statemen sekaligus. Dengan cara ini browser tidak harus mencari elemen yang sama beberapa kali. Untuk merentet tindakan, cukup tambahkan tindakan di ujung dengan tanda titik:

$("#p1").css("color", "red").slideUp(2000).slideDown(2000);

jQuery HTML

jQuery memiliki metode yang berdaya guna untuk mengubah elemen dan atribut HTML. Yang terpenting adalah kemampuan untuk manipulasi DOM. jQuery memiliki banyak metode berkaitan dengan DOM.

Get/Set

Ada tiga metode untuk mengambil dan mengubah (set) isi elemen dan atribut: html(), text() dan val(). Metode html() digunakan untuk mengambil dan menentukan isi elemen yang dipilih (termasuk markup/tag HTML). Metode text() untuk mengambil dan menentukan isi teks elemen yang dipilih sedangkan metode val() untuk menentukan dan mengambil nilai isian form. Ada lagi satu metode, yaitu attr() untuk mengambil nilai atribut. Berikut beberapa contohnya:

//Metode tect()

$("#btn1").click(function(){

alert("Text: " + $("#test").text());

});

//html()

$("#btn2").click(function(){

alert("HTML: " + $("#test").html());

});

//val()

$("button").click(function(){

alert("Value: " + $("#test").val());

});

//attr()

$("button").click(function(){

alert($("#w3s").attr("href"));

});

Add

Ada empat metode untuk menambahkan isi baru: append(), prepend(), after() dan before():

append() menyisipkan isi di akhir elemen yang dipilih

prepend() menyisipkan isi di awal elemen yang dipilih

after() menyisipkan isi di akhir elemen yang dipilih

before() menyisipkan isi di awal elemen yang dipilih

Contoh:

//menyisipkan teks di elemen p

$("#btn1").click(function(){

$("p").append(" <b>Isi teks yang disisipkan</b>.");

});

 

//menyisipkan teks di elemen ol

$("#btn2").click(function(){

$("ol").append("<li> Isi teks yang disisipkan </li>");

});

Ada lagi metode insertAfter() yang menyisipkan elemen yang dipilih. Berikut perbedaan metode after() dengan insertAfter():

$(target).after(isiYangMauDisisipkan)

$(isiYangMauDisisipkan).insertAfter(target)

Metode clone() menjiplak (copy) elemen atau beberapa elemen. Berikut ini contoh mengkloning beberapa elemen paragraf dan menambahkannya ke elemen body:

$("button").click(function(){

$("p").clone().appendTo("body");

});

Remove

Dua metode untuk menghapus elemen adalah remove() dan empty(). Metode remove() menghapus elemen yang dipilih dan anak-anaknya sedangkan metode empty hanya mengosongkan elemen yang dipilih, tapi tidak menghapus elemen yang dipilih. Metode remove() bisa diberi argumen untuk memilih (sebagai filter) mana yang dihapus.

//menghapus elemen p dengan kelas coba

$("button").click(function(){

$("p").remove(".coba");

});

 

//menghapus p dengan kelas coba maupun demo

$("button").click(function(){

$("p").remove(".coba, .demo");

});

CSS Class

Ada empat metode untuk manipulasi CSS:

addClass() - menambah satu atau lebih kelas ke elemen yang dipilih

removeClass() - menghapus satu atau lebih kelas dari elemen yang dipilih

toggleClass() - bergantian (toggle) antara menambah dan menghapus kelas dari elemen yang dipilih

css() - seting atau mengambil atribut style atau properti CSS.

Beberapa contoh:

<style>

.penting {font-weight: bold; font-size:2em;}

</style>

<script>

$("button").click(function(){

$("div").addClass("penting");

});

</script>

 

CSS

Metode css() dapat mengambil nilai properti CSS dan dapat juga menentukan nilai properti CSS dengan sintak:

css("namaproperti"); //mengambil nilai properti

css("namaproperti","nilai"); //menentukan nilai properti

css({"namaproperti":" nilai"," namaproperti":" nilai",...}); //menentukan nilai beberapa properti

Dimensi

Dimensi elemen dan window dalam jQuery didapat dengan metode seperti pada Gambar 1 di bawah. Metode width() dan height() juga digunakan menentukan ukuran elemen.

Gambar 1. Dimensi dalam jQuery

Beberapa contoh:

$("#div1").width() //mengambil lebar elemen <div> dengan id=div1

$(document).width(); //lebar dokumen html

$(window).width(); //lebar window

$("#div1").width(500).height(500); //menentukan ukuran <div id=”div1”>

jQuery Traversing

yang dimaksud traversing dalam jQuery adalah menelusuri (move through) elemen, dan digunakan untuk mendapatkan (memilih) elemen HTML berdasarkan relasinya dengan elemen lain. Dimulai dari satu pilihan dan menelusuri elemen lain yang dicari sampai ketemu. Gambar 2 berikut mengilustrasikan halaman HTML sebagai pohon DOM. Dengan jQuery, kita dapat dengan mudah naik ke atas (leluhur), turun ke bawah (turunan) dan menyamping (saudara) dalam pohon itu. Dimulai dari elemen yang dipilih (current element) penelusuran ini disebut traversing, menelusuri pohon DOM.

Gambar 2. Traversing

Dalam Gambar 2 tersebut:

Elemen <div> adalah induk (parent) dari <ol> dan leluhur dari semua elemen di dalamnya

Elemen <ol> adalah induk dari kedua <li> dan <ol> ini anak (child) dari <div>

Elemen <li> sebelah kiri adalah induk dari <span>, anak dari <ol> dan turunan dari <div>

Elemen <span> adalah anak dari <li> sebelah kiri, dan turunan dari <ul> dan <div>

Kedua elemen <li> adalah bersaudara (punya induk yang sama).

Anchestor

Anchestor (leluhur) digunakan untuk penelusuran ke atas, terdiri dari tiga metode: parent(), parents() dan parentsUntil(). Metode parent() digunakan untuk mengambil orang tua (induk) langsung elemen yang dipilih dan hanya menghasilkan satu elemen induk. Metode parents() mengambil semua leluhur dari elemen yang dipilih, terus ke atas sampai root (akar dokumen). Sedangkan metode parentsUntil() mengambil semua leluhur sampai elemen tertentu yang dinyatakan dalam argumen (parameter) metode tersebut. Beberapa contoh:

//berikut ini memilih induk span dan menentukan stylenya

$("span").parent().css({"color": "red", "border": "2px solid red"});

//memilih semua leluhur dan menetapkan stylenya

$("span").parents().css({"color": "red", "border": "2px solid red"});

//memilih semua leluhur sampai <div> dan menentukan stylenya - <div> tidak termasuk

$("span").parentsUntil("div").css({"color": "red", "border": "2px solid red"});

Descendant

Descendant (keturunan) digunakan untuk menelusuri elemen ke bawah. Ada dua metode: children() dan find(). Metode children() mengambil semua anak-anak langsung dari elemen yang dipilih. Metode ini hanya menelusuri satu level di bawah (anak). Tetapi kita bisa menerapkan filter, memilih anak dengan kriteria tertentu seperti anak dengan kelas tertentu. Metode find() mengambil semua elemen ke bawah sampai ujung. Metode ini juga memungkinkan untuk memelihi anak tertentu. Beberapa contoh:

//memilih semua <p> dari anak <div> dan menentukan stylenya

$("div").children().css({"color": "red", "border": "2px solid red"});

//memilih semua <p> kelas utama dari anak <div> dan menentukan stylenya

$("div").children("p.utama").css({"color": "red", "border": "2px solid red"});

//mengambil semua elemen <span> keturunan <div>

$("div").find("span").css({"color": "red", "border": "2px solid red"});

//mengambil semua elemen keturunan <div>

$("div").find("*").css({"color": "red", "border": "2px solid red"});

Sibling

Sibling (saudara) digunakan untuk menelusuri elemen menyamping: semua saudara, adik (next) atau kakak (previous). Ada tujuh metode: sibling(), next(), nextAll(), nextUntil(), prev(), prevAll() dan prevUntil(). Metode siblings() digunakan untuk mengambil semua elemen yang memiliki induk yang sama. Metode next() digunakan untuk mengambil adik langsung. Metode nextAll() untuk mengambil semua adik dan nextUntil() untuk mengambil semua adik sampai elemen tertentu. Hal serupa berlaku untuk kakak dengan prev(), prevAll() dan prevUntil(). Beberapa contoh:

//mengambil semua elemen <p> yang jadi saudara <h2>

$("h2").siblings("p").css({"color": "red", "border": "2px solid red"});

//mengambil adik langsung <h2>

$("h2").next().css({"color": "red", "border": "2px solid red"});

//mengambil semua adik <h2>

$("h2").nextAll().css({"color": "red", "border": "2px solid red"});

//mengambil semua saudara <h2> sampai ada <h6> eksklusif (<h6> tidak termasuk)

$("h2").nextUntil("h6").css({"color": "red", "border": "2px solid red"});

Filtering

Filtering adalah mengambil elemen dengan kriteria atau ketentuan, misalnya mengambil elemen pada posisi tertentu seperti elemen pertama dari elemen yang dipilih atau mengambil elemen dengan nilai indeks tertentu. Ada lima metode: first(), last(), eq(), filter() dan not(). Metode first() digunakan untuk memeilih elemen pertama di antara elemen serupa yang dipilih. Metode last() mengambil elemen terakhir di antara elemen yang dipilih. Metode eq() mengambil elemen yang dipilih dengan indeks tertentu. Sedangkan filter() dan not() mengambil elemen dengan kriteria yang sesuai atau yang tidak sesuai dengan yang ditentukan. Beberapa contoh:

//memilih <div> pertama di antara kumpulan <div> dan menentukan stylenya

$("div").first().css("background-color", "yellow");

//memilih <p> kedua

$("p").eq(1).css("background-color", "yellow");

//memilih <p> dengan kelas intro

$("p").filter(".intro").css("background-color", "yellow");

//mengambil <p> yang BUKAN kelas intro. Lawa dari filter()

$("p").not(".intro").css("background-color", "yellow");

AJAX

AJAX memungkinkan untuk mengirim dan menerima data secara asinkronos tanpa memuat ulang halaman web. Pada proses pengiriman dan penerimaan data yang sinkron, setelah klien mengirim permintaan, klien harus menunggu hasil dari server. Interpreter JS di browser diblokir. Pada proses asinkron, setelah klien mengirim permintaan, klien berjalan sendiri melakukan tugas lain selagi server memproses permintaan klien. Dengan demikian, proses asinkron dapat membawa web lebih cepat, lebih dinamis. Jadi AJAX memungkinkan halaman web diupdate secara asinkronos dengan pertukaran data dengan server di balik layar, atau dapat memperbaharui bagian halaman web tanpa muat ulang keseluruhan halaman.

Pada proses komunikasi klien server yang sinkron, browser sementara tidak bisa merespon pengguna ketika menunggu respon dari server. Sedangkan pada proses asinkron, browser tidak memblokit permintaan pengguna, sehingga browser tetap responsif. Artinya, pengguna masih tetap bisa menggunakan aplikasi, melakukan pekerjaan lain karena interpreter JS tidak diblokir. Supaya lebih jelas, perhatikan kasus halaman web yang akan direfres: akan diganti isi halamannya. Halaman harus direfresh jika ada permintaan dari pengguna. Begitu pengguna melakukan sesuatu, isi halaman web harus diganti sesuai permintaan pengguna. Dalam proses sinkron, browser tidak mengganti isi halaman web karena belum ada data baru dari server, tetapi menunggu hasil dari server dan saat itu tidak menerima permintaan lain dari pengguna. Setelah isi halaman web yang baru yang dikirim dari server sampai ke browser, barulah bisa ditampilkan halaman web dengan isi yang lain.

Jika proses berjalan asinkron, browser tidak harus menunggu hasil dari server dan tidak memblokir pemintaan lain dari pengguna.Setiap permintaan dikirim dan browser tetap siap melayani pengguna. Tentu saja dalam kasus ini ada bagian-bagian di halaman web yang memang perlu diganti dan ada bagian yang tetap tidak harus diganti. Sebagai contoh ketika kita mengetikkan kata kunci di mesin pencari Google. Dengan sigap Google melakukan autocomplete (Suggest) di isian teks ketika kita mengetikkan kata kunci. Google melakukan update di isian teks tersebut sadangkan di bagian lain halaman web itu tidak berubah. Setelah submit, barulah Google mengganti halaman secara keseluruhan karena memang harus diganti semuanya. Intinya, AJAX mewujudkan komunikasi browser-server secara asinkron dan update halaman secara parsial tanpa muat ulang halaman. Namun, demi keamanan, browser modern tidak mengijinkan akses antar domain: komunikasi terjadi di domain yang sama.

Objek XMLHttpRequest

Objek XMLHttpRequest harus diciptakan sebelum melakukan komunikasi secara AJAX. Objek ini digunakan untuk pertukaran data browser (klien) server di balik layar. Semua browser modern mendukung dan memiliki objek ini secara bawaan. Sintak untuk membuat objek ini adalah:

variabel = new XMLHttpRequest();

Sebagai objek, XMLHttpRequest memiliki beberapa metode seperti pada tabel berikut:

Metode

Keterangan

new XMLHttpRequest()

Membuat objek XMLHttpRequest yang baru

abort()

Membatalkan permintaan

getAllResponseHeaders()

Memberikan semua informasi header

getResponseHeader()

Memberikan informasi header tertentu

open(method, url, async, user, psw)

Rincian Permintaan

method: metode GET atau POST

url: lokasi file

async: true (asynchronous) atau false (synchronous)

user: optional, nama user

psw: optional, password

send()

Mengirim permintaan ke server

Digunakan untuk rekues dengan GET

send(string)

Mengirim permintaan ke server

Digunakan untuk rekues dengan POST

setRequestHeader()

Menambahlkan sepasang label/nilai ke header untuk dikirim

 

Perhatikan bahwa di metode open() ada parameter URL, yang menunjukkan alamat file di server. File tersebut bisa bisa file jenis apa saja, bahkan file .php yang dapat melakukan suatu tugas, tindakan di server sebelum mengirim respon balik ke browser. Parameter async digunakan untuk menentukan sinkron (jika bernilai false) atau asinkron (true). Dengan nilai true, komunikasi bersifat asinkron dan browser (mesin JS) tidak harus menunggu respon dari server tapi dapat menjalankan scrip lain. Permintaan sinkron tidak dianjurkan karena JS akan berhenti sampai respon siap diterima. Jika server sibuk atau lambat, aplikasi web seperti berhenti (hang). Proses sinkron ini sedang dipertimbangkan untuk dihapuskan dalam standar web. Bahkan tool pengembang modern memberi peringatan ketika ada permintaan sinkron.

Berikut ini beberapa properti dari objek XMLHttpRequest:

Properti

Keterangan

onreadystatechange

Menentukan fungsi yang dipanggil ketika properti readyState berubah

readyState

Menyimpan status objek XMLHttpRequest.

0: request not initialized

1: server connection established

2: request received

3: processing request

4: request finished and response is ready

responseText

Menyimpan data respon sebagai string

responseXML

Menyimpan data respon sebagai XML

status

Returns the status-number of a request

200: "OK"

403: "Forbidden"

404: "Not Found"

For a complete list go to the Http Messages Reference

statusText

Menyimpan status-text (e.g. "OK" or "Not Found")

 

Perhatikan properti onreadystatechange, yang menentukan fungsi yang dipanggil ketika properti readyState berubah nilai. Jadi properti ini seperti event yang diaktifkan empat kali setiap nilai readyState berubah. Jika kita ingin melakukan sesuatu ketika respon sudah ada (ready), maka masukkan kondisi di dalam fungsi untuk nilai readyState = 4 (respon sudah siap) seperti contoh berikut:

function loadDoc() {

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

document.getElementById("demo").innerHTML = this.responseText;

}

};

xhr.open("GET", "ajax_info.txt", true);

xhr.send();

}

Fungsi Callback

Fungsi callback adalah fungsi yang dikirim sebagai parameter ke fungsi lain. Jika kita mempunyai lebih dari satu kerjaan di situs web, kita harus membuat satu fungsi untuk mengeksekusi objek XMLHttpRequest dan membuat satu fungsi callback untuk tiap kerjaan. Pemanggilan fungsi harus mengandung URL dan fungsi apa yang dipanggil ketika respon sudah siap.

AJAX XML

File dengan format XML merupakan file teks yang semuanya dilingkupi tag-tag XML sesuai dengan maksud penyimpanan datanya. Untuk katalog CD (Compact Disk) film misalnya ada tag <CD>, di dalam tag <CD> ada tag <Judul>, kemudian tag <Artis>, tag <Negara>, tag <Perusahaan>, tag <Harga> dan tag <Tahun>. Untuk membaca file XML digunakan metode getElementsByTagName(namaTag). Biasanya file XML terdiri dari beberapa level tag, untuk itu harus dilakukan pembacaan bertahap, untuk masing-masing level. Perhatikan contoh berikut:

function myFunction(xml) {

var i;

var xmlDoc = xml.responseXML;

var table="<tr><th>Artist</th><th>Title</th></tr>";

var x = xmlDoc.getElementsByTagName("CD");

for (i = 0; i <x.length; i++) {

table += "<tr><td>" +

x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +

"</td><td>" +

x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +

"</td></tr>";

}

document.getElementById("demo").innerHTML = table;

}

Berikut ini contoh file XMLnya:

<CATALOG>

<CD>

<TITLE>Empire Burlesque</TITLE>

<ARTIST>Bob Dylan</ARTIST>

<COUNTRY>USA</COUNTRY>

<COMPANY>Columbia</COMPANY>

<PRICE>10.90</PRICE>

<YEAR>1985</YEAR>

</CD>

<CD>

<TITLE>Hide your heart</TITLE>

<ARTIST>Bonnie Tyler</ARTIST>

<COUNTRY>UK</COUNTRY>

<COMPANY>CBS Records</COMPANY>

<PRICE>9.90</PRICE>

<YEAR>1988</YEAR>

</CD>

</CATALOG>

Kode di atas pertama mengambil data CD (berupa larik karena banyak CD) dan tiap CD hanya diambil Artis dan Judulnya dan saja.

jQuery AJAX

jQuery menyediakan librai untuk AJAX seperti tampak pada tabel berikut:

Metode

Keterangan

$.ajax()

Melakukan permintaan AJAX

$.ajaxPrefilter()

Handle custom Ajax options or modify existing options before each request is sent and before they are processed by $.ajax()

$.ajaxSetup()

Sets the default values for future AJAX requests

$.ajaxTransport()

Creates an object that handles the actual transmission of Ajax data

$.get()

Loads data from a server using an AJAX HTTP GET request

$.getJSON()

Loads JSON-encoded data from a server using a HTTP GET request

$.parseJSON()

Deprecated in version 3.0, use JSON.parse() instead. Takes a well-formed JSON string and returns the resulting JavaScript value

$.getScript()

Loads (and executes) a JavaScript from a server using an AJAX HTTP GET request

$.param()

Creates a serialized representation of an array or object (can be used as URL query string for AJAX requests)

$.post()

Loads data from a server using an AJAX HTTP POST request

ajaxComplete()

Specifies a function to run when the AJAX request completes

ajaxError()

Specifies a function to run when the AJAX request completes with an error

ajaxSend()

Specifies a function to run before the AJAX request is sent

ajaxStart()

Specifies a function to run when the first AJAX request begins

ajaxStop()

Specifies a function to run when all AJAX requests have completed

ajaxSuccess()

Specifies a function to run when an AJAX request completes successfully

load()

Loads data from a server and puts the returned data into the selected element

serialize()

Encodes a set of form elements as a string for submission

serializeArray()

Encodes a set of form elements as an array of names and values

 

Latihan

Eksplorasi jQuery

Siapkan browser Chrome atau Firefox

Siapkan penyunting teks (text editor) seperti Eclipse, VS Code, Netbean, Notepad++ atau yang lainnya.

Cobalah beberapa/semua efek jQuery

Cobalah kode yang menggunakan AJAX dari tutorial mana saja.

Tugas Akhir

  • Buatkan animasi dengan jQuery:

Buatkankan kotak dengan <div> bertuliskan nama anda. Ukuran kotak bebas.

Buatkan tombol yang apabila diklik, menganimasi kotan tersebut.

Proses animasinya adalah, kotak bergeser ke kanan, membesar 125% dan setelah itu tulisan nama anda membesar 3 kali lipat.

Jika setelah membesar, ukuran tulisan nama tadi melebihi ukuran kotak, kelebihannya tidak tampak.

  • Buatkan sebuah kalkulator dengan jQuery dengan ketentuan (rekuiremen) sebagai berikut:

Nama kalkulator: IF Itenas Calclator.

Kalkulator sederhana yang bisa menghitung aritmetik: kali (*), bagi (/), tambah (+), Kurang (-), pangkat 2 (^) dan akar pangkat 2.

Ada 10 tombol digit dan satu tombol untuk mengetahui hasil (=).

Ada satu layar (display) dan ada tombol C untuk menghapus isi di layar.

Ada tombol desimal (.) yang menunjukkan titik desimal (koma dalam ejaan Indonesia).

Jika tombol ”=” diklik maka muncul teks perhitungan dengan hasilnya seperti 2+3=5, tidak hanya memunculkan hasilnya saja.

Gunakan pemilih elemen HTML untuk mengambil nilai di layar.

Desaign tampilan kalkulator boleh apa saja, bebas.


Last modified: Sunday, 22 November 2020, 10:11 PM