Saat Anda pertama kali menulis JavaScript baru, cara termudah untuk mengaturnya adalah dengan menyematkan kode JavaScript langsung ke halaman web sehingga semuanya ada di satu tempat saat Anda mengujinya untuk membuatnya berfungsi Baik. Demikian pula, jika Anda memasukkan skrip pra-tulis ke situs web Anda, instruksi dapat memberitahu Anda untuk menanamkan bagian atau semua skrip ke halaman web itu sendiri.
Ini oke untuk mengatur halaman dan membuatnya berfungsi dengan baik di tempat pertama tetapi setelah halaman Anda bekerja dengan cara yang Anda inginkan, Anda akan dapat tingkatkan halaman dengan mengekstraksi JavaScript ke file eksternal sehingga konten halaman Anda dalam HTML tidak begitu berantakan dengan item non-konten seperti JavaScript.
Jika Anda hanya menyalin dan menggunakan JavaScripts yang ditulis oleh orang lain maka instruksi mereka tentang cara menambahkan skrip mereka ke halaman Anda mungkin mengakibatkan Anda memiliki satu atau lebih bagian besar dari JavaScript sebenarnya tertanam di halaman web Anda sendiri dan instruksi mereka tidak memberi tahu Anda bagaimana Anda dapat memindahkan kode ini dari halaman Anda ke file yang terpisah dan masih memiliki JavaScript. kerja. Namun jangan khawatir karena terlepas dari kode apa yang digunakan JavaScript di halaman Anda, Anda dapat dengan mudah memindahkan JavaScript keluar dari halaman Anda dan mengaturnya sebagai file terpisah (atau file jika Anda memiliki lebih dari satu bagian JavaScript yang tertanam di halaman). Proses untuk melakukan ini selalu sama dan digambarkan dengan contoh.
Mari kita lihat bagaimana tampilan JavaScript ketika disematkan di halaman Anda. Kode JavaScript Anda yang sebenarnya akan berbeda dari yang ditunjukkan dalam contoh berikut tetapi prosesnya sama dalam setiap kasus.
Contoh Satu
Contoh Dua
Contoh Tiga
JavaScript yang Anda pasang akan terlihat seperti salah satu dari tiga contoh di atas. Tentu saja, kode JavaScript Anda yang sebenarnya akan berbeda dari yang ditunjukkan tetapi JavaScript mungkin akan disematkan ke halaman menggunakan salah satu dari tiga metode di atas. Dalam beberapa kasus, kode Anda mungkin menggunakan yang sudah usang language = "javascript" dari pada ketik = "teks / javascript" dalam hal ini Anda mungkin ingin membuat kode Anda lebih baru untuk memulai dengan mengganti atribut bahasa dengan tipe satu.
Sebelum Anda dapat mengekstrak JavaScript ke dalam file-nya sendiri, Anda harus terlebih dahulu mengidentifikasi kode yang akan diekstraksi. Dalam ketiga contoh di atas, ada dua baris kode JavaScript aktual untuk diekstraksi. Script Anda mungkin memiliki lebih banyak baris tetapi dapat dengan mudah diidentifikasi karena akan menempati tempat yang sama di dalam halaman Anda dengan dua baris JavaScript yang kami telah disorot dalam tiga contoh di atas (ketiga contoh berisi dua baris JavaScript yang sama, hanya wadah di sekitar mereka yang sedikit berbeda).
- Hal pertama yang perlu Anda lakukan untuk benar-benar mengekstraksi JavaScript ke file terpisah adalah membuka editor teks biasa dan mengakses konten halaman web Anda. Anda kemudian perlu menemukan JavaScript yang disematkan yang akan dikelilingi oleh salah satu variasi kode yang ditunjukkan dalam contoh di atas.
- Setelah menemukan kode JavaScript, Anda harus memilihnya dan menyalinnya ke clipboard Anda. Dengan contoh di atas, kode yang akan dipilih disorot, Anda tidak perlu memilih tag skrip atau komentar opsional yang mungkin muncul di sekitar kode JavaScript Anda.
- Buka salinan lain dari editor teks biasa Anda (atau tab lain jika editor Anda mendukung pembukaan lebih dari satu file sekaligus) dan lewati konten JavaScript di sana.
- Pilih nama file deskriptif untuk digunakan untuk file baru Anda dan simpan konten baru menggunakan nama file itu. Dengan kode contoh, tujuan skrip adalah untuk keluar dari bingkai sehingga nama yang sesuai bisa framebreak.js.
- Jadi sekarang kita memiliki JavaScript dalam file terpisah, kita kembali ke editor di mana kita memiliki konten halaman asli untuk membuat perubahan di sana untuk menautkan ke salinan eksternal skrip.
- Seperti kita sekarang memiliki skrip dalam file terpisah, kita dapat menghapus semua tag skrip di konten asli kita sehingga menandai.
- Langkah terakhir adalah menambahkan atribut tambahan ke tag skrip yang mengidentifikasi di mana ia dapat menemukan JavaScript eksternal. Kami melakukan ini menggunakan src = "nama file" atribut. Dengan skrip contoh kami, kami akan menentukan src = "framebreak.js".
- Satu-satunya komplikasi untuk ini adalah jika kami telah memutuskan untuk menyimpan JavaScripts eksternal dalam folder terpisah dari halaman web yang menggunakannya. Jika Anda melakukan ini, maka Anda perlu menambahkan path dari folder halaman web ke folder JavaScript di depan nama file. Misalnya, jika JavaScripts sedang disimpan dalam a js folder di dalam folder yang menampung halaman web kita, kita akan perlu src = "js / framebreak.js"
Jadi seperti apa kode kita setelah kita memisahkan JavaScript menjadi file yang terpisah? Dalam kasus contoh JavaScript kami (dengan asumsi bahwa JavaScript dan HTML berada di folder yang sama) HTML kami di halaman web sekarang berbunyi:
Kami juga memiliki file terpisah yang disebut framebreak.js yang berisi:
if (top.location! = self.location) top.location = self.location;
Nama file dan konten file Anda akan jauh berbeda dari itu karena Anda akan diekstraksi apa pun JavaScript yang disematkan di halaman web Anda dan memberi file nama deskriptif berdasarkan apa itu benar. Proses penggalian yang sebenarnya akan sama meskipun terlepas dari apa baris yang dikandungnya.
Bagaimana dengan dua baris lainnya di masing-masing contoh dua dan tiga? Nah, tujuan dari baris-baris dalam contoh dua adalah untuk menyembunyikan JavaScript dari Netscape 1 dan Internet Explorer 2, tidak ada yang menggunakan siapa pun lagi dan garis-garis itu tidak benar-benar diperlukan pada awalnya tempat. Menempatkan kode dalam file eksternal menyembunyikan kode dari browser yang tidak memahami tag skrip lebih efektif daripada mengelilinginya dalam komentar HTML. Contoh ketiga digunakan untuk halaman XHTML untuk memberi tahu validator bahwa JavaScript harus diperlakukan sebagai konten halaman dan bukan untuk memvalidasinya sebagai HTML (jika Anda menggunakan doctype HTML daripada XHTML, maka validator sudah mengetahui hal ini dan karenanya tag tersebut tidak dibutuhkan). Dengan JavaScript dalam file terpisah, tidak ada lagi JavaScript di halaman yang akan dilewati oleh validator sehingga garis-garis itu tidak lagi diperlukan.
Salah satu cara paling berguna yang dapat digunakan JavaScript untuk menambahkan fungsionalitas ke halaman web adalah dengan melakukan semacam pemrosesan sebagai tanggapan atas tindakan oleh pengunjung Anda. Tindakan paling umum yang ingin Anda tanggapi adalah ketika pengunjung itu mengklik sesuatu. Penangan acara yang memungkinkan Anda menanggapi pengunjung yang mengklik sesuatu disebut klik.
Ketika kebanyakan orang pertama kali berpikir tentang menambahkan event handler onclick ke halaman web mereka, mereka langsung berpikir untuk menambahkannya ke menandai. Ini memberikan sepotong kode yang sering terlihat seperti:
Ini adalah salah cara untuk menggunakan onclick kecuali jika Anda memiliki alamat bermakna yang sebenarnya dalam atribut href sehingga mereka yang tidak JavaScript akan ditransfer ke suatu tempat ketika mereka mengklik tautan tersebut. Banyak orang juga meninggalkan "return false" dari kode ini dan kemudian bertanya-tanya mengapa bagian atas halaman saat ini selalu dimuat setelah skrip berjalan (itulah yang href = "#" katakan pada halaman untuk dilakukan kecuali false dikembalikan dari semua penangan event. Tentu saja, jika Anda memiliki sesuatu yang bermakna sebagai tujuan tautan maka Anda mungkin ingin pergi ke sana setelah menjalankan kode onclick dan kemudian Anda tidak akan memerlukan "return false".
Apa yang tidak disadari banyak orang adalah event handler onclick dapat ditambahkan apa saja Tag HTML di halaman web untuk berinteraksi ketika pengunjung Anda mengklik konten itu. Jadi, jika Anda ingin sesuatu dijalankan ketika orang mengklik gambar, Anda dapat menggunakan:
Jika Anda ingin menjalankan sesuatu ketika orang mengklik beberapa teks yang dapat Anda gunakan:
beberapa teks
Tentu saja, ini tidak memberikan petunjuk visual otomatis bahwa akan ada respons jika pengunjung Anda mengkliknya cara yang dilakukan oleh tautan tetapi Anda dapat menambahkan sendiri petunjuk visual dengan cukup mudah dengan menata gambar atau rentang secara tepat.
Hal lain yang perlu diperhatikan tentang cara-cara melampirkan pengendali event onclick adalah bahwa mereka tidak memerlukan "return false" karena tidak ada tindakan default yang akan terjadi ketika elemen diklik yang perlu dengan disabilitas.
Cara-cara melampirkan onclick ini merupakan peningkatan besar pada metode yang buruk yang digunakan banyak orang tetapi masih jauh dari cara terbaik untuk mengkodekannya. Satu masalah dengan menambahkan onclick menggunakan salah satu metode di atas adalah bahwa itu masih mencampur JavaScript Anda dengan HTML Anda. klik adalah tidak atribut HTML, itu adalah pengendali event JavaScript. Dengan demikian untuk memisahkan JavaScript kami dari HTML kami untuk membuat halaman lebih mudah dipelihara, kami perlu mendapatkan referensi onclick dari file HTML ke dalam file JavaScript terpisah di tempatnya.
Cara termudah untuk melakukan ini adalah mengganti onclick di HTML dengan Indo yang akan membuatnya mudah untuk melampirkan pengendali acara ke tempat yang sesuai di HTML. Jadi HTML kami sekarang mungkin berisi salah satu dari pernyataan ini:
beberapa teks
Kami kemudian dapat mengkode JavaScript dalam file JavaScript terpisah yang terhubung ke bagian bawah halaman atau yang ada di bagian atas halaman dan di mana kode kita berada di dalam fungsi yang dipanggil setelah halaman selesai memuat. JavaScript kami untuk melampirkan penangan acara sekarang terlihat seperti ini:
document.getElementById ('img1'). onclick = dosomething; document.getElementById ('sp1'). onclick = dosomething;
Satu hal yang perlu diperhatikan. Anda akan melihat bahwa kami selalu menulis onclick sepenuhnya dalam huruf kecil. Saat mengkode pernyataan dalam HTML mereka, Anda akan melihat beberapa orang menuliskannya sebagai onClick. Ini salah karena nama penangan event JavaScript semuanya huruf kecil dan tidak ada penangan seperti onClick. Anda dapat melakukannya ketika Anda memasukkan JavaScript ke dalam tag HTML Anda secara langsung karena HTML tidak peka huruf besar kecil dan peramban akan memetakannya ke nama yang tepat untuk Anda. Anda tidak dapat menghindar dari penggunaan huruf kapital yang salah dalam JavaScript itu sendiri karena JavaScript peka huruf besar-kecil dan tidak ada yang namanya JavaScript di onClick.
Kode ini merupakan peningkatan besar dari versi sebelumnya karena kami sekarang sama-sama melampirkan acara ke elemen yang benar dalam HTML kami dan kami memiliki JavaScript yang sepenuhnya terpisah dari HTML. Kita bisa memperbaiki ini lebih jauh lagi.
Satu-satunya masalah yang tersisa adalah bahwa kita hanya bisa melampirkan satu event handler onclick ke elemen tertentu. Jika suatu saat kita perlu melampirkan pengendali event onclick yang berbeda ke elemen yang sama maka pemrosesan yang sebelumnya terpasang tidak akan lagi dilampirkan ke elemen itu. Ketika Anda menambahkan berbagai skrip yang berbeda ke halaman web Anda untuk tujuan yang berbeda, setidaknya ada a kemungkinan bahwa dua atau lebih dari mereka mungkin ingin memberikan beberapa pemrosesan untuk dilakukan ketika elemen yang sama diklik. Solusi berantakan untuk masalah ini adalah untuk mengidentifikasi di mana situasi ini muncul dan menggabungkan pemrosesan yang perlu dipanggil bersama ke fungsi yang melakukan semua pemrosesan.
Sementara bentrokan seperti ini kurang umum dengan onclick daripada onload, harus mengidentifikasi bentrokan di muka dan menggabungkannya bersama bukanlah solusi yang ideal. Ini bukan solusi sama sekali ketika pemrosesan aktual yang perlu dilampirkan ke elemen berubah dari waktu ke waktu sehingga kadang-kadang ada satu hal yang harus dilakukan, kadang-kadang yang lain, dan kadang-kadang keduanya.
Solusi terbaik adalah berhenti menggunakan pengendali acara sepenuhnya dan sebagai gantinya menggunakan pendengar acara JavaScript (bersama dengan attachEvent yang sesuai untuk Jscript- karena ini adalah salah satu situasi di mana JavaScript dan JScript berbeda). Kita dapat melakukan ini dengan paling mudah dengan terlebih dahulu membuat fungsi addEvent yang akan menambah pendengar acara atau lampiran tergantung pada mana dari dua yang didukung oleh bahasa yang sedang dijalankan;
fungsi addEvent (el, eType, fn, uC) {if (el.addEventListener) {el.addEventListener (eType, fn, uC); kembali benar; } lain jika (el.attachEvent) {return el.attachEvent ('on' + eType, fn); } }
Kita sekarang dapat melampirkan pemrosesan yang kita inginkan terjadi ketika elemen kita diklik menggunakan:
addEvent (document.getElementById ('spn1'), 'klik', dosomething, false);
Menggunakan metode melampirkan kode ini untuk diproses ketika elemen diklik berarti membuat panggilan addEvent lain untuk menambahkan fungsi lain menjadi dijalankan ketika elemen tertentu diklik tidak akan menggantikan pemrosesan sebelumnya dengan pemrosesan baru tetapi sebaliknya akan memungkinkan kedua fungsi menjadi Lari. Kita tidak perlu tahu kapan memanggil addEvent apakah kita sudah memiliki fungsi terlampir pada elemen untuk dijalankan ketika diklik, fungsi baru akan berjalan bersama dan fungsi yang sebelumnya terlampir.
Jika kita membutuhkan kemampuan untuk menghapus fungsi dari apa yang dijalankan ketika sebuah elemen diklik maka kita bisa membuat a fungsi deleteEvent terkait yang memanggil fungsi yang sesuai untuk menghapus pendengar acara atau lampiran peristiwa?
Satu kelemahan dari cara terakhir melampirkan pemrosesan ini adalah browser yang benar-benar lama tidak mendukung cara-cara yang relatif baru ini untuk melampirkan pemrosesan acara ke halaman web. Seharusnya ada sedikit orang yang menggunakan browser kuno seperti itu sekarang untuk mengabaikan mereka dalam apa J (ava) Script yang kami tulis terpisah dari penulisan kode kami sedemikian rupa sehingga tidak menyebabkan kesalahan besar pesan. Fungsi di atas ditulis sehingga tidak melakukan apa-apa jika tidak ada cara yang digunakan didukung. Sebagian besar dari peramban yang sangat tua ini tidak mendukung metode getElementById untuk mereferensikan HTML dengan baik dan begitu sederhana if (! document.getElementById) return false; di bagian atas fungsi Anda yang melakukan panggilan seperti itu juga akan sesuai. Tentu saja, banyak orang yang menulis JavaScript tidak begitu mempertimbangkan mereka yang masih menggunakan browser antik dan jadi para pengguna itu harus terbiasa melihat kesalahan JavaScript di hampir setiap halaman web yang mereka kunjungi sekarang.
Manakah dari berbagai cara yang Anda gunakan untuk melampirkan pemrosesan ke halaman Anda untuk dijalankan ketika pengunjung Anda mengklik sesuatu? Jika cara Anda melakukannya lebih dekat ke contoh di bagian atas halaman daripada ke contoh di bagian bawah halaman maka mungkin itu waktu Anda berpikir tentang meningkatkan cara Anda menulis onclick processing Anda untuk menggunakan salah satu metode yang lebih baik disajikan lebih rendah di atas halaman.
Melihat kode untuk pendengar acara lintas browser, Anda akan melihat bahwa ada parameter keempat yang kami panggil UC, penggunaan yang tidak jelas dari uraian sebelumnya.
Browser memiliki dua pesanan berbeda di mana mereka dapat memproses acara ketika acara tersebut dipicu. Mereka dapat bekerja dari luar ke dalam dari
tag ke tag yang memicu acara atau mereka dapat bekerja dari dalam keluar mulai dari tag yang paling spesifik. Keduanya disebut menangkap dan gelembung masing-masing dan sebagian besar browser memungkinkan Anda untuk memilih urutan beberapa pemrosesan yang harus dijalankan dengan menetapkan parameter tambahan ini.- uC = true untuk diproses selama fase penangkapan
- UC = salah untuk diproses selama fase gelembung.
Jadi, di mana ada beberapa tag lain yang melilit yang dipicu pada fase penangkapan, pertama-tama dimulai dengan tag terluar dan bergerak masuk menuju salah satu yang memicu acara dan kemudian setelah tag acara dilampirkan telah diproses fase gelembung membalikkan proses dan kembali keluar lagi.
Internet Explorer dan penangan acara tradisional selalu memproses fase gelembung dan tidak pernah fase menangkap dan karenanya selalu mulai dengan tag yang paling spesifik dan bekerja ke luar.
Begitu juga dengan penangan acara:
xx
mengklik pada xx akan keluar dengan memicu peringatan ('b') terlebih dahulu dan peringatan ('a') kedua.
Jika peringatan itu dilampirkan menggunakan pendengar acara dengan uC true maka semua browser modern kecuali Internet Explorer akan memproses peringatan ('a') terlebih dahulu dan kemudian peringatan ('b').