Sebelum peluncuran browser Microsoft IE 5.0, tantangan terbesar yang dihadapi dalam pemrograman web adalah bahwa komponen tidak dapat dibuat dengan mudah untuk mencapai penggunaan kembali kode dan berbagi multi-halaman. Masalah ini selalu mengganggu pemrogram halaman web DHTML (HEML dinamis). Mereka hanya dapat terus menulis ulang kode HTML, CSS, dan JAVASCRIPT untuk memenuhi fungsi yang berulang atau serupa di beberapa halaman. Sejak peluncuran browser IE 5.0, situasi ini telah diperbaiki. Hal ini telah menghadirkan metode kombinasi instruksi baru, yang dapat merangkum kode yang mengimplementasikan fungsi tertentu dalam suatu komponen, sehingga mewujudkan penggunaan kembali kode pada banyak halaman dan membuat pemrograman web lebih mudah. .Masuki dunia yang benar-benar baru. Teknologi baru ini adalah "Perilaku" dalam DHTML yang akan kita bicarakan.
"Perilaku" adalah komponen sederhana dan mudah digunakan yang merangkum fungsi atau tindakan tertentu pada halaman. Ketika "perilaku" dilampirkan ke elemen di halaman WEB, perilaku asli elemen tersebut akan diubah. Oleh karena itu, pemrogram halaman web dapat mengembangkan instruksi DHTML umum dan mengubah beberapa atribut objek asli, menggunakan "perilaku" untuk meningkatkan fungsionalitas suatu objek, sekaligus menyederhanakan kode HTML halaman. Selain itu, pembuatan dan penggunaan "perilaku" juga sangat sederhana dan nyaman, dan pengetahuan yang diperlukan hanyalah lembar gaya CSS, instruksi HTML, dan bahasa skrip JAVASCRIPT yang sudah biasa digunakan. Selama Anda mengetahui sesuatu tentangnya dan memiliki pengalaman pemrograman yang sebenarnya, tidak ada masalah dalam mempelajari dan menguasai penggunaan "perilaku". Kami akan mengambil komponen "perilaku" yang mengubah efek font sebagai contoh untuk mengilustrasikan cara menulis dan menggunakan "perilaku", dan merasakan keuntungan dan kenyamanan yang dibawa oleh "perilaku" dalam pengeditan halaman.
Pertama, buat file teks baru bernama font_efftce.htc. Semua file yang membentuk komponen "perilaku" memiliki ekstensi .htc. Langkah-langkah untuk membuat dan menggunakannya adalah sebagai berikut:
(1) Pertama, tambahkan beberapa respon event pada “behavior” ini. Format penulisan pernyataannya adalah sebagai berikut:
< PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="glowit()" / >
< PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="noglow()" / >
< PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="font2kuning()" / >
< PUBLIC:ATTACH EVENT="onmouseup" ONEVENT="font2blue ()" / >
"EVENT" sesuai dengan nama acara yang diperlukan, ini dia: onmouseover, onmouseout, onmousedown, onmouseup. Tentu saja, Anda dapat menambahkan nama acara lain untuk memenuhi kebutuhan spesifik Anda. "ONEVENT" sesuai dengan event handle individual, yaitu nama fungsi yang dipanggil saat event dipicu. Fungsi glowit() menciptakan cahaya merah di sekitar font. Fungsi noglow() menghilangkan efek cahaya pada font. Fungsi Font2kuning() mengubah warna font menjadi kuning. Fungsi Font2blue() mengubah warna font menjadi biru. Definisi keempat peristiwa tersebut serupa.
(2) Selanjutnya tambahkan dua definisi "metode" lagi pada "perilaku" ini, yang isinya sebagai berikut.
< PUBLIC:METHOD NAME="move_down" / >
< PUBLIC:METHOD NAME="move_right" / >
Parameter "NAME" sesuai dengan nama "metode" yang diberikan. move_down dan move_right adalah nama fungsi yang sesuai dengan "metode" pergerakan ke bawah dan ke kanan. Perhatikan bahwa jangan memberi tanda kurung "( )" setelah nama metode, yaitu, jangan menulisnya seperti "move_down()". Ini tidak diperbolehkan dalam sintaks definisi "metode".
(3) Langkah selanjutnya adalah menggunakan pernyataan skrip JAVASCRIPT untuk menulis konten fungsi yang sesuai dengan "event handle" dan "method" di lingkungan DHTML yang sudah dikenal untuk mencapai efek yang diinginkan. Silakan merujuk ke program sumber di bawah untuk konten spesifik. Parameter "elemen" mengacu pada objek tempat "perilaku" ini dilampirkan, karena "perilaku" selalu dilampirkan ke elemen di halaman dan bekerja melalui elemen ini. Pernyataan lainnya semuanya adalah konten pemrograman DHTML, jadi saya tidak akan menjelaskan lebih banyak tentangnya. Jika Anda memiliki pertanyaan, Anda dapat merujuk ke dokumentasi pengembangan MSDN Microsoft untuk browser IE, yang berisi konten referensi pemrograman DHTML terperinci, instruksi untuk menggunakan properti dan metode, dan berisi sejumlah besar artikel dan contoh program. Sering mengunjungi dokumentasi MSDN Microsoft adalah kebiasaan belajar yang baik, terutama bagi pemula. Anda bisa mendapatkan hampir semua jawaban yang Anda cari. URL-nya adalah: http://msdn.microsoft.com/ie/ .
Isi dokumen "perilaku" lengkap "font_effect.htc" adalah sebagai berikut:
///////////////////////////////The " behavior" dokumen dimulai // ////////////////////////////////////
//Tambahkan empat event mouse ke "behavior "
< PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="noglow()" / >
< PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="font2kuning ()" / >
< PUBLIC :ATTACH EVENT="onmouseup" ONEVENT="font2blue()" / >
//Tentukan dua metode untuk "perilaku"
< PUBLIC:METHOD NAME="move_down" / >
< PUBLIC:METHOD NAME=" move_right" / >
< SCRIPT LANGUAGE="JScript" >
//Tentukan variabel untuk menyimpan warna font
var font_color;
//Tentukan metode untuk memindahkan teks ke bawah
fungsi move_down()
{
element.style.posTop+=2;
}
// Tentukan metode untuk memindahkan teks ke kanan
function move_right()
{
element.style.posLeft +=6;
}
//Definisikan fungsi pemanggilan
fungsi event mouse onmouseup font2blue(){
if (event.srcElement == element)
{
element.style.color
=
'
blue
'
;
//Tentukan fungsi pemanggilan
fungsi acara mouse onmouseover glowit()
{
if (event.srcElement == elemen)
{
font_color=style.color
element.style.color
='white';
(warna =merah,kekuatan=2)";
}
}
//Definisikan fungsi pemanggilan fungsi event onmouseout mouse
noglow()
{
if(
event.srcElement==
elemen)
{
element.style.filter
="";
element.style.color=font_color
;
// /////////////////Akhir dari dokumen "Perilaku" //////////////////////////// ////// /
(4) Cara menggunakan "perilaku" di halaman
Menggunakan komponen "perilaku" di halaman tidak memerlukan pembelajaran pengetahuan baru. Pengetahuan yang dibutuhkan tidak lebih dari pengaturan style sheet CSS dan HTML.
< STYLE >
.myfilter{behavior:url(font_effect.htc);position:relative;font-weight:bold;width=180;left:0;}
< /STYLE >
Dapat dilihat bahwa ini berbeda dengan gaya yang kita sudah familiar dengan sebelumnya. Pengaturan tabelnya persis sama. Pernyataan di atas mendefinisikan nama gaya: "myfilter", yang kontennya relatif baru bagi kami adalah: "behavior:url(font_effect.htc);", "behavior" adalah nama atribut "behavior" yang baru, yaitu bagaimana "perilaku" diatur dalam style sheet. Konten dalam tanda kurung adalah nama file dari dokumen "perilaku". Dalam contoh ini, ini menunjukkan bahwa dokumen "perilaku" berada di direktori yang sama dengan file halaman. Jika dokumen "perilaku" ditempatkan di direktori lain, tambahkan "behavior" di depan parameter ini. Nama path yang sesuai untuk memastikan bahwa dokumen Behavior dapat ditempatkan dengan benar. Sisa konten dalam "gaya" ini hanyalah pengaturan atribut gaya biasa, yang dapat ditambah atau dikurangi sesuai kebutuhan Anda, tetapi dalam contoh ini, karena penggunaan efek filter "cahaya", setidaknya satu atribut lebar harus diatur. Melalui spesifikasi gaya di atas, kami memiliki gaya bernama: "myfilter", yang hadir dengan "perilaku" dengan efek perubahan font. Jika Anda ingin menggunakan style ini dengan "behavior" pada komponen halaman, caranya juga sangat sederhana, cukup letakkan "nama style" di area pengaturan atribut komponen, lihat pernyataan berikut.
< span id="myspan" class='myfilter' >Efek teks yang dihasilkan oleh perilaku< /span >< br >
< span class='myfilter' >Bersinar setelah penunjuk tetikus
Tidak ada yang baru dalam hal ini pernyataan di atas Konten, class='myfilter' adalah pengaturan gaya yang kita kenal. Tag "id" juga ditentukan dalam atribut tag "span" pertama. Seperti yang akan Anda lihat nanti, tag ini disetel untuk mendemonstrasikan pemanggilan "metode" dalam "perilaku". Setelah pengaturan ini, konten di komponen "span" dapat menampilkan efek yang telah ditentukan di komponen "behavior":
1. Saat penunjuk tetikus bergerak di atas konten teks, efek cahaya merah dihasilkan di sekitar teks, dan teks berubah menjadi putih.
2. Saat tombol mouse ditekan, warna teks berubah menjadi kuning.
3． Saat tombol mouse diangkat, warna teks berubah kembali menjadi biru.
4. Saat penunjuk tetikus bergerak ke luar area teks, efek cahaya merah akan hilang dan teks akan kembali ke tampilan aslinya.
Selain itu, kami menetapkan dua "metode" saat mendefinisikan "perilaku", "move_down" dan "move_right". Untuk memanggil kedua "metode" ini, dua tombol ditentukan:
< button onclick="myspan.move_right();" >Pindahkan baris teks pertama ke kanan< br >
< button onclick="myspan.move_down ();" >Pindahkan baris pertama teks ke bawah
Gunakan event onclick pada tombol untuk memanggil kedua "metode" ini. Tag "id" yang ditentukan sebelumnya digunakan sebagai nama objek komponen, gunakan " myspan.move_down" untuk memanggil "metode" untuk memanipulasi objek ini. Terlihat setelah menekan tombol yang sesuai, teks pada baris pertama akan bergerak ke bawah atau ke kanan. Meskipun hanya baris teks pertama yang digunakan untuk demonstrasi, nyatanya Anda juga dapat memindahkan objek lain selama Anda membuat pengaturan yang sesuai. Isi lengkap dokumen sumber halaman adalah sebagai berikut:
< html >
< HEAD >
< TITLE > Demonstrasi Efek Perilaku < /TITLE >
< STYLE >
.myfilter{behavior:url(font_effect.htc);position:relative;font-weight :bold; lebar=180;kiri:0;}
< /STYLE >
< /HEAD >
< BODY >
< span id="myspan" class='myfilter' >Efek teks yang dihasilkan oleh perilaku< /span >< br >
< span class=' myfilter' >Bersinar setelah penunjuk tetikus< /span >< br >
< span class='myfilter' >Pada saat yang sama, teks menjadi putih< /span >< br >
< span class='myfilter ' >Teks menjadi kuning setelah mouse ditekan < br >
< span class='myfilter' >Teks menjadi biru setelah mouse diangkat< /span >< br >
< span class='myfilter' >Teks kembali ke keadaan semula setelah mouse dipindahkan< /span >< br >
< button onclick="myspan.move_right();" >Pindahkan baris teks pertama ke kanan< br >
< button onclick="myspan.move_down();" >Pindahkan baris pertama teks ke bawah
Melalui pengenalan singkat di atas, kita dapat melihat bahwa kita dapat dengan mudah menggabungkan beberapa efek perubahan teks dalam satu "perilaku" pada saat yang sama, dan mengubahnya secara sewenang-wenang melalui pengaturan "gaya" sederhana. Terkait dengan komponen halaman, ini mencerminkan kelebihan dan fungsi kuat dari komponen "perilaku". Komponen "perilaku" dapat digunakan kembali tidak hanya dalam satu halaman, tetapi juga untuk semua halaman di situs yang sama. Bayangkan saja, jika Anda tidak menggunakan "perilaku" untuk mencapai efek di atas, meskipun Anda dapat memanggil sekumpulan fungsi yang telah ditentukan di halaman untuk menyelesaikan fungsi yang sama, setiap elemen di halaman yang menggunakan efek teks akan memiliki empat peristiwa mouse. terlampir. Jika efek yang sama digunakan di beberapa halaman, fungsi yang dipanggil juga perlu diatur berulang kali di setiap halaman. Sebagai perbandingan, sudah jelas mana yang lebih baik dan mana yang lebih buruk. Oleh karena itu, dengan menggunakan komponen "perilaku", Anda dapat membuat halaman yang sederhana, efisien, serbaguna, dan mudah dirawat. Contoh pada artikel ini hanya untuk mengilustrasikan penulisan dan penggunaan proses komponen "behavior", sehingga pembaca dapat memiliki pemahaman umum tentang pemrograman "behavior", dan berdasarkan hal tersebut, mereka dapat membuat komponen "behavior" yang mereka butuhkan, atau langsung mengutipnya untuk memenuhi kebutuhan pribadinya. Komponen "perilaku" yang sudah jadi, karena konsep "berbagi komponen" juga merupakan niat awal dari pengembang "perilaku". Akhirnya, saya berharap artikel ini dapat memberikan tujuan untuk "menginspirasi orang lain" dan memungkinkan pembaca memasuki dunia pemrograman web DHTML yang menakjubkan.