Rumah >hujung hadapan web >tutorial js >Skrip lebih bijak: JavaScript berkualiti dari awal
Skrip lebih bijak: JavaScript berkualiti dari awal
- 尊渡假赌尊渡假赌尊渡假赌asal
- 2025-03-08 00:04:10983semak imbas
atau mungkin mempunyai kod terus di dalamnya:
<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>
Jangan bimbang tentang perbezaan antara coretan ini lagi. Terdapat beberapa cara - baik baik dan buruk - di mana kita boleh menambah JavaScript ke laman web. Kami akan melihat pendekatan ini secara terperinci kemudian dalam bab ini.
JavaScript telah dibangunkan oleh Netscape dan dilaksanakan di Netscape 2, walaupun pada asalnya dipanggil Livescript. Populariti bahasa lain yang semakin meningkat, Java, mendorong Netscape untuk menukar nama itu dalam usaha untuk mendapatkan wang tunai pada sambungan, kerana JavaScript memberikan keupayaan untuk berkomunikasi antara pelayar dan applet Java.
Tetapi sebagai bahasa itu dibangunkan oleh Netscape, dalam bentuk asalnya, dan oleh Microsoft, dalam pelaksanaan JScript yang sama-tetapi berbeza, ia menjadi jelas bahawa skrip web terlalu penting untuk ditinggalkan ke serigala serigala. Oleh itu, pada tahun 1996, pembangunan telah diserahkan kepada badan piawaian antarabangsa yang dipanggil ECMA, dan JavaScript menjadi ECMAScript atau ECMA-262.
Kebanyakan orang masih merujuknya sebagai JavaScript, dan ini boleh menjadi punca kekeliruan: selain nama dan persamaan dalam sintaks, Java dan JavaScript tidak sama.
batasan JavaScriptJavaScript paling biasa digunakan sebagai bahasa sisi klien, dan dalam hal ini "klien" merujuk kepada pelayar web pengguna akhir, di mana JavaScript ditafsirkan dan dijalankan. Ini membezakannya dari bahasa pelayan seperti PHP dan ASP, yang dijalankan pada pelayan dan menghantar data statik kepada klien.
Sejak JavaScript tidak mempunyai akses kepada persekitaran pelayan, terdapat banyak tugas yang, sementara remeh apabila dilaksanakan dalam PHP, tidak dapat dicapai dengan JavaScript: membaca dan menulis ke pangkalan data, misalnya, atau membuat fail teks. Tetapi sejak JavaScript mempunyai akses kepada persekitaran klien, ia boleh membuat keputusan berdasarkan data yang tidak mempunyai bahasa pelayan, seperti kedudukan tetikus, atau saiz elemen yang diberikan.
Bagaimana dengan ActiveX?
Jika anda sudah cukup akrab dengan JScript Microsoft, anda mungkin berfikir "tetapi JavaScript boleh melakukan beberapa perkara ini menggunakan ActiveX," dan itu benar - tetapi ActiveX bukan sebahagian daripada ECMAScript. ActiveX adalah mekanisme khusus Windows untuk membolehkan Internet Explorer mengakses COM (model objek komponen di tengah-tengah teknologi skrip Windows) dan pada umumnya hanya berjalan dalam persekitaran yang dipercayai, seperti intranet. Terdapat beberapa pengecualian khusus yang akan kita jumpai - contoh kawalan ActiveX yang berjalan tanpa keselamatan khas dalam IE (seperti plugin flash, dan xmlhttprequest) - tetapi untuk sebahagian besar, skrip menggunakan ActiveX berada di luar skop buku ini.
Biasanya, komputer di mana pelanggan dijalankan tidak akan menjadi kuat seperti pelayan, jadi JavaScript bukan alat terbaik untuk melakukan banyak pemprosesan data. Tetapi ketetapan pemprosesan data pada pelanggan menjadikan pilihan ini menarik untuk sedikit pemprosesan, kerana respons dapat diterima langsung; Borang pengesahan, misalnya, membuat calon yang baik untuk pemprosesan sisi klien.
tetapi untuk membandingkan bahasa sisi pelayan dan klien dengan tujuan yang "lebih baik" sesat. Tidak lebih baik - mereka alat untuk pekerjaan yang berbeza, dan crossover berfungsi di antara mereka adalah kecil. Walau bagaimanapun, peningkatan interaksi antara skrip sisi pelanggan dan pelayan menyampaikan kepada generasi baru skrip web, yang menggunakan teknologi seperti XMLHTTPREQUEST untuk membuat permintaan untuk data pelayan, menjalankan skrip sisi pelayan, dan kemudian menguruskan hasil pada sisi klien. Kami akan melihat teknologi ini secara mendalam dalam Bab 18, membina aplikasi web dengan JavaScript.
Sekatan keselamatan
Sebagai JavaScript beroperasi dalam bidang data dan program yang sangat sensitif, keupayaannya telah terhad untuk memastikan ia tidak dapat digunakan secara berniat jahat. Oleh itu, terdapat banyak perkara yang JavaScript tidak dibenarkan dilakukan. Sebagai contoh, ia tidak dapat membaca kebanyakan tetapan sistem dari komputer anda, berinteraksi secara langsung dengan perkakasan anda, atau menyebabkan program dijalankan.
Juga, beberapa interaksi khusus yang biasanya dibenarkan untuk elemen tertentu tidak dibenarkan dalam JavaScript, kerana sifat elemen itu. Contohnya, menukar nilai bentuk
biasanya tidak ada masalah, tetapi jika ia adalah medan input fail (mis., ), menulis kepadanya tidak dibenarkan sama sekali - sekatan yang menghalang skrip jahat daripada membuat pengguna memuat naik fail yang mereka tidak pilih.
Terdapat beberapa contoh sekatan keselamatan yang sama, yang akan kami berkembang apabila mereka muncul dalam aplikasi yang akan kami sampaikan dalam buku ini. Tetapi untuk meringkaskan, inilah senarai batasan utama dan sekatan keselamatan JavaScript, termasuk yang telah kita lihat. JavaScript tidak boleh:
- Buka dan baca fail secara langsung (kecuali di bawah keadaan tertentu, seperti yang terperinci dalam Bab 18, membina aplikasi web dengan JavaScript).
- Buat atau edit fail pada komputer pengguna (kecuali kuki, yang dibincangkan dalam Bab 8, bekerja dengan kuki).
- baca data pos http.
- Baca tetapan sistem, atau sebarang data lain dari komputer pengguna yang tidak disediakan melalui objek bahasa atau tuan rumah (objek tuan rumah adalah perkara seperti tetingkap dan skrin, yang disediakan oleh alam sekitar dan bukannya bahasa itu sendiri.) Ubah suai nilai medan input fail.
- mengubah paparan dokumen yang dimuatkan dari domain yang berbeza.
- Tutup atau ubah suai bar alat dan elemen lain tetingkap yang tidak dibuka oleh skrip (iaitu, tetingkap penyemak imbas utama).
Ia juga patut diingat bahawa banyak pelayar termasuk pilihan yang membolehkan ketepatan yang lebih besar daripada hanya membolehkan atau melumpuhkan JavaScript. Sebagai contoh, Opera termasuk pilihan untuk tidak membenarkan skrip daripada menutup tingkap, bergerak tingkap, menulis ke bar status, menerima klik kanan ... senarai terus. Terdapat sedikit yang boleh anda lakukan untuk bekerja di sekitar ini, tetapi kebanyakannya, anda tidak perlu? Pilihan sedemikian telah berkembang untuk menindas skrip "menjengkelkan" (penulisan bar status, skrip tidak kanan klik, dll) jadi jika anda menjauhkan diri dari skrip jenis tersebut, isu itu akan jarang berlaku.
amalan terbaik JavaScript
amalan terbaik JavaScript memberi penekanan yang kuat terhadap persoalan apa yang harus anda lakukan untuk orang yang penyemak imbasnya tidak menyokong skrip, yang telah dimatikan, atau yang tidak dapat berinteraksi dengan skrip untuk alasan lain (mis., Pengguna menggunakan teknologi bantuan yang tidak menyokong skrip).
Isu akhir adalah yang paling sukar untuk ditangani, dan kami akan memberi tumpuan kepada penyelesaian kepada masalah ini dalam Bab 16, JavaScript dan kebolehcapaian. Dalam bahagian ini, saya ingin melihat tiga prinsip teras JavaScript yang baik:
skrip tidak mengganggu - memisahkan kandungan dari tingkah laku
- Amalan pengekodan yang konsisten - Menggunakan pendakap dan terminator titik koma
- Prinsip pertama memastikan bahawa kita memikirkan gambar yang lebih besar apabila kita menggunakan skrip di laman web kami. Titik kedua menjadikan penyelenggaraan yang lebih mudah pada akhirnya, dan kebolehgunaan yang lebih baik dan
- degradasi anggun untuk pengguna. (Degradasi anggun bermaksud bahawa jika JavaScript tidak disokong, penyemak imbas secara semulajadi dapat kembali, atau "merendahkan" ke, fungsi yang tidak skrip.) Prinsip ketiga menjadikan kod lebih mudah untuk dibaca dan diselenggara.
Menyediakan pengguna yang tidak mempunyai JavaScript (Peningkatan Progresif) Terdapat beberapa sebab mengapa pengguna mungkin tidak mempunyai JavaScript:
- Mereka menggunakan peranti yang tidak menyokong skrip sama sekali, atau menyokongnya dengan cara yang terhad.
- Mereka berada di belakang pelayan proksi atau firewall yang menapis JavaScript.
- mereka mempunyai JavaScript yang dimatikan dengan sengaja.
Titik pertama meliputi pelbagai peranti yang sangat besar dan terus berkembang, termasuk peranti skrin kecil seperti PDA, peranti skrin pertengahan termasuk WEBTV dan Sony PSP, serta pelayar JavaScript warisan seperti Opera 5 dan Netscape 4.
Titik terakhir dalam senarai di atas boleh dikatakan paling tidak mungkin (selain pemaju lain yang memainkan penyokong Devil!), Tetapi sebab -sebabnya tidak penting: sesetengah pengguna hanya tidak mempunyai JavaScript, dan kita harus menampungnya. Tidak ada cara untuk mengukur bilangan pengguna yang jatuh ke dalam kategori ini, kerana mengesan sokongan JavaScript dari pelayan tidak boleh dipercayai, tetapi angka yang saya lihat meletakkan bahagian pengguna yang mempunyai JavaScript yang dimatikan antara 5% dan 20%, bergantung kepada sama ada anda menerangkan robot enjin carian sebagai "pengguna."
Penyelesaian
Pendekatan lama untuk isu ini adalah menggunakan elemen noskrip HTML, kandungannya yang diberikan oleh penyemak imbas yang tidak menyokong elemen skrip sama sekali, dan penyemak imbas yang menyokongnya tetapi mempunyai skrip dimatikan.Walaupun idea yang baik, dalam amalan penyelesaian ini menjadi kurang berguna dari masa ke masa, kerana noskrip tidak dapat membezakan dengan keupayaan. Penyemak imbas yang menawarkan sokongan JavaScript terhad tidak akan dapat menjalankan skrip rumit, tetapi peranti tersebut adalah penyemak imbas yang mampu skrip, jadi mereka tidak akan menghuraikan elemen noskrip sama ada. Pelayar ini tidak akan berakhir dengan apa -apa.
Pendekatan yang lebih baik untuk isu ini adalah untuk memulakan dengan HTML statik, kemudian gunakan skrip untuk mengubah suai atau menambah tingkah laku dinamik dalam kandungan statik.
Mari lihat contoh mudah. Teknik pilihan untuk membuat menu DHTML menggunakan senarai yang tidak teratur sebagai struktur menu utama. Kami akan menumpukan seluruh Bab 15, menu DHTML dan navigasi kepada subjek ini, tetapi contoh pendek ini menggambarkan titik:
<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script> Senarai pautan adalah HTML biasa, jadi ia wujud untuk semua pengguna, sama ada mereka mempunyai skrip yang diaktifkan atau tidak. Jika skrip disokong, skrip menu.js kami boleh menggunakan tingkah laku dinamik, tetapi jika skrip tidak disokong, kandungan masih muncul. Kami tidak membezakan antara peranti secara eksplisit - kami hanya menyediakan kandungan yang dinamik jika penyemak imbas dapat mengendalikannya, dan statik jika tidak. Perbincangan
Pendekatan "tradisional" untuk senario ini adalah untuk menghasilkan menu yang berasingan, dinamik dalam JavaScript tulen, dan mempunyai kandungan statik yang jatuh di dalam elemen noskrip:
<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>
Tetapi, seperti yang telah kita lihat, pelbagai peranti akan jatuh walaupun jaring ini, kerana sokongan JavaScript tidak lagi menjadi cadangan semua atau tidak. Pendekatan di atas menyediakan kandungan lalai kepada semua peranti, dan menggunakan fungsi skrip hanya jika ia berfungsi.
Pendekatan skrip ini secara umum dirujuk sebagai peningkatan progresif , dan ia adalah metodologi yang akan kita gunakan sepanjang buku ini.
Jangan tanya!
Teknik ini atau unsur noskrip ini harus digunakan untuk menambah mesej yang berbunyi, "Sila hidupkan JavaScript untuk diteruskan." Pada masa yang terbaik, mesej sedemikian adalah kebiasaan ("Kenapa saya harus?"); Paling tidak mungkin tidak membantu ("Saya tidak boleh!") Atau tidak bermakna ("Apa yang JavaScript?"). Sama seperti halaman percikan yang berkata, "Sila tingkatkan penyemak imbas anda," mesej -mesej ini berguna kepada pengguna web purata sebagai tanda jalan yang berbunyi, "Sila gunakan kereta yang berbeza."
Kadang -kadang, anda mungkin menghadapi situasi di mana fungsi yang setara tidak dapat disediakan tanpa JavaScript. Dalam kes sedemikian, saya fikir tidak mengapa mempunyai mesej statik yang memberitahu pengguna ketidakserasian ini (dalam istilah nontechnical, tentu saja). Tetapi, untuk sebahagian besar, cuba mengelakkan menyediakan mesej seperti ini melainkan ia secara harfiah satu -satunya cara.Memisahkan kandungan dari tingkah laku (skrip tidak mengganggu)
Memisahkan kandungan dari tingkah laku bermakna menjaga aspek yang berbeza dari pembinaan laman web. Jeffrey Zeldman terkenal merujuk kepada ini sebagai "bangku tiga kaki" pembangunan web (Zeldman, J. merancang dengan piawaian web.
Pemisahan yang baik menjadikan laman web yang lebih mudah dikekalkan, lebih mudah diakses, dan merendahkan dengan baik pada pelayar yang lebih tua atau lebih rendah.
Penyelesaian
Pada satu ekstrem, yang secara langsung menentang ideal memisahkan kandungan dari tingkah laku, kita boleh menulis kod sebaris terus di dalam pengendali acara atribut. Ini sangat kemas, dan secara amnya harus dielakkan:
kita dapat memperbaiki keadaan dengan mengambil kod yang melakukan kerja dan abstrak ke dalam fungsi:
<ul > <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> <br> <script type="text/javascript" src="menu.js"></script>
Menentukan fungsi untuk melakukan kerja untuk kami membolehkan kami memberikan sebahagian besar kod kami dalam fail JavaScript yang berasingan:
<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>
tetapi pendekatan yang lebih baik adalah untuk mengelakkan menggunakan pengendali acara sebaris sepenuhnya. Sebaliknya, kita boleh menggunakan Model Objek Dokumen (DOM) untuk mengikat pengendali acara ke unsur -unsur dalam dokumen HTML. DOM adalah antara muka pengaturcaraan standard yang mana bahasa seperti JavaScript boleh mengakses kandungan dokumen HTML, menghapuskan keperluan untuk sebarang kod JavaScript untuk muncul dalam dokumen HTML itu sendiri. Dalam contoh ini, kod HTML kami akan kelihatan seperti berikut:
<ul > <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> <br> <script type="text/javascript" src="menu.js"></script>
inilah skrip yang kami gunakan:
<script type="text/javascript" src="menu.js"></script> <br> <br> <noscript> <br> <ul> <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> </noscript>
Pendekatan ini membolehkan kami menambah, membuang, atau menukar pengendali acara tanpa perlu mengedit HTML, dan kerana dokumen itu sendiri tidak bergantung pada atau merujuk kepada skrip sama sekali, penyemak imbas yang tidak memahami JavaScript tidak akan terjejas olehnya. Penyelesaian ini juga memberikan manfaat kebolehgunaan semula, kerana kita dapat mengikat fungsi yang sama dengan unsur -unsur lain yang diperlukan, tanpa perlu mengedit HTML.
Penyelesaian ini bergantung pada keupayaan kami untuk mengakses unsur -unsur melalui DOM, yang akan kami sampaikan secara mendalam dalam Bab 5, menavigasi model objek dokumen.
faedah pemisahan
Dengan mengamalkan pemisahan kandungan dan tingkah laku yang baik, kita tidak hanya mendapat manfaat praktikal dari segi kemerosotan yang lebih lancar, tetapi juga kelebihan pemikiran dari segi pemisahan. Oleh kerana kita telah memisahkan HTML dan JavaScript, bukannya menggabungkan mereka, apabila kita melihat HTML kita kurang cenderung untuk lupa bahawa fungsi terasnya harus menerangkan kandungan halaman, bebas dari mana -mana skrip. Andy Clarke merujuk kepada piawaian web yang kecil, yang merupakan analogi yang berguna, perkara kecil kelihatan seperti laman web yang baik harus: Apabila anda melihat mangkuk, anda dapat melihat semua lapisan berasingan yang membentuk pencuci mulut. Sebaliknya ini mungkin kek buah: apabila anda melihat kek, anda tidak dapat memberitahu apa setiap ramuan yang berbeza. Yang dapat anda lihat adalah jisim kek.
Perbincangan
Penting untuk diperhatikan bahawa apabila anda mengikat pengendali acara ke elemen seperti ini, anda tidak boleh melakukannya sehingga elemen sebenarnya wujud. Jika anda meletakkan skrip terdahulu di bahagian kepala halaman seperti itu, ia akan melaporkan kesilapan dan gagal berfungsi, kerana div kandungan belum diberikan pada titik di mana skrip diproses.
Penyelesaian yang paling langsung adalah meletakkan kod di dalam pengendali acara beban. Ia akan sentiasa selamat di sana kerana acara beban tidak terbakar sehingga selepas dokumen telah diberikan sepenuhnya:
atau lebih jelas, dengan sedikit lebih menaip:
<div <br> onmouseover="this.style.borderColor='red'" <br> onmouseout="this.style.borderColor='black'">
<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>
Masalah dengan pengendali acara beban adalah bahawa hanya satu skrip pada halaman yang boleh menggunakannya; Jika dua atau lebih skrip cuba memasang pengendali acara beban, setiap skrip akan mengatasi pengendali yang datang sebelum ini. Penyelesaian masalah ini adalah untuk bertindak balas terhadap peristiwa beban dengan cara yang lebih moden; Kami akan melihat ini tidak lama lagi, dalam bahagian yang dipanggil "Mendapatkan Skrip Berbilang untuk Bekerja pada halaman yang sama".
menggunakan pendakap dan titik koma (amalan pengekodan yang konsisten)
Dalam banyak operasi JavaScript, pendakap dan titik koma adalah pilihan, jadi ada nilai untuk memasukkannya apabila mereka tidak penting?
Penyelesaian
Walaupun pendakap dan titik koma sering pilihan, anda harus selalu memasukkannya. Ini menjadikan kod lebih mudah dibaca - oleh orang lain, dan pada diri sendiri pada masa akan datang - dan membantu anda mengelakkan masalah semasa anda menggunakan semula dan menyusun semula kod dalam skrip anda (yang sering akan menyebabkan pilihan koma pilihan koma).
Sebagai contoh, kod ini betul -betul sah:
<ul > <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> <br> <script type="text/javascript" src="menu.js"></script>Kod ini adalah sah terima kasih kepada proses dalam jurubahasa JavaScript yang dipanggil memasukkan titik koma. Setiap kali penterjemah mendapati dua serpihan kod yang dipisahkan oleh satu atau lebih garis pecah, dan serpihan -serpihan itu tidak masuk akal jika mereka berada dalam satu baris, jurubahasa merawat mereka seolah -olah titik koma wujud di antara mereka. Dengan mekanisme yang sama, pendakap yang biasanya mengelilingi kod yang akan dilaksanakan dalam pernyataan jika else boleh disimpulkan dari sintaks, walaupun mereka tidak hadir. Fikirkan proses ini sebagai jurubahasa menambah elemen kod yang hilang untuk anda.
Walaupun unsur -unsur kod ini tidak selalu diperlukan, lebih mudah untuk diingat untuk menggunakannya apabila mereka diperlukan, dan lebih mudah untuk membaca kod yang dihasilkan, jika anda menggunakannya secara konsisten.
Contoh kami di atas akan lebih baik ditulis seperti ini:
<script type="text/javascript" src="menu.js"></script> <br> <br> <noscript> <br> <ul> <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> </noscript>Versi ini mewakili pembacaan kod utama:
<div <br> onmouseover="this.style.borderColor='red'" <br> onmouseout="this.style.borderColor='black'">
Menggunakan fungsi literals
Apabila anda berpengalaman dengan selok -belok bahasa JavaScript, ia akan menjadi biasa bagi anda untuk menggunakan fungsi literals untuk membuat fungsi tanpa nama yang diperlukan, dan menyerahkannya kepada pembolehubah JavaScript dan sifat objek. Dalam konteks ini, definisi fungsi harus diikuti oleh titik koma, yang menamatkan tugasan berubah:
var sistomething = function (mesej)
{
...
};
Sebelum skrip boleh mula melakukan perkara yang menarik, anda perlu memuatkannya ke laman web. Terdapat dua teknik untuk melakukan ini, salah satunya adalah lebih baik daripada yang lain.
Penyelesaian
Teknik pertama dan paling langsung ialah menulis kod secara langsung di dalam elemen skrip, seperti yang telah kita lihat sebelum ini:<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>
Masalah dengan kaedah ini adalah bahawa dalam warisan dan pelayar teks sahaja-yang tidak menyokong elemen skrip sama sekali-kandungannya boleh diberikan sebagai teks literal.
Alternatif yang lebih baik, yang mengelakkan masalah ini, sentiasa meletakkan skrip dalam fail JavaScript luaran. Inilah yang kelihatan seperti:
<ul > <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> <br> <script type="text/javascript" src="menu.js"></script>
Ini memuatkan fail JavaScript luaran yang dinamakan what-is-javascript.js. Fail tersebut harus mengandungi kod yang anda akan masukkan ke dalam elemen skrip, seperti ini:
<script type="text/javascript" src="menu.js"></script> <br> <br> <noscript> <br> <ul> <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> </noscript>
Apabila anda menggunakan kaedah ini, penyemak imbas yang tidak memahami elemen skrip akan mengabaikannya dan tidak memberikan kandungan (kerana elemen kosong), tetapi penyemak imbas yang memahami ia akan memuat dan memproses skrip. Ini membantu mengekalkan skrip dan kandungan yang terpisah, dan jauh lebih mudah dikekalkan - anda boleh menggunakan skrip yang sama pada beberapa halaman tanpa perlu mengekalkan salinan kod dalam pelbagai dokumen.
Perbincangan
anda boleh mempersoalkan cadangan tidak menggunakan kod terus di dalam elemen skrip. "Tidak ada masalah," kata anda. "Saya hanya akan meletakkan komen HTML di sekelilingnya." Nah, saya harus tidak bersetuju dengan itu: Menggunakan komen HTML untuk "menyembunyikan" kod adalah kebiasaan yang sangat buruk yang harus kita elakkan jatuh ke dalam.meletakkan komen html di sekitar kod
Parser yang mengesahkan tidak diperlukan untuk membaca komen, apalagi untuk memprosesnya. Hakikat yang mengulas JavaScript berfungsi sama sekali adalah anachronisme-kemunculan semula kepada amalan lama yang sudah lapuk yang membuat andaian mengenai dokumen yang mungkin tidak benar: ia mengandaikan bahawa halaman itu dihidangkan kepada parser yang tidak).
Semua contoh dalam buku ini disediakan dalam HTML (berbanding dengan XHTML), jadi andaian ini adalah munasabah, tetapi jika anda bekerja dengan XHTML (dengan betul berkhidmat dengan jenis mime/XHTML XML) Demi memastikan keserasian ke hadapan (dan manfaat yang berkaitan dengan tabiat pengekodan anda sendiri seperti projek individu), saya sangat mengesyorkan agar anda mengelakkan meletakkan komen di sekitar kod dengan cara ini. JavaScript anda harus selalu ditempatkan dalam fail JavaScript luaran.
atribut bahasa
atribut bahasa tidak lagi diperlukan. Pada zaman ketika Netscape 4 dan sezamannya adalah pelayar yang dominan, atribut bahasa <script> tag mempunyai peranan menghidu sokongan upah (contohnya, dengan menyatakan JavaScript1.3), dan memberi kesan kepada aspek-aspek kecil cara penterjemah skrip bekerja.<p> tetapi menyatakan versi JavaScript tidak bermakna sekarang bahawa JavaScript adalah Ecmascript, dan atribut bahasa telah ditetapkan semula memihak kepada atribut jenis. Atribut ini menentukan jenis fail mime yang disertakan, seperti skrip dan helaian gaya, dan satu -satunya yang perlu anda gunakan: <pre class="brush:php;toolbar:false"><script type="text/javascript"> <br> function saySomething(message) <br> { <br> alert(message); <br> } <br> saySomething('Hello world!'); <br> </script> <p> Secara teknikal, nilai harus teks/ecmascript, tetapi Internet Explorer tidak memahaminya. Secara peribadi, saya akan lebih bahagia jika ia berlaku, semata -mata kerana JavaScript adalah (ironinya) perkataan saya mempunyai kesukaran yang besar menaip - saya telah kehilangan kiraan bilangan kali kegagalan skrip berlaku kerana saya akan menaip Type = "Text/Javsacript". <p> Mendapatkan skrip berganda untuk berfungsi pada halaman yang sama <h5> Apabila skrip berganda tidak berfungsi bersama, hampir selalu kerana skrip ingin memberikan pengendali acara untuk acara yang sama pada elemen tertentu. Oleh kerana setiap elemen hanya mempunyai satu pengendali untuk setiap acara, skrip menimpa pengendali acara satu sama lain. <p> <p> Penyelesaian <em> Suspek biasa adalah pengendali acara beban objek tetingkap, kerana hanya satu skrip pada halaman yang boleh menggunakan acara ini; Jika dua atau lebih skrip menggunakannya, yang terakhir akan menimpa mereka yang datang sebelum itu. <p> kita boleh memanggil pelbagai fungsi dari dalam satu pengendali beban tunggal, seperti ini: <p> <pre class="brush:php;toolbar:false"><ul > <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> <br> <script type="text/javascript" src="menu.js"></script> Tetapi, jika kita menggunakan kod ini, kita akan terikat dengan sekeping kod yang kita perlu lakukan semua yang kita perlukan pada waktu beban. Penyelesaian yang lebih baik akan menyediakan cara menambah pengendali acara beban yang tidak bertentangan dengan pengendali lain. <p> Apabila fungsi tunggal berikut dipanggil, ia akan membolehkan kita menetapkan bilangan pengendali acara beban, tanpa mana -mana yang bertentangan: <p> <pre class="brush:php;toolbar:false"><script type="text/javascript" src="menu.js"></script> <br> <br> <noscript> <br> <ul> <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> </noscript> Sebaik sahaja fungsi ini ada, kita boleh menggunakannya beberapa kali: <p> <pre class="brush:php;toolbar:false"><div <br> onmouseover="this.style.borderColor='red'" <br> onmouseout="this.style.borderColor='black'"> anda mendapat idea! <p> <p> Perbincangan <em> JavaScript merangkumi kaedah untuk menambah (dan mengeluarkan) pendengar acara, yang beroperasi seperti pengendali acara, tetapi membenarkan banyak pendengar untuk melanggan satu acara pada elemen. Malangnya, sintaks untuk pendengar acara sama sekali berbeza di Internet Explorer berbanding dengan pelayar lain: di mana IE menggunakan kaedah proprietari, yang lain melaksanakan standard W3C. Kami akan menemui dikotomi ini dengan kerap, dan kami akan membincangkannya secara terperinci dalam Bab 13, HTML Dinamik Asas. <p> Kaedah standard W3C dipanggil AddEventListener: <p> <pre class="brush:php;toolbar:false"><div <br> onmouseover="changeBorder('red')" <br> onmouseout="changeBorder('black')"> kaedah IE dipanggil lampiran: <p> <pre class="brush:php;toolbar:false">Example 1.1. separate-content-behaviors.js (excerpt) <br> <br> function changeBorder(element, to) <br> { <br> element.style.borderColor = to; <br> } Seperti yang dapat anda lihat, pembinaan standard mengambil nama acara (tanpa awalan "on"), diikuti dengan fungsi yang akan dipanggil apabila peristiwa berlaku, dan argumen yang mengawal peristiwa yang menggelegak (lihat Bab 13, HTML Dinamik Asas untuk maklumat lanjut mengenai ini). Kaedah IE mengambil nama <p> pengendali <em> nama (termasuk " on <em>" awalan), diikuti dengan nama fungsi. <p> Untuk meletakkan ini bersama -sama, kita perlu menambah beberapa ujian untuk memeriksa kewujudan setiap kaedah sebelum kita cuba menggunakannya. Kita boleh melakukan ini menggunakan pengendali JavaScript Typeof, yang mengenal pasti pelbagai jenis data (sebagai "String", "Number", "Boolean", "Object", "Array", "Function", atau "Undefined"). Kaedah yang tidak wujud akan kembali "undefined". <pre class="brush:php;toolbar:false"><script type="text/javascript"> <br> function saySomething(message) <br> { <br> alert(message); <br> } <br> saySomething('Hello world!'); <br> </script> <p> Terdapat satu komplikasi tambahan: Dalam Opera, acara beban yang boleh mencetuskan pelbagai pendengar acara datang dari objek dokumen, bukan tetingkap. Tetapi kita tidak boleh menggunakan dokumen kerana itu tidak berfungsi dalam pelayar Mozilla yang lebih tua (seperti Netscape 6). Untuk merancang laluan melalui kebiasaan ini, kita perlu menguji window.addeventlistener, kemudian document.addeventlistener, kemudian window.attachevent, dalam perintah itu. <p> Akhirnya, untuk penyemak imbas yang tidak menyokong mana-mana kaedah tersebut (MAC IE 5, dalam amalan), penyelesaian sandaran adalah untuk mengikat pelbagai pengendali acara gaya lama bersama-sama supaya mereka akan dipanggil sebaliknya apabila peristiwa berlaku. Kami melakukan ini dengan secara dinamik membina pengendali acara baru yang memanggil mana-mana pengendali sedia ada sebelum ia memanggil pengendali yang baru ditugaskan apabila peristiwa itu berlaku. (Teknik ini dipelopori oleh Simon Willison.) <pre class="brush:php;toolbar:false"><ul > <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> <br> <script type="text/javascript" src="menu.js"></script> <p> Jangan risau jika anda tidak memahami spesifik bagaimana ini berfungsi - kami akan meneroka teknik -teknik yang terlibat dengan lebih terperinci dalam Bab 13, HTML Dinamik Asas. Di sana, kami akan mengetahui bahawa pendengar acara berguna bukan hanya untuk acara beban, tetapi untuk apa-apa jenis skrip yang didorong oleh acara. <h5> menyembunyikan kod sumber javascript <p> Jika anda pernah mencipta sesuatu yang anda bangga, anda akan memahami keinginan untuk melindungi harta intelektual anda. Tetapi JavaScript di web adalah bahasa sumber terbuka secara semula jadi; Ia datang kepada penyemak imbas dalam bentuk sumbernya, jadi jika penyemak imbas dapat menjalankannya, seseorang dapat membacanya. <p> Terdapat beberapa aplikasi di web yang mendakwa menawarkan penyulitan kod sumber, tetapi pada hakikatnya, tidak ada apa-apa yang boleh anda lakukan untuk menyulitkan kod sumber bahawa pengkod lain tidak dapat menyahsulit dalam beberapa saat. Malah, beberapa program ini sebenarnya menyebabkan masalah: mereka sering memformat kod sedemikian rupa untuk menjadikannya lebih perlahan, kurang cekap, atau hanya pecah. Nasihat saya? Jauhi mereka seperti wabak. <p> Tetapi masih, keinginan untuk menyembunyikan kod tetap. Terdapat sesuatu yang boleh anda lakukan untuk menghancurkan, jika tidak menyulitkan secara langsung, kod yang dapat dilihat oleh pengguna anda. <p> <em> Penyelesaian <p> Kod yang telah dilucutkan semua komen dan ruang kosong yang tidak perlu sangat sukar dibaca, dan seperti yang anda harapkan, mengekstrak bit individu fungsi dari kod tersebut sangat sukar. Teknik mudah memampatkan skrip anda dengan cara ini boleh meletakkan semua tetapi penggodam yang paling ditentukan. Sebagai contoh, ambil kod ini: <pre class="brush:php;toolbar:false"><script type="text/javascript" src="menu.js"></script> <br> <br> <noscript> <br> <ul> <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> </noscript> <p> kita boleh memampatkan kod itu ke dalam dua baris berikut hanya dengan mengeluarkan ruang kosong yang tidak perlu: <pre class="brush:php;toolbar:false"><script type="text/javascript"> <br> function saySomething(message) <br> { <br> alert(message); <br> } <br> saySomething('Hello world!'); <br> </script> <p> Walau bagaimanapun, ingat bahawa perkataan penting - tidak perlu. Sesetengah ruang putih adalah penting, seperti ruang tunggal selepas var dan jenis. <p> <em> Perbincangan <p> Amalan ini mempunyai kelebihan yang agak terpisah daripada manfaat obfuscation. Skrip yang dilucutkan komen dan ruang putih yang tidak perlu lebih kecil; Oleh itu, mereka lebih cepat memuatkan, dan boleh memproses lebih cepat. <p> Tetapi sila ingat bahawa kod tersebut mesti tetap diformat dengan menggunakan terminator dan pendakap garis titik koma (seperti yang kita dibincangkan dalam bahagian yang dipanggil "Menggunakan Braces and Corongolon (Amalan Pengekodan Konsisten)"); Jika tidak, penyingkiran garis rehat akan menjadikan garis kod berjalan bersama, dan akhirnya menyebabkan kesilapan. <p> Sebelum anda memulakan pemampatan, ingatlah untuk membuat salinan skrip. Saya tahu ia kelihatan jelas, tetapi saya telah membuat kesilapan ini banyak kali, dan semuanya lebih menggembirakan untuk menjadi begitu asas! Apa yang saya lakukan hari ini adalah menulis dan mengekalkan skrip dalam bentuk jarak jauh dan komen mereka, kemudian jalankan mereka melalui sekumpulan ekspresi carian/menggantikan sebelum mereka diterbitkan. Biasanya, saya menyimpan dua salinan skrip, bernama myscript.js dan myscript-commented.js, atau sesuatu yang serupa. <p> Kami akan kembali kepada subjek ini dalam Bab 20, mengekalkan kadar, di mana kami akan membincangkan ini di antara pelbagai teknik untuk meningkatkan kelajuan dan kecekapan skrip, serta mengurangkan jumlah ruang fizikal yang mereka perlukan. <h5> Debugging skrip <p> Debugging adalah proses mencari dan (mudah -mudahan) menetapkan pepijat. Kebanyakan penyemak imbas mempunyai beberapa jenis pelaporan bug yang dibina, dan beberapa debuggers luaran juga bernilai disiasat. <p> Memahami pelaporan ralat terbina dalam penyemak imbas <p> opera, pelayar Mozilla (seperti Firefox), dan Internet Explorer semuanya mempunyai fungsi pelaporan pepijat yang baik yang dibina, tetapi alat debugging Opera dan Mozilla adalah yang paling berguna. <p> opera <em> Buka konsol JavaScript dari Alat> Advanced> JavaScript Console. Anda juga boleh menetapkannya untuk membuka secara automatik apabila ralat berlaku dengan pergi ke Alat> Keutamaan> Lanjutan> Kandungan, kemudian klik butang Pilihan JavaScript untuk membuka dialognya, dan menyemak Konsol JavaScript Terbuka pada ralat. <br> <p> Firefox dan pelayar Mozilla lain <em> Buka Konsol JavaScript dari Tools> JavaScript Console. <br> <p> Internet Explorer untuk Windows <em> Pergi ke Alat> Pilihan Internet> Lanjutan dan nyahtandakan pilihan Debugging Skrip Lumpuhkan, kemudian periksa pilihan Paparkan pemberitahuan mengenai setiap ralat skrip, untuk membuat dialog muncul apabila ralat berlaku. <br> <p> Internet Explorer untuk Mac <em> Pergi ke Explorer> Keutamaan> Pelayar Web> Kandungan Web dan periksa pilihan Alerts Ralat Skrip Tayangan. <br><p> Safari tidak termasuk pelaporan pepijat secara lalai, tetapi versi baru -baru ini mempunyai menu debug "rahsia", termasuk konsol JavaScript, yang boleh anda aktifkan dengan memasukkan perintah terminal berikut. ($ Mewakili command prompt, dan tidak boleh ditaip.) <pre class="brush:php;toolbar:false"><script type="text/javascript"> <br> function saySomething(message) <br> { <br> alert(message); <br> } <br> saySomething('Hello world!'); <br> </script> <p> Anda juga boleh menggunakan lanjutan yang dipanggil Safari Enhancer, yang termasuk pilihan untuk membuang mesej JavaScript ke konsol Mac OS; Walau bagaimanapun, mesej ini tidak begitu membantu. <p> Memahami pelbagai mesej konsol penyemak imbas boleh mengambil sedikit amalan, kerana setiap pelayar memberikan maklumat yang berbeza. Berikut adalah contoh kesilapan - panggilan fungsi yang salah: <pre class="brush:php;toolbar:false"><ul > <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> <br> <script type="text/javascript" src="menu.js"></script> <p> Firefox memberikan laporan ringkas tetapi sangat tepat, termasuk nombor garis di mana ralat berlaku, dan keterangan, seperti yang ditunjukkan dalam Rajah 1.1, "Konsol Kesalahan JavaScript di Firefox". <p> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174136345112726.png" class="lazy" alt="Skrip lebih bijak: JavaScript berkualiti dari awal" > <s> <br> Rajah 1.1. Konsol Kesalahan JavaScript di Firefox <em> Seperti Rajah 1.2, "Konsol JavaScript di Opera" menggambarkan, Opera memberikan laporan yang sangat jelas, termasuk backtrace ke peristiwa yang mana kesilapan itu berasal, pemberitahuan garis di mana ia berlaku, dan keterangan. <p> Backtrace membantu apabila ralat berlaku dalam kod yang pada asalnya dipanggil oleh kod lain; Sebagai contoh, di mana penolong peristiwa memanggil fungsi yang terus memanggil fungsi kedua, dan pada ketika ini ralat berlaku. Konsol Opera akan mengesan proses ini kembali melalui setiap peringkat ke acara atau panggilan asalnya. <p> Internet Explorer memberikan laporan yang agak asas yang ditunjukkan dalam Rajah 1.3, "Konsol JavaScript di Windows IE". Ia menyediakan bilangan garis di mana jurubahasa mengalami ralat (ini mungkin atau mungkin tidak dekat dengan lokasi sebenar masalah sebenar), ditambah dengan ringkasan jenis ralat, walaupun ia tidak menjelaskan spesifik kesilapan itu sendiri. (Internet Explorer sangat buruk dalam mencari kesilapan dalam fail JavaScript luaran. Selalunya, nombor baris yang akan dilaporkan sebagai lokasi ralat sebenarnya akan menjadi bilangan baris di mana skrip dimuatkan dalam fail HTML.) <p> <s> <p> Rajah 1.2. Konsol JavaScript di Opera <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174136345278838.png" class="lazy" alt="Skrip lebih bijak: JavaScript berkualiti dari awal" > <br> <em> <s> Rajah 1.3. Konsol JavaScript di Windows IE <p> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174136345437272.png" class="lazy" alt="Skrip lebih bijak: JavaScript berkualiti dari awal" > <br> Seperti yang anda mungkin berkumpul, saya tidak terlalu terkesan dengan pelaporan ralat Internet Explorer, tetapi ia jauh lebih baik daripada apa -apa: sekurang -kurangnya anda tahu bahawa ralat telah berlaku. <em> Menggunakan Alert <p> Fungsi amaran adalah cara yang sangat berguna untuk menganalisis kesilapan - anda boleh menggunakannya pada bila -bila masa dalam skrip untuk menyiasat objek dan pembolehubah untuk melihat sama ada ia mengandungi data yang anda harapkan. Sebagai contoh, jika anda mempunyai fungsi yang mempunyai beberapa cawangan bersyarat, anda boleh menambah amaran dalam setiap keadaan untuk mengetahui yang sedang dilaksanakan: <pre class="brush:php;toolbar:false"><script type="text/javascript"> <br> function saySomething(message) <br> { <br> alert(message); <br> } <br> saySomething('Hello world!'); <br> </script> <p> mungkin nilai selama bertahun -tahun tidak kembali sebagai nombor, seperti yang sepatutnya. Anda boleh menambah permulaan skrip anda yang memberi amaran yang menguji pembolehubah untuk melihat jenisnya: <pre class="brush:php;toolbar:false"><ul > <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> <br> <script type="text/javascript" src="menu.js"></script> <p> Dalam teori, anda boleh meletakkan apa -apa jumlah maklumat dalam dialog amaran, walaupun rentetan data yang sangat panjang dapat membuat dialog yang luas sehingga beberapa maklumat akan dipotong atau di luar tetingkap. Anda boleh mengelakkan ini dengan memformat output dengan watak melarikan diri, seperti n untuk rehat garis. <p> Menggunakan Cuba-Catch <p> Pembentukan percubaan adalah cara yang sangat berguna untuk mendapatkan skrip hanya untuk "mencuba sesuatu," meninggalkan anda untuk mengendalikan sebarang kesilapan yang mungkin berlaku. Pembinaan asas kelihatan seperti ini: <pre class="brush:php;toolbar:false"><script type="text/javascript" src="menu.js"></script> <br> <br> <noscript> <br> <ul> <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> </noscript> <p> Jika anda tidak pasti di mana kesilapan datang, anda boleh membungkus penangkap cuba di sekitar blok yang sangat besar kod untuk menjebak kegagalan umum, kemudian ketatkannya di sekeliling kod yang semakin kecil di dalam blok itu. Sebagai contoh, anda boleh membungkus pendakap percubaan sekitar separuh pertama fungsi (pada titik yang mudah dalam kod), kemudian sekitar babak kedua, untuk melihat di mana ralat berlaku; Anda kemudian boleh membahagikan suspek separuh lagi, pada titik yang mudah, dan teruskan sehingga anda telah mengasingkan garis yang bermasalah. <pre class="brush:php;toolbar:false"><div <br> onmouseover="this.style.borderColor='red'" <br> onmouseout="this.style.borderColor='black'"> <p> Sering kali, saya menggunakan iterator untuk berjalan melalui keseluruhan objek dan mengetahui apa yang dikatakannya: <pre class="brush:php;toolbar:false"><div <br> onmouseover="changeBorder('red')" <br> onmouseout="changeBorder('black')"> <p> menulis ke halaman atau tetingkap <p> Jika anda mengkaji banyak data semasa debugging, atau anda berurusan dengan data yang diformat dengan cara yang rumit, sering lebih baik untuk menulis data itu terus ke halaman atau tetingkap pop timbul daripada cuba menangani banyak dialog amaran. Sekiranya anda mengkaji data dalam gelung, khususnya, anda boleh menjana beratus -ratus dialog, masing -masing anda perlu menolak secara manual? Proses yang sangat membosankan. <p> Dalam situasi seperti ini, kita boleh menggunakan harta InnerHTML elemen untuk menulis data ke halaman. Berikut adalah contoh di mana kita membina senarai menggunakan kandungan array (data), kemudian tuliskannya ke dalam ujian div: <pre class="brush:php;toolbar:false">Example 1.1. separate-content-behaviors.js (excerpt) <br> <br> function changeBorder(element, to) <br> { <br> element.style.borderColor = to; <br> } <p> kita juga boleh menulis data ke dalam pop timbul, yang berguna jika tidak ada tempat yang mudah untuk meletakkannya di halaman: <pre class="brush:php;toolbar:false"><div > <p> anda boleh memformat output tetapi anda suka, dan menggunakannya untuk menyusun data dengan cara apa pun yang memudahkan anda mencari ralat. <p> Apabila anda bekerja dengan jumlah data yang lebih kecil, anda boleh mendapatkan kelebihan yang sama dengan menulis data ke elemen tajuk utama: <pre class="brush:php;toolbar:false"><script type="text/javascript"> <br> function saySomething(message) <br> { <br> alert(message); <br> } <br> saySomething('Hello world!'); <br> </script> <p> Pendekatan akhir ini paling berguna apabila menjejaki data yang berubah secara berterusan atau cepat, seperti nilai yang diproses oleh fungsi setInterval (pemasa tak segerak yang akan kita temui dengan betul dalam bab 14, masa dan gerakan). <p> menggunakan debugger luaran <p> saya boleh mengesyorkan dua debuggers: <p> <s> <ul> Venkman untuk Mozilla dan Firefox <li> debugger skrip microsoft untuk Windows Internet Explorer <li> Debuggers luaran adalah cara yang jauh lebih terperinci untuk menganalisis skrip anda, dan mempunyai keupayaan yang lebih besar daripada rakan-rakan dalam pelayar mereka. Debuggers luaran boleh melakukan perkara -perkara seperti menghentikan pelaksanaan skrip pada titik tertentu, atau menonton sifat -sifat tertentu supaya anda dimaklumkan tentang apa -apa perubahan kepada mereka, namun ia mungkin disebabkan. Mereka juga termasuk ciri -ciri yang membolehkan anda "langkah melalui" baris kod mengikut baris, agar dapat membantu mencari kesilapan yang mungkin berlaku secara ringkas, atau sebaliknya sukar untuk diasingkan. <p> Debuggers luaran adalah kepingan perisian yang kompleks, dan ia boleh mengambil masa untuk pemaju untuk mengetahui cara menggunakannya dengan betul. Mereka boleh sangat berguna untuk menonjolkan kesilapan logik, dan berharga sebagai alat pembelajaran dengan hak mereka sendiri, tetapi mereka terhad dalam keupayaan mereka untuk membantu dengan ketidakcocokan pelayar: mereka hanya berguna di sana jika bug yang anda cari adalah dalam penyemak imbas yang menyokong debugger! <p> Amaran ketat <h5> Jika anda membuka Konsol JavaScript di Firefox, anda akan melihat bahawa ia termasuk pilihan untuk menunjukkan kesilapan dan amaran. Amaran memberitahu anda tentang kod bahawa, walaupun ia tidak salah, bergantung kepada pengendalian ralat automatik, menggunakan sintaks yang tidak ditetapkan, atau dengan cara lain tidak benar kepada spesifikasi ECMAScript. (Untuk melihat amaran ini, mungkin perlu untuk membolehkan pelaporan yang ketat dengan menaip di alamat mengenai: config dan menetapkan javascript.options.strict to true.) Sebagai contoh, buah pembolehubah ditakrifkan dua kali dalam kod di bawah: <p> <p> kita sepatutnya meninggalkan VAR kedua, kerana VAR digunakan untuk mengisytiharkan pembolehubah untuk kali pertama, yang telah kita lakukan. Rajah 1.4, "Konsol Amaran JavaScript di Firefox" menunjukkan bagaimana konsol JavaScript akan menyerlahkan kesilapan kami sebagai amaran. <pre class="brush:php;toolbar:false"><ul > <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> <br> <script type="text/javascript" src="menu.js"></script> <p> <s> Rajah 1.4. Konsol Amaran JavaScript di Firefox <p> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174136345582658.png" class="lazy" alt="Skrip lebih bijak: JavaScript berkualiti dari awal" > <br> Terdapat beberapa pengekodan salah satu yang boleh menyebabkan amaran seperti ini. Contohnya: <st> <em> <ul> <li> Mengisahkan semula pembolehubah-Ini menghasilkan amaran, "Redeclaration of Var Name," seperti yang kita lihat. <li> gagal mengisytiharkan pembolehubah di tempat pertama - pengawasan ini menghasilkan amaran, "Tugasan kepada nama pembolehubah yang tidak diisytiharkan." Ini mungkin timbul, sebagai contoh, jika baris pertama kod kami membaca hanya Fruit = 'Mango'; <li> Dengan mengandaikan kewujudan objek - andaian ini menghasilkan amaran "rujukan kepada nama harta yang tidak ditentukan." <p> Sebagai contoh, keadaan ujian seperti jika (Document.GetElementById) menganggap kewujudan kaedah getElementById, dan bank-bank pada hakikat bahawa keupayaan pengendalian ralat automatik JavaScript akan menukarkan kaedah yang tidak ada untuk palsu dalam pelayar di mana kaedah ini tidak wujud. Untuk mencapai hujung yang sama tanpa melihat amaran, kami akan lebih spesifik, menggunakan jika (typeof document.getElementById! = 'Undefined'). <p> Terdapat juga beberapa amaran yang berkaitan dengan fungsi, dan pelbagai peringatan lain yang termasuk kegemaran peribadi saya, "Ungkapan Tidak Berguna," yang dihasilkan oleh pernyataan dalam fungsi yang tidak melakukan apa-apa: <pre class="brush:php;toolbar:false"><script type="text/javascript"> <br> function saySomething(message) <br> { <br> alert(message); <br> } <br> saySomething('Hello world!'); <br> </script> <p> Untuk mengasyikkan mengenai topik ini, saya cadangkan artikel Alex Vincent menangani JavaScript ketat amaran. <p> Amaran tidak penting dalam erti kata bahawa mereka tidak menghalang skrip kita daripada bekerja, tetapi bekerja untuk mengelakkan amaran membantu kita mengamalkan amalan pengekodan yang lebih baik, yang akhirnya mewujudkan manfaat kecekapan. Sebagai contoh, skrip berjalan lebih cepat di Mozilla jika tidak ada amaran yang ketat, subjek yang akan kita lihat lagi dalam Bab 20, mengekalkan kadar. <p> <em> Ujian penukaran jenis <p> <em> Walaupun kita tidak boleh bergantung pada penukaran jenis untuk menguji nilai yang mungkin tidak ditentukan, ia adalah baik untuk berbuat demikian untuk nilai yang mungkin null, kerana spesifikasi ECMAScript memerlukan null menilai palsu. Jadi, sebagai contoh, setelah telah menubuhkan kewujudan getElementById menggunakan pengendali TypeOf seperti yang ditunjukkan di atas, ia adalah selamat dari masa itu untuk menguji unsur -unsur individu seperti yang ditunjukkan di bawah, kerana getElementById mengembalikan null untuk unsur -unsur yang tidak ada di DOM: <pre class="brush:php;toolbar:false"><ul > <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> <br> <script type="text/javascript" src="menu.js"></script> <h5> Ringkasan <p> Dalam bab ini, kami telah bercakap tentang pendekatan amalan terbaik untuk skrip yang akan menjadikan kod kami lebih mudah dibaca dan dikendalikan, dan akan membolehkannya merendahkan dengan anggun dalam peranti yang tidak disokong. Kami juga mula memperkenalkan beberapa teknik yang kami perlukan untuk membina skrip berguna, termasuk pendengar acara beban di mana -mana yang akan kami gunakan untuk hampir setiap penyelesaian dalam buku ini! Kami telah menutupi beberapa perkara yang cukup maju, jadi jangan risau jika ada yang sukar untuk dimasukkan. <p> <h5> Bab 5. Menavigasi Model Objek Dokumen <p> Pelayar memberikan program JavaScript akses kepada unsur -unsur di laman web melalui Model Objek Dokumen (DOM) - perwakilan dalaman tajuk, perenggan, senarai, gaya, ID, kelas, dan semua data lain yang boleh didapati di HTML pada halaman anda. DOM boleh dianggap sebagai pokok yang terdiri daripada nod yang saling berkaitan. Setiap tag dalam dokumen HTML diwakili oleh nod; Mana -mana tag yang bersarang di dalam tag itu adalah nod yang disambungkan kepadanya sebagai kanak -kanak, atau cawangan di dalam pokok. Setiap nod ini dipanggil nod elemen. (Dengan tegas, setiap nod elemen mewakili sepasang tag-tag permulaan dan akhir elemen (mis., <p> dan )-atau satu tag penutupan sendiri (mis., <br>, atau <br/> dalam xhtml).) Terdapat beberapa jenis nod lain; Yang paling berguna ialah nod dokumen, nod teks, dan nod atribut. Nod dokumen mewakili dokumen itu sendiri, dan merupakan akar pokok Dom. Nod teks mewakili teks yang terkandung di antara tag elemen. Nod atribut mewakili atribut yang dinyatakan di dalam tag pembukaan elemen. Pertimbangkan struktur halaman HTML asas ini: <p> <pre class="brush:php;toolbar:false"><script type="text/javascript"> <br> function saySomething(message) <br> { <br> alert(message); <br> } <br> saySomething('Hello world!'); <br> </script> DOM untuk halaman ini boleh digambarkan sebagai Rajah 5.1, "Struktur DOM halaman HTML yang mudah, digambarkan sebagai hierarki pokok". <p> Setiap halaman mempunyai nod dokumen, tetapi keturunannya berasal dari kandungan dokumen itu sendiri. Melalui penggunaan nod elemen, nod teks, dan nod atribut, setiap maklumat di halaman boleh diakses melalui JavaScript. <p> DOM tidak hanya terhad kepada HTML dan JavaScript, walaupun. Begini bagaimana laman spesifikasi W3C DOM menerangkan perkara itu: <p> Model Objek Dokumen adalah antara muka neutral platform dan bahasa yang akan membolehkan program dan skrip untuk mengakses dan mengemas kini kandungan, struktur dan gaya dokumen secara dinamik. <q> Jadi, walaupun campuran JavaScript dan HTML adalah kombinasi teknologi yang paling biasa di mana DOM digunakan, pengetahuan yang anda peroleh dari bab ini boleh digunakan untuk beberapa bahasa pengaturcaraan yang berbeza dan jenis dokumen. <p> Untuk menjadikan anda "tuan domain anda," bab ini akan menerangkan bagaimana untuk mencari unsur yang anda cari di laman web, kemudian ubahnya, susun semula, atau padamkannya sepenuhnya. <p> <s> <p> Rajah 5.1. Struktur DOM halaman HTML yang mudah, digambarkan sebagai hierarki pokok <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174136345733536.png" class="lazy" alt="Skrip lebih bijak: JavaScript berkualiti dari awal" > <br> <em> Mengakses Elemen Akses menyediakan kawalan, kawalan adalah kuasa, dan anda seorang pengaturcara kuasa, bukan? Oleh itu, anda memerlukan akses kepada semua yang ada di laman web. Nasib baik, JavaScript memberi anda akses kepada mana -mana elemen pada halaman menggunakan hanya beberapa kaedah dan sifat. <h5> <p> Penyelesaian <p><p> Walaupun mungkin untuk menavigasi dokumen HTML seperti peta jalan? Bermula dari rumah dan berjalan ke arah destinasi anda satu nod pada satu masa? Ini biasanya cara yang tidak cekap untuk mencari elemen kerana ia memerlukan banyak kod, dan apa -apa perubahan dalam struktur dokumen biasanya akan bermakna anda perlu menulis semula skrip anda. Jika anda ingin mencari sesuatu dengan cepat dan mudah, kaedah yang anda harus tatu di belakang tangan anda adalah dokumen.getelementbyid. <p> Dengan mengandaikan bahawa anda mempunyai markup yang betul di tempat, GetElementById akan membolehkan anda segera mengakses unsur -unsur dengan nilai atribut ID yang unik. Sebagai contoh, bayangkan laman web anda mengandungi kod ini: <pre class="brush:php;toolbar:false"><script type="text/javascript"> <br> function saySomething(message) <br> { <br> alert(message); <br> } <br> saySomething('Hello world!'); <br> </script> <p> anda boleh menggunakan atribut ID elemen untuk mendapatkan akses langsung ke elemen itu sendiri: <pre class="brush:php;toolbar:false"><ul > <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> <br> <script type="text/javascript" src="menu.js"></script> <p> Nilai ElementRef yang berubah -ubah kini akan dirujuk kepada elemen A - sebarang operasi yang anda lakukan pada ElementRef akan mempengaruhi hiperpautan yang tepat. <pre class="brush:php;toolbar:false"><script type="text/javascript" src="menu.js"></script> <br> <br> <noscript> <br> <ul> <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> </noscript> <p> Seperti yang dapat dilihat dari namanya, getElementsByTagName mengambil nama tag dan mengembalikan semua elemen jenis itu. Anggapkan bahawa kita mempunyai kod HTML ini: <pre class="brush:php;toolbar:false"><div <br> onmouseover="this.style.borderColor='red'" <br> onmouseout="this.style.borderColor='black'"> <p> kita boleh mengambil koleksi yang mengandungi setiap hiperpautan seperti SO: <pre class="brush:php;toolbar:false"><div <br> onmouseover="changeBorder('red')" <br> onmouseout="changeBorder('black')"> <p> Nilai sauh pembolehubah kini akan menjadi koleksi elemen. Koleksi adalah serupa dengan tatasusunan di mana setiap item dalam koleksi dirujuk menggunakan notasi kurungan persegi, dan item diindeks secara berangka bermula pada sifar. Koleksi yang dikembalikan oleh GetElementsByTagName menyusun unsur -unsur dengan urutan sumber mereka, jadi kita boleh merujuk setiap pautan itu: <pre class="brush:php;toolbar:false">Example 1.1. separate-content-behaviors.js (excerpt) <br> <br> function changeBorder(element, to) <br> { <br> element.style.borderColor = to; <br> } <p> Menggunakan koleksi ini, anda boleh melangkah melalui unsur -unsur dan melakukan operasi pada mereka, seperti menyerahkan kelas menggunakan harta kelas Element Nodes: <pre class="brush:php;toolbar:false"><div > <p> Tidak seperti GetElementById, yang boleh dipanggil pada nod dokumen sahaja, kaedah getElementsByTagName boleh didapati dari setiap nod elemen tunggal. Anda boleh mengehadkan skop kaedah getElementsByTagName dengan melaksanakannya pada elemen tertentu. getElementsByTagName hanya akan mengembalikan unsur -unsur yang keturunan elemen di mana kaedah itu dipanggil. <p> Jika kita mempunyai dua senarai, tetapi ingin menetapkan kelas baru ke pautan dalam satu senarai sahaja, kita boleh menyasarkan unsur -unsur itu secara eksklusif dengan memanggil GetElementSbyTagName pada senarai induk mereka: <pre class="brush:php;toolbar:false">Example 1.2. separate-content-behaviors.js <br> <br> function changeBorder(element, to) <br> { <br> element.style.borderColor = to; <br> } <br> <br> var contentDiv = document.getElementById('content'); <br> <br> contentDiv.onmouseover = function() <br> { <br> changeBorder('red'); <br> }; <br> <br> contentDiv.onmouseout = function() <br> { <br> changeBorder('black'); <br> }; <p> Untuk menyasarkan senarai bintang, kita perlu mendapatkan rujukan kepada elemen UL induk, kemudian hubungi getElementsByTagName di atasnya secara langsung: <pre class="brush:php;toolbar:false">window.onload = function() <br> { <br> var contentDiv = document.getElementById('content'); <br> <br> ... <br> }; <p> Nilai Starsanchors Variable akan menjadi koleksi elemen A di dalam senarai bintang yang tidak teratur, bukannya koleksi semua elemen di halaman. <p> <em> dom 0 koleksi <p> <em> Banyak elemen "istimewa" dalam dokumen HTML boleh diakses dengan cara yang lebih langsung. Elemen badan dokumen boleh diakses sebagai dokumen.body. Koleksi semua borang dalam dokumen boleh didapati dalam Document.Forms. Semua imej dalam dokumen boleh didapati dalam document.images. Malah, kebanyakan koleksi ini telah wujud sejak sebelum DOM diseragamkan oleh W3C, dan biasanya dirujuk sebagai sifat DOM 0. <p> <em> Oleh kerana pelaksanaan awal ciri -ciri ini tidak diseragamkan, koleksi ini kadang -kadang terbukti tidak boleh dipercayai dalam pelayar yang bergerak ke arah pematuhan piawaian. Versi awal beberapa pelayar Mozilla (mis., Firefox), sebagai contoh, tidak menyokong koleksi ini pada dokumen XHTML. Pelayar hari ini secara amnya melakukan tugas yang baik untuk menyokong koleksi ini; Walau bagaimanapun, jika anda menghadapi masalah, ia patut mencuba kaedah getElementsByTagName yang lebih verbose untuk mengakses unsur -unsur yang berkaitan. Daripada document.body, sebagai contoh, anda boleh menggunakan: <p> <em> var body = document.getElementsByTagName ("body") [0]; <p> <em> Perbincangan <p> Jika anda benar -benar perlu melangkah melalui elemen hierarki DOM oleh elemen, setiap nod mempunyai beberapa sifat yang membolehkan anda mengakses nod yang berkaitan: <em> <s> <p> node.childnodes-koleksi yang mengandungi rujukan pesanan sumber kepada setiap kanak-kanak nod yang ditentukan, termasuk kedua-dua elemen dan nod teks <p> node.firstchild - nod anak pertama nod yang ditentukan <p> node.lastchild - nod anak terakhir nod tertentu <ul> node.parentnode - rujukan kepada elemen induk nod yang ditentukan <li> node.nextsibling - nod seterusnya dalam dokumen yang mempunyai ibu bapa yang sama dengan nod yang ditentukan <li> node.previousSibling - elemen sebelumnya yang berada pada tahap yang sama dengan nod yang ditentukan <li> <li> Jika mana -mana sifat ini tidak wujud untuk nod tertentu (mis., Nod terakhir ibu bapa tidak akan mempunyai adik beradik seterusnya), mereka akan mempunyai nilai null. <li> Lihat halaman mudah ini: <li> Item Senarai dengan ID Star2 boleh dirujuk menggunakan mana -mana ungkapan ini: <p> <p> node whitespace <pre class="brush:php;toolbar:false"><script type="text/javascript"> <br> function saySomething(message) <br> { <br> alert(message); <br> } <br> saySomething('Hello world!'); <br> </script> <p> Beberapa pelayar akan membuat node whitespace antara nod elemen dalam mana -mana struktur DOM yang ditafsirkan dari rentetan teks (mis., Fail HTML). Node Whitespace adalah nod teks yang mengandungi hanya ruang putih (tab, ruang, baris baru) untuk membantu memformat kod dalam cara ia ditulis dalam fail sumber. <pre class="brush:php;toolbar:false"><ul > <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> <br> <script type="text/javascript" src="menu.js"></script> <s> <p> <em> Apabila anda melintasi nod DOM dengan nod menggunakan sifat -sifat di atas, anda harus sentiasa membenarkan node whitespace ini. Biasanya, ini bermakna memeriksa bahawa nod yang telah anda ambil adalah nod elemen, bukan hanya node whitespace yang memisahkan unsur -unsur. <p> <em> Terdapat dua cara mudah untuk memeriksa sama ada nod adalah nod elemen atau nod teks. Properti nodene nod teks akan sentiasa "#text", sedangkan nama node nod elemen akan mengenal pasti jenis elemen. Walau bagaimanapun, dalam membezakan nod teks dari nod elemen, lebih mudah untuk memeriksa harta nodetype. Node elemen mempunyai nodetype nodetype 1, sedangkan nod teks mempunyai nodetype 3. Anda boleh menggunakan pengetahuan ini sebagai ujian ketika mengambil unsur: <p> <em> Contoh 5.9. Access_element4.js (petikan) <br> <br> var star2 = document.getElementById ("star1"). NextSibling; <br> <br> sementara (star2.nodetype == "3") <br> {<br> star2 = star2.nextSibling; <br> } <p> Menggunakan sifat-sifat DOM ini, ada kemungkinan untuk memulakan perjalanan anda di elemen HTML Root, dan akhirnya dikebumikan dalam legenda beberapa medan yang sangat bersemangat? Ini hanya satu perkara yang mengikuti nod. <h5> Membuat unsur dan nod teks <p> JavaScript tidak hanya mempunyai keupayaan untuk mengubah suai unsur -unsur sedia ada di DOM; Ia juga boleh membuat unsur -unsur baru dan meletakkannya di mana -mana dalam struktur halaman. <p> <em> Penyelesaian <pre class="brush:php;toolbar:false"><script type="text/javascript"> <br> function saySomething(message) <br> { <br> alert(message); <br> } <br> saySomething('Hello world!'); <br> </script> <pre class="brush:php;toolbar:false"><ul > <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> <br> <script type="text/javascript" src="menu.js"></script> <p> pembolehubah Newanchor akan menjadi elemen baru, siap dimasukkan ke dalam halaman. <p> <em> Menentukan ruang nama dalam dokumen dengan jenis XML MIME <p> <em> Jika anda mengodkan JavaScript untuk digunakan dalam dokumen dengan jenis MIME aplikasi/XHTML XML (atau beberapa jenis XML MIME yang lain), anda harus menggunakan kaedah createelementns, bukannya createelement, untuk menentukan ruang nama yang anda buat elemen: <pre class="brush:php;toolbar:false"><script type="text/javascript" src="menu.js"></script> <br> <br> <noscript> <br> <ul> <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> </noscript> <p> Perbezaan ini terpakai kepada beberapa kaedah DOM, seperti penyingkiran/pembuanganElementns dan getattribute/getattributens; Walau bagaimanapun, kami tidak akan menggunakan versi yang dipertingkatkan di ruang nama kaedah ini dalam buku ini. <em> <p> Simon Willison memberikan penjelasan ringkas tentang bekerja dengan JavaScript dan jenis mime yang berbeza di laman webnya. <em> Teks yang masuk ke dalam elemen sebenarnya adalah nod teks kanak -kanak elemen, jadi ia mesti dibuat secara berasingan. Nod teks berbeza dari nod elemen, jadi mereka mempunyai kaedah penciptaan sendiri, CreateTextNode: <p> <pre class="brush:php;toolbar:false"><div <br> onmouseover="this.style.borderColor='red'" <br> onmouseout="this.style.borderColor='black'"> Jika anda mengubah suai nod teks yang sedia ada, anda boleh mengakses teks yang terkandung melalui harta Nodevalue. Ini membolehkan anda mendapatkan dan menetapkan teks di dalam nod teks: <p> <pre class="brush:php;toolbar:false"><div <br> onmouseover="changeBorder('red')" <br> onmouseout="changeBorder('black')"> Nilai OldText yang berubah -ubah kini "monoceros", dan teks di dalam TextNode kini "pyxis". <p> anda boleh memasukkan sama ada nod elemen atau nod teks sebagai anak terakhir elemen sedia ada menggunakan kaedah appendchildnya. Kaedah ini akan meletakkan nod baru selepas semua kanak -kanak yang sedia ada elemen. <p> Pertimbangkan serpihan html ini: <p> <pre class="brush:php;toolbar:false">Example 1.1. separate-content-behaviors.js (excerpt) <br> <br> function changeBorder(element, to) <br> { <br> element.style.borderColor = to; <br> } kita boleh menggunakan kaedah DOM untuk membuat dan memasukkan pautan lain pada akhir perenggan: <p><pre class="brush:php;toolbar:false"><script type="text/javascript"> <br> function saySomething(message) <br> { <br> alert(message); <br> } <br> saySomething('Hello world!'); <br> </script> <p> Nilai Newchild yang berubah -ubah akan menjadi rujukan kepada elemen yang baru dimasukkan. <p> Jika kita menterjemahkan keadaan DOM selepas kod ini telah dilaksanakan ke dalam kod HTML, ia akan kelihatan seperti ini: <pre class="brush:php;toolbar:false"><ul > <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> <br> <script type="text/javascript" src="menu.js"></script> <p> Kami tidak menentukan sebarang atribut untuk elemen baru, jadi ia tidak menghubungkan mana -mana sahaja pada masa ini. Proses untuk menentukan atribut dijelaskan tidak lama lagi dalam bahagian yang dipanggil "Membaca dan Menulis Atribut Elemen". <p> <em> Perbincangan <p> Terdapat tiga cara asas di mana elemen baru atau nod teks boleh dimasukkan ke dalam laman web. Pendekatan yang anda gunakan akan bergantung kepada titik di mana anda mahu nod baru dimasukkan: sebagai anak terakhir elemen, sebelum nod lain, atau sebagai pengganti untuk nod. Proses memperlihatkan elemen sebagai anak terakhir dijelaskan di atas. Anda boleh memasukkan nod sebelum nod yang sedia ada menggunakan kaedah sisipan elemen induknya, dan anda boleh menggantikan nod menggunakan kaedah penggantian elemen induknya. <p> Untuk menggunakan InsertBefore, anda perlu mempunyai rujukan kepada nod yang akan anda masukkan, dan ke nod yang sebelum ini anda ingin memasukkannya. Pertimbangkan kod HTML ini: <pre class="brush:php;toolbar:false"><script type="text/javascript" src="menu.js"></script> <br> <br> <noscript> <br> <ul> <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> </noscript> <p> kita boleh memasukkan pautan baru sebelum yang sedia ada dengan memanggil sisipan sebelum elemen induknya (perenggan): <pre class="brush:php;toolbar:false"><div <br> onmouseover="this.style.borderColor='red'" <br> onmouseout="this.style.borderColor='black'"> <p> Nilai Newchild yang berubah -ubah akan menjadi rujukan kepada elemen yang baru dimasukkan. <p> Jika kita hendak menterjemahkan ke dalam keadaan DOM selepas operasi ini, ia akan kelihatan seperti ini: <pre class="brush:php;toolbar:false"><div <br> onmouseover="changeBorder('red')" <br> onmouseout="changeBorder('black')"> <p> Sebaliknya, kita boleh menggantikan pautan sedia ada sepenuhnya menggunakan penggantiChild: <pre class="brush:php;toolbar:false">Example 1.1. separate-content-behaviors.js (excerpt) <br> <br> function changeBorder(element, to) <br> { <br> element.style.borderColor = to; <br> } <p> Dom kemudian akan kelihatan seperti ini: <pre class="brush:php;toolbar:false"><div > <p> <h5> Menukar jenis elemen <p> Adakah senarai yang diperintahkan anda berasa sedikit tidak teratur? Adakah tajuk anda mempunyai iri perenggan? Menggunakan pengetahuan JavaScript kecil, mungkin untuk mengubah jenis elemen sepenuhnya, sambil memelihara struktur anak -anaknya. <p> <em> Penyelesaian <p> Tidak ada cara mudah, mudah untuk menukar jenis elemen. Untuk mencapai prestasi ini, anda perlu melakukan sedikit tindakan juggling. <p> Mari kita anggap bahawa kita mahu mengubah perenggan ini menjadi div: <pre class="brush:php;toolbar:false">Example 1.2. separate-content-behaviors.js <br> <br> function changeBorder(element, to) <br> { <br> element.style.borderColor = to; <br> } <br> <br> var contentDiv = document.getElementById('content'); <br> <br> contentDiv.onmouseover = function() <br> { <br> changeBorder('red'); <br> }; <br> <br> contentDiv.onmouseout = function() <br> { <br> changeBorder('black'); <br> }; <p> kita perlu membuat div baru, gerakkan setiap anak perenggan ke dalamnya, kemudian swap elemen baru untuk yang lama: <pre class="brush:php;toolbar:false">window.onload = function() <br> { <br> var contentDiv = document.getElementById('content'); <br> <br> ... <br> }; <p> Satu -satunya baris yang tidak dikenali di sini harus menjadi titik di mana klon dicipta untuk setiap anak perenggan. Kaedah clonenode menghasilkan salinan nod yang sama dari mana ia dipanggil. Dengan meluluskan kaedah ini, hujah benar, kami menunjukkan bahawa kami mahu semua kanak -kanak elemen itu disalin bersama dengan elemen itu sendiri. Menggunakan clonenode, kita boleh mencerminkan kanak -kanak elemen asal di bawah div baru, kemudian keluarkan perenggan setelah kita selesai menyalin. <p> Walaupun nod pengklonan berguna dalam beberapa keadaan, ternyata ada cara yang lebih bersih untuk mendekati masalah khusus ini. Kita hanya boleh memindahkan nod kanak -kanak perenggan yang sedia ada ke dalam div baru. Nod Dom hanya boleh dimiliki oleh satu elemen induk pada satu masa, jadi menambah nod ke Div juga menghilangkannya dari perenggan: <pre class="brush:php;toolbar:false"><script type="text/javascript"> <br> function saySomething(message) <br> { <br> alert(message); <br> } <br> saySomething('Hello world!'); <br> </script> <p> <em> Berhati -hati mengubah struktur nod dom <p> <em> Unsur -unsur dalam koleksi dikemas kini secara automatik apabila perubahan berlaku di DOM - walaupun anda menyalin koleksi itu menjadi pembolehubah sebelum perubahan berlaku. Oleh itu, jika anda mengeluarkan dari DOM elemen yang terkandung dalam koleksi yang telah anda kerjakan, rujukan elemen juga akan dikeluarkan dari koleksi. Ini akan mengubah panjang koleksi serta indeks mana -mana elemen yang muncul selepas elemen yang dikeluarkan. <p> <em> Apabila melakukan operasi yang mempengaruhi struktur nod DOM - seperti memindahkan nod ke elemen induk baru - anda perlu berhati -hati mengenai proses lelah. Kod di atas menggunakan gelung sementara yang hanya mengakses anak pertama perenggan, kerana setiap kali seorang kanak -kanak dipindahkan, panjang koleksi kanak -kanak akan berkurang dengan satu, dan semua unsur dalam koleksi akan beralih bersama. A untuk gelung dengan pemboleh ubah kaunter tidak akan mengendalikan semua kanak -kanak dengan betul kerana ia akan mengandaikan bahawa kandungan koleksi akan tetap sama di seluruh gelung. <p> <em> Perbincangan <p> Tidak ada cara mudah untuk menyalin atribut elemen kepada penggantinya. (Jika anda melihat spesifikasi DOM, nampaknya ada. <pre class="brush:php;toolbar:false"><ul > <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> <br> <script type="text/javascript" src="menu.js"></script> mengeluarkan elemen atau nod teks <h5> Setelah elemen telah hidup lebih lama daripada kegunaannya, sudah tiba masanya untuk memberikannya. Anda boleh menggunakan JavaScript untuk menghapuskan unsur -unsur yang bersih dari dom. <p> <p> Penyelesaian <em> Kaedah penyingkiran menghilangkan mana -mana nod kanak -kanak dari ibu bapanya, dan mengembalikan rujukan kepada objek yang dikeluarkan. <p> mari kita mulakan dengan html ini: <p> <pre class="brush:php;toolbar:false"><script type="text/javascript" src="menu.js"></script> <br> <br> <noscript> <br> <ul> <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> </noscript> kita boleh menggunakan RemoveChild untuk mengeluarkan hiperpautan dari perenggan induknya seperti: <p> <pre class="brush:php;toolbar:false"><div <br> onmouseover="this.style.borderColor='red'" <br> onmouseout="this.style.borderColor='black'"> Pembolehubah yang dibuang akan menjadi rujukan kepada elemen A, tetapi elemen itu tidak akan terletak di mana -mana di DOM: ia hanya akan tersedia dalam ingatan, seolah -olah kita baru saja menciptanya menggunakan createelement. Ini membolehkan kita memindahkannya ke kedudukan lain di halaman, yang kita kehendaki, atau kita hanya boleh membiarkan pembolehubah hilang pada akhir skrip, dan rujukannya akan hilang sama sekali - dengan berkesan memadamkannya. Mengikuti kod di atas, DOM akan berakhir seperti ini: <p><pre class="brush:php;toolbar:false"><script type="text/javascript"> <br> function saySomething(message) <br> { <br> alert(message); <br> } <br> saySomething('Hello world!'); <br> </script> <p> Sudah tentu, anda tidak perlu memberikan nilai pulangan dari penyingkiran kepada pembolehubah. Anda hanya boleh melaksanakannya dan melupakan elemen sama sekali: <pre class="brush:php;toolbar:false"><ul > <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> <br> <script type="text/javascript" src="menu.js"></script> <p> <em> Perbincangan <p> Jika elemen yang anda hapus mempunyai anak -anak yang anda ingin memelihara (iaitu, anda hanya mahu "melepaskan" mereka dengan mengeluarkan ibu bapa mereka), anda mesti menyelamatkan anak -anak tersebut untuk memastikan mereka tinggal di dalam dokumen apabila ibu bapa mereka dikeluarkan. Anda boleh mencapai ini dengan menggunakan kaedah sisipan yang telah disebutkan, yang, apabila digunakan pada unsur-unsur yang sudah terkandung dalam DOM, mula-mula menghilangkannya, kemudian memasukkannya pada titik yang sesuai. <p> perenggan dalam HTML berikut mengandungi beberapa kanak -kanak: <pre class="brush:php;toolbar:false"><script type="text/javascript" src="menu.js"></script> <br> <br> <noscript> <br> <ul> <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> </noscript> <p> kita boleh gelung melalui koleksi kanak -kanak perenggan, dan pindah setiap anaknya secara individu sebelum mengeluarkan elemen itu sendiri: <pre class="brush:php;toolbar:false"><div <br> onmouseover="this.style.borderColor='red'" <br> onmouseout="this.style.borderColor='black'"> <p> Dom halaman sekarang akan kelihatan seperti ini: <pre class="brush:php;toolbar:false"><div <br> onmouseover="changeBorder('red')" <br> onmouseout="changeBorder('black')"> <h5> membaca dan menulis atribut elemen <p> Bahagian yang paling kerap digunakan dari elemen HTML adalah atributnya? ID, kelas, HREF, tajuk, atau mana -mana seratus maklumat lain yang boleh dimasukkan dalam tag HTML. JavaScript tidak hanya dapat membaca nilai -nilai ini, tetapi tulis juga. <p> <em> Penyelesaian <p> Dua kaedah wujud untuk membaca dan menulis atribut elemen. GetAttribute membolehkan anda membaca nilai atribut, sementara setAttribute membolehkan anda menulisnya. <p> Pertimbangkan html ini: <pre class="brush:php;toolbar:false">Example 1.1. separate-content-behaviors.js (excerpt) <br> <br> function changeBorder(element, to) <br> { <br> element.style.borderColor = to; <br> } <p> kita akan dapat membaca atribut elemen seperti: <pre class="brush:php;toolbar:false"><div > <p> Nilai penukar variabel akan menjadi "Antares", dan nilai anchortitle berubah -ubah akan menjadi "tempat yang jauh". 3 <p> Nilai newtitle pembolehubah kini akan menjadi "tidak begitu jauh". <pre class="brush:php;toolbar:false">Example 1.2. separate-content-behaviors.js <br> <br> function changeBorder(element, to) <br> { <br> element.style.borderColor = to; <br> } <br> <br> var contentDiv = document.getElementById('content'); <br> <br> contentDiv.onmouseover = function() <br> { <br> changeBorder('red'); <br> }; <br> <br> contentDiv.onmouseout = function() <br> { <br> changeBorder('black'); <br> }; <p> Perbincangan <p> <em> Dalam perjalanannya dari padang gurun Netscape percuma ke kawasan yang lebih ketat, berasaskan piawaian zaman moden, standard DOM telah mengambil sejumlah sintaks tambahan untuk berurusan dengan HTML. Salah satu yang paling meluas dari tambahan ini ialah pemetaan antara sifat DOM dan atribut HTML. <p> Apabila dokumen dihuraikan ke dalam bentuk DOM, nod atribut khas dicipta untuk atribut elemen. Nod ini tidak boleh diakses sebagai "kanak -kanak" elemen itu: mereka hanya boleh diakses melalui dua kaedah yang disebutkan di atas. Walau bagaimanapun, sebagai kemunculan semula kepada pelaksanaan DOM asal (dipanggil DOM 0, di mana sifar mencadangkan ciri -ciri ini datang sebelum piawaian), spesifikasi DOM semasa mengandungi fungsi tambahan yang khusus untuk HTML. Khususnya, atribut boleh diakses secara langsung sebagai sifat elemen. Oleh itu, atribut HREF dari hiperpautan boleh diakses melalui pautan.getAttribute ("href") serta melalui link.href. <p> Sintaks pintasan ini bukan sahaja bersih dan lebih mudah dibaca: dalam beberapa situasi ia juga perlu. Internet Explorer 6 dan versi di bawah tidak akan menyebarkan perubahan yang dibuat melalui setAttribute ke paparan visual elemen. Jadi apa -apa perubahan yang dibuat ke kelas, ID, atau gaya elemen menggunakan setAttribute tidak akan menjejaskan cara ia dipaparkan. Agar perubahan itu berlaku, mereka mesti dibuat melalui sifat-sifat khusus atribut node. <p> Untuk mengelirukan perkara-perkara yang lebih lanjut, nilai-nilai yang dikembalikan apabila harta khusus atribut dibaca berbeza-beza antara pelayar, variasi yang paling ketara yang berlaku di Konqueror. Jika atribut tidak wujud, Konqueror akan kembali null sebagai nilai harta khusus atribut, sementara semua pelayar lain akan mengembalikan rentetan kosong. Dalam kes yang lebih spesifik, sesetengah pelayar akan mengembalikan pautan.getAttribute ("href") sebagai URL mutlak (mis., "Http://www.example.com/antares.html"), sementara yang lain mengembalikan nilai atribut sebenar (mis., "Antares.html"). Dalam kes ini, lebih selamat menggunakan harta DOT, kerana ia secara konsisten mengembalikan URL mutlak di seluruh pelayar. <p> Jadi, apakah penyelesaian umum untuk masalah ini? <p> Peraturan asas ialah: Jika anda yakin bahawa atribut telah diberikan nilai, selamat menggunakan kaedah DOT Property untuk mengaksesnya. Jika anda tidak pasti sama ada atribut telah ditetapkan, anda harus terlebih dahulu menggunakan salah satu kaedah DOM untuk memastikan ia mempunyai nilai, kemudian gunakan harta titik untuk mendapatkan nilainya. <p> untuk <em> membaca atribut yang tidak disahkan, gunakan yang berikut: <pre class="brush:php;toolbar:false"><script type="text/javascript"> <br> function saySomething(message) <br> { <br> alert(message); <br> } <br> saySomething('Hello world!'); <br> </script> <p> ini memastikan bahawa atribut wujud, dan tidak batal, sebelum mengambil nilainya. <p> untuk <em> menulis ke atribut yang tidak disahkan, gunakan kod berikut: <pre class="brush:php;toolbar:false"><ul > <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> <br> <script type="text/javascript" src="menu.js"></script> <p> Kod ini memastikan bahawa atribut dibuat dengan betul terlebih dahulu, dan kemudian ditetapkan sedemikian rupa sehingga Internet Explorer tidak akan menghadapi masalah jika atribut mempengaruhi paparan visual elemen. <p> Peraturan ini mempunyai beberapa pengecualian untuk atribut yang kewujudannya anda dapat menjamin. Yang paling ketara dari sifat-sifat "mesti ada" ini adalah gaya dan kelas, yang akan sentiasa sah untuk mana-mana elemen yang diberikan; Oleh itu, anda boleh merujuknya dengan segera sebagai sifat dot (element.style dan element.classname masing -masing). <pre class="brush:php;toolbar:false"><script type="text/javascript"> <br> function saySomething(message) <br> { <br> alert(message); <br> } <br> saySomething('Hello world!'); <br> </script> <p> atribut lain yang perlu kita perhatikan adalah untuk atribut label. Ia mengikuti peraturan yang sama seperti kelas, tetapi bentuk hartanya adalah htmlfor. Menggunakan getAttribute/setAttribute, kami menulis elemen.getAttribute ("for"), tetapi di Internet Explorer itu element.getAttribute ("htmlfor"). <h5> Mendapatkan semua elemen dengan nilai atribut tertentu <p> Keupayaan untuk mencari semua elemen yang mempunyai atribut tertentu boleh menjadi sangat berguna apabila anda perlu mengubah suai semua elemen yang mempunyai kelas atau tajuk yang sama. <p> Penyelesaian <em> Untuk mencari elemen dengan nilai atribut tertentu, kita perlu menyemak setiap elemen pada halaman untuk atribut itu. Ini adalah operasi yang sangat intensif pengiraan, jadi ia tidak boleh dilakukan dengan ringan. Jika anda ingin mencari semua elemen input dengan Type = "Checkbox", anda lebih baik mengehadkan carian anda ke elemen input terlebih dahulu: <p> <pre class="brush:php;toolbar:false"><ul > <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> <br> <script type="text/javascript" src="menu.js"></script> Ini memerlukan pengiraan yang kurang daripada meleleh melalui setiap elemen pada halaman dan memeriksa jenisnya. Walau bagaimanapun, fungsi yang dibentangkan dalam penyelesaian ini - getElementsByAttribute - sangat sesuai apabila anda perlu mencari beberapa elemen pelbagai jenis yang mempunyai nilai atribut yang sama. <p> Cara paling mudah untuk memeriksa setiap elemen pada halaman adalah untuk gelung melalui koleksi yang dikembalikan oleh GetElementsByTagName ("*"). Satu -satunya masalah dengan kaedah ini ialah Internet Explorer 5.0 dan 5.5 tidak menyokong Asterisk Wildcard untuk pemilihan tag. Nasib baik, penyemak imbas ini menyokong dokumen. Semua harta, yang merupakan array yang mengandungi semua elemen pada halaman. getElementsByAttribute mengendalikan isu ini dengan cawangan kod mudah, kemudian meneruskan untuk memeriksa unsur -unsur untuk nilai atribut yang diberikan, menambah perlawanan ke array yang akan dikembalikan: <p> <pre class="brush:php;toolbar:false"><script type="text/javascript" src="menu.js"></script> <br> <br> <noscript> <br> <ul> <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> </noscript> Banyak kod dalam GetElementsByAttribute berurusan dengan perbezaan pelayar dalam pengendalian atribut yang disebutkan sebelumnya dalam bab ini, dalam bahagian yang dipanggil "Membaca dan Menulis Atribut Elemen". Teknik yang diperlukan digunakan jika atribut yang diperlukan adalah kelas atau untuk. Sebagai bonus tambahan apabila memeriksa perlawanan pada atribut kelas, jika elemen telah diberikan pelbagai kelas, fungsi secara automatik memeriksa setiap ini untuk melihat sama ada ia sepadan dengan nilai yang diperlukan. <p><h5> Menambah dan mengeluarkan pelbagai kelas ke/dari elemen <p> Menggabungkan pelbagai kelas adalah teknik CSS yang sangat berguna. Ia menyediakan cara warisan yang sangat primitif dengan membenarkan beberapa gaya yang berbeza digabungkan pada satu elemen, yang membolehkan anda mencampur dan memadankan kesan yang berbeza di seluruh tapak. Mereka amat berguna dalam situasi seperti menonjolkan unsur -unsur: kelas boleh ditambah yang menyoroti elemen tanpa mengganggu mana -mana sifat visual lain yang mungkin telah digunakan untuk elemen oleh kelas lain. Walau bagaimanapun, jika anda menetapkan kelas dalam JavaScript, anda perlu berhati -hati bahawa anda tidak secara tidak sengaja menimpa kelas yang telah ditetapkan sebelumnya. <p> <em> Penyelesaian <p> Kelas untuk mana -mana elemen boleh diakses melalui harta nama kelasnya. Harta ini membolehkan anda membaca dan menulis kelas yang kini digunakan untuk elemen tersebut. Kerana ia hanya satu rentetan, bahagian yang paling sukar bekerja dengan ClassName adalah bahawa anda perlu berurusan dengan sintaks yang digunakan untuk mewakili pelbagai kelas. <p> Nama kelas dalam harta kelas elemen dipisahkan oleh ruang. Nama kelas pertama tidak didahului oleh apa -apa, dan nama kelas terakhir tidak diikuti dengan apa -apa. Ini menjadikannya mudah untuk menambah kelas ke senarai kelas naif: hanya menyatukan ruang dan nama kelas baru hingga akhir nama kelas. Walau bagaimanapun, anda akan ingin mengelakkan menambah nama kelas yang sudah ada dalam senarai, kerana ini akan membuat mengeluarkan kelas lebih keras. Anda juga ingin mengelakkan menggunakan ruang pada permulaan nilai nama kelas, kerana ini akan menyebabkan kesilapan dalam Opera 7: <pre class="brush:php;toolbar:false"><script type="text/javascript"> <br> function saySomething(message) <br> { <br> alert(message); <br> } <br> saySomething('Hello world!'); <br> </script> <p> Pertama, AddClass mencipta corak ekspresi biasa yang mengandungi kelas untuk ditambah. Ia kemudian menggunakan corak ini untuk menguji nilai nama kelas semasa. Sekiranya nama kelas tidak wujud, kami menyemak nilai nama kelas kosong (di mana nama kelas diberikan kepada verbatim harta), atau kami menambah nilai yang sedia ada ruang dan nama kelas baru. <A 🎜> <p> Mengasingkan kelas <em> <s> Beberapa contoh ekspresi biasa untuk mencari kelas menggunakan Word Sempadan Khas Khas (b) untuk memisahkan kelas. Walau bagaimanapun, ini tidak akan berfungsi dengan semua nama kelas yang sah, seperti yang mengandungi tanda hubung. <p> <s> <em> Proses untuk mengeluarkan kelas menggunakan corak ekspresi biasa yang sama dengan yang kita gunakan untuk menambah kelas, tetapi kita tidak perlu melakukan banyak cek: <p> Selepas penyingkiran telah melaksanakan ekspresi tetap penggantian pada satu salinan nilai harta kelas, ia membersihkan nilai yang terhasil dengan menghapuskan mana -mana ruang trailing (yang dibuat apabila kita mengeluarkan kelas terakhir dalam nama kelas kelas pelbagai), kemudian memberikannya kembali ke nama kelas sasaran.<h5> Ringkasan <p> Bab ini memperkenalkan alat asas tetapi berkuasa yang anda perlukan untuk memanipulasi model objek dokumen. Adalah penting untuk anda memahami DOM - kerangka di bawah semua yang anda lihat dalam penyemak imbas - semasa anda memanipulasi mana -mana laman web. Mengetahui cara membuat, mengedit, dan memadam bahagian -bahagian DOM adalah penting untuk memahami baki buku ini. Sebaik sahaja anda menguasai teknik ini, anda akan berada dalam perjalanan untuk menjadi pengaturcara JavaScript yang mahir. <p> <h5> Bab 7. Bekerja dengan Windows dan Bingkai <p> Bab ini adalah mengenai tingkap mudah dan manipulasi bingkai, termasuk tugas -tugas seperti membuka popup, berkomunikasi antara bingkai, (teknik -teknik yang terlibat dalam membaca data dari iframe akan diliputi dalam Bab 18, membina aplikasi web dengan JavaScript.) Dan mengetahui kedudukan menatal halaman. Banyak orang merasakan bahawa manipulasi tingkap adalah serupa dengan sisi gelap. Mereka percaya bahawa tetingkap adalah sebahagian daripada GUI pengguna, bukan dokumen itu, dan sejak JavaScript adalah bahasa skrip dokumen, ia tidak mempunyai tingkap yang memanipulasi perniagaan. <p> Saya biasanya cenderung untuk bersetuju, namun saya tahu bahawa pendapat kadang -kadang mewah. Sekiranya pelanggan anda meminta sesuatu yang khusus, anda tidak semestinya mengubah fikiran mereka, atau mempunyai kebebasan untuk menolak kerja berdasarkan prinsip sedemikian. Dalam bab ini, kami akan merangkumi pelbagai tugas manipulasi tetingkap dan bingkai praktikal sambil tetap sensitif terhadap isu kebolehgunaan dan kebolehcapaian yang boleh timbul dari penggunaannya. <p> Walau bagaimanapun, nota, terdapat had, dan beberapa jenis skrip tingkap sangat tidak mesra. Kami tidak akan berurusan dengan taktik yang agresif seperti menutup atau mengubah suai tetingkap utama pengguna, menggerakkan tingkap di sekitar skrin, atau membuka skrin penuh atau tingkap "tanpa krom". Ini adalah jenis penyalahgunaan yang telah memberikan nama buruk JavaScript. <p> melalui kebanyakan bab ini kita akan melihat dengan teliti sifat dan kaedah objek tetingkap. Ini dilaksanakan oleh pelayar yang berbeza dalam pelbagai cara, yang kebanyakannya telah digunakan sejak hari -hari sebelum JavaScript diseragamkan. <p> Kami akan mempunyai beberapa cawangan kod untuk menangani, tetapi kami akan mengelakkan penyemak imbas yang ditakuti menghidu dengan menggunakan pengesanan objek yang teliti, proses mengesan objek atau ciri untuk menguji keserasian, dan bukannya mengesan pelayar tertentu. Menggunakan Windows Popup <p> Sekiranya anda menggunakan tingkap pop timbul? Jawapan yang paling dipertimbangkan ialah ini: bukan jika anda boleh membantu. Windows popup telah mendapat reputasi buruk dari penggunaan agresif pemasar, tetapi juga popup yang diminta boleh menjadi halangan untuk kebolehgunaan yang baik. <h5><p> Saya tidak akan mengatakan bahawa popup tidak sesuai, tetapi saya akan mengatakan bahawa mereka jarang begitu. Walau bagaimanapun, terdapat situasi di mana Popping membuka tetingkap baru boleh dikatakan penyelesaian yang paling sesuai: tinjauan dalam talian mungkin satu contoh, kerana formatnya boleh menjadikan kandungan lebih mudah didekati; Permainan DHTML adalah satu lagi, kerana viewport mungkin perlu saiz yang diketahui. <p> Saya akan memenuhi syarat pendapat saya dengan membincangkan masalah yang dibuat oleh popup, kemudian menyediakan kaedah pragmatik untuk menggunakannya yang mengurangkan masalah ini sebanyak mungkin. <p> Apa yang salah dengan popup? <em> Masalah utama dengan kebanyakan skrip tetingkap popup ialah mereka tidak menganggap keperluan pengguna? Mereka hanya menangani keperluan pereka. Hasilnya? Kita semua melihat mereka: <p> <p> <s> popup yang dihasilkan dari pautan, walaupun pautan tersebut tidak melakukan apa -apa ketika skrip tidak tersedia <ul> <li> Windows popup yang tidak mempunyai bar status, jadi anda tidak semestinya memberitahu sama ada dokumen itu telah dimuat atau terhenti, masih dimuatkan, dan lain -lain <li> Popup yang tidak memberi pengguna keupayaan untuk mengubah saiz tetingkap, dan popup yang gagal menghasilkan bar scrollar untuk kandungan yang mungkin skala di luar tingkap <li> Windows yang "tanpa krom," atau buka ke saiz penuh skrin pengguna <li> Isu -isu ini bukan sekadar soalan kebolehgunaan, tetapi juga aksesibiliti. Sebagai contoh, pengguna pembaca skrin tidak boleh diberitahu oleh peranti mereka bahawa tetingkap baru telah dibuka. Ini jelas boleh menyebabkan kekeliruan jika mereka cuba kembali dalam sejarah penyemak imbas (mereka tidak boleh). Perkara yang sama mungkin berlaku untuk pengguna yang kelihatan jika tetingkap dibuka pada saiz penuh: anda dan saya mungkin biasa dengan menggunakan bar tugas untuk memantau tingkap terbuka, tetapi tidak semua pengguna komputer-mereka mungkin tidak menyedari bahawa tetingkap baru telah muncul. <p> Jika anda akan menggunakan popup, mencari isu -isu seperti ini, dan secara amnya sensitif terhadap kesannya, akan menjadikan popup anda lebih mesra kepada pengguna, dan kurang ketegangan pada hati nurani anda. <A 🎜> Juga, ingatlah bahawa, dari perspektif pemaju, tingkap popup tidak dijamin berfungsi: kebanyakan pelayar sekarang termasuk pilihan untuk menyekat tingkap pop timbul, dan dalam beberapa kes, penindasan berlaku walaupun pop timbul dihasilkan sebagai tindak balas kepada acara pengguna. <p> Anda mungkin dapat membenarkan ini seperti yang anda lakukan untuk situasi di mana skrip tidak disokong: dengan memastikan bahawa pencetus asas untuk popup masih melakukan sesuatu yang berguna jika popup gagal. Atau anda mungkin mempunyai kod anda membuka tetingkap dan kemudian periksa harta tertutupnya sendiri, untuk melihat sama ada ia sebenarnya dipaparkan (kami akan melihat teknik ini dalam penyelesaian seterusnya). <p> Tetapi tidak ada pendekatan ini dijamin berfungsi dengan setiap penyemak imbas dan penghalang pop di luar sana, jadi untuk ini sebanyak sebab -sebab kebolehgunaan, lebih mudah dan lebih baik untuk mengelakkan menggunakan popup apabila anda boleh. <p> bagaimana saya meminimumkan masalah?<p> apa yang perlu kita lakukan ialah menetapkan beberapa peraturan emas untuk penggunaan etika popup: <p> <s> <ul> pastikan sebarang pencetus pautan merendahkan dengan betul apabila skrip tidak tersedia. <li> Sentiasa sertakan bar status. <li> Sentiasa sertakan mekanisme untuk melimpah kandungan: sama ada membenarkan saiz semula tetingkap, atau membenarkan bar scrollar muncul, atau kedua -duanya. <li> Jangan buka tingkap yang lebih besar daripada 640 × 480 piksel. Dengan mengehadkan saiz popup, anda memastikan bahawa mereka lebih kecil daripada tingkap utama pengguna pada majoriti monitor. Ini meningkatkan kemungkinan bahawa pengguna akan menyedari bahawa popup adalah tetingkap baru. <li> <p> Penyelesaian <em> Berikut adalah fungsi popup generik yang berdasarkan garis panduan di atas: <p> <pre class="brush:php;toolbar:false"><script type="text/javascript"> <br> function saySomething(message) <br> { <br> alert(message); <br> } <br> saySomething('Hello world!'); <br> </script> Selain mengehadkan saiz tetingkap, skrip ini enggan membuat pop timbul yang tidak mempunyai limpahan, jadi jika anda tidak menentukan "tatal", "saiz semula", atau "kedua -duanya" untuk hujah limpahan, penetapan lalai "kedua -duanya" akan digunakan. <p> operator ternary <p> <em> Skrip ini menggunakan ungkapan pintasan yang dipanggil pengendali ternary untuk menilai setiap pilihan limpahan. Pengendali Ternary menggunakan? dan: watak -watak untuk membahagikan dua kemungkinan hasil penilaian, dan bersamaan dengan satu pasangan jika keadaan. Pertimbangkan kod ini: <p> <em> <pre class="brush:php;toolbar:false"><ul > <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> <br> <script type="text/javascript" src="menu.js"></script> Kod itu bersamaan dengan markup di bawah: <p> <em> <pre class="brush:php;toolbar:false"><script type="text/javascript" src="menu.js"></script> <br> <br> <noscript> <br> <ul> <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> </noscript> tanda kurung tidak diperlukan, tetapi anda mungkin mendapati mereka membuat ungkapan lebih mudah dibaca. Untuk lebih lanjut mengenai jalan pintas ini dan lain -lain yang berguna, lihat Bab 20, mengekalkan kadar. <p> <em> Sebaik sahaja anda mempunyai fungsi pop timbul, anda boleh memanggilnya dalam pelbagai cara. Sebagai contoh, anda boleh menggunakan pautan biasa: <p> Jika skrip tidak tersedia, ini akan berfungsi seperti mana -mana pautan lain, tetapi jika skrip tersedia, skrip boleh mencetuskan pengendali acara klik yang melepasi HREF ke fungsi Makepopup, bersama dengan tetapan lain. Nilai pulangan pengendali bergantung kepada sama ada atau tidak tetingkap sebenarnya dibuka; Penyemak imbas yang menyekat pop timbul akan mengikuti pautan seperti biasa: <pre class="brush:php;toolbar:false"><div <br> onmouseover="this.style.borderColor='red'" <br> onmouseout="this.style.borderColor='black'"> <p> Secara umum, jika anda mempunyai skrip yang memerlukan tetingkap dijana, anda boleh memanggil fungsi Makepopup secara langsung dengan URL: <pre class="brush:php;toolbar:false"><div <br> onmouseover="changeBorder('red')" <br> onmouseout="changeBorder('black')"> <p> Jika anda perlu menutup tetingkap itu kemudian dalam skrip anda, anda boleh melakukannya dengan menggunakan kaedah Tutup pada rujukan tetingkap yang disimpan: <pre class="brush:php;toolbar:false">Example 1.1. separate-content-behaviors.js (excerpt) <br> <br> function changeBorder(element, to) <br> { <br> element.style.borderColor = to; <br> } <p> <pre class="brush:php;toolbar:false"><div > Perbincangan. <p> <em> Kaedah Window.Open boleh mengambil beberapa argumen - sebagai tambahan kepada URL dan nama tetingkap - yang menentukan sama ada tetingkap harus mempunyai hiasan tertentu, seperti bar menu, bar alat, atau alamat (lokasi) bar. Hujah-hujah ini diluluskan sebagai rentetan koma yang dibatasi kepada hujah ketiga Window.Open: <pre class="brush:php;toolbar:false"><script type="text/javascript"> <br> function saySomething(message) <br> { <br> alert(message); <br> } <br> saySomething('Hello world!'); <br> </script> <p> Dalam fungsi Makepopup kami, argumen menubar, toolbar, dan lokasi semuanya dipratetap kepada NO kerana unsur -unsur ini jarang berguna untuk tingkap pop timbul - mereka adalah alat navigasi, selepas semua. Popup kebanyakannya digunakan untuk antara muka satu halaman, atau yang di mana navigasi sejarah tidak digalakkan, seperti contoh tinjauan kami, atau prosedur logon untuk laman web bank. <p> Anda boleh mengubah hujah -hujah tersebut jika anda perlu, tetapi hujah status harus selalu ditetapkan kepada ya, kerana mematikannya melemahkan kebolehgunaan yang baik. (Saya tahu - saya telah menyebutnya sudah, tetapi saya katakan sekali lagi kerana ia penting!) <p> Hujah yang boleh disesuaikan mungkin tidak mempunyai kesan-dalam sesetengah pelayar, sama ada dengan reka bentuk atau sebagai hasil dari keutamaan pengguna, tidak mungkin untuk membuat tingkap yang tidak dapat diwujudkan, walaupun anda menetapkan nilai ini kepada NO. Malah, dalam Opera 8 untuk Mac OS X, tidak mungkin untuk membuat tingkap bersaiz tersuai sama sekali-tetingkap yang dibuat akan muncul sebagai tab baru dalam tetingkap semasa. Pengecualian khusus itu mungkin tidak penting dalam dirinya sendiri, tetapi ia berfungsi untuk menggambarkan titik umum bahawa mengawal sifat -sifat tetingkap yang dicipta tidak benar -benar dijamin. <p> Setelah tetingkap baru dibuka, anda boleh membawanya ke fokus menggunakan kaedah fokus objek. Ini biasanya tidak diperlukan - secara amnya, ia berlaku secara lalai - tetapi teknik mungkin berguna apabila anda skrip dengan pelbagai tingkap: <pre class="brush:php;toolbar:false"><ul > <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> <br> <script type="text/javascript" src="menu.js"></script> <p> Sebagai alternatif, anda mungkin mahu membuka pop timbul tetapi teruskan fokus dalam tetingkap utama (dengan itu membuat apa yang dipanggil "popunder"). Anda boleh mengambil fokus dari tetingkap menggunakan kaedah Blur: <pre class="brush:php;toolbar:false"><script type="text/javascript" src="menu.js"></script> <br> <br> <noscript> <br> <ul> <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> </noscript> <p> Walau bagaimanapun, dalam hal ini anda tidak dapat meramalkan di mana tumpuan akan pergi ke seterusnya, jadi lebih dipercayai untuk memfokuskan semula tetingkap utama: <pre class="brush:php;toolbar:false"><div <br> onmouseover="this.style.borderColor='red'" <br> onmouseout="this.style.borderColor='black'"> <h5> Membuka pautan luar tapak dalam tetingkap baru <p> Dalam versi ketat HTML 4 dan XHTML 1, atribut sasaran untuk pautan tidak lagi wujud. Satu tafsiran ini ialah laman web hanya tidak boleh membuka pautan di tingkap baru; Satu lagi ialah penargetan tidak mempunyai semantik sejagat dan oleh itu tidak boleh ditakrifkan dalam HTML. (Draf kerja CSS 3 termasuk satu set sifat sasaran untuk persembahan pautan, yang akhirnya dapat melihat mekanisme ini diserahkan kepada CSS sebaliknya. Terdapat tafsiran lain, dan hujah -hujah yang panjang (dan kadang -kadang membosankan), tetapi cukup untuk mengatakan bahawa anda mungkin mendapati diri anda memerlukan penyelesaian untuk masalah ini. Apa pun pandangan peribadi anda, ini adalah permintaan umum bagi pelanggan pembangunan web. <p> <p> Penyelesaian <em> <p> Skrip ini mengenal pasti pautan oleh nilai atribut REL luaran. Atribut REL adalah cara menggambarkan hubungan antara pautan dan sasarannya, jadi penggunaannya untuk mengenal pasti pautan yang menunjuk ke laman web lain secara semantik tidak meragukan: <pre class="brush:php;toolbar:false"><script type="text/javascript"> <br> function saySomething(message) <br> { <br> alert(message); <br> } <br> saySomething('Hello world!'); <br> </script> <p> Jika setiap pautan luaran dikenalpasti seperti itu, satu dokumen. <pre class="brush:php;toolbar:false"><ul > <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> <br> <script type="text/javascript" src="menu.js"></script> <p> Perbincangan <em> Menggunakan satu, pengendali acara seluruh dokumen adalah pendekatan yang paling berkesan-ia jauh lebih baik daripada meleleh melalui semua pautan dan mengikat pengendali kepada masing-masing secara individu. Kita boleh mengetahui elemen mana yang sebenarnya diklik dengan merujuk harta sasaran acara. Untuk lebih lanjut mengenai peristiwa dan sifat acara, lihat Bab 13, HTML Dinamik Asas, tetapi inilah ringkasan ringkas keadaan. <p> Dua model acara yang sama sekali berbeza digunakan oleh pelayar semasa. Skrip ini menetapkan mana yang harus digunakan dengan mencari E - hujah peristiwa yang digunakan oleh pelayar Mozilla, dan telah diterima pakai oleh kebanyakan pelayar lain - berbanding dengan objek Window.Event yang digunakan oleh Internet Explorer. Ia kemudian menjimatkan harta benda yang sesuai dengan model yang digunakan: sama ada sasaran untuk mozilla dan seperti pelayar, atau srcelement untuk IE. <p> Objek sasaran (jika tidak null) boleh menjadi salah satu daripada tiga perkara: nod elemen pautan, elemen atau nod teks di dalam pautan, atau beberapa nod lain. Kami mahu kedua -dua kes pertama <p> akan dikendalikan oleh skrip kami, tetapi klik yang timbul dari situasi terakhir mungkin diabaikan dengan selamat. Apa yang kita lakukan adalah mengikuti jejak nod induk dari sasaran acara sehingga kita sama ada mencari pautan, atau sampai ke elemen badan. <em> Apabila kita mempunyai pautan sasaran bersatu, kita hanya perlu untuk memeriksa atribut REL dengan nilai yang betul; Sekiranya ia wujud, kita boleh membuka tetingkap dengan HREF pautan, dan jika semua itu berjaya (seperti yang dinilai oleh harta tertutup objek Window baru), pengendali akan kembali palsu, menghalang pautan asal daripada diikuti. Lulus pautan ke Window.Open tanpa menentukan argumen akan membuat tetingkap dengan hiasan lalai - seperti yang akan dihubungkan dengan sasaran = "_ kosong". <p> <p> Ujian pertama <p> <em> Kami menggunakan GetAttribute sebagai ujian pertama untuk REL kerana sifat-sifat khusus atribut hanya boleh dipercayai jika anda tahu dengan pasti bahawa atribut yang dipersoalkan telah diberikan nilai. Kita tidak boleh terus menguji sasaran.rel terhadap rentetan, kerana ia mungkin batal atau tidak jelas. Ini dibincangkan dengan lebih terperinci dalam bahagian yang dipanggil "Membaca dan Menulis Atribut Elemen". <p> <em> berkomunikasi antara bingkai <p> Jika anda bekerja dalam persekitaran berbingkai, mungkin perlu skrip berkomunikasi antara bingkai, sama ada membaca atau menulis sifat, atau memanggil fungsi dalam dokumen yang berbeza. <h5><p> Jika anda mempunyai pilihan tentang sama ada atau tidak untuk menggunakan bingkai, saya sangat menasihatkan untuk berbuat demikian, kerana mereka mempunyai banyak masalah kebolehgunaan dan kebolehcapaian yang serius, agak terpisah dari fakta bahawa mereka secara konseptual pecah (mereka membuat dalam negara -negara penyemak imbas yang tidak dapat ditangani). Tetapi seperti penggunaan popup anda, dalam beberapa kes, anda mungkin tidak mempunyai pilihan mengenai penggunaan bingkai anda. Jadi jika anda benar -benar mesti menggunakannya, inilah yang perlu anda lakukan. <p> <em> Penyelesaian <p> mari kita mulakan dengan dokumen frameset mudah: <pre class="brush:php;toolbar:false"><script type="text/javascript"> <br> function saySomething(message) <br> { <br> alert(message); <br> } <br> saySomething('Hello world!'); <br> </script> <p> kita boleh menggunakan empat rujukan untuk skrip silang bingkai: <p> <s> <ul> tetingkap atau diri merujuk kepada halaman berbingkai semasa. <li> ibu bapa merujuk kepada halaman yang mengandungi bingkai yang mengandungi halaman semasa. <li> Top merujuk kepada halaman di bahagian paling atas hierarki bingkai, yang akan sama dengan ibu bapa jika hanya ada satu frameset dalam hierarki. <li> Koleksi Bingkai adalah pelbagai bersekutu dari semua bingkai dalam halaman semasa. <li> Katakan kita mempunyai skrip dalam ContentFrame yang ingin menyampaikan halaman dalam NavigationFrame. Kedua -dua halaman terkandung dalam satu frameset - satu -satunya dalam hierarki - jadi kami berjaya membuat mana -mana rujukan berikut dari dalam ContentFrame: <p> <p> <s> Parent.Frames [0] <ul> <li> top.frames [0] <li> Parent.Frames ['NavigationFrame'] <li> top.Frames ['NavigationFrame'] <li> Koleksi Bingkai adalah array bersekutu (seperti koleksi Borang yang kita lihat dalam Bab 6, Borang Pemprosesan dan Pengesahan), jadi setiap elemen boleh diakses oleh indeks atau nama sama ada. Secara amnya, lebih baik menggunakan nama itu (melainkan jika anda mempunyai alasan yang baik untuk tidak) supaya anda tidak perlu mengedit kod anda kemudian jika pesanan bingkai berubah. Dengan token yang sama, rujukan induk dalam frameset bersarang kompleks boleh berubah jika hierarki berubah, jadi saya secara amnya mengesyorkan bahawa pemaju selalu mula merujuk dari atas. Daripada pilihan di atas, rujukan yang saya suka, maka, adalah top.frames ['navigationframe']. <p> Sekarang kita mempunyai rujukan kepada bingkai, kita boleh memanggil fungsi di halaman berbingkai lain: <p> Sebagai alternatif, kita boleh mendapatkan rujukan kepada dokumen berbingkai yang lain, dan bekerjasama dengan Dom dari sana: <pre class="brush:php;toolbar:false"><ul > <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> <br> <script type="text/javascript" src="menu.js"></script> <p> <pre class="brush:php;toolbar:false"><script type="text/javascript" src="menu.js"></script> <br> <br> <noscript> <br> <ul> <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> </noscript> Perbincangan <p> <em> Komunikasi antara bingkai hanya dibenarkan untuk dokumen dalam domain yang sama - atas alasan keselamatan, tidak mungkin untuk bekerja dengan dokumen yang dimuatkan dari domain yang berbeza daripada skrip. Ia tidak akan dilakukan, sebagai contoh, untuk pemilik tapak berniat jahat untuk memuatkan tapak yang anda lawati secara teratur ke dalam bingkai, dan mencuri data peribadi yang anda masukkan di sana. <p> Malah, sesetengah pelayar membiarkan pengguna tidak membenarkan semua skrip daripada berkomunikasi antara bingkai, hanya untuk membasmi kemungkinan kelemahan skrip lintas tapak, dan tidak ada cara untuk bekerja di sekitar keutamaan ini jika skrip anda mendapati dirinya berjalan dalam penyemak imbas sehingga dikonfigurasi. Jika anda mempunyai pengguna yang mengadu masalah (dan mereka tidak boleh atau tidak akan mengubah tetapan mereka untuk membolehkan skrip silang bingkai), perkara paling selamat untuk dilakukan adalah untuk mengelakkan skrip silang bingkai sama sekali. <p> Kaedah alternatif untuk lulus data antara halaman dibincangkan dalam Bab 6, Pemprosesan dan Pengesahan Borang dan Bab 8, Bekerja dengan Kuki. <p> Mendapatkan kedudukan menatal <h5> Menatal halaman adalah salah satu sifat paling kurang disesuaikan dengan JavaScript: Tiga variasi kini digunakan oleh versi pelayar yang berbeza. Tetapi dengan beberapa ujian objek yang berhati -hati, kita boleh mendapatkan nilai yang konsisten. <p> <p> Penyelesaian <em> Terdapat tiga cara untuk mendapatkan maklumat ini. Kami akan menggunakan ujian objek pada setiap pendekatan, untuk menentukan tahap sokongan yang ada: <p> <pre class="brush:php;toolbar:false"><script type="text/javascript"> <br> function saySomething(message) <br> { <br> alert(message); <br> } <br> saySomething('Hello world!'); <br> </script> Fungsi kini boleh dipanggil seperti yang diperlukan. Berikut adalah demonstrasi mudah, menggunakan pengendali acara Window.onscroll, yang mendapat angka dan menulisnya ke bar tajuk: <p> <pre class="brush:php;toolbar:false"><ul > <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> <br> <script type="text/javascript" src="menu.js"></script> <p> Masalah dengan tatal <em> Skrol <p> bukanlah peristiwa yang paling boleh dipercayai: ia mungkin tidak terbakar sama sekali di Konqueror atau Safari 1.0, atau apabila pengguna menavigasi dengan roda tetikus di Firefox. Dan jika ia terbakar, ia boleh melakukannya secara berterusan dan cepat (seperti yang berlaku di Internet Explorer), yang boleh menjadi lambat dan tidak cekap jika skrip yang anda berikan untuk bertindak balas terhadap acara itu sangat kompleks. <em> Jika anda mengalami kesukaran seperti ini, anda mungkin merasa lebih baik menggunakan fungsi setInterval dan bukannya pengendali acara onscroll. SetInterval akan membolehkan anda memanggil fungsi pada selang yang boleh diramal, dan bukannya sebagai tindak balas kepada sesuatu peristiwa. Anda boleh mengetahui lebih lanjut mengenai skrip jenis ini dalam Bab 14, Masa dan Gerakan, tetapi inilah contoh yang setanding: <p> <em> window.setInterval (function () {<p> var scrollpos = getScrollingPosition (); <em> document.title = 'left =' scrollpos [0] 'top =' <br> scrollpos [1]; <br> }, 250); <br> <br> <br> Perbincangan <p> <em> Satu -satunya komplikasi sebenar di sini adalah bahawa IE 5 sebenarnya mengiktiraf dokumentel. Jika tidak, ia tidak begitu penting kepada kami yang penyemak imbas menggunakan harta yang mana; Apa yang penting ialah skrip kami mendapat salah satu ujian keserasian dan mengembalikan nilai yang berguna. Walau bagaimanapun, sifat yang digunakan oleh setiap penyemak imbas ditunjukkan di sini untuk rujukan: <p> <ul> <li> window.pageyoffset digunakan oleh Firefox dan pelayar Mozilla, Safari, Konqueror, dan Opera. document.documentelement.scrollTop digunakan oleh IE 6 dalam mod paman piawai. <li> document.body.scrollTop digunakan oleh IE 5, dan IE 6 dalam mod "Queirks". <li> Senarai ini tidak menceritakan kisah lengkap, tetapi ia bertujuan terutamanya untuk menggambarkan pesanan ujian. Pelayar Mozilla yang lebih baru (seperti Firefox) juga menyokong Documentelement.ScrollTop dan Body.ScrollTop, dengan peraturan mod rendering yang sama seperti IE 6. Safari dan Konqueror Sokongan Body.ScrollTop dalam kedua -dua mod. Opera menyokong ketiga -tiga sifat dalam mana -mana mod! <p> Dari perspektif kami, perkara penting adalah untuk menyelesaikan satu set ujian keserasian yang memastikan skrip kami akan berfungsi secara meluas. <p> <p> Mod rendering <em> Mod "standard" "piawaian" dan mod "Queirks" adalah dua mod rendering utama yang digunakan oleh penyemak imbas semasa. Mod ini mempengaruhi pelbagai aspek dokumen output, termasuk elemen yang mana kanvas (<body> atau <html>), dan bagaimana saiz kotak CSS dikira. Untuk lebih lanjut mengenai mod rendering, lihat Bab 11, Mengesan Perbezaan Pelayar. <s> <p> membuat skrol halaman ke kedudukan tertentu <em> Semua pelayar semasa melaksanakan kaedah yang sama (tidak standard) untuk menatal halaman. Sekurang -kurangnya sesuatu di sini adalah mudah! <h5> Penyelesaian <p> <p> Terdapat dua kaedah yang boleh digunakan untuk menatal halaman (atau sebaliknya, tetingkap atau bingkai), sama ada dengan jumlah tertentu (window.scrollby), atau ke titik tertentu (window.scrollto): <em> Contoh -contoh ini berkata: Tatal ke bawah sebanyak 200 piksel, kemudian melintasi 200 piksel, kemudian ke titik yang 300 piksel dari kiri dan 100 piksel dari atas, kemudian kembali ke sudut atas. <p> Mendapatkan saiz viewport (ruang yang ada di dalam tetingkap) <pre class="brush:php;toolbar:false"><script type="text/javascript"> <br> function saySomething(message) <br> { <br> alert(message); <br> } <br> saySomething('Hello world!'); <br> </script> <p> Butiran saiz viewport diperlukan untuk pelbagai jenis skrip, di mana ruang yang ada adalah faktor dalam logik skrip. Penyelesaian ini menyediakan fungsi utiliti untuk mendapatkan saiz viewport kami akan melihat fungsi ini lagi beberapa kali sepanjang buku ini! <h5> Penyelesaian <p> <p> Ciri -ciri yang kita perlukan dilaksanakan dalam tiga cara yang berbeza, seperti sifat yang kita lihat untuk menatal halaman di bahagian sebelumnya (bahagian yang dipanggil "membuat skrol halaman ke kedudukan tertentu"). Begitu juga dengan contoh itu, kita boleh menggunakan ujian objek untuk menentukan pelaksanaan mana yang relevan, termasuk ujian untuk nilai sifar yang kita perlukan dalam IE 5 (ujian ini diperlukan untuk alasan yang sama: kerana, walaupun harta itu wujud, itu bukan apa yang kita mahu): <em><pre class="brush:php;toolbar:false"><script type="text/javascript"> <br> function saySomething(message) <br> { <br> alert(message); <br> } <br> saySomething('Hello world!'); <br> </script> <p> Fungsi mengembalikan pelbagai lebar dan ketinggian, jadi kita boleh memanggilnya setiap kali kita memerlukan data itu: <pre class="brush:php;toolbar:false"><ul > <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> <br> <script type="text/javascript" src="menu.js"></script> <h5> Ringkasan <p> kami telah menutup asas -asas tingkap dan manipulasi bingkai dari sudut pandangan pragmatis dalam bab ini. Kami juga bercakap tentang prinsip dan teknik yang boleh kita gunakan untuk memastikan skrip seperti ini adalah mesra pengguna dan boleh diakses seperti yang kita boleh buat. Pasti, kerja semacam ini akan tetap kontroversial, dan dengan jelas kita memerlukan beberapa jenis mekanisme penargetan, kerana walaupun penggunaan bingkai perlahan -lahan mati, kedatangan antara muka yang lebih canggih menjadikan isu -isu ini hidup. Saya lebih suka atribut pertunjukan Standard XLink, yang mempunyai nilai seperti baru dan menggantikan. Ini mencadangkan proses sasaran (membuka tetingkap baru, dan menggantikan kandungan tetingkap semasa) tetapi mereka sebenarnya tidak menentukan tingkah laku tertentu. Mereka meninggalkannya kepada ejen pengguna untuk mengawal apa yang sebenarnya berlaku, jadi, sebagai contoh, baru boleh digunakan untuk membuka tab dan bukannya Windows. <p> <p> Bab 13. Asas Dinamik HTML <h5> Dinamik HTML bukan sekeping teknologi yang boleh anda tunjukkan dan berkata, "Ini adalah DHTML." Istilah ini adalah deskriptor yang merangkumi semua teknologi yang bergabung untuk membuat laman web dinamik: teknologi yang membolehkan anda membuat unsur -unsur baru tanpa menyegarkan halaman, menukar warna unsur -unsur tersebut, dan menjadikannya berkembang, kontrak, dan zum di sekitar skrin. <p> DHTML menggunakan HTML, DOM, dan CSS dalam kombinasi dengan bahasa skrip klien-JavaScript-untuk membawa kehidupan kepada apa yang secara tradisinya medium statik. Dalam bab -bab sebelumnya, kita belajar bahawa kita boleh menggunakan JavaScript untuk memanipulasi bahagian halaman untuk mencapai beberapa hasil yang sangat berguna. DHTML menyediakan penyelesaian kepada masalah yang lebih kompleks dengan memasang bahagian-bahagian ini menjadi keseluruhan yang koheren-yang memenuhi keperluan dunia nyata, bukannya teka-teki pengaturcaraan. <p> Bab ini meneroka beberapa alat yang kami perlukan untuk mewujudkan antara muka pengguna yang berkesan dengan DHTML. Ia kemudian membincangkan beberapa widget mudah sebagai persediaan untuk modul yang lebih kompleks yang akan kita pertimbangkan sepanjang seluruh buku ini. <p> mengendalikan peristiwa <h5> Mana -mana interaksi yang dimiliki pengguna dengan laman web - sama ada mereka menggerakkan tetikus atau mengetuk papan kekunci - akan menyebabkan penyemak imbas menghasilkan acara. Kadang -kadang, kami mahu kod kami bertindak balas terhadap interaksi ini, jadi kami mendengar peristiwa -peristiwa ini, yang memberitahu kami bila kami harus melaksanakan kod kami. <p> Penyelesaian <p> <em> Terdapat dua cara untuk mengendalikan peristiwa: cara yang singkat, dan cara W3C. Setiap mempunyai kebaikan dan keburukannya, tetapi kedua -duanya membolehkan anda melaksanakan fungsi yang ditentukan apabila peristiwa berlaku pada elemen tertentu. <p> cara pendek: Menggunakan pengendali acara <p> Cara yang lebih pendek untuk mengendalikan acara adalah menggunakan pengendali acara DOM 0 yang ditugaskan sebagai sifat pintasan setiap elemen. Seperti yang kita lihat dalam Bab 5, menavigasi model objek dokumen apabila kita membincangkan pintasan atribut DOM 0, pengendali acara ini bukan bukti masa depan. Walau bagaimanapun, mereka menawarkan beberapa kelebihan ke atas pendengar acara W3C standard: <p> <s> <ul> Setiap penyemak imbas yang sedang beroperasi menyokong pengendali acara DOM 0 tanpa memerlukan cawangan kod. <li> Setiap fungsi yang dilaksanakan oleh pengendali acara DOM 0 mempunyai akses kepada elemen yang tepat yang mana pengendali acara ditugaskan. (Seperti yang anda lihat kemudian, ini tidak selalu tersedia dalam pendengar acara W3C.) <li> Masalah utama dengan menggunakan pengendali acara DOM 0 adalah bahawa mereka tidak direka untuk bekerja dengan pelbagai skrip. Setiap kali anda menetapkan pengendali acara DOM 0, anda menulis ganti mana -mana pengendali yang telah ditugaskan sebelum ini. Ini boleh mengganggu operasi skrip berganda yang memerlukan pengendalian acara pada elemen yang sama. Dengan pendengar acara W3C, anda boleh memohon bilangan pendengar acara pada elemen yang sama, dan menikmati keupayaan untuk menghapuskan mana -mana mereka pada bila -bila masa. <p> Jika anda pasti bahawa kod anda tidak akan mengganggu pengendalian acara orang lain (mis., Anda meletakkan peristiwa pada unsur -unsur yang dibuat secara dinamik dalam skrip anda sendiri), ia akan selamat menggunakan pengendali acara DOM 0. Tetapi - semua perkara yang sama - lebih selamat menggunakan pendengar acara W3C di mana sahaja praktikal, seperti yang kita lakukan dalam buku ini. <p> Beberapa pengendali acara DOM 0 boleh didapati melalui penyemak imbas; Jadual 13.1, "DOM 0 Pengendali Acara" menyenaraikan pengendali yang paling biasa digunakan. <p> Jadual 13.1. DOM 0 Pengendali Acara <p> <br> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174136345865741.png" class="lazy" alt="Skrip lebih bijak: JavaScript berkualiti dari awal" > Menggunakan pengendali acara DOM 0, sebaik sahaja anda merujuk kepada elemen yang peristiwa yang ingin anda kendalikan, itu adalah satu perkara yang mudah untuk memberikan fungsi pengendalian kepada harta yang sesuai: <p> <pre class="brush:php;toolbar:false"><script type="text/javascript"> <br> function saySomething(message) <br> { <br> alert(message); <br> } <br> saySomething('Hello world!'); <br> </script> anda akan perhatikan bahawa, dalam tugasan fungsi (butang.onclick = engage;), tanda kurung tidak mengikuti nama fungsi. Kemasukan mereka akan melaksanakan fungsi dengan segera, dan memberikan nilai pulangan sebagai pengendali acara. Dengan menghilangkan kurungan, anda boleh menetapkan fungsi itu sendiri kepada pengendali. Ini juga bermakna bahawa anda tidak dapat membekalkan hujah secara langsung kepada fungsi pengendalian: fungsi mesti mendapatkan maklumatnya melalui cara lain. <p> <p> Fungsi Anonymous <em> <p> Daripada membekalkan rujukan kepada fungsi yang dinamakan, anda boleh membekalkan fungsi tanpa nama untuk pengendali acara: <em> <p> var myLink = document.getElementById ("myLink"); <em> <br> myLink.onclick = function () <br> {<br> Alert ("Engage!"); <br> <br> kembali palsu; <br> } <br> <p> <em> Bergantung pada sama ada anda perlu menggunakan semula fungsi pengendalian (dan pilihan pengekodan anda sendiri), ini boleh menjadi cara yang lebih mudah untuk menulis kod pengendalian acara. <p> Nilai pulangan fungsi pengendalian menentukan sama ada tindakan lalai untuk peristiwa itu berlaku. Oleh itu, dalam kod terdahulu, jika MyButton adalah hiperpautan, tindakan lalai apabila diklik adalah untuk menavigasi ke lokasi HREFnya. Dengan kembali palsu, fungsi Engage tidak membenarkan tindakan lalai berlaku, dan navigasi hiperpautan tidak akan berlaku. Sekiranya nilai pulangan adalah benar, tindakan lalai akan berlaku selepas kod fungsi pengendalian acara telah dilaksanakan. <p> Apabila peristiwa berlaku, maklumat terperinci tentang bagaimana, mengapa, dan di mana peristiwa itu ditulis ke objek acara. Di Internet Explorer, ini mengambil bentuk objek Window.Event Global, tetapi dalam pelayar lain objek itu diluluskan sebagai hujah kepada fungsi pengendalian peristiwa. Perbezaan ini agak mudah untuk ditangani dalam fungsi pengendalian: <pre class="brush:php;toolbar:false"><script type="text/javascript"> <br> function saySomething(message) <br> { <br> alert(message); <br> } <br> saySomething('Hello world!'); <br> </script> <p> Objek acara membolehkan anda mengetahui pelbagai butiran, seperti elemen yang diklik, sama ada sebarang kunci ditekan, koordinat peristiwa (mis., Di mana kursor terletak apabila butang tetikus diklik), dan jenis peristiwa yang mencetuskan fungsi tersebut. Beberapa nama harta acara adalah konsisten merentasi pelayar, tetapi beberapa berbeza. Ciri -ciri Acara Mozilla boleh dilihat di Rujukan Gecko Dom, manakala sifat acara Internet Explorer dapat dilihat di MSDN. Bagi sifat yang namanya berbeza antara penyemak imbas, potensi masalah yang berkaitan biasanya dapat diperbaiki dengan pengesanan objek kecil; Kami akan membincangkannya secara terperinci kemudian dalam bab ini. <p> cara w3c (pendengar acara) <p> Walaupun pengendali acara DOM 0 adalah cepat dan mudah, mereka mempunyai batasan (selain dari fakta bahawa akhirnya mereka akan menjadi hancur). Kelebihan utama pendengar acara W3C ialah mereka menyokong penambahan dan penyingkiran fungsi pengendalian berganda untuk acara yang sama pada satu elemen. Pendengar acara juga mempunyai keupayaan untuk bertindak balas terhadap peristiwa dalam beberapa fasa (walaupun kebanyakan pelayar belum menyokong keupayaan ini). <p> Dalam spesifikasi W3C, satu peristiwa boleh ditambah ke elemen menggunakan kaedah AddEventListener elemen, tetapi Internet Explorer untuk Windows memilih untuk menggunakan kaedah yang dipanggil Lampiran, yang mempunyai sintaks yang sedikit berbeza. (Internet Explorer untuk Mac tidak menyokong salah satu daripada model acara ini, jadi kami harus bergantung kepada pengendali DOM 0 untuk bekerja dengan acara dalam penyemak imbas ini.) <p> Untuk menambah pendengar acara di setiap pelayar kecuali Internet Explorer, anda akan menulis kod yang serupa dengan ini: <pre class="brush:php;toolbar:false"><ul > <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> <br> <script type="text/javascript" src="menu.js"></script> <p> Untuk menyokong Internet Explorer, anda memerlukan kod ini: <pre class="brush:php;toolbar:false"><script type="text/javascript"> <br> function saySomething(message) <br> { <br> alert(message); <br> } <br> saySomething('Hello world!'); <br> </script> <p> serta nama fungsi yang berbeza, penting untuk diperhatikan bahawa Internet Explorer menggunakan nama pengendali Dom 0 untuk acara itu - "OnClick" - bukannya nama acara yang benar: "Klik". Hujah tambahan yang dibekalkan kepada AddEventListener menentukan sama ada pendengar digunakan semasa fasa penyebaran peristiwa (benar) atau gelembung (palsu). Penyebaran acara dijelaskan dengan lebih terperinci dalam perbincangan di bawah, tetapi Bubble adalah pilihan yang paling berguna, dan memastikan tingkah laku yang sama dalam pelayar patuh piawaian seperti di Internet Explorer. <p> Perbezaan antara kedua -dua pendekatan ini agak mudah untuk berfungsi menggunakan fungsi abstrak. Kami juga boleh memberikan sandaran untuk penyemak imbas yang tidak menyokong pendengar acara W3C pada masa yang sama: <pre class="brush:php;toolbar:false"><ul > <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> <br> <script type="text/javascript" src="menu.js"></script> <p> Dua yang pertama jika pernyataan berurusan dengan kaedah Explorer berasaskan piawaian dan Internet masing-masing, tetapi semua yang ditangkap dengan pelayar yang lebih tua yang tidak menyokong sama ada kaedah ini, terutamanya Internet Explorer 5 untuk Mac. Dalam kes terakhir ini, pengendali acara DOM 0 digunakan, tetapi untuk memastikan bahawa pelbagai fungsi boleh digunakan untuk mengendalikan satu peristiwa untuk elemen tertentu, penutupan digunakan untuk melaksanakan sebarang fungsi sedia ada yang dilampirkan pada acara tersebut. Penutupan adalah ciri canggih JavaScript yang berkaitan dengan scoping (yang boleh anda baca dalam Bab 19, orientasi objek dalam JavaScript). Penutupan membolehkan fungsi dalaman untuk merujuk pembolehubah fungsi yang mengandungi walaupun selepas fungsi mengandungi telah selesai. Simon Willison telah menjelaskan penggunaannya berhubung dengan pengendali acara secara terperinci. Cukuplah untuk mengatakan bahawa penutupan membolehkan kami menyusun beberapa pengendali acara dalam pelayar yang tidak menyokong pendengar acara W3C. <p> kod silang penyemak imbas untuk memberikan pendengar acara adalah seperti berikut: <p> <pre class="brush:php;toolbar:false"><script type="text/javascript" src="menu.js"></script> <br> <br> <noscript> <br> <ul> <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> </noscript> <p> tidak (cukup) artikel tulen <em> <p> Walaupun pengendali acara DOM 0 meniru keupayaan untuk menambah pendengar pelbagai acara untuk satu jenis acara pada elemen, ia tidak memberikan replikasi tepat model acara W3C, kerana pengendali tertentu tidak dapat dikeluarkan dari elemen. <em> manakala pengendali DOM 0 membenarkan pembatalan tindakan lalai elemen dengan mengembalikan pendengar acara palsu, W3C mencapai matlamat ini sedikit berbeza. Untuk membatalkan tindakan lalai dalam model ini, kita perlu mengubahsuai objek acara. Internet Explorer menghendaki anda menetapkan harta baliknya kepada palsu; Pelaksanaan berasaskan piawaian menawarkan kaedah pencegahanDefault untuk melakukan perkara yang sama. Kita boleh membuat fungsi kecil yang memaparkan perbezaan untuk kita: <p> kita boleh memanggil fungsi ini setiap kali kita mahu membatalkan tindakan lalai: <pre class="brush:php;toolbar:false"><div <br> onmouseover="this.style.borderColor='red'" <br> onmouseout="this.style.borderColor='black'"> <p> Anda masih perlu kembali palsu selepas melaksanakan StopDefaultAction untuk memastikan pelayar yang tidak menyokong model acara W3C juga akan menghalang tindakan lalai. <p> <em> safari dan pendengar acara w3c <p> <em> Oleh kerana bug di Safari, mustahil untuk membatalkan tindakan lalai mengklik hiperpautan dalam penyemak imbas itu apabila menggunakan pendengar acara W3C. Untuk mencapai pembatalan, anda perlu menggunakan pengendali acara DOM 0 dengan nilai pulangan palsu. <p> <em> Memeriksa Lampiran <p> <em> Internet Explorer untuk Windows sebenarnya melewati objek acara ke fungsi pengendalian peristiwa apabila lampiran digunakan untuk melampirkan pendengar acara. Walau bagaimanapun, kita masih perlu menyemak kewujudan objek ini untuk mana -mana pelayar yang menggunakan model acara lama. <p> Salah satu kelebihan menggunakan pendengar acara W3C ialah anda boleh mengeluarkan pendengar individu dari elemen tanpa mengganggu pendengar lain pada acara yang sama. Ini tidak mungkin menggunakan pengendali DOM 0. <p> Internet Explorer menggunakan kaedah detasEvent, sementara pelayar patuh piawaian sebaliknya menentukan kaedah yang dipanggil RoveEventListener. Setiap kaedah ini beroperasi sama dengan rakan-rakan pendengarnya: Jenis acara mesti dibekalkan bersama dengan fungsi yang ditugaskan untuk mengendalikan jenis acara itu. Kaedah standard juga menuntut untuk mengetahui sama ada pengendali acara didaftarkan untuk bertindak balas semasa fasa penangkapan atau gelembung. <p> Berikut adalah fungsi yang menyokong pendekatan ini merentasi pelayar: <pre class="brush:php;toolbar:false"><script type="text/javascript"> <br> function saySomething(message) <br> { <br> alert(message); <br> } <br> saySomething('Hello world!'); <br> </script> <p> <em> model acara W3C dan fungsi tanpa nama Model Acara W3C tidak membenarkan penyingkiran fungsi tanpa nama, jadi jika anda perlu mengeluarkan pendengar acara, gantung pada rujukan kepada fungsi yang dipersoalkan. <p> Dalam penyemak imbas yang tidak menyokong pendengar acara W3C, fungsi ini menghilangkan semua pengendali acara pada acara yang diberikan: tidak mungkin untuk menghapuskan hanya salah satu daripada mereka dan meninggalkan yang lain. <em> Perbincangan <p> <p> merujuk elemen sasaran <em> Sering kali, anda akan mahu menggunakan objek yang menjadi sasaran peristiwa di dalam pengendali acara itu sendiri. Dengan pengendali acara DOM 0, penggunaan pemboleh ubah khas ini di dalam fungsi pengendalian akan merujuk kepada objek sasaran acara. Pertimbangkan kod ini: <p> di sini, ini merujuk kepada pautan dengan ID MyLink. Kita boleh menggunakannya untuk mendapatkan atribut HREF pautan. <p> <St> Walau bagaimanapun, jika anda menggunakan pendengar acara W3C, sasaran acara disimpan sebagai sebahagian daripada objek acara, di bawah sifat yang berbeza dalam pelayar yang berbeza. Internet Explorer menyimpan sasaran sebagai srcelement, sementara model standard menyimpannya sebagai sasaran. Tetapi elemen yang mana titik -sifat ini tidak semestinya elemen yang mana pendengar acara ditugaskan. Sebenarnya, elemen terdalam dalam hierarki yang terjejas oleh peristiwa tersebut. Lihatlah html berikut. <pre class="brush:php;toolbar:false"><script type="text/javascript"> <br> function saySomething(message) <br> { <br> alert(message); <br> } <br> saySomething('Hello world!'); <br> </script> <p> Jika pendengar acara klik diletakkan pada perenggan dan pengguna yang diklik pada pautan, pengendali acara klik perenggan akan dilaksanakan, tetapi sasaran acara yang boleh diakses melalui sifat-sifat yang disebutkan di atas akan menjadi hiperpautan. Sesetengah pelayar (terutamanya, safari) bahkan pergi sejauh mengira nod teks di dalam pautan sebagai nod sasaran. <p> kita boleh menulis fungsi yang mengembalikan sasaran acara tanpa mengira harta yang telah dilaksanakan, tetapi ini tidak menyelesaikan masalah mencari elemen yang pada asalnya kita menggunakan pendengar acara. (Piawaian W3C menentukan harta lain yang dipanggil CurrentTarget, yang membolehkan anda mendapatkan elemen yang mana pendengar ditugaskan, tetapi tidak ada persamaan Internet Explorer. Unsur yang mungkin menjadi elemen yang kami melampirkan pendengar acara. Untuk melakukan ini, kita boleh melakukan cek terhadap nama tag, kelas, dan atribut lain. <p> Fungsi sasaran acara abstrak akan kelihatan seperti ini: <pre class="brush:php;toolbar:false"><ul > <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> <br> <script type="text/javascript" src="menu.js"></script> <p> IF-ELSE mengambil sasaran acara merentasi pelayar; Loop sementara kemudian mendapati ibu bapa bukan teks pertama jika sasaran yang dilaporkan oleh penyemak imbas menjadi nod teks. <p> Jika kita mahu mengambil elemen yang diklik, kita kemudian membuat panggilan untuk getEventTarget: <pre class="brush:php;toolbar:false"><script type="text/javascript" src="menu.js"></script> <br> <br> <noscript> <br> <ul> <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> </noscript> <p> Kerana kita tahu, dalam kes ini, fungsi pengendalian peristiwa akan dilampirkan hanya untuk pautan (<a> tag), kita boleh melangkah ke atas dari sasaran acara, memeriksa nama nod "a". Yang pertama yang kita dapati akan menjadi pautan yang ditugaskan oleh pengendali; Ini memastikan bahawa kita tidak bekerja dengan beberapa elemen di dalam pautan (seperti kuat atau rentang). <p> Jelas sekali, kaedah penemuan sasaran ini tidak sesuai, dan tidak boleh 100% tepat melainkan jika anda mempunyai pengetahuan tentang HTML yang tepat yang akan anda bekerjasama. Baru -baru ini, banyak usaha telah menyelesaikan masalah ini, dan beberapa penyelesaian yang dicadangkan menawarkan pembolehubah yang sama seperti yang terdapat di bawah pengendali acara DOM 0, dan dalam pelayar yang menyokong standard W3C untuk pendengar acara (bukan Internet Explorer). <p> Satu penyelesaian sedemikian adalah untuk menjadikan fungsi pendengaran acara kaedah objek sasaran di Internet Explorer. Kemudian, apabila kaedah dipanggil, ini secara semulajadi akan menunjuk kepada objek yang mana kaedah itu dipanggil. Ini memerlukan kedua -dua lampiran dan detaseventlistener untuk diubah suai: <pre class="brush:php;toolbar:false"><div <br> onmouseover="this.style.borderColor='red'" <br> onmouseout="this.style.borderColor='black'"> <p> garis pemikiran ini diwakili dengan baik dalam penyertaan kepada persaingan tambahan Peter Paul Koch. <p> Penyelesaian lain oleh Dean Edwards benar -benar menghindari model acara W3C yang memihak kepada pelaksanaan pengendali acara DOM 0 dengan menambah dan mengeluarkan kebolehan bebas. <p> Walaupun kedua -dua penyelesaian ini mungkin terbukti ditulis dengan baik dan teguh, mereka sebahagian besarnya tidak diuji seperti penulisan ini, jadi kami akan berpegang dengan pendekatan yang kelemahan yang kami tahu dan dapat mengendalikan: yang dibentangkan dalam penyelesaian utama. Selain itu, dalam praktiknya, proses meleleh untuk mencari sasaran peristiwa tidak begitu tidak boleh dipercayai kerana ia mungkin kelihatan. <p> Apakah peristiwa yang menggelegak, dan bagaimana saya mengawalnya? <p> Anda mungkin menyedari bahawa kami perlu membekalkan hujah ketiga kepada kaedah AddEventListener standard W3C, dan argumen penangkapan dimasukkan ke dalam fungsi lampiran kami untuk menampung ini. Hujah ini menentukan fasa kitaran peristiwa di mana pendengar beroperasi. <p> Katakan anda mempunyai dua elemen, satu bersarang di dalam yang lain: <pre class="brush:php;toolbar:false"><script type="text/javascript"> <br> function saySomething(message) <br> { <br> alert(message); <br> } <br> saySomething('Hello world!'); <br> </script> <p> Apabila pengguna mengklik pada pautan, klik acara akan didaftarkan pada kedua -dua perenggan dan hiperpautan. Persoalannya, yang mana yang menerima acara itu terlebih dahulu? <p> Kitaran acara mengandungi dua fasa, dan setiap menjawab soalan ini dengan cara yang berbeza. Dalam fasa penangkapan, peristiwa berfungsi dari luar, jadi perenggan akan menerima klik terlebih dahulu, maka hiperpautan. Dalam fasa gelembung, peristiwa berfungsi dari dalam ke luar, jadi sauh akan menerima klik sebelum perenggan. <p> Internet Explorer dan Opera hanya menyokong menggelegak, itulah sebabnya Lampiran tidak memerlukan hujah ketiga. Bagi penyemak imbas yang menyokong AddEventListener, jika hujah ketiga adalah benar, acara itu akan ditangkap semasa fasa penangkapan; Sekiranya palsu, acara itu akan ditangkap semasa fasa gelembung. <p> Dalam pelayar yang menyokong kedua -dua fasa, fasa penangkapan berlaku terlebih dahulu dan sentiasa diikuti oleh fasa gelembung. Ada kemungkinan peristiwa untuk dikendalikan pada elemen yang sama dalam kedua -dua fasa penangkapan dan menggelegak, dengan syarat anda menyediakan pendengar untuk setiap fasa. <p> Fasa -fasa ini juga menyerlahkan fakta bahawa unsur -unsur bersarang dipengaruhi oleh peristiwa yang sama. Sekiranya anda tidak lagi menginginkan acara untuk terus menyebarkan atau ke bawah hierarki (bergantung kepada fasa) selepas pendengar peristiwa telah dicetuskan, anda boleh menghentikannya. Di Internet Explorer, ini melibatkan penetapan harta Cancelbubble objek acara ke Benar; Dalam model W3C, anda mesti memanggil kaedah Stoppropagationnya: <pre class="brush:php;toolbar:false"><ul > <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> <br> <script type="text/javascript" src="menu.js"></script> <p> Jika kami tidak mahu acara menyebarkan lebih jauh daripada pengendali acara kami, kami akan menggunakan kod ini: <pre class="brush:php;toolbar:false"><script type="text/javascript" src="menu.js"></script> <br> <br> <noscript> <br> <ul> <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> </noscript> <p> Walaupun kami telah menugaskan fungsi Engage untuk mendengar acara klik pada kedua -dua pautan dan perenggan yang mengandunginya, fungsi itu hanya akan dipanggil sekali per klik, kerana penyebaran acara dihentikan oleh pendengar kali pertama ia dipanggil. <h5> mencari saiz elemen <p> Terdapat begitu banyak pembolehubah yang mempengaruhi saiz elemen - panjang kandungan, peraturan CSS, keluarga font, saiz fon, ketinggian garis, zum teks ... senarai terus. Tambah pada ini fakta bahawa pelayar mentafsirkan dimensi CSS dan saiz fon secara tidak konsisten, dan anda tidak boleh meramalkan dimensi di mana elemen akan diberikan. Satu -satunya cara yang konsisten untuk menentukan saiz elemen adalah untuk mengukurnya sebaik sahaja ia diberikan oleh penyemak imbas. <p> <em> Penyelesaian <p> Anda boleh memberitahu langsung bahawa ia akan berguna untuk mengetahui dengan tepat betapa besarnya elemen. Nah, W3C tidak dapat membantu: tidak ada cara yang standard untuk menentukan saiz elemen. Syukurlah, pembuat pelayar mempunyai lebih kurang diselesaikan pada beberapa sifat DOM yang membolehkan kita memikirkannya. <p> Walaupun perbezaan model kotak bermakna bahawa Internet Explorer termasuk padding dan sempadan secara tidak konsisten sebagai sebahagian daripada dimensi CSS elemen, sifat OffsetWidth dan Offsetheight akan secara konsisten mengembalikan lebar elemen - termasuk padding dan sempadan - merentas semua pelayar. Bayangkan bahawa dimensi elemen ditentukan dalam CSS seperti ini: <p> <pre class="brush:php;toolbar:false"><script type="text/javascript"> <br> function saySomething(message) <br> { <br> alert(message); <br> } <br> saySomething('Hello world!'); <br> </script> kita dapat menentukan lebar piksel tepat elemen dalam JavaScript dengan memeriksa sifat -sifat offsetwidth dan offsetheight yang sepadan: <p> Di Internet Explorer 6, Opera, Mozilla, dan Safari, pixelwidth yang berubah -ubah kini akan ditetapkan kepada 450, dan pixelheight yang berubah -ubah akan ditetapkan kepada 250. Di Internet Explorer 5/5.5, Pixelwidth akan menjadi 350. Nilai -nilai yang berbeza di seluruh pelayar, tetapi hanya kerana saiz sebenar yang diberikan juga berbeza. Dimensi offset secara konsisten mengira dimensi piksel yang tepat dari elemen. <pre class="brush:php;toolbar:false"><ul > <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> <br> <script type="text/javascript" src="menu.js"></script> <p> Jika kita tidak menentukan dimensi elemen, dan sebaliknya meninggalkan paparannya sehingga rendering blok lalai (dengan itu mengelakkan bug model kotak), nilai -nilai itu dapat dibandingkan antara penyemak imbas (membolehkan perbezaan lebar scrollbar, fon, dan sebagainya). <p> mencapai dimensi yang betul <p> <em> Untuk menentukan dengan betul dimensi elemen yang anda mesti tunggu sehingga penyemak imbas telah selesai membuat elemen itu, jika tidak, dimensi mungkin berbeza daripada pengguna yang akhirnya melihat. Tidak ada cara yang dijamin untuk memastikan penyemak imbas telah selesai memberikan elemen, tetapi biasanya selamat untuk mengandaikan bahawa sekali acara beban tingkap telah dipecat, semua elemen telah diberikan. <p> Perbincangan <em> <p> Adalah mungkin untuk mendapatkan dimensi elemen tolak sempadannya, tetapi termasuk paddingnya. Nilai -nilai ini diakses menggunakan sifat ClientWidth dan Clientheight, dan untuk elemen contoh yang digunakan di atas nilai mereka ialah 300 dan 100 di Internet Explorer 5/5.5, dan 400 dan 200 dalam semua pelayar lain. <p> tidak ada harta yang akan membolehkan anda mengambil lebar elemen tanpa sempadan atau padding. <p> <h5> mencari kedudukan elemen <p> Mengetahui kedudukan sebenar elemen sangat membantu apabila anda ingin meletakkan unsur -unsur lain berbanding dengannya. Walau bagaimanapun, kerana saiz penyemak imbas yang berbeza, saiz fon, dan panjang kandungan, ia sering mustahil untuk kod keras kedudukan elemen sebelum anda memuatkan halaman. JavaScript menawarkan kaedah untuk menentukan kedudukan elemen selepas halaman telah diberikan, jadi anda boleh mengetahui dengan tepat di mana unsur -unsur anda berada. <p> <em> Penyelesaian <p> sifat offsettop dan offsetleft memberitahu anda jarak antara bahagian atas elemen dan bahagian atas offsetparentnya. Tetapi apa itu OffsetParent? Nah, ia berbeza -beza untuk unsur -unsur yang berbeza dan pelayar yang berbeza. Kadang -kadang ia adalah elemen yang mengandungi segera; Pada masa yang lain ia adalah elemen HTML; Pada masa -masa lain ia tidak wujud. <p> Syukurlah, penyelesaiannya adalah mengikuti jejak offsetparents dan menambah kedudukan offset mereka - satu kaedah yang akan memberi anda kedudukan mutlak yang tepat pada halaman dalam setiap penyemak imbas. <p> Jika elemen yang dipersoalkan tidak mempunyai offsetparent, maka kedudukan mengimbangi elemen itu sendiri sudah cukup; Jika tidak, kami menambah offset elemen kepada orang -orang yang offsetparent, kemudian ulangi proses untuk offsetParent (jika ada): <pre class="brush:php;toolbar:false"><script type="text/javascript"> <br> function saySomething(message) <br> { <br> alert(message); <br> } <br> saySomething('Hello world!'); <br> </script> <p> <em> iaitu 5 untuk mac bug <p> <em> Internet Explorer 5 untuk Mac tidak mengambil margin badan atau padding ke dalam kira -kira apabila mengira dimensi offset, jadi jika anda menginginkan pengukuran yang tepat dalam penyemak imbas ini, anda harus mempunyai margin sifar dan padding pada badan. Perbincangan <p> <em> Kaedah di atas berfungsi untuk susun atur yang mudah dan kompleks; Walau bagaimanapun, anda mungkin menghadapi masalah apabila satu atau lebih nenek moyang elemen mempunyai kedudukan kedudukan CSS yang ditetapkan kepada sesuatu selain statik (lalai). <p> Terdapat banyak kombinasi kemungkinan kedudukan kedudukan bersarang dan penyemak imbas yang hampir mustahil untuk menulis skrip yang membawa mereka semua. Jika anda bekerja dengan antara muka yang menggunakan banyak kedudukan relatif atau mutlak, mungkin paling mudah untuk bereksperimen dengan kes -kes tertentu dan menulis fungsi khas untuk menangani mereka. Berikut adalah beberapa perbezaan yang mungkin anda hadapi: <p> <ul> <li> Di Internet Explorer untuk Windows dan Mozilla/Firefox, mana -mana elemen yang ibu bapanya berada di kedudukan yang agak tidak akan termasuk sempadan ibu bapa di offsetnya sendiri; Walau bagaimanapun, offset ibu bapa hanya akan mengukur ke tepi sempadannya. Oleh itu, jumlah nilai -nilai ini tidak akan termasuk jarak sempadan. <li> Dalam opera dan safari, mana -mana elemen yang benar -benar atau relatif diposisikan yang offsetparent adalah badan akan termasuk margin badan dalam mengimbangi sendiri. Offset badan akan termasuk marginnya sendiri juga. <li> Di Internet Explorer untuk Windows, mana -mana elemen yang benar -benar diposisikan di dalam elemen yang agak diposisikan akan termasuk margin elemen yang agak diposisikan dalam mengimbangi. Unsur yang agak diposisikan akan termasuk marginnya juga. <h5> Mengesan kedudukan kursor tetikus <p> Apabila bekerja dengan peristiwa tetikus, seperti tetikus atau mousemove, anda sering mahu menggunakan koordinat kursor tetikus sebagai sebahagian daripada operasi anda (mis., Untuk meletakkan elemen berhampiran tetikus). Penyelesaian yang dijelaskan di bawah sebenarnya adalah kaedah pengesanan lokasi yang lebih dipercayai daripada kaedah pengesanan kedudukan unsur yang dibincangkan dalam bahagian yang disebut "mencari kedudukan elemen", jadi jika mungkin untuk menggunakan penyelesaian berikut dan bukannya yang sebelumnya, pergi! <p> <em> Penyelesaian <p> Objek acara mengandungi semua yang anda perlu tahu untuk bekerja dengan kedudukan kursor, walaupun sedikit pengesanan objek diperlukan untuk memastikan anda mendapat nilai yang setara di semua pelayar. <A 🎜> Kaedah standard untuk mendapatkan kedudukan kursor berbanding dengan keseluruhan halaman adalah melalui sifat PageX dan Pagey objek acara. Internet Explorer tidak menyokong sifat -sifat ini, tetapi ia termasuk beberapa sifat yang hampir yang kita mahukan. Clientx dan Clienty boleh didapati di Internet Explorer, walaupun mereka mengukur jarak dari kursor tetikus ke tepi tetingkap penyemak imbas. Untuk mencari kedudukan kursor berbanding dengan keseluruhan halaman, kita perlu menambah kedudukan tatal semasa ke dimensi ini. Teknik ini diliputi dalam Bab 7, bekerja dengan tingkap dan bingkai; Mari kita gunakan fungsi GetScrollingPosition dari penyelesaian itu untuk mendapatkan dimensi yang diperlukan: <p> <pre class="brush:php;toolbar:false"><script type="text/javascript"> <br> function saySomething(message) <br> { <br> alert(message); <br> } <br> saySomething('Hello world!'); <br> </script> <pre class="brush:php;toolbar:false"><ul > <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> <br> <script type="text/javascript" src="menu.js"></script> memaparkan tooltip apabila anda tetikus di atas elemen <h5> ToolTips adalah ciri yang berguna dalam kebanyakan pelayar, tetapi mereka boleh menjadi sedikit ketat jika anda merancang untuk menggunakannya sebagai bahagian antara muka anda. Jika anda ingin menggunakan lapisan yang muncul apabila anda mahu mereka, tidak dipotong, dan boleh mengandungi lebih daripada teks biasa, mengapa tidak membuat petua anda sendiri yang dipertingkatkan? <p> <p> Penyelesaian <em> Untuk contoh ini, kami akan memohon kelas, Hastooltip, pada semua elemen yang kami ingin tooltips muncul. Kami akan mendapat maklumat yang akan muncul di dalam alat dari setiap atribut tajuk elemen: <p><pre class="brush:php;toolbar:false"><script type="text/javascript"> <br> function saySomething(message) <br> { <br> alert(message); <br> } <br> saySomething('Hello world!'); <br> </script> <p> Dari penerokaan peristiwa penyemak imbas kami sebelum ini dalam bab ini, anda mungkin sudah menyedari bahawa kami perlu menubuhkan beberapa pendengar acara untuk memberitahu kami bila lapisan harus muncul dan hilang. <p> Tooltips secara klasik muncul di lokasi tetap apabila anda mengikat elemen, dan hilang apabila anda keluar. Sesetengah pelaksanaan tooltip JavaScript juga menggerakkan tooltip sebagai tetikus bergerak ke atas elemen, tetapi saya secara peribadi mendapati ini menjengkelkan. Dalam penyelesaian ini, kami akan memberi tumpuan kepada peristiwa tetikus dan tetikus: <pre class="brush:php;toolbar:false"><ul > <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> <br> <script type="text/javascript" src="menu.js"></script> <p> Kami telah mengodkan beberapa fungsi dalam skrip ini, termasuk addloadListener dari Bab 1, bermula dengan JavaScript, getElementsByAttribute dari Bab 5, menavigasi model objek dokumen, dan fungsi yang dilampirkan <pre class="brush:php;toolbar:false"><script type="text/javascript" src="menu.js"></script> <br> <br> <noscript> <br> <ul> <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> </noscript> Selepas mendapatkan objek acara penyemak imbas, dan berulang dari elemen sasaran acara asas kepada satu dengan kelas Hastooltip, ShowTip pergi tentang membuat tooltip (div). Kandungan untuk tooltip diambil dari atribut tajuk elemen sasaran, dan dimasukkan ke dalam nod teks di dalam tooltip. <p> Untuk memastikan bahawa penyemak imbas tidak memaparkan petua alat sendiri di atas petua yang dipertingkatkan kami, tajuk elemen sasaran kemudian dibersihkan - sekarang, tidak ada apa -apa untuk penyemak imbas untuk dipaparkan sebagai tooltip, jadi ia tidak dapat mengganggu yang kami buat. Jangan bimbang tentang isu -isu akses yang berpotensi yang disebabkan oleh mengeluarkan tajuk: Kami akan meletakkannya semula kemudian. <p> <p> paparan alat pengendali di opera <em> <p> Opera masih memaparkan tajuk asal walaupun selepas kami menetapkannya ke rentetan kosong. Jika anda ingin mengelakkan petua alat yang terdapat dalam penyemak imbas ini, anda perlu menghentikan tindakan lalai tetikus menggunakan fungsi StopDefaultAction dari bahagian yang dipanggil "Peristiwa Pengendalian", bahagian pertama bab ini. Perlu diketahui bahawa ini juga akan menjejaskan tingkah laku tetikus yang lain, seperti paparan alamat bar status untuk hiperpautan. <em> Untuk menyediakan cangkuk untuk gaya tooltip kami, kami menetapkan elemen tooltip ID yang berdasarkan id elemen sasaran (TargetIdTooltip), dan menetapkan kelas tooltip. Walaupun pendekatan ini membolehkan gaya digunakan melalui CSS, kami tidak dapat mengira kedudukan tooltip lebih awal dari masa ke masa, jadi kami mesti menggunakan koordinat kursor tetikus, seperti yang dikira apabila peristiwa itu dicetuskan, untuk meletakkan alat tool. <p> Semua yang tersisa adalah untuk menambahkan elemen tooltip ke badan, jadi ia akan muncul secara ajaib apabila kita tetikus di atas pautan! Dengan sedikit CSS, ia boleh kelihatan seperti Rajah 13.1, "lapisan yang dihasilkan secara dinamik yang muncul pada tetikus". <p> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174136346382132.png" class="lazy" alt="Skrip lebih bijak: JavaScript berkualiti dari awal" > <s> <br> Rajah 13.1. Lapisan yang dihasilkan secara dinamik yang muncul pada Mouseover <em> Apabila tetikus dipindahkan dari elemen, kami memadam petua dari dokumen, dan ia akan hilang: <p> <pre class="brush:php;toolbar:false"><script type="text/javascript"> <br> function saySomething(message) <br> { <br> alert(message); <br> } <br> saySomething('Hello world!'); <br> </script> Sebelum ini, dalam ShowTip, kami mencipta rujukan kepada elemen tooltip sebagai sifat elemen sasaran. Setelah melakukannya, kita boleh mengeluarkannya di sini tanpa perlu mencari seluruh DOM. Sebelum kita mengeluarkan tooltip, kita mengambil kandungannya dan memasukkannya ke dalam tajuk elemen sasaran, jadi kita boleh menggunakannya lagi kemudian. <p> <p> Adakah objek tersebut wujud? <em> <p> Anda harus menyemak objek yang dibuat dalam pendengar acara lain yang sebenarnya wujud sebelum cuba memanipulasi mereka, kerana peristiwa sering kali tidak dapat dibakar, dan anda tidak dapat menjamin bahawa mereka akan berlaku dalam perintah yang ditetapkan. <em> Perbincangan <p> <em> Satu masalah dengan kod di atas adalah bahawa jika elemen sasaran dekat dengan tepi kanan atau bawah tetingkap penyemak imbas, tooltip akan dipotong. Untuk mengelakkan ini, kita perlu memastikan terdapat ruang yang cukup untuk petua alat, dan meletakkannya dengan sewajarnya. Dengan memeriksa, dalam setiap dimensi, sama ada kedudukan tetikus kurang daripada saiz tetingkap penyemak imbas tolak saiz tooltip, kita dapat memberitahu sejauh mana untuk memindahkan lapisan untuk mendapatkannya ke skrin: <p> <p> Fungsi ini adalah sama dengan versi terdahulu sehingga kita sampai ke penyisipan elemen tooltip. Hanya sebelum memasukkan elemen, kami menetapkan penglihatannya untuk "tersembunyi". Ini bermakna apabila ia diletakkan di halaman, lapisan akan menduduki ruang yang sama yang akan diambil jika ia kelihatan, tetapi pengguna tidak akan melihatnya di halaman. Ini membolehkan kita mengukur dimensi tooltip, kemudian meletakkan semula tanpa pengguna melihatnya berkilat dalam kedudukan asalnya. <pre class="brush:php;toolbar:false"><ul > <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> <br> <script type="text/javascript" src="menu.js"></script> Untuk mengesan sama ada lapisan memaparkan di luar viewport, kami menggunakan kedudukan kursor relatif kepada viewport. Ini secara teorinya boleh diperoleh dengan menggunakan clientx/clienty, tetapi ingat: Safari memberikan nilai yang salah untuk harta ini. Sebaliknya, kami menggunakan nilai penyemak imbas kami di dalam kursorposisi dan tolak kedudukan menatal (yang bersamaan dengan klienx/klien). Saiz viewport diperoleh menggunakan fungsi getViewPortSize yang kami buat dalam Bab 7, bekerja dengan tingkap dan bingkai, kemudian, untuk setiap dimensi, kami periksa sama ada kedudukan kursor ditambah saiz lapisan lebih besar daripada saiz viewport (tolak elaun untuk scrollbars). <p> Jika sebahagian daripada lapisan akan muncul di luar viewport, kita meletakkannya dengan menolak dimensinya dari saiz viewport; Jika tidak, ia diposisikan secara normal, menggunakan kedudukan kursor. <p> Satu -satunya pengecualian lain yang perlu diperhatikan ialah jika lapisan biasanya muncul di luar viewport dalam kedua -dua dimensi, apabila kita meletakkannya secara menegak, ia secara automatik diposisikan di atas kursor. Ini menghalang lapisan daripada muncul secara langsung di atas kursor dan mencetuskan peristiwa tetikus. Ia juga menghalang elemen sasaran daripada dikaburkan sepenuhnya oleh tooltip, yang akan menghalang pengguna daripada mengklik padanya. <p> <em> Mengukur dimensi tooltip yang kelihatan <p> <em> Agar dimensi tooltip diukur, ia mesti terlebih dahulu dilampirkan ke dokumen. Ini secara automatik akan membuatnya muncul di halaman, jadi untuk mengelakkan pengguna melihatnya dipaparkan di kedudukan yang salah, kita perlu menyembunyikannya. Kami berbuat demikian dengan menetapkan penglihatannya untuk "tersembunyi" sehingga kami telah memuktamadkan kedudukan tooltip. <p> <em> Kami tidak boleh menggunakan harta paparan yang lebih biasa di sini, kerana objek dengan paparan ditetapkan ke "Tiada" tidak diberikan sama sekali, jadi mereka tidak mempunyai dimensi untuk mengukur. menyusun jadual mengikut lajur Jadual boleh menjadi lombong maklumat, tetapi hanya jika anda dapat memahaminya dengan betul. Mempunyai keupayaan untuk menyusun jadual dengan lajur yang berbeza membolehkan pengguna melihat data dengan cara yang masuk akal kepada mereka, dan akhirnya memberikan peluang untuk pemahaman yang lebih besar. <h5> <p> Penyelesaian <p> <em> Untuk memulakan, kami akan menggunakan jadual HTML semantik yang bermakna. Ini akan memberi kita struktur yang kita perlukan untuk memasukkan pendengar acara, menyuntik elemen tambahan, dan menyusun data kita: <p> Pertama, kita perlu menubuhkan pendengar acara di setiap sel tajuk meja kami. Ini akan mendengar klik ke lajur kami, dan mencetuskan sejenis pada lajur yang diklik: <pre class="brush:php;toolbar:false"><script type="text/javascript"> <br> function saySomething(message) <br> { <br> alert(message); <br> } <br> saySomething('Hello world!'); <br> </script> <p> Internet Explorer 5 untuk MAC mempunyai masalah menangani kandungan jadual yang dihasilkan secara dinamik, jadi kita perlu mengecualikannya secara khusus daripada membuat mana -mana jadual yang boleh disusun. <pre class="brush:php;toolbar:false"><ul > <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> <br> <script type="text/javascript" src="menu.js"></script> Hanya jadual dengan kelas sortableable akan diubah menjadi jadual yang boleh disusun, jadi initsortableable menavigasi DOM untuk mencari sel -sel tajuk meja dalam jadual ini. Sebaik sahaja mereka ditemui, kandungan setiap sel tajuk dibalut dengan hiperpautan - ini membolehkan pengguna papan kekunci memilih lajur untuk menyusun jadual dengan - dan pendengar acara ditetapkan pada pautan ini untuk memantau peristiwa klik, dan laksanakan sortcolumn sebagai tindak balas. Atribut tajuk setiap pautan juga ditetapkan, memberikan pengguna maklumat mengenai apa yang akan berlaku apabila pautan diklik. <p> Fungsi sortcolumn agak panjang, kerana fakta bahawa ia mesti menavigasi dan menyusun semula struktur meja keseluruhan setiap kali sel tajuk diklik: <p><pre class="brush:php;toolbar:false"><script type="text/javascript"> <br> function saySomething(message) <br> { <br> alert(message); <br> } <br> saySomething('Hello world!'); <br> </script> <p> Yang pertama untuk gelung yang berlaku selepas semua pembolehubah struktur telah ditakrifkan menetapkan negeri masing -masing untuk setiap sel tajuk meja apabila salah satu daripada mereka diklik. Bukan sahaja kelas yang dikekalkan untuk mengenal pasti sel tajuk di mana jadual sedang disusun, tetapi harta sortorder khas dikekalkan pada setiap sel untuk menentukan susunan di mana lajur itu disusun. Pada mulanya, lajur akan disusun mengikut urutan menurun, tetapi jika sel tajuk diklik dua kali berturut -turut, urutan jenis akan ditukar untuk mencerminkan urutan menaik. Setiap sel tajuk mengingati keadaan pesanan jenis yang dipamerkan baru-baru ini, dan lajur dikembalikan ke keadaan itu apabila sel tajuknya dipilih semula. Tajuk hiperpautan untuk sel tajuk yang diklik juga ditulis semula bergantung pada urutan jenis semasa, dan apakah pesanan jenis jika pengguna mengklik padanya lagi. <p> yang kedua untuk gelung menyusun setiap baris yang terkandung dalam badan meja. Salinan Tbody asal dibuat untuk menyimpan baris jadual yang disusun semula, dan pada mulanya salinan ini kosong. Oleh kerana setiap baris dalam Tbody asal diimbas, kandungan sel meja dalam lajur yang kami sorting dibandingkan dengan baris yang sudah ada dalam salinan. <p> Untuk mencari kandungan sel meja, kami menggunakan fungsi getInternalText: <pre class="brush:php;toolbar:false"><ul > <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> <br> <script type="text/javascript" src="menu.js"></script> <pre class="brush:php;toolbar:false"><script type="text/javascript" src="menu.js"></script> <br> <br> <noscript> <br> <ul> <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> </noscript> <p> Apabila sortcolumn mendapati satu baris dalam salinan yang nilai sel meja yang disusun adalah "kurang" daripada yang kita imbas, kita memasukkan satu salinan baris yang diimbas ke dalam tbody yang disalin. Untuk lajur dalam urutan menaik, kami hanya membalikkan perbandingan ini: nilai baris dalam salinan mestilah "lebih besar" daripada baris yang diimbas. Walau bagaimanapun, sebelum perbandingan dibuat, kita periksa sama ada kandungan sel meja yang disusun dapat ditafsirkan sebagai integer atau terapung; Jika ya, nilai perbandingan ditukar. Ini memastikan bahawa lajur yang mengandungi nombor disusun dengan betul; Perbandingan rentetan akan menghasilkan hasil yang berbeza daripada perbandingan nombor. <p> Setelah semua baris asal kami telah disalin ke dalam tbody baru, elemen itu digunakan untuk menggantikan yang lama, dan kami mempunyai meja yang disusun! <p> menggunakan kelas -kelas yang disusun dan boleh ditugaskan, yang diberikan kepada sel -sel tajuk meja yang disusun sekarang, kita boleh menggunakan CSS untuk memaklumkan pengguna yang mana lajur yang disusun, dan bagaimana ia disusun, seperti yang ditunjukkan dalam Rajah 13.2, "Jadual yang boleh disusun dalam urutan turun pada lajur keempat" <p> <s> <p> Rajah 13.2. Jadual yang boleh disusun disusun mengikut urutan menurun pada lajur keempat <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174136346480453.png" class="lazy" alt="Skrip lebih bijak: JavaScript berkualiti dari awal" > <br> <em> <s> Rajah 13.3. Jadual yang boleh disusun disusun mengikut urutan menaik pada lajur kedua <p> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174136346648389.png" class="lazy" alt="Skrip lebih bijak: JavaScript berkualiti dari awal" ><h5> Ringkasan <p> Dua tiang utama DHTML adalah penangkapan peristiwa, dan penyusunan semula dan penciptaan elemen halaman melalui DOM. Menggunakan prinsip -prinsip ini, ada kemungkinan untuk menangkap banyak cara yang berbeza yang pengguna berinteraksi dengan halaman dan membuat antara muka bertindak balas dengan sewajarnya. <p> Seperti yang dapat dilihat oleh bilangan dan kualiti aplikasi web yang dipertingkatkan JavaScript yang kini tersedia, ciri-ciri DHTML boleh dibawa ke antara muka baru mewakili salah satu bidang pertumbuhan terbesar untuk JavaScript yang inovatif. Asas dan contoh asas yang ditunjukkan dalam bab ini memberi anda rasa kuasa yang dapat disampaikan di dalam pelayar pengguna. Kami akan memperluaskan lagi ini dalam bab -bab berikut ketika kami membina beberapa antara muka yang sangat menarik. <p> itu untuk sampel kami <em> antologi JavaScript: 101 Tips Essential, Tricks & Hacks . Apa yang akan datang? <p> Muat turun sampel ini sebagai PDF, untuk membaca di luar talian. Lihat jadual kandungan buku untuk melihat apa lagi yang diliputi. Dan lihat apa yang difikirkan oleh orang lain tentang buku itu - baca ulasan pelanggan langsung <em> Anthology JavaScript: 101 Tips Essential, Tricks & Hacks . <h2 > Soalan Lazim (Soalan Lazim) Mengenai JavaScript dari Scratch <h3 > Apakah kepentingan JavaScript dalam pembangunan web? <p > JavaScript adalah komponen penting dalam pembangunan web. Ia adalah bahasa pengaturcaraan yang membolehkan anda melaksanakan ciri -ciri kompleks di laman web. Apabila laman web melampaui hanya menunjukkan maklumat statik, seperti memaparkan kemas kini kandungan yang tepat pada masanya, peta interaktif, grafik animasi, atau menatal jukebox video, JavaScript terlibat. Ia adalah lapisan ketiga lapisan kek teknologi web standard, dua daripadanya (HTML dan CSS) yang telah kami gunakan secara meluas dalam artikel kami yang terdahulu. Mulailah dengan memahami asas -asas HTML dan CSS kerana mereka membentuk asas pembangunan web. Kemudian, anda secara beransur -ansur boleh beralih ke asas JavaScript seperti pembolehubah, jenis data, fungsi, gelung, dan syarat. Amalan adalah kunci dalam pembelajaran JavaScript, jadi pastikan anda kod secara teratur. JavaScript adalah bahasa yang unik dengan konsep dan strukturnya sendiri, dan penting untuk memahami ini sebelum beralih ke topik yang lebih kompleks. Amalan biasa dan penerapan konsep yang dipelajari adalah penting dalam menguasai JavaScript. <h3 > Bolehkah saya belajar JavaScript tanpa pengalaman pengaturcaraan terdahulu? Walaupun mempunyai latar belakang dalam pengaturcaraan boleh menjadikan proses pembelajaran lebih mudah, ia bukan prasyarat. JavaScript sering disyorkan sebagai bahasa pertama yang baik untuk pemula kerana sintaks yang memaafkan dan penggunaan yang luas dalam pembangunan web. Rata -rata, jika anda bermula dari awal dan mendedikasikan beberapa jam setiap hari, anda boleh mengharapkan untuk mempelajari asas -asas dalam beberapa minggu hingga beberapa bulan. Platform dalam talian seperti Codecademy, Udemy, dan FreeCodeCamp menawarkan kursus yang komprehensif. Buku -buku seperti "JavaScript Eloquent" dan "You Do not Know JS" juga sangat disyorkan. Di samping itu, Rangkaian Pemaju Mozilla (MDN) mempunyai dokumentasi yang luas di JavaScript. Ia boleh digunakan untuk membuat ciri-ciri seperti slider, pengesahan bentuk, pop timbul, dan banyak lagi. Ia juga membolehkan anda memanipulasi Model Objek Dokumen (DOM), yang membolehkan anda menukar kandungan dan susun atur laman web dalam masa nyata. Node.js adalah runtime JavaScript yang membolehkan anda menjalankan JavaScript pada pelayan anda. Dengan Node.js, anda boleh membina seluruh aplikasi web menggunakan hanya JavaScript. Mereka menyediakan struktur untuk kod JavaScript, menjadikannya lebih mudah untuk membina aplikasi web berskala besar, diselenggarakan, dan berskala. Contohnya termasuk react.js, angular.js, dan vue.js. <p > Apakah masa depan JavaScript? Dengan kebangkitan kerangka seperti React, Sudut, dan Vue, JavaScript menjadi lebih kuat dan serba boleh. Di samping itu, perkembangan Node.js telah memperluaskan jangkauan JavaScript ke sisi pelayan, menjadikannya bahasa penuh. Oleh kerana aplikasi web terus berkembang dalam kerumitan, permintaan untuk pemaju JavaScript yang mahir mungkin tetap tinggi. </script>
Atas ialah kandungan terperinci Skrip lebih bijak: JavaScript berkualiti dari awal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Java php JavaScript firefox css safari ecmascript less html angular edge xhtml Static String Integer Float Boolean Array Object NULL define if count sort for while select checkbox format include require try catch Validating xml Error Token break continue using class internal Length operator Interface Namespace finally Conditional Attribute Property Event Collection Generic var append copy map delete JS console number undefined function default typeof
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：jQuery menukar teks ke huruf besar/huruf kecilArtikel seterusnya：jQuery menukar teks ke huruf besar/huruf kecil
Artikel berkaitan
Lihat lagi- Analisis mendalam bagi komponen kumpulan senarai Bootstrap
- Penjelasan terperinci tentang fungsi JavaScript kari
- Contoh lengkap penjanaan kata laluan JS dan pengesanan kekuatan (dengan muat turun kod sumber demo)
- Angularjs menyepadukan UI WeChat (weui)
- Cara cepat bertukar antara Cina Tradisional dan Cina Ringkas dengan JavaScript dan helah untuk tapak web menyokong pertukaran antara kemahiran_javascript Cina Ringkas dan Tradisional