Javascript adalah sebuah bahasa pemrograman yang dapat memberikan fitur
Pemrograman Web AJAX M A H ARDEKA T R I A NA NTA deka.kelas@gmail.com
Pengantar AJAX = 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
Javascript Javascript adalah sebuah bahasa pemrograman yang dapat memberikan fitur animasi, 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 JS JS diidentifikasi oleh browser dengan menggunakan tag
<script> Pada umumnya JS diletakkan di dalam tag , tetapi bisa juga diletakkan dalam tag
<head> <body> html File Javascript Eksternal
JS Grammar Structure Pada dasarnya struktur bahasa JS serupa dengan baha perograman C atau C++ dengan sedikit perbedaan.
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 ; // Number var lastName = "Johnson" ; // String var cars = [ "Saab" , "Volvo" , "BMW" ]; // Array var 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,
◦ ] Penggabungan Variabel
Beberapa variabel dengan tipe data yang berbeda dalam JS dapat digabungkan secara langsung
- + dengan menggunakan operator tambah
IF - ELSE skor = "A"; var skor; var nilai; var hasil; case "A": alert("Istimewa"); switch (skor){ break; nilai = 82; case "B": alert("Memuaskan") case "B+": alert("Sangat Memuaskan") break; if (nilai>80) { case "C+": alert("Lebih dari cukup") break; hasil = "Baik"; break; } else { case "C": alert("Cukup") break; hasil = "Kurang"; case "D": alert("Kurang") } default : alert("Nggak komentar deh..."); break; // variabel hasil akan bernilai "Baik" // pesan yang ditampilkan pada kotak dialog adalah "Istimewa!" } Perulangan for looping do-while looping while looping
Fungsi
DOM (Document Object Model)
Merupakan cara pandang JavaScript didalam melihat struktur data dari dokumen markup yang terdiri dari tag, ID dan atribut.
Sebuah dokumen HTML direpresentasikan oleh DOM dalam bentuk sebuah struktur hirarkis pohon. Misalkan sebuah dokumen HTML sederhana seperti berikut:
DOM (Document Object Model)
Selengkapnya (sumber)
DOM Function
DOM Object
DOM Property
Contoh Aplikasi AJAX
Asynchronous VS Synchronous Synchronous
Metode request HTTP yang sering digunakan dengan cara ini adalah metode POST dan GET.
Pada saat client mengirimkan request terhadap server,client akan menunggu yang diminta selesai dikerjakan, kemudian server akan
sampai proses mengembalikan hasil proses tersebut kepada client.
Source, Ajax.R. A. Yunmar, S.Kom Asynchronous VS Synchronous
Asynchronous VS Synchronous Asynchronous
Sebagian besar interaksi dan pertukaran data dilakukan dibelakang 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, mengingat JSON adalah bagian dari JavaScript, sehingga pengolahannya akan lebih mudah.
XMLHttpRequest
Sebuah 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 sebagai JavaScript object.
Internet Explorer mendefinisikan object ini sebagai ActiveX Control.
XMLHttpRequest General Browser
xmlhttp = new XMLHttpRequest();
◦ Internet Explorer 7 Above
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
◦ Internet Explorer 6 Below
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
◦
<html> <!DOCTYPE html> <script> <head> isi.txt function loadXMLDoc()
<h1>we are trying AJAX </h1> var xmlhttp; if (window.XMLHttpRequest) { <p> aaaaaaa </p> else } xmlhttp=new XMLHttpRequest(); {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp.onreadystatechange=function() xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); {// code for IE6, IE5 } if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; { xmlhttp.send(); xmlhttp.open("GET",'isi.txt',true); } } <body> </head> </script> } </body> <button type="button" onclick="loadXMLDoc()">Change Content</button> <div id="myDiv"><h2>Let AJAX change this text</h2></div>
</html>
XMLHttpRequest
XMLHttpRequest Method readyState - XMLHttpRequest Property Digunakan untuk mengetahui status perubahan dari request yang dikirimkan ke web server.
Properti ini diubah melalui event onreadystatechange.
Status
- – XMLHttpRequest Property
- – XMLHttpRequest Property
Sama halnya seperti properti status, properti statusText digunakan untuk menyatakan response status dari server.
Status yang diberikan dalam bentuk keterangan. Misalnya: respon 404 akan disampaikan dalam bentuk "Not Found", 403 dalam bentuk "Forbidden" dan seterusnya. responseText
- – XMLHttpRequest Property
Properti ini berisi data yang merupakan hasil komunikasi / respon request dari server dalam format plaint text (teks murni). responseXML
- – XMLHttpRequest Property
Properti ini berisi data yang merupakan hasil komunikasi / respon request dari server dalam format XML. onreadystatechange - XMLHttpRequest Event
Digunakan 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 - XMLHttpRequest Event Ketika 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 innerHTML Object 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 innerHTML
Untuk dapat mengambil atau mengubah data secara on the fly (tanpa ) pada sebuah element HTML, diperlukan sebuah pengenal
melakukan reload
yang melekat pada element tersebut. Pengenal ini dapat didefinisikan melalui atribut 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 dan atribut.
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.
References Javascript AJA
TERIMA KASIH SEMOGA BERMANFAAT