PEMROGRAMAN WEB 09 JavaScript Lanjut Andi WRE
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!
JavaScript String Object Assigment Properti length mengembalikan nilai berupa banyak karakter pada string tersebut Method variable_string.method();
JavaScript String Object
JavaScript Date Object Assigment Contoh :
JavaScript Date Object Method
JavaScript Date Object
JavaScript Math Object Method
JavaScript Math Object Contoh :
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
JavaScript Array Object Method
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
Contoh Function 12
Event Aksi yang dapat dideteksi oleh javascript Contoh : onload, onunload, onfocus, onblur, onchange, dll Event ditulis sebagai atribut pada element HTML Mouse Events
Event Keyboard Events Form Events
Contoh Event
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
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
[Contoh 1] JavaScript Timing Events
[Contoh 2] JavaScript Timing Events Display a Clock
Mendeteksi Jenis Browser
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 email - Validasi tanggal - Validasi masukkan berupa numerik Validasi dapat dilakukan ketika submit atau ketika pengguna telah mengisi sebuah field dan hendak berpindah ke field berikutnya.
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 :
[Contoh] Form Validation
Latihan Buatlah tampilan form berikut validasinya. Berikut ini adalah tampilan awal form. Jika ada salah satu field tidak diisi maka akan muncul alert
Jika password dan re-type password tidak sama Jika email salah Jika data benar, maka akan membuka halaman baru (gunakan window.location= )