DHTML Utopia: Reka Bentuk Web Moden Menggunakan JavaScript & Dom

pesona membuka kunci laman web dinamik: jauh ke dalam dunia dhtml

Artikel ini dikutip dari buku baru SitePoint "DHTML Utopia: Reka Bentuk Web Moden Menggunakan JavaScript & Dom", yang meneroka teknologi DHTML secara mendalam, mengajar anda bagaimana untuk mencipta pengalaman pengguna yang kaya tanpa mengorbankan kebolehgunaan dan keserasian standard. Pengarang Stuart Langridge menggunakan standard web dan memisahkan kod dan tag untuk membina aplikasi DHTML yang menarik, praktikal dan interaktif.

Buku ini merangkumi lebih daripada 300 halaman kemahiran DHTML, termasuk Model Objek Dokumen (DOM), Skrip Jauh, Ajax, XML-RPC, dan XPath Technologies untuk membantu anda membuat aplikasi projek web anda sendiri. Sebagai contoh, membina menu navigasi hierarki yang mematuhi piawaian;

Petikan berikut akan membawa anda dengan cepat memahami teknologi teras dan aplikasi DHTML. Untuk maklumat lanjut, sila lawati halaman buku atau lihat katalog penuh. Anda juga boleh memuat turun versi PDF. Sekarang, mari kita pergi ke Bab 1.

Bab 1: Gambaran Keseluruhan Teknologi DHTML

Bab ini secara ringkas memberikan gambaran ringkas tentang asas -asas yang diperlukan untuk membina laman web DHTML, termasuk gabungan HTML, CSS dan JavaScript. DHTML bukan teknologi tunggal, tetapi gabungan pintar dari ketiga-tiga teknologi ini, seperti seni memasak, hasil akhir mungkin hidangan yang dimasak di rumah atau jamuan besar.

Asas HTML

Laman web ditulis dalam HTML. Untuk membina laman web yang dipertingkatkan DHTML yang berjaya, HTML anda mesti memenuhi dua syarat: sah dan semantik .

• feFficient html: Ikuti peraturan spesifikasi HTML dan pastikan kod HTML anda mematuhi piawaian, yang penting untuk membina DHTML. Ini termasuk tag bersarang dengan betul, tag kontena penutup, dan menggunakan pengisytiharan jenis dokumen (DOCTYPE). Gunakan Validator W3C untuk menyemak kesahihan HTML.

• HTML semantik: Gunakan tag HTML untuk menerangkan sifat -sifat elemen dokumen, bukan penampilan mereka. Sebagai contoh, gunakan tag <p></p> untuk mewakili perenggan dan gunakan tag <blockquote></blockquote> untuk mewakili rujukan, dan bukannya menggunakan tag <br> atau <font></font> untuk mengawal pemformatan teks. Penandaan semantik menjadikannya lebih mudah untuk menggunakan teknologi DHTML.

Tambah CSS

Lembaran Gaya Cascading (CSS) digunakan untuk menggambarkan bagaimana HTML diberikan, iaitu, untuk menentukan penampilan setiap elemen pada halaman. Melalui gaya CSS, halaman DHTML secara bebas boleh memproses penampilan dan kandungan halaman, mencapai pemisahan yang bersih.

Tambah JavaScript

JavaScript adalah bahasa pengaturcaraan yang digunakan untuk menambah tingkah laku dinamik ke laman web. HTML mentakrifkan struktur halaman, CSS mentakrifkan penampilan halaman, dan JavaScript mentakrifkan tingkah laku interaksi pengguna, seperti mengklik butang, menyeret imej, atau menggerakkan tetikus. JavaScript berfungsi dengan DOM, mengaitkan tindakan dengan peristiwa yang berbeza (tetikus, seret, dan klik).

Cadangan Alat

Persekitaran pembangunan JavaScript yang baik dan editor kod dapat meningkatkan kecekapan pembangunan. Adalah disyorkan untuk menggunakan Mozilla Firefox untuk menyahpepijat dan menggunakan editor kod yang menyokong penonjolan sintaks.

Bab 2: Model Objek Dokumen (DOM)

Dom menerangkan halaman HTML sebagai satu set objek yang boleh diakses oleh program JavaScript, yang memaparkan elemen halaman ke struktur pokok (DOM TREE). Setiap elemen menjadi nod elemen dan setiap serpihan teks menjadi nod teks. Struktur pokok dom sepadan dengan tahap bersarang tag HTML. HTML yang berkesan dan betul bersarang adalah penting untuk membina pokok Dom yang betul.

Melalui Pokok Dom

Melalui pokok Dom merujuk kepada proses mengakses setiap nod di dalam pokok dalam urutan. Ini biasanya dilaksanakan menggunakan rekursif. Kaedah document.getElementById() digunakan untuk mendapatkan elemen ID yang ditentukan, dan kaedah document.getElementsByTagName() digunakan untuk mendapatkan semua elemen jenis yang ditentukan.

Pengendalian Elemen DOM

Anda boleh menggunakan JavaScript untuk mengubah suai sifat, kandungan teks dan sifat gaya elemen DOM. Kaedah appendChild() digunakan untuk menambah nod kanak -kanak baru, kaedah insertBefore() digunakan untuk memasukkan nod kanak -kanak baru sebelum nod yang ditentukan, kaedah removeChild() digunakan untuk memadam nod kanak -kanak, dan kaedah cloneNode() digunakan untuk meniru nod.

Operasi Dom Contoh: Borang lanjutan dan penukaran imej modular

Bab ini menyediakan dua contoh: Borang yang boleh dilanjutkan yang membolehkan pengguna menambah medan input secara dinamik;

Bab 3: Mengendalikan Acara Dom

Acara adalah tindakan yang berlaku pada unsur -unsur, seperti klik tetikus, bentuk perubahan, dll. Inti pengaturcaraan DHTML adalah pemprosesan acara, iaitu, menulis kod untuk bertindak balas terhadap peristiwa.

kaedah pengendalian acara

Pengendalian acara DOM moden menggunakan kaedah addEventListener() (dan kaedah attachEvent) untuk melampirkan pendengar acara ke elemen. Fungsi pendengar acara menerima objek acara sebagai parameter, yang mengandungi maklumat terperinci mengenai peristiwa, seperti elemen sasaran, koordinat tetikus, dll.

acara menggelegak dan menyekat tingkah laku lalai

Bubble acara merujuk kepada proses di mana peristiwa gelembung ke atas dari elemen sasaran ke elemen nenek moyangnya. Kaedah stopPropagation() boleh menghalang peristiwa dari bubbled. Kaedah preventDefault() boleh menyekat tingkah laku lalai peristiwa, seperti mencegah lompat pautan.

pengendalian acara silang penyemak imbas

Untuk memastikan bahawa kod berfungsi dengan betul dalam pelayar yang berlainan, kaedah pengendalian peristiwa yang bersesuaian dengan penyemak imbas perlu digunakan, seperti menggunakan fungsi addEvent() untuk mengendalikan kaedah addEventListener() dan attachEvent() secara seragam.

Contoh Pemprosesan Acara: Pautan Pintar dan Jadual Sorotan

Bab ini menyediakan dua contoh: pautan pintar, membolehkan pengguna memilih sama ada untuk membuka pautan dalam tetingkap baru;

Bab 4: Mengesan Ciri Penyemak Imbas

Untuk memastikan peningkatan DHTML tidak menyebabkan masalah dalam pelayar yang tidak menyokong fungsi ini, pengesanan ciri penyemak imbas diperlukan.

Pengesanan Harta

Pengesanan ciri merujuk kepada kaedah yang secara langsung memeriksa sama ada penyemak imbas menyokong fungsi tertentu, dan bukannya menyimpulkan fungsi yang disokongnya dengan mengenal pasti jenis penyemak imbas. Ini termasuk memeriksa sama ada kaedah DOM dan atribut wujud.

Contoh pengesanan ciri: imej scrollable

Bab ini menyediakan contoh imej yang boleh ditatal yang menggunakan pengesanan ciri untuk memastikan bahawa kod berfungsi dengan baik dalam pelayar yang berbeza dan mengendalikan perbezaan pelayar dalam pengambilalihan koordinat tetikus.

Bab yang tersisa dalam buku ini akan terus meneroka teknik dan aplikasi DHTML yang lebih maju.

(gambar tetap menjadi format asal dan kedudukan tidak berubah)

Gambar tidak dapat dipaparkan kerana pautan gambar tidak dapat diakses. Sila pastikan pautan imej sah.

Atas ialah kandungan terperinci DHTML Utopia: Reka Bentuk Web Moden Menggunakan JavaScript & Dom. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!