28/09/2012
Sub Pokok Bahasan JavaScript? Pendeklarasian JavaScript JavaScript sederhana Peletakan JavaScript Komentar pada JavaScript Kotak Dialog Variabel Operator Struktur Kontrol Fungsi (function) Event Status Bar
Pemrograman Basis Data Berbasis Web
28/09/2012
1
28/09/2012
2
Javascript vs. Java?
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
Java
Bahasa yang diintepretasikan langsung Bahasa yang setengah terkompilasi dan oleh browser.
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
terbatas.
yang Bahasa dengan karakteristik yang luas (pendeklarasian jenis variabel).
Hubungan dinamis, referensi dari obyek Hubungan statis, obyek harus ada pada
28/09/2012
3
diverifikasi pada saat loading.
saat program di loading (di kompilasi).
Kode program bisa diakses
Kode program tersembunyi
28/09/2012
4
1
28/09/2012
Mendeklarasikan JavaScript
JavaScript Sederhana Tampilan:
<script type=“txt/javascript">
28/09/2012
JavaScript untuk menuliskan teks: <script type="text/javascript"> document.write(“JavaScript sederhana!");
5
28/09/2012
Peletakan JavaScript • • • •
Peletakan JavaScript di bagian Head
Di bagian Head Di bagian Body Di bagian Head dan body Di External script
28/09/2012
6
• Script yang berisi fungsi (function) diletakkan di bagian head. Hal ini untuk memastikan bahwa script telah loaded sebelum fungsi dipanggil. <script type=“text/javascript”> . . .
7
28/09/2012
8
2
28/09/2012
Try it... • • • • • • • • • • • •
Peletakan JavaScript di bagian Body • Script yang akan dieksekusi ketika halaman web ditampilkan diletakkan di dalam bagian body.
<script type="text/javascript"> function message() { alert("This alert box was called with the onload event") }
28/09/2012
<script type=“text/javascript”> . . .
9
28/09/2012
Peletakan JavaScript di bagian Head dan bagian Body
Try it ... • • • • • • • • • • •
/* untuk isi hal web Ditampilkan */ <script type="text/javascript"> document.write("This message is written when the page loads");
28/09/2012
10
• Untuk script yang berjumlah banyak di dalam dokumen HTML, maka script dapat diletakkan baik di bagian head dan body. <script type=“text/javascript”> . . . <script type=“text/javascript”> . . .
11
28/09/2012
12
3
28/09/2012
Try it ... • • • • • • • • • • • • •
Peletakan JavaScript di External script
<script type="text/javascript"> function product(a,b) {return a*b;} <script type="text/javascript"> document.write(product(12,10));
28/09/2012
• Terkadang JavaScript yang sama ingin dijalankan pada halamanhalaman 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: <script src=“namaFileScript.js">
13
28/09/2012
14
Variabel.js
Contoh file external
Var2.js
28/09/2012
15
28/09/2012
16
4
28/09/2012
Komentar
Kotak Dialog
Komentar 1 baris: // ini adalah komentar Komentar beberapa baris: /* Ini juga Adalah komentar Try it : */
• Alert • Prompt • Confirm
<dokumen java script <SCRIPT language="Javascript"> //ini komentar Javacript alert("Hallo !");
28/09/2012
17
28/09/2012
Alert
Try it...
• digunakan untuk memperingatkan pengunjung hal-hal atau dalam kasus tertentu memberikan instruksi. • Syntax:
window.alert(“text”)
28/09/2012
18
19
<dokumen java script <SCRIPT language="Javascript"> //ini komentar Javacript alert("Selamat! Anda telah menggunakan perintah Alert dari Javascript !");
28/09/2012
20
5
28/09/2012
Prompt
Confirm
• 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
window.confirm(„text‟)
21
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
Data Types and Variables <script type="text/javascript"> var x, y; x= 1024; y=x; x = "foobar"; document.write("
x = " + y + "
"); document.write("
x = " + x + "
");
• Digunakan untuk memperingatkan pengunjung agar menguji atau menerima sesuatu dengan memilih tombol OK atau Cancel untuk konfirmasi. • Syntax:
28/09/2012
22
Mendeklarasikan Variabel
""
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 var statements var message, pi=3.14159;
• 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”
6
28/09/2012
Mendeklarasikan Variabel
Operators
Berikut contoh pendeklarasian variabel : <SCRIPT language="Javascript">
7
28/09/2012
Struktur Kontrol:
If … Else • Digunakan untuk mengetes apakah suatu kondisi itu benar (true) atau salah (false).
• If…else • Perulangan For • Perulangan While
28/09/2012
Belajar JavaScript <script type="text/javascript"> var nilai nilai = prompt('Silahkan masukkan nilai Anda',''); if(nilai <= 56) { window.alert('Sayang sekali. Anda tidak lulus.'); } else { window.alert('Selamat! Anda lulus.'); } 30
28/09/2012
Perulangan For
Perulangan While
• Digunakan untuk melakukan perulangan jika jumlah perulangan sudah diketahui sebelumnya
• Digunakan ketika ingin melakukan perulangan selama kondisi yang ditentukan adalah true.
Belajar JavaScript <script type="text/javascript"> // Mengulang angka dari 0 sampai 5 var angka=0; while (angka<=5) { document.write("Angka " + angka +"
"); angka=angka+1; }
Belajar JavaScript <script type="text/javascript"> // Mengulang angka dari 0 sampai 5 var angka=0; for (angka=0;angka<=5;angka++) { document.write('Angka ' + angka + "
"); } 28/09/2012
31
32
28/09/2012
33
8
28/09/2012
Fungsi (Function)
Membuat function
• Fungsi adalah potongan kode JavaScript yang dapat dideklarasikan pada bagian head dan kemudian dapat dirujuk dari kode yang dibuat di dalam body.
function name_of_function(Argument1,Argument2,…) { Statement1; Statement2; Statement etc…; return expression }
<script type="text/javascript"> function perkalian(a,b) { return a*b; } <script type="text/javascript"> document.write(perkalian(7,5)); 28/09/2012
All function statements must be within the French braces { }.
34
Event
Contoh-contoh 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
28/09/2012
•
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”
36
28/09/2012
37
9
28/09/2012
Summary
Daftar Pustaka
• 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.
• 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
38
28/09/2012
39
10
