java script events

46
Nama Anggota Kelompok 13 : 1). Ahmad Harfie 5107100018 2). Arya Dwi P. 5107100045 Java Script Events

Upload: blact88

Post on 18-Nov-2014

11.139 views

Category:

Technology


2 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Java Script Events

Nama Anggota Kelompok 13 :

1). Ahmad Harfie 5107100018

2). Arya Dwi P. 5107100045

3). Rizkie Denny P. 5107100146

4). M. Yusuf Habibie 5107100153

Java Script Events

Page 2: Java Script Events

Java Script EventsEvent adalah sebuah actions yang bisa

dideteksi di dalam Java script. Fungsi yang menangani event disebut event handler. Dengan menggunakan Javascript, user dapat membuat suatu website yang lebih dinamis.

Contoh Event, seperti misalnya :- Me-load gambar.

- Menggerakkan kursor melewati elemen tertentu

(misalnya gambar)

- memilih input field pada suatu webpage

- melakukan submit pada suatu form.

- user menekan tombol keyboard.

- user melakukan klik mouse.

Page 3: Java Script Events

Java Script EventsMacam-macam events antara lain:

Form Events : blur, change, focus, reset, select, submit.

Image Events : abort, error, load.

Image Map Events : mouseOver, mouseOut.

Link Events : click, mouseOver, mouseOut.

Window Events : load, unload, error, focus, blur.

Page 4: Java Script Events

Registering Event HandlerUntuk mendeklarasikan sebuah even pada suatu halaman web, kita

tidak perlu menuliskannya dalam tag <script>. Kita bisa mendefinisikannya langsung pada tag HTML. Cara ini disebut inline model.

Contoh: - event handler dalam tag <a></a>

<a href="onclick.htm" onclick="return confirm('Apa anda ingin pindah halaman?');">Klik di sini</a>

Cara kedua adalah traditional model, yaitu dengan memasukkan handler ke dalam event property pada elemen object.

Page 5: Java Script Events

Registering Event HandlerContoh traditional model:

Page 6: Java Script Events

onLoad dan onUnloadEvent “onLoad “ dan “onUnload” ditrigger

ketika suatu user masuk atau keluar suatu halaman website.

Event “onLoad” itu sering digunakan untuk mengecek tipe browser suatu pengunjung dan versi browsernya, dan untuk mengload versi webpage yang cocok dengan browser pengunjung.

Page 7: Java Script Events

onLoad dan onUnload (cont.)Contoh: aplikasi onLoad dan onUnload event

handler untuk menyapa pengunjung.

Page 8: Java Script Events

onLoad dan onUnload (result)

Page 9: Java Script Events

onLoad dan onUnload (result) onUnload event handler bekerja saat user

meninggalkan halaman

Page 10: Java Script Events

onMouseMove, event object & this onmousemove event terjadi saat pointer mouse

digerakkan.Event object memberi informasi tentang

event yang terjadi, mialnya tentang lokasi pointer mouse, tombol keyboard yang ditekan dan sebagainya.

PadaJavaScript this selalu mengacu pada “pemilik” fungsi yang dieksekusi. Contoh:

function doSomething() { this.style.color = '#cc0000'; }

Jika kita definisikan fungsi doSomething() di atas pada sebuah page, maka pemiliknya adalah page itu sendiri.

Page 11: Java Script Events

Contoh aplikasi onMouseMove yang menangani event object berupa letak pointer mouse

Page 12: Java Script Events

Aplikasi ini memungkinkan user menggerakkan gambar di page.

Page 13: Java Script Events
Page 14: Java Script Events
Page 15: Java Script Events

onMouseOver dan onMouseOut onMouseOver event handler berjalan ketika

kursor bergerak melewati elemen pada html (misalnya gambar).

Sedangkan onMouseOut berjalan saat kursor meninggalkan elemen tersebut.

Page 16: Java Script Events

onMouseOver dan onMouseOut (source)Contoh Program: onMouseOver event handler akan mengubah warna

background menjadi merah atau biru. onMouseOut event handler akan mengubah warna

background kembali putih.

Page 17: Java Script Events

onMouseOver dan onMouseOut (result)

Page 18: Java Script Events

onMouseOver dan onMouseOut (result)

Page 19: Java Script Events

onFocus, onBlurEvent “onFocus”, “onBlur” sering

digunakan untuk sebagai kombinasi untuk proses validasi pada sebuah field form.

“onFocus” berjalan apabila frame set, document, atau form object seperti text field mendapat fokus untuk input.

Sedangkan “onBlur” berjalan jika frame set, document, atau form object seperti text field kehilangan fokus untuk input.

Page 20: Java Script Events

onFocus, onBlur (source)Contoh: Aplikasi pengisian nama dan e-mail.Pesan akan dimunculkan jika user

memasukkan alamat e-mail yang tidak valid.

Page 21: Java Script Events

onFocus, onBlur (result)Saat user klik pada textbox pertama,

sebuah pesan dimunculkan oleh onFocus event handler.

Page 22: Java Script Events

onFocus, onBlur (result) onBlur event handler berfungsi untuk

menampilkan pesan jika alamat e-mail tidak valid.

Page 23: Java Script Events

Event BubblingEvent Bubbling adalah proses di mana event

yang berada pada child element “naik” ke parent element. Saat child event berjalan, event ditangani oleh child event handler terlebih dahulu, lalu oleh parent event handler.

Event Bubbling bisa dibatalkan, sehingga event handler pada parent element tidak dikerjakan.

Page 24: Java Script Events

Event BubblingContoh : di dalam tag <p> (parent) terdapat

event handler, dan tag <b> (child) yang berada di dalam paragraf juga memiliki event handler. Jika event handler dalam tag <b> dijalankan maka event handler dalam tag <p> juga dijalankan.

Page 25: Java Script Events

Event Bubbling

Page 26: Java Script Events

Membatalkan Event BubblingEvent bubbling bisa ditiadakan dengan

mengeset cancelBubble menjadi true seperti ini:event.cancelBubble = true;

Page 27: Java Script Events

onClick onClick event handler biasanya dipakai pada link

menuju halaman lain, meskipun bisa juga dipakai pada teks biasa. Fungsi onclick akan menyala jika pengunjung klik pada elemen HTML yang dipasangi event handler tersebut.

Contoh: onClick event handler akan menanyakan apakah pengunjung ingin pindah halaman sebelum melanjutkan ke www.google.co.id.

Page 28: Java Script Events

onClick (result)

Page 29: Java Script Events

onChange onChange event handler berjalan ketika

elemen form dipilih dan diubah (contohnya ketika radio button dicentang atau ketika teks dalam textbox diubah).

onChange dapat digunakan pada textbox, maupun radio button.

Page 30: Java Script Events

onChange (source)Contoh: aplikasi pemesanan barang

sederhana.

Page 31: Java Script Events
Page 32: Java Script Events
Page 33: Java Script Events

onChange (result)

Biaya total akan dihitung secara otomatis

Input yang tidak valid (angka ≤ 0, bukan angka) akan menyebabkan textfield dikosongkan

Page 34: Java Script Events

onSelect onSelect event handler mengeksekusi kode

JavaScript ketika user menyeleksi teks dalam textbox atau textarea.

Contoh:

Page 35: Java Script Events

onSelect (result)

Page 36: Java Script Events

onReset onReset event handler mengeksekusi kode

JavaScript ketika user menekan tombol reset.

Contoh:

Page 37: Java Script Events

onReset (result)

Page 38: Java Script Events

onErroronError Event Handler bekerja saat terjadi

error saat me-load document atau image.Dengan onError kita bisa menggantikan

pesan error standar dengan fungsi kita sendiri.

Fungsi onError mengambil 3 argument: message text, URL, line number

Page 39: Java Script Events

onError (source)

Page 40: Java Script Events

onError (result)

Page 41: Java Script Events

onAbortonError Event Handler bekerja saat user

berhenti me-load gambar. User bisa berhenti me-load gambar dengan cara menekan tombol stop pada browser atau pergi ke halaman lain.

onError hanya bekerja pada Internet Explorer.

Contoh:

Page 42: Java Script Events

onAbort (result)

Page 43: Java Script Events

onSubmit onSubmit event handler digunakan untuk

mengeksekusi kode javascript saat user melakukan submit form. Karena itu, onSubmit digunakan dalam tag <FORM>.

onSubmit event handler menggunakan properti event object:type - mengindikasikan tipe event. target – mengindikasikan target object.

Page 44: Java Script Events

onSubmit (source)

Page 45: Java Script Events

onSubmit (result)

Page 46: Java Script Events