PEMROGRAMAN WEB 09 JavaScript Lanjut

Transkripsi

1 PEMROGRAMAN WEB 09 JavaScript Lanjut Andi WRE

2 JavaScript Objects Object Based Programming language Setiap object dapat memiliki properti dan method Properti the values associated with an object Contoh : properti length pada objek string yang mengembalikan nilai berupa banyak karakter pada string tersebut 12 Method the actions that can be performed on objects Contoh : method touppercase() pada objek string akan merubah tampilan string menjadi huruf kapital HELLO WORLD!

3 JavaScript String Object Assigment Properti length mengembalikan nilai berupa banyak karakter pada string tersebut Method variable_string.method();

4 JavaScript String Object

5 JavaScript Date Object Assigment Contoh :

6 JavaScript Date Object Method

7 JavaScript Date Object

8 JavaScript Math Object Method

9 JavaScript Math Object Contoh :

10 JavaScript Array Object Array adalah variable yang dapat menampung banyak nilai dan diakses melalui indeks Declaration and Assignment Properti Length mengembalikan banyak elemen dari array

11 JavaScript Array Object Method

12 Function Function merupakan kelompok instruksi sebagai suatu modul program yang dijalankan ketika dipanggil Sintaks : function namafunction(var1, var2,..., varn) { //aksi return...; //mengembalikan nilai } Memanggil function : namafunction(parameter) // jika membutuhkan parameter namafunction() // jika tidak ada parameter

13 Contoh Function 12

14 Event Aksi yang dapat dideteksi oleh javascript Contoh : onload, onunload, onfocus, onblur, onchange, dll Event ditulis sebagai atribut pada element HTML Mouse Events

15 Event Keyboard Events Form Events

16 Contoh Event

17 HTML DOM HTML Element Object Memanipulasi dan mengubah HTML menjadi lebih dinamis HTML DOM : standar untuk mengakses, mengubah, menambahkan atau menghapus element HTML. Name dan id pada element HTML digunakan javascript untuk mengakses element HTML tersebut. Sintaks : document.getelementbyid("...").property; document.getelementsbyname("...").property; Property : innerhtml, text, value, selected, src, style, dll Property yang dapat digunakan tergantung dari element HTML

18 JavaScript Timing Events Perintah dijalankan setelah selang waktu yang telah ditentukan Sintaks : var t=settimeout("javascript statement",milliseconds); cleartimeout(settimeout_variable); 1000 milliseconds = 1 seconds Javascript statement pada function settimeout() biasanya berisi pemanggilan fungsi Pemanggilan function ini dapat dibuat secara rekursif dan membuat Infinite Loop

19 [Contoh 1] JavaScript Timing Events

20 [Contoh 2] JavaScript Timing Events Display a Clock

21 Mendeteksi Jenis Browser

22 Form Validation Validasi pengecekan data yang dimasukkan pengguna JavaScript dapat melakukan validasi pada form, sebelum data tersebut dikirim ke server Data yang biasa di cek oleh JavaScript : - Field kosong/tidak diisi - Validasi alamat - Validasi tanggal - Validasi masukkan berupa numerik Validasi dapat dilakukan ketika submit atau ketika pengguna telah mengisi sebuah field dan hendak berpindah ke field berikutnya.

23 Form Validation Atribut name akan digunakan untuk mengakses data yang ada dalam field Sintaks : var x=document.forms["namaform"]["namafield"].value; Contoh Form: Contoh pengambilan data di JavaScript :

24 [Contoh] Form Validation

25 Latihan Buatlah tampilan form berikut validasinya. Berikut ini adalah tampilan awal form. Jika ada salah satu field tidak diisi maka akan muncul alert

26 Jika password dan re-type password tidak sama Jika salah Jika data benar, maka akan membuka halaman baru (gunakan window.location= )