Pemrograman Web PTI15010 umumnyaJS diletakkan di dalam tag , tetapi bisa juga diletakkan dalam tag ...

Pemrograman WebAJAX

M AHARDEKA TRI A NANTA

DISUSUNOLEH : TIM AJAR MATA KULIAH PEMROGRAMAN WEB 2014-2015

[email protected]

1

PengantarAJAX = Asynchronous JavaScript And XML.

AJAX != programming language

AJAX adalah suatu teknik pertukaran data dengan server dan meng-update bagian dari halaman web tanpa melakukan reload keseluruhan halaman

DISUSUN OLEH : TIM AJAR MATA KULIAH PEMROGRAMAN WEB 2014-2015 2

JavascriptJavascript adalah sebuah bahasa pemrograman yang dapat memberikan fituranimasi, data dinamis, interaktivitas, dan efek visual pada dokumen HTML.

Javascript != Java

Javascript Netscape Inc.

Java SUN Microsystems (sekarang ORACLE)

Javascript dahulu dikenal sebaga ECMAScript


Contoh Aplikasi Javascript


Penggunaan JSJS diidentifikasi oleh browser dengan menggunakan tag <script>

Pada umumnya JS diletakkan di dalam tag <head> , tetapi bisa juga diletakkan dalam tag<body> html


File Javascript Eksternal


JS Grammar StructurePada dasarnya struktur bahasa JS serupa dengan baha perograman C atau C++ dengan sedikitperbedaan.

Statement Setiap statement diakhiri dengan tanda titik koma (semicolon) ;

Built-in Function perintah yang dapat digunakan untuk berinteraksi antara web browser, program JS, dan HTML. Contoh : alert() document.write() isNan()

Tipe-tipe data JS :var length = 16; // Numbervar lastName = "Johnson"; // Stringvar cars = ["Saab", "Volvo", "BMW"]; // Arrayvar x = {firstName:"John", lastName:"Doe"}; // Object

jawaban = true; // Boolean

if( jawaban == true ) alert( "Jawabannya benar!" );

else alert( "jawabannya salah!");


Penamaan Variabel (Unique Identifiers)The general rules for constructing names for variables (unique identifiers) are:◦ Names can contain letters, digits, underscores, and dollar signs.

◦ Names must begin with a letter

◦ Names can also begin with $ and _ (but we will not use it in this tutorial)

◦ Names are case sensitive (y and Y are different variables)

◦ Reserved words (like JavaScript keywords) cannot be used as names ex: alert, window, document, etc. [ read more in https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords

http://www.ecma-international.org/ecma-262/5.1/Ecma-262.pdf ]


https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords

http://www.ecma-international.org/ecma-262/5.1/Ecma-262.pdf

Penggabungan VariabelBeberapa variabel dengan tipe data yang berbeda dalam JS dapat digabungkan secara langsung

dengan menggunakan operator tambah +


Kontrol Logika


var nilai;

var hasil;

nilai = 82;

if (nilai>80) {

hasil = "Baik";

} else {

hasil = "Kurang";

}

// variabel hasil akan bernilai "Baik"

var skor;

skor = "A";

switch (skor){

case "A": alert("Istimewa");

break;

case "B+": alert("Sangat Memuaskan")

break;

case "B": alert("Memuaskan")

break;

case "C+": alert("Lebih dari cukup")

break;

case "C": alert("Cukup")

break;

case "D": alert("Kurang")

break;

default : alert("Nggak komentar deh...");

}

// pesan yang ditampilkan pada kotak dialog adalah "Istimewa!"

IF - ELSESWITCH - CASE

Perulangan


for looping do-while looping

while looping

Fungsi


DOM (Document Object Model)Merupakan cara pandang JavaScript didalam melihat struktur data daridokumen markup yang terdiri dari tag, ID dan atribut.

Sebuah dokumen HTML direpresentasikan oleh DOM dalam bentuk sebuahstruktur hirarkis pohon. Misalkan sebuah dokumen HTML sederhana sepertiberikut:


DOM (Document Object Model)


Selengkapnya (sumber) = http://bertzzie.com/knowledge/javascript/Document-Object-Model.html

http://bertzzie.com/knowledge/javascript/Document-Object-Model.html

DOM Function


DOM Object


DOM Property


Contoh Aplikasi AJAX


Asynchronous VS SynchronousSynchronous Metode request HTTP yang sering digunakan dengan cara iniadalah metode POST dan GET.

Pada saat client mengirimkan request terhadap server,client akan menunggusampai proses yang diminta selesai dikerjakan, kemudian server akanmengembalikan hasil proses tersebut kepada client.


Source, Ajax.R. A. Yunmar, S.Kom

Asynchronous VS Synchronous


Asynchronous VS SynchronousAsynchronous Sebagian besar interaksi dan pertukaran data dilakukandibelakang layar.

Halaman web tidak harus selalu dimuat ulang secara keseluruhan setiap kali pengguna melakukan perubahan.

Meningkatkan interaktifitas, kecepatan dan usability.


Source, Ajax.R. A. Yunmar, S.Kom

Asynchronous VS Synchronous


Web Model


AJAX Component XMLHttpRequest Object.

DOM (Document Object Model).

XML.

JSON dapat menjadi pilihan alternatif sebagai dokumen transfer, mengingatJSON adalah bagian dari JavaScript, sehingga pengolahannya akan lebih mudah.


XMLHttpRequestSebuah object JavaScript yang digunakan untuk menangani request browser kepada web server tanpa perlu melakukan reload (background request) terhadap halaman web.

Sebagian besar web browser mendefinisikan XMLHttpRequest sebagaiJavaScript object.

Internet Explorer mendefinisikan object ini sebagai ActiveX Control.


XMLHttpRequestGeneral Browser

◦ xmlhttp = new XMLHttpRequest();

Internet Explorer 7 Above

◦ xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");

Internet Explorer 6 Below

◦ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");



<!DOCTYPE html>

<html>

<head>

<script>

function loadXMLDoc()

{

var xmlhttp;

if (window.XMLHttpRequest)

{// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

}

else

{// code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)

{

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

}

}

xmlhttp.open("GET",'isi.txt',true);

xmlhttp.send();

}

</script>

</head>

<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>

<button type="button" onclick="loadXMLDoc()">Change Content</button>

</body>

</html>

<h1>we are trying AJAX </h1>

<p> aaaaaaa </p>

isi.txt

XMLHttpRequestXMLHttpRequest Method


readyState - XMLHttpRequest PropertyDigunakan untuk mengetahui status perubahan dari request yang dikirimkan ke web server.

Properti ini diubah melalui event onreadystatechange.


Status – XMLHttpRequest Property


statusText – XMLHttpRequest PropertySama halnya seperti properti status, properti statusText digunakan untukmenyatakan response status dari server.

Status yang diberikan dalam bentuk keterangan.

Misalnya: respon 404 akan disampaikan dalam bentuk "Not Found", 403 dalambentuk "Forbidden" dan seterusnya.


responseText – XMLHttpRequest PropertyProperti ini berisi data yang merupakan hasil komunikasi / respon request dari server dalam format plaint text (teks murni).


responseXML – XMLHttpRequest PropertyProperti ini berisi data yang merupakan hasil komunikasi / respon request dari server dalam format XML.


onreadystatechange - XMLHttpRequestEventDigunakan untuk mengetahui status dari request yang telah dikirimkan.

Ketika terjadi perubahan pada status request, event ini akan dijalankan dan mengupdate nilai dari property readyState yang terdapat pada object XMLHttpRequest.


onreadystatechange - XMLHttpRequestEventKetika metode open() berhasil dijalankan, nilai dari properti readyState akan diubah menjadi 1.

Ketika metode send() berhasil dijalankan dan response header telah diterima, nilai dari properti readyState akan diubah menjadi 2

Ketika browser mendapat perintah dari server untuk memulai memuat data yang diinginkan, event onreadystatechange akan mengubah nilai dari property readyState menjadi 3.

Ketika data yang diinginkan telah berhasil didownload dengan lengkap, event onreadystatechange akan mengubah nilai dari properti readyState menjadi 4.


Object innerHTMLObject innerHTML merupakan turunan dari object document.

innerHTML berisi content dari element HTML, yaitu nilai / value yang terletak diatara tag pembuka dan tag penutup.

Contoh:

<div id="divContent">innerHTML disini</div>

<span id="element_2">innerHTML disini</span>


Object innerHTMLUntuk dapat mengambil atau mengubah data secara on the fly (tanpamelakukan reload) pada sebuah element HTML, diperlukan sebuah pengenalyang melekat pada element tersebut. Pengenal ini dapat didefinisikan melaluiatribut ID.


XML•XML merupakan singkatan dari eXtensible Markup Language.

•Seperti halnya HTML, XML tersusun dari element-element.

•Element-element ini terdiri dari dari tag pembuka dan tag penutup serta mempunyai ID danatribut.


HTML vs XML•HTML• Element penyusunnya sudah terstandarisasi.

•XML• Memungkinkan element-element XML dideklarasikan dengan lebih fleksibel. Dengan begitu,

setiap orang dapat menentukan element yang akan dibuat sesuai keinginannya.


HTML vs XML


ReferencesJavascript http://www.w3schools.com/js/default.asp

Document Object Model http://bertzzie.com/knowledge/javascript/Document-Object-Model.html

AJAX http://www.w3schools.com/ajax/default.asp


http://www.w3schools.com/js/default.asp

http://bertzzie.com/knowledge/javascript/Document-Object-Model.html

http://www.w3schools.com/ajax/default.asp


TERIMA KASIHSEMOGA BERMANFAAT

Pemrograman Web PTI15010 umumnyaJS diletakkan di dalam tag , tetapi bisa juga diletakkan dalam tag ...

Documents

Transcript of Pemrograman Web PTI15010 umumnyaJS diletakkan di dalam tag , tetapi bisa juga diletakkan dalam tag ...