PEMROGRAMAN WEB 09 JavaScript Lanjut

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();


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=“…”)


PEMROGRAMAN WEB 09 JavaScript Lanjut

Recommend Documents