Dalam tutorial ini, saya akan menunjukkan kepada Anda betapa mudahnya memperluas bahasa HTML dengan tag khusus. Tag khusus dapat digunakan untuk mengimplementasikan berbagai perilaku, sehingga merupakan cara yang sangat nyaman untuk menulis lebih sedikit kode dan membuat dokumen HTML Anda lebih sederhana Show
Untuk melangkah lebih jauh dengan tag khusus, lihat posting saya tentang membuat tag khusus yang dienkapsulasi dengan Shadow DOM
Apa itu Tag HTML Khusus?Dengan HTML, Anda menggunakan tag 2_36, misalnya, untuk menampilkan teks tebal. Jika Anda memerlukan daftar, gunakan tag 237 dengan tag turunannya 238 untuk setiap item daftar. Tag diinterpretasikan oleh browser dan, bersama dengan CSS, menentukan bagaimana konten laman web ditampilkan dan juga bagaimana perilaku bagian konten Terkadang, hanya menggunakan satu tag HTML saja tidak cukup untuk fungsionalitas yang dibutuhkan dalam aplikasi web. Biasanya, ini diselesaikan dengan menggunakan beberapa tag HTML bersamaan dengan JavaScript dan CSS, tetapi solusi ini tidak begitu elegan. Solusi yang lebih elegan adalah dengan menggunakan tag khusus—pengidentifikasi yang terlampir dalam 239 yang ditafsirkan oleh browser untuk merender fungsionalitas yang kami maksudkan. Seperti halnya tag HTML biasa, kita harus dapat menggunakan tag khusus beberapa kali pada laman, dan kita juga harus dapat memiliki atribut tag dan sub-tag untuk membantu fungsi tag khusus Dalam istilah yang lebih sederhana, elemen khusus dapat digunakan untuk membuka kunci fitur berikut
Dalam posting ini, kita akan belajar tentang elemen khusus dengan membuat tag khusus yang disebut 240. Tag khusus ini akan menampilkan gambar Gravatar untuk alamat email tertentu. 241 API di browser modern memudahkan hal ini 1. Membuat ProyekUntuk menerapkan dan menguji tag kita, kita perlu membuat beberapa hal
2. Memodifikasi index. htmlMari kita edit file index. html dan buat isinya seperti ini 1 <!DOCTYPE html>
2 <html>
3 <head>
4 <script type="text/javascript" src="codingdude-gravatar.js"></script> 5 </head>
<!DOCTYPE html>
0<!DOCTYPE html>
1<!DOCTYPE html>
2<!DOCTYPE html>
3<!DOCTYPE html>
4<!DOCTYPE html>
5<!DOCTYPE html>
6<!DOCTYPE html>
7<!DOCTYPE html>
___9Jika kami memuat index. html di browser sekarang, hasilnya tidak terlalu mengesankan karena kita belum mengimplementasikan kode untuk tag kustom kita. Satu hal yang perlu diperhatikan adalah browser ini sangat pemaaf, sehingga Anda dapat memiliki tag yang tidak dikenal di dokumen, dan browser akan mengabaikannya. Agar tag khusus kami benar-benar menampilkan gambar Gravatar untuk email saya, pertama-tama kami harus memahami cara kerja Gravatar 3. Mendaftarkan Tag BaruLangkah 1. Pilih Nama yang TepatUntuk membuat tag khusus, Anda harus menggunakan 242 Argumen pertama di 243 adalah nama tag. Inilah yang telah kami sebutkan di file HTML. Nama harus selalu memiliki tanda hubung (-). Tag dengan nama seperti 2_44 tidak valid. Ini memungkinkan parser harus dapat membedakan elemen biasa dari tag khusus. Nama tag elemen khusus harus selalu memiliki tanda hubung (-) Langkah 2. Pilih Prototipe yang Tepat2_43 memiliki objek opsional kedua. Objek ini digunakan untuk menyebutkan prototipe elemen baru. Secara default, elemen khusus mewarisi dari 246. Sepotong kode di atas setara dengan yang berikut ini 1 21 Jika Anda ingin membuat elemen khusus, yang memperluas elemen HTML lain, elemen asli harus diperluas di 243. Elemen khusus yang mewarisi elemen asli juga dikenal sebagai "jenis elemen khusus ekstensi". 1 23 2 Beberapa hal lagi yang harus diperhatikan
4. Membuat Instansiasi Elemen KhususSemua aturan standar elemen HTML berlaku untuk elemen khusus. Sama seperti elemen standar, Anda dapat membuat elemen khusus di DOM menggunakan JavaScript, atau mendeklarasikannya dalam HTML Mendeklarasikan elemen khusus dalam HTML 1 26 Membuat elemen khusus di DOM menggunakan JavaScript 1 28 2 <html>
0Instansiasi elemen ekstensi tipe dalam HTML 1 <html>
2Membuat elemen ekstensi tipe di DOM menggunakan JavaScript 1 <html>
45. Menambahkan Markup ke Tag KhususMenambahkan markup agak sederhana dalam tag khusus. Untuk memulainya, Anda perlu membuat kelas yang memperluas elemen induk HTML. Dalam kasus kami, kami akan memperpanjang 246. Di dalam 2_46, kami akan menggunakan 251 untuk menambahkan pendengar acara dan menyesuaikan 252 dari tag khusus. Ingatlah untuk memanggil 2_53 karena itu akan membantu mewarisi metode dan properti kelas induk. Selalu ingat, 2_54 di dalam poin konstruktor ke elemen khusus yang dibuat Berikut adalah ikhtisar sederhana tentang bagaimana komponen kita akan terlihat 1 <html>
62 <html>
83 30 4 32 5________________________________________________________________________________________________________________________________________________________________________________________________________________________________ 6. Metode Siklus HidupSebelum Anda mulai menambahkan markup ke tag khusus, Anda harus mengetahui metode daur hidup yang terkait dengan tag khusus. Ada empat callback siklus hidup CallbackPurpose2_51sebuah contoh elemen tag khusus dibuat 256sebuah contoh elemen tag khusus dimasukkan ke dalam dokumen 257sebuah contoh elemen tag khusus dihapus dari dokumen 258sebuah atribut dalam elemen tag khusus ditambahkan, dihapus, atau diperbarui Kerangka tag khusus kami dengan panggilan balik ini akan terlihat sebagai berikut 1 <html>
62 <head>
83 40 4 42 5 44 <!DOCTYPE html>
046 <!DOCTYPE html>
242 <!DOCTYPE html>
444 <!DOCTYPE html>
6<script type="text/javascript" src="codingdude-gravatar.js"></script>2 <!DOCTYPE html>
842 <script type="text/javascript" src="codingdude-gravatar.js"></script>5 44 <script type="text/javascript" src="codingdude-gravatar.js"></script>7 <script type="text/javascript" src="codingdude-gravatar.js"></script>8 <script type="text/javascript" src="codingdude-gravatar.js"></script>9 42 51 44 53 <head>
2Kami telah melihat cara menggunakan 251 dalam elemen khusus. Sekarang, mari gunakan metode panggilan balik lainnya dalam kode kita. Mari kita mulai dengan 2_56
|