Sub Pokok Bahasan. Pemrograman Basis Data Berbasis Web. JavaScript? Javascript vs. Java? 28/09/ JavaScript

(1)

Pemrograman Basis Data Berbasis Web

28/09/2012 1

Sub Pokok Bahasan

JavaScript?

Pendeklarasian JavaScript JavaScript sederhana Peletakan JavaScript Komentar pada JavaScript Kotak Dialog

Variabel Operator Struktur Kontrol Fungsi (function) Event Status Bar

28/09/2012 2

JavaScript?

Untuk membuat website menjadi dinamis dan interaktif:

• meletakan teks dinamik di dalam halaman HTML

• memberikan reaksi terhadap suatu event

• membaca dan menuliskan elemen-elemen HTML

• digunakan untuk memvalidasi data

• digunakan untuk mendeteksi browser pengunjung web

• digunakan untuk menyimpan dan menerima informasi di komputer pengunjung halaman Web

Javascript vs. Java?

JavaScript Java

Bahasa yang diintepretasikan langsung oleh browser.

Bahasa yang setengah terkompilasi dan memerlukan Java Virtual Machine untuk menterjemahkannya.

Kode terintegrasi dengan HTML Kode (applet) terpisah dari dokumen HTML, dipanggil pada saat membuka dokumen HTML.

Bahasa dengan karekteristik yang terbatas.

Bahasa dengan karakteristik yang luas (pendeklarasian jenis variabel).

Hubungan dinamis, referensi dari obyek diverifikasi pada saat loading.

Hubungan statis, obyek harus ada pada saat program di loading (di kompilasi).

(2)

Mendeklarasikan JavaScript

<script type=“txt/javascript">

<!--

Kode-kode JavaScript // -->

</script>

28/09/2012 5

JavaScript Sederhana

JavaScript untuk menuliskan teks:

<html>

<body>

document.write(“JavaScript sederhana!");

</script>

</body>

</html>

28/09/2012 6

Tampilan:

Peletakan JavaScript

• Di bagian Head

• Di bagian Body

• Di bagian Head dan body

• Di External script

Peletakan JavaScript di bagian Head

• Script yang berisi fungsi (function) diletakkan di bagian

head. Hal ini untuk memastikan bahwa script telah loaded sebelum fungsi dipanggil.

<html>

<head>

. . .

</script>

</head>

</html>

(3)

Try it...

• <html>

• <head>

• <script type="text/javascript">

• function message()

• {

• alert("This alert box was called with the onload event")

• }

• </script>

• </head>

• <body onload="message()">

• </body>

• </html>

28/09/2012 9

Peletakan JavaScript di bagian Body

• Script yang akan dieksekusi ketika halaman web ditampilkan diletakkan di dalam bagian body.

<html>

<head>

</head>

<body>

. . .

</script>

</body>

</html>

28/09/2012 10

Try it ...

• <html>

• <head>

• </head>

• /* untuk isi hal web

• Ditampilkan */

• <body>

• <script type="text/javascript">

• document.write("This message is written when the page loads");

• </script>

• </body>

• </html>

Peletakan JavaScript di bagian Head dan bagian Body

• Untuk script yang berjumlah banyak di dalam dokumen HTML, maka script dapat diletakkan baik di bagian head dan body.

<html>

<head>

. . .

</script>

</head>

<body>

. . .

</script>

</body>

</html>

(4)

Try it ...

• <html>

• <head>

• function product(a,b)

• {return a*b;}

• </script>

• </head>

• <body>

• document.write(product(12,10));

• </script>

• </body>

• </html>

28/09/2012 13

Peletakan JavaScript di External script

• Terkadang JavaScript yang sama ingin dijalankan pada halaman- halaman web yang berbeda-beda. Maka script yang sama tidak perlu dituliskan untuk setiap halaman, akan tetapi dengan menuliskan JavaScript di suatu file eksternal.

Di dalam file eskternal tidak boleh terdapat tag <script>

• Contoh cara penggunaan:

<html>

<head>

</script>

</head>

<body>

</body>

</html>

28/09/2012 14

Variabel.js

Var2.js

Contoh file external

(5)

Komentar

Try it :

<html>

<head>

<dokumen java script</title>

</head>

<body bgcolor="#FFFFFF" text="#000000">

<SCRIPT language="Javascript">

//ini komentar Javacript alert("Hallo !");

</SCRIPT> </body> </html>

28/09/2012 17

 Komentar 1 baris:

//ini adalah komentar

 Komentar beberapa baris:

/*

Ini juga Adalah komentar

*/

Kotak Dialog

• Alert

• Prompt

• Confirm

28/09/2012 18

Alert

• digunakan untuk memperingatkan pengunjung hal-hal atau dalam kasus tertentu memberikan instruksi.

• Syntax:

window.alert(“text”)

Try it...

<html>

<head>

<dokumen java script</title>

</head>

<body bgcolor="#FFFFFF" text="#000000">

<SCRIPT language="Javascript">

//ini komentar Javacript

alert("Selamat! Anda telah menggunakan perintah Alert dari Javascript !");

</SCRIPT> </body> </html>

(6)

Prompt

• digunakan untuk menampilkan sebuah prompt yang juga mempunyai kotak isian yang dapat menerima sesuai informasi dari pengunjung.

• Syntax:

window.prompt(„text‟,‟defaultvalue‟) prompt('Siapakah Nama Anda ?', 'isi disini' );

28/09/2012 21

Confirm

• Digunakan untuk memperingatkan pengunjung agar menguji atau menerima sesuatu dengan memilih tombol OK atau Cancel untuk konfirmasi.

• Syntax:

window.confirm(„text‟)

28/09/2012 22

Tipe Data dan Variabel JavaScript

• JavaScript hanya mempunyai 3 tipe data primitive

String : "foo" 'howdy do' "I said 'hi'." ""

Number : 12 3.14159 1.5E6 Boolean : true false

<html>

<head>

<title>Data Types and Variables</title>

</head>

<body>

var x, y;

x= 1024;

y=x; x = "foobar";

document.write("<p>x = " + y + "</p>");

document.write("<p>x = " + x + "</p>");

</script>

</body>

</html>

Inisialisasi seperti pada C++/Java message = "howdy";

pi = 3.14159;

Nama variable terdiri dari letters, digits, dan underscores: diawali dengan letter Nama variables adalah case-sensitive you don't have to declare variables, will be created the first time used, but better if you use varstatements

varmessage, pi=3.14159;

Mendeklarasikan Variabel

• eksplisit : dengan menuliskan kata kunci var kemudian diikuti dengan nama variabel dan nilai dari variabel :

var test = “halo”

• implisit : dengan menuliskan secara langsung

nama dari variabel dan diikuti nilai dari variabel :

test = “halo”

(7)

Mendeklarasikan Variabel

Berikut contoh pendeklarasian variabel :

<!--

var VariabelKu;

var VariabelKu2 = 3;

VariabelKu = 2;

document.write(VariabelKu*VariabelKu2);

// -->

</SCRIPT>

Operators

(8)

Struktur Kontrol:

• If…else

• Perulangan For

• Perulangan While

28/09/2012 30

If … Else

• Digunakan untuk mengetes apakah suatu kondisi itu benar (true) atau salah (false).

28/09/2012 31

<html>

<head> <title>Belajar JavaScript</title> </head>

<body>

varnilai

nilai= prompt('Silahkan masukkan nilai Anda','');

if(nilai<= 56) {

window.alert('Sayang sekali. Anda tidak lulus.');

} else {

window.alert('Selamat! Anda lulus.');

}

</script>

</body>

</html>

Perulangan For

• Digunakan untuk melakukan perulangan jika jumlah perulangan sudah diketahui sebelumnya

<html>

<body>

// Mengulang angka dari 0 sampai 5 varangka=0;

for(angka=0;angka<=5;angka++) {

document.write('Angka ' + angka+ "<br>");

}

</script>

</body>

Perulangan While

• Digunakan ketika ingin melakukan perulangan selama kondisi yang ditentukan adalah true.

<html>

<body>

// Mengulang angka dari 0 sampai 5 varangka=0;

while (angka<=5) {

document.write("Angka " + angka+"<br>");

angka=angka+1;

}

</script>

</body>

(9)

Fungsi (Function)

• Fungsi adalah potongan kode JavaScript yang dapat dideklarasikan pada bagian head dan kemudian dapat dirujuk dari kode yang dibuat di dalam body.

28/09/2012 34

<html>

<head>

function perkalian(a,b) {

return a*b;

}

</script>

</head>

<body>

document.write(perkalian(7,5));

</script>

</body>

</html>

Membuat function

function

name_of_function(Argument1,Argument2,…) {

Statement1;

Statement2;

Statement etc…;

return expression }

All function statements must be within the French braces

{ }.

Event

• Event adalah aksi yang dapat di-trigger oleh fungsi (function) JavaScript.

• Event biasa dikombinasikan dengan fungsi, dan fungsi tersebut tidak akan dieksekui sebelum event tersebut terjadi

• Contoh-contoh penggunaan event:

– Ketika mouse di-klik

– Ketika menampilkan halaman web atau menampilkan gambar – Mouse digerakkan ke suatu posisi tertentu di dalam halaman web – Memilih suatu kotak masukan di dalam suatu form HTML – Selecting an input box in an HTML form

– Men-submit suatu form HTML

Contoh-contoh Event

• Onclick

Event ini di-trigger ketika mouse di-klik ke suatu obyek

• onload and onUnload

Keduanya di-trigger ketika pengunjung memasuki atau meninggalkan halaman web.

Onload Event biasanya digunakan untuk mengecek tipe dan versi browser pengunjung, dan menampilkan informasi tersebut.

• onFocus, onBlur and onChange

Dikombinasikan dengan penggunaan fungsi untuk memvalidasi suatu isian form.

• onSubmit

Digunakan untuk memvalidasi seluruh isian form sebelum di-submit

• onMouseOver and onMouseOut

Digunakan untuk membuat tombol yang “teranimasi”

(10)

Summary

• JavaScript dapat digunakan untuk membuat website menjadi dinamis dan interaktif.

• JavaScript dapat diletakkan di bagian Head, Body, gabungan Head dan body, serta di External script.

• Terdapat tiga macam kotak dialog untuk pengunjung situs yang dapat dibuat dengan menggunakan JavaScript, yaitu: Alert, Prompt dan Confirm

• Tipe data yang dapat digunakan: Numeric, String, Boolean dan Null

• Jenis-jenis operator: Operator Aritmatika, Operator Assignment, Operator Perbandingan dan Operator Logika

• Struktur kontrol di dalam JavaScript: If…else, perulangan For dan perulangan While.

• JavaScript juga dapat dibuat dalam bentuk fungsi (function), yang nantinya juga dapat digunakan untuk men-trigger (dikombinasikan dengan) event.

28/09/2012 38

Daftar Pustaka

• Chris Bates [2006]. Web Programming: Building Internet Applications, Third Edition, John Wiley & Sons Ltd, England.

• Husni [2007]. Pemrograman Database Berbasis Web, Graha Ilmu, Yogyakarta.

• Sebesta, R.W. [2002], Programming the World Wide Web, Addison Wesley.

• Sutarman, S.Kom [2003]. Membangun Aplikasi Web dengan PHP dan MySQL, Graha Ilmu, Yogyakarta.

28/09/2012 39