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!
Here comes your footer Web Programming – JavaScript Lanjut
JavaScript String Object Assigment
Properti
length mengembalikan nilai berupa banyak karakter pada string tersebut Method
variable_string.method();
Here comes your footer Web Programming – JavaScript Lanjut
JavaScript String Object
Here comes your footer Web Programming – JavaScript Lanjut
JavaScript Date Object Assigment
Contoh :
Here comes your footer Web Programming – JavaScript Lanjut
JavaScript Date Object Method
Here comes your footer Web Programming – JavaScript Lanjut
JavaScript Date Object
Here comes your footer Web Programming – JavaScript Lanjut
JavaScript Math Object Method
Here comes your footer Web Programming – JavaScript Lanjut
JavaScript Math Object Contoh :
Here comes your footer Web Programming – JavaScript Lanjut
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
Here comes your footer Web Programming – JavaScript Lanjut
JavaScript Array Object Method
Here comes your footer Web Programming – JavaScript Lanjut
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
Here comes your footer Web Programming – JavaScript Lanjut
Contoh Function
12
Here comes your footer Web Programming – JavaScript Lanjut
Event Aksi yang dapat dideteksi oleh javascript Contoh : onLoad, onUnload, onFocus, onBlur, onChange, dll Event ditulis sebagai atribut pada element HTML Mouse Events
Here comes your footer Web Programming – JavaScript Lanjut
Event Keyboard Events
Form Events
Here comes your footer Web Programming – JavaScript Lanjut
Contoh Event
Here comes your footer Web Programming – JavaScript Lanjut
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
Here comes your footer Web Programming – JavaScript Lanjut
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
Here comes your footer Web Programming – JavaScript Lanjut
[Contoh 1] JavaScript Timing Events
Here comes your footer Web Programming – JavaScript Lanjut
[Contoh 2] JavaScript Timing Events Display a Clock
Here comes your footer Web Programming – JavaScript Lanjut
Mendeteksi Jenis Browser
Here comes your footer Web Programming – JavaScript Lanjut
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.
Here comes your footer Web Programming – JavaScript Lanjut
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 :
Here comes your footer Web Programming – JavaScript Lanjut
[Contoh] Form Validation
Here comes your footer Web Programming – JavaScript Lanjut
Latihan Buatlah tampilan form berikut validasinya. Berikut ini adalah tampilan awal form.
Jika ada salah satu field tidak diisi maka akan muncul alert
Here comes your footer Web Programming – JavaScript Lanjut
Jika password dan re-type password tidak sama
Jika email salah
Jika data benar, maka akan membuka halaman baru (gunakan window.location=“…”)
Here comes your footer Web Programming – JavaScript Lanjut