Salah satu hal besar mengenai JavaScript, dan mengapa saya menyukainya begitu banyak, adalah bahwa hal itu bisa sangat rumit. Fungsi JavaScript yang disebut "Event Handlers." Ini adalah perintah yang bekerja secara langsung dengan perintah HTML yang ada. Mereka bekerja begitu erat pada kenyataannya, mereka bekerja dengan cara tertanam langsung ke perintah HTML itu sendiri.
Mereka disebut Acara Handler karena mereka membuat acara. Mereka melakukan hal-hal ketika pengguna melakukan sesuatu. Itu gambaran yang mengerikan, tapi aku pada jadwal yang ketat di sini. Baca ...
Kami akan pergi selama acara yang berbeda perintah Handler JavaScript di sini. Saya akan daftar mereka di depan. Aku ingin kau mengawasi pola kapitalisasi masing-masing. Anda harus menjaga pola bahwa setiap kali Anda menggunakan perintah. Jika Anda tidak, perintah tidak akan bekerja. Berikut adalah perintah:
- onMouseOver ini menciptakan suatu peristiwa ketika mouse melewati teks yang aktif atau gambar.
- onMouseOut ini menciptakan suatu peristiwa ketika mouse diambil dari gambar teks yang aktif.
- onClick ini menciptakan suatu peristiwa ketika teks aktif atau gambar diklik.
- waspada ini muncul kotak dialog yang berisi teks dan tombol OK.
The onMouseOver Event Handler
Aku akan menunjukkan format untuk menggunakan perintah ini di link hypertext pertama, menjelaskan apa maksud bagian, kemudian menunjukkan apa yang dilakukannya. Berikut kode:
| <A HREF="http://www.htmlgoodies.com" onMouseOver="window.status='Click here to go to HTML Goodies'; return true">HTML Goodies</A> |
Harap diingat bahwa garis penuh kode semua harus pergi ke satu baris. Sekarang mari kita jatuhkan itu. Anda harus melihat langsung bahwa format adalah link hypertext dengan beberapa teks terjebak dalam tepat setelah htmlgoodies.com URL. Begitulah cara penangan Acara ini bekerja. Mereka "tertanam" langsung ke perintah HTML. Anda tidak perlu tradisional <SCRIPT> dan </ SRCIPT> perintah. Kode hanya berjalan dalam HTML ketika pengguna melewati nya tikus di atas.
Baris kode JavaScript melakukan pekerjaan:
Mari kita jatuhkan itu.
- onMouseOver adalah Event Handler. Itu menandakan bahwa sesuatu akan terjadi ketika mouse melewati teks aktif.
- window.status adalah JavaScript kode untuk status bar jendela browser. Itulah bar turun di bawah layar di mana berbunyi "Dokumen Selesai" setelah halaman telah dimuat. Kata-kata yang berikut IN HARGA TUNGGAL adalah kata-kata yang akan muncul di status bar ketika mouse melewati teks aktif.
- Harap perhatikan titik koma.
- return true Itu juga JavaScript yang memeriksa untuk melihat apakah ada bar status; menemukan satu dan melaporkan kembali bahwa teks dapat ditempatkan.Aku tahu itu tampaknya aneh, tapi Anda harus bermain dengan aturan JavaScript untuk mendapatkan efek ini.
Akhirnya, silakan lihat lama lambat pada pola tanda-tanda yang sama dan tanda kutip tunggal dan ganda. Ini bisa membingungkan, tapi itu harus begitu untuk mendapatkan efek.
Mari kita pergi sedikit lebih jauh, menjaga format yang sama persis seperti di atas tetapi menambahkan lain Event Handler. Oh ya, ini anak anjing kecil dapat digunakan dalam kombinasi. Apa yang akan kita lakukan adalah menambahkan onMouseOut Event Handler sehingga ketika pengguna melewati mouse mereka atas link, mereka mendapatkan kata-kata dalam status bar. Ditambah sekarang, ketika mouse bergerak dari link, mereka mendapatkan beberapa kata yang berbeda. Itu akan sangat panjang dan agak membingungkan. Ia juga memiliki semua pergi pada satu baris, di sini adalah:
| <A HREF="http://www.htmlgoodies.com" onMouseOver="window.status='Click here to go to HTML Goodies'; return true" onMouseOut="window.status='I said click!'; return true">HTML Goodies</A> |
onMouseOver dan Latar Belakang Warna
OnMouseOver baik untuk lebih dari hanya posting teks. Kode di bawah akan memungkinkan pengguna Anda untuk lulus mouse mereka atas teks dan mengubah warna latar belakang sebenarnya dari halaman.
| <A HREF=""onMouseOver="document.bgColor='black'">Black</a> <A HREF=""onMouseOver="document.bgColor='green'">Green</a> <A HREF=""onMouseOver="document.bgColor='yellow'">Yellow</a> <A HREF=""onMouseOver="document.bgColor='red'">Red</a> <A HREF=""onMouseOver="document.bgColor='brown'">Brown</a> <A HREF=""onMouseOver="document.bgColor='white'">White</a> |
Sekali lagi, perhatikan format hypertext link. Bedanya, kali ini onMouseOver tidak menunjuk ke arah window.status, melainkan ke document.bgColor (perhatikan pola kapitalisasi). Bgcolor adalah JavaScript untuk warna latar belakang dokumen HTML. Setiap kali pengguna Anda melewati mouse di atas sebuah warna baru, latar belakang perubahan.
Halaman khusus ini memiliki gambar latar belakang di atasnya, sehingga Anda harusmelompat ke contoh ini untuk melihat script dalam tindakan.
Anda bisa mengatur ini dengan hex, kode warna kata. Berikut adalah daftar panjang dari mereka. Anda bisa membuat sebanyak atau beberapa pilihan yang Anda inginkan dengan menambah atau mengurangi A perintah HREF. Apa yang tidak akan bekerja adalah TEXT, LINK, atau perintah Vlink. Mereka sedikit lebih stabil. Hanya untuk iseng, aku akan memberimu satu lagi sepotong kecil kode menggunakan onMouseOver Event Handler. Ini adalah sepotong kecil menyenangkan yang dapat membuat pengguna Anda menebak-nebak.Lihat ini:
| <A HREF="www.htmlgoodies.com" onMouseOver="parent.location='dude.html'";>HTML Goodies</A> |
Itu semua harus tampak akrab sekarang. Satu-satunya barang baru adalah "parent.location" perintah. Itulah JavaScript untuk halaman baru. Berikut efek.
Pada dasarnya apa script ini dilakukan adalah memuat halaman "dude.html", atau halaman apa pun yang Anda menunjukkan, ketika mouse melewati. Anda akan melihat bahwa ada URL dilambangkan. Saya memiliki alamat HTML Goodies di sana. Ini tidak akan membahayakan script, dan jika Anda benar-benar cepat, Anda bahkan bisa mendapatkan link yang menjadi salah satu yang membuka.
Alert Metode
Aku akan menunjukkan kepada Anda metode peringatan menggunakan onMouseOver karena Anda sudah terbiasa dengan hal itu. Berikut adalah format dasar:
Dan di sini adalah apa yang Anda dapatkan:
| <A HREF="http://www.htmlgoodies.com" onMouseOver="alert('Hello out there!')";>HTML Goodies</A> |
Perhatikan lagi bahwa itu format hypertext link sederhana, hanya saja kali ini onMouseOver ini akan memberlakukan baris kode ini:
Kode yang akan muncul Alert Box dengan teks "Hello luar sana!" ketika pengguna melewati mouse di atas link. Pengguna harus mengklik tombol OK pada Kotak peringatan untuk membuatnya pergi.
Hanya mengganti teks dalam tanda kurung dan tanda kutip tunggal untuk mengkonfigurasi ini untuk Anda gunakan sendiri. Apa pun yang Anda tulis akan muncul di kotak peringatan.
The onClick Event Handler
Anda mungkin baik di depan saya di sini, tapi saya akan tetap mengatakannya: OnClick bekerja sama persis seperti onMouseOver kecuali onClick menciptakan efek ketika Anda mengklik pada teks aktif atau gambar. Berikut metode contoh peringatan dari atas menggunakan onClick:
| <A HREF="http://www.htmlgoodies.com" onClick="alert('Hello out there!')";>HTML Goodies</A> |
Efek yang sama, tetapi Anda harus klik di atasnya pertama. Dan Anda juga mungkin melihat link bekerja.
Petunjuk: Jika Anda menggunakan onClick Event Handler dalam bentuk buku tamu tombol submit dan titik onClick ke halaman lain, Anda akan mendapatkan efek dari seseorang mengirimkan formulir dan kemudian dipindahkan ke halaman lain yang mengatakan "Terima kasih." Itu tidak apa-apa ke e-mail dan tidak berpengaruh pada buku tamu, tetapi memberikan tampilan yang besar. Kode akan menjadi sesuatu seperti ini:
| <INPUT TYPE="submit" onClick="parent.location='thankspage.html'"> |
Sekarang, Anda mungkin berpikir bahwa onClick hanyalah versi lain dari onMouseOver dan hanya dapat digunakan dalam link hypertext. Tidak begitu. Lihat petunjuk saya berikan di atas? OnClick benar-benar bersinar ketika Anda menggunakannya dengan tombol link berbasis form. Jika Anda tidak tahu apa tombol link, baca Jadi, Anda Ingin Sebuah Link Button, Huh? . Mari kita masuk ke beberapa contoh, akan kita?
OnClick Dengan Formulir Buttons
Mengapa membuat pengguna Anda klik pada tombol BACK, dan MAJU jalan di bagian paling atas dari layar browser ketika Anda bisa celepuk mereka tepat di halaman? Lihat ini:
Sekarang inilah kode:
| <FORM> <INPUT TYPE="button" VALUE="BACK" onClick="history.go(-1)"> <INPUT TYPE="button" VALUE="FORWARD" onClick="history.go(1)"></FORM> |
Berikut adalah Apa yang Terjadi:
- <FORM> dimulai tombol.
- Input Type="button yang cukup jelas.
- Value="---" menunjukkan apa yang akan ditulis pada tombol.
- onClick = menunjukkan bahwa acara tersebut akan mengaktifkan ketika diklik.
- "History.go (##)" adalah JavaScript yang menunjukkan gerakan melalui file history Anda. Itulah file yang menyimpan catatan di mana-mana Anda sudah selama itu tertentu berselancar bertamasya: (1) mengirimkannya maju satu langkah, (-1) mengirim mundur satu langkah.Jika Anda ingin, Anda bisa menaikkan atau menurunkan angka-angka. Menetapkan ke (-4) akan membawa pengguna kembali empat halaman jika ia memiliki halaman banyak dalam file sejarah mereka. Jika tidak, maka tombol tidak akan berfungsi.
- </ FORM> berakhir tombol.
Links Dalam Pages
Orang-orang bertanya kepada saya sepanjang waktu bagaimana untuk mendapatkan tombol link untuk melakukan lompatan dalam halaman. Jawaban cepat adalah bahwa Anda tidak bisa. Tempat-tempat tombol link "?" pada akhir hubungannya. Itu mengacaukan itu. Tapi melalui keajaiban sebuah onClick Event Handler ...
Inilah yang membuatnya. Salin kode dan letakkan di halaman Anda di mana Anda ingin tombol untuk muncul.
<FORM> <INPUT TYPE="button" VALUE="Click To Go To the Bottom Of The Page" onClick="parent.location='#code'"> </FORM> |
Harap dicatat bahwa garis INPUT TYPE penuh teks semua harus pada baris yang sama.
Berikut adalah Apa yang Terjadi:
Tombol dibuat sama seperti di atas kecuali:
Anda melihat parent.location atas. Ini berarti untuk memuat halaman ke dalam jendela browser.
The '#CODE' menunjukkan titik di mana script ini akan melompat ke. Lihat, Anda tidak menawarkan halaman baru, sehingga script harus melihat ke halaman saat ini. Pada halaman tersebut akan ada tempat yang disebut #CODE. Jika Anda belum melakukannya, membaca semua tentang halaman melompat di saya halaman melompat tutorial. Ini akan membantu Anda memahami hal ini lebih baik sedikit.
Menunjukkan titik di halaman tombol akan melompat ke dengan menempatkan:
E-Mail Tombol
Bagaimana dengan tombol yang menciptakan e-mail? Di sini Anda pergi:
Berikut adalah Apa Melakukannya:
| <FORM> <INPUT TYPE="button" VALUE="Click Here to Write to Me" onClick="parent.location='mailto:jburns@htmlgoodies.com'"></FORM> |
Harap dicatat bahwa garis INPUT TYPE penuh teks semua harus pada baris yang sama.Tombol bekerja dengan cara yang sama seperti tombol link di atas tapi kali ini adalah memberlakukan sederhana mailto: seperti Anda akan gunakan untuk membuat hypertext e-mail link. Lihat Primer Empat jika Anda tidak tahu apa yang saya maksud. Jika Anda menggunakan tombol ini, pastikan untuk mengubah alamat e-mail Anda di mana tambang berada sekarang. Dan ingat, tidak ada ruang antara mailto: dan alamat.
Nah, itu adalah cepat melihat beberapa JavaScript Acara Handler. Mereka sangat berguna karena mereka bagus dan cepat, mereka duduk di dalam HTML, dan mereka melakukan trik yang besar.
By the way, jika Anda bertanya-tanya, perintah onLoad kita digunakan dalam JavaScript pertama tutorial juga merupakan Handler acara dan itu akan bekerja seperti orang-orang di atas itu. Itu hanya akan memberlakukan acara ketika beban halaman. Jadi, jika Anda ingin kotak peringatan untuk pop up ketika beban halaman, mengubah onMouseOver dari atas dengan onLoad dan Anda akan mendapatkan efek.
Nikmati!
ConversionConversion EmoticonEmoticon