Pemrograman Basis Data Berbasis Web Pertemuan Ke6 Java
Pemrograman Basis Data Berbasis Web Pertemuan Ke-6 (Java. Script) S 1 Teknik Informatika - Unijoyo 1
Sub Pokok Bahasan Java. Script? Pendeklarasian Java. Script sederhana Peletakan Java. Script Komentar pada Java. Script Kotak Dialog Variabel Operator Struktur Kontrol Fungsi (function) Event Status Bar S 1 Teknik Informatika - Unijoyo 2
Java. Script? Untuk membuat website menjadi dinamis dan interaktif: l meletakan teks dinamik di dalam halaman HTML l memberikan reaksi terhadap suatu event l membaca dan menuliskan elemen-elemen HTML l digunakan untuk memvalidasi data l digunakan untuk mendeteksi browser pengunjung web l digunakan untuk menyimpan dan menerima informasi di komputer pengunjung halaman Web S 1 Teknik Informatika - Unijoyo 3
Mendeklarasikan Java. Script <script type=“txt/javascript"> <!-Kode-kode Java. Script // --> </script> S 1 Teknik Informatika - Unijoyo 4
Java. Script Sederhana Tampilan: Java. Script untuk menuliskan teks: <html> <body> <script type="text/javascript"> document. write(“Java. Script sederhana!"); </script> </body> </html> S 1 Teknik Informatika - Unijoyo 5
Peletakan Java. Script l l Di bagian Head Di bagian Body Di bagian Head dan body Di External script S 1 Teknik Informatika - Unijoyo 6
Peletakan Java. Script di bagian Head l Script yang berisi fungsi (function) diletakkan di bagian head. Hal ini untuk memastikan bahwa script telah loaded sebelum fungsi dipanggil. <html> <head> <script type=“text/javascript”>. . . </script> </head> </html> S 1 Teknik Informatika - Unijoyo 7
Peletakan Java. Script di bagian Body l Script yang akan dieksekusi ketika halaman web ditampilkan diletakkan di dalam bagian body. <html> <head> </head> <body> <script type=“text/javascript”>. . . </script> </body> </html> S 1 Teknik Informatika - Unijoyo 8
Peletakan Java. Script di bagian Head dan bagian Body l Untuk script yang berjumlah banyak di dalam dokumen HTML, maka script dapat diletakkan baik di bagian head dan body. <html> <head> <script type=“text/javascript”>. . . </script> </head> <body> <script type=“text/javascript”>. . . </script> </body> </html> S 1 Teknik Informatika - Unijoyo 9
Peletakan Java. Script di External script l l Terkadang Java. Script yang sama ingin dijalankan pada halaman web yang berbeda-beda. Maka script yang sama tidak perlu dituliskan untuk setiap halaman, akan tetapi dengan menuliskan Java. Script di suatu file eksternal. Di dalam file eskternal tidak boleh terdapat tag <script> Contoh cara penggunaan: <html> <head> <script src=“nama. File. Script. js"> </script> </head> <body> </html> S 1 Teknik Informatika - Unijoyo 10
Variabel. js Var 2. js S 1 Teknik Informatika - Unijoyo 11
Contoh file external S 1 Teknik Informatika - Unijoyo 12
Komentar l Komentar 1 baris: // ini adalah komentar l Komentar beberapa baris: /* Ini juga Adalah komentar */ S 1 Teknik Informatika - Unijoyo 13
Kotak Dialog l l l Alert Prompt Confirm S 1 Teknik Informatika - Unijoyo 14
Alert l l digunakan untuk memperingatkan pengunjung hal-hal atau dalam kasus tertentu memberikan instruksi. Syntax: window. alert(‘text’) S 1 Teknik Informatika - Unijoyo 15
Prompt l l digunakan untuk menampilkan sebuah prompt yang juga mempunyai kotak isian yang dapat menerima sesuai informasi dari pengunjung. Syntax: window. prompt(‘text’, ’defaultvalue’) S 1 Teknik Informatika - Unijoyo 16
Confirm l l Digunakan untuk memperingatkan pengunjung agar menguji atau menerima sesuatu dengan memilih tombol OK atau Cancel untuk konfirmasi. Syntax: window. confirm(‘text’) S 1 Teknik Informatika - Unijoyo 17
Variabel l Tipe data: l Numeric l String l Boolean l Null l Aturan penggunaan: l Nama variabel adalah case-sensitive (a dan A adalah 2 contoh variabel yang berbeda) l Nama variabel harus dimulai dengan suatu huruf atau oleh karakter garis bawah (underscore) l Contoh deklarasi: nama = ‘eve’; angka = 17; S 1 Teknik Informatika - Unijoyo 18
Contoh penggunaan variabel untuk menghitung luas persegi panjang: Java. Script: <html> variabel <head><title>. . : : Belajar Java. Script : : . . </title> </head> Menampilkan informasi <body> Menghitung Luas Persegi Panjang: Menampilkan isi variabel <script language="Java. Script"> <!-var luas, panjang, lebar, satuan; satuan = window. prompt('Masukkan satuan (m, cm) : '); panjang = window. prompt('Masukkan panjang persegi panjang : ', + '0'); lebar = window. prompt('Masukkan lebar persegi panjang : ', + '0'); luas=panjang*lebar; document. write('Panjang = ' + panjang +' ' + satuan + " "); document. write('Lebar = ' + lebar +' ' + satuan + " "); document. write('Luas = ' + luas +' ' + satuan + "<sup>2<sup>"); //--> </script> </body> </html> S 1 Teknik Informatika - Unijoyo Tampilan: 19
Operator l Operator Aritmatika: + - * / % ++ -- l Operator Assignment: = += -= *= /= %= l Operator Perbandingan: == === != > < >= <= l Operator Logika: && || ! S 1 Teknik Informatika - Unijoyo 20
Struktur Kontrol: l l l If…else Perulangan For Perulangan While S 1 Teknik Informatika - Unijoyo 21
If … Else l Digunakan untuk mengetes apakah suatu kondisi itu benar (true) atau salah (false). <html> <head> <title>Belajar Java. Script</title> </head> <body> <script type="text/javascript"> var 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> S 1 Teknik Informatika - Unijoyo 22
Perulangan For l Digunakan untuk melakukan perulangan jika jumlah perulangan sudah diketahui sebelumnya <html> <head> <title>Belajar Java. Script</title> </head> <body> <script type="text/javascript"> // Mengulang angka dari 0 sampai 5 var angka=0; for (angka=0; angka<=5; angka++) { document. write('Angka ' + angka + " "); } </script> </body> </html> S 1 Teknik Informatika - Unijoyo 23
Perulangan While l Digunakan ketika ingin melakukan perulangan selama kondisi yang ditentukan adalah true. <html> <head> <title>Belajar Java. Script</title> </head> <body> <script type="text/javascript"> // Mengulang angka dari 0 sampai 5 var angka=0; while (angka<=5) { document. write("Angka " + angka +" "); angka=angka+1; } </script> </body> </html> S 1 Teknik Informatika - Unijoyo 24
Fungsi (Function) l Fungsi adalah potongan kode Java. Script yang dapat dideklarasikan pada bagian head dan kemudian dapat dirujuk dari kode yang dibuat di dalam body. <html> <head> <script type="text/javascript"> function perkalian(a, b) { return a*b; } </script> </head> <body> <script type="text/javascript"> document. write(perkalian(7, 5)); </script> </body> </html> S 1 Teknik Informatika - Unijoyo 25
Event l l l Event adalah aksi yang dapat di-trigger oleh fungsi (function) Java. Script. Event biasa dikombinasikan dengan fungsi, dan fungsi tersebut tidak akan dieksekui sebelum event tersebut terjadi Contoh-contoh penggunaan event: l Ketika mouse di-klik l Ketika menampilkan halaman web atau menampilkan gambar l Mouse digerakkan ke suatu posisi tertentu di dalam halaman web l Memilih suatu kotak masukan di dalam suatu form HTML l Selecting an input box in an HTML form l Men-submit suatu form HTML S 1 Teknik Informatika - Unijoyo 26
Contoh-contoh Event l Onclick Event ini di-trigger ketika mouse di-klik ke suatu obyek l onload and on. Unload 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. l on. Focus, on. Blur and on. Change Dikombinasikan dengan penggunaan fungsi untuk memvalidasi suatu isian form. l on. Submit Digunakan untuk memvalidasi seluruh isian form sebelum di-submit l on. Mouse. Over and on. Mouse. Out Digunakan untuk membuat tombol yang “teranimasi” S 1 Teknik Informatika - Unijoyo 27
Status bar l Status bar adalah bar yang biasanya berwarna abu-abu di sepanjang bagian bawah jendela web browser. Status bar menampilkan informasi seperti beberapa banyak halaman telah di-load dan URL pada saat suatu link ditunjuk. l Syntax: window. status='Teks ini terletak di status bar'; l Fasilitas ini dapat disertakan di dalam event on. Click, on. Mouse. Over atau on. Mouse. Out, sehingga ketika suatu link ditunjuk oleh mouse, maka status bar akan menampilkan deskripsi link tersebut. S 1 Teknik Informatika - Unijoyo 28
Summary l l l l Java. Script dapat digunakan untuk membuat website menjadi dinamis dan interaktif. Java. Script 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 Java. Script, 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 Java. Script: If…else, perulangan For dan perulangan While. Java. Script juga dapat dibuat dalam bentuk fungsi (function), yang nantinya juga dapat digunakan untuk men-trigger (dikombinasikan dengan) event. S 1 Teknik Informatika - Unijoyo 29
![Daftar Pustaka l l Chris Bates [2006]. Web Programming: Building Internet Applications, Third Edition,](http://slidetodoc.com/presentation_image_h/daf82267a5502c83b1dce103ffd7f6ac/image-30.jpg "Daftar Pustaka l l Chris Bates [2006]. Web Programming: Building Internet Applications, Third Edition,")
Daftar Pustaka l l 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 My. SQL, Graha Ilmu, Yogyakarta. S 1 Teknik Informatika - Unijoyo 30
- Slides: 30
