ทำความเข้าใจองค์ประกอบ "พฤติกรรม" ใน DHTML

ก่อนการเปิดตัวเบราว์เซอร์ IE 5.0 ของ Microsoft ความท้าทายที่ใหญ่ที่สุดที่ต้องเผชิญในการเขียนโปรแกรมเว็บคือไม่สามารถสร้างส่วนประกอบต่างๆ ได้อย่างง่ายดายเพื่อให้มีการใช้โค้ดซ้ำและการแชร์หลายหน้า ปัญหานี้มักสร้างปัญหาให้กับโปรแกรมเมอร์หน้าเว็บ DHTML (dynamic HEML) พวกเขาสามารถเขียนโค้ด HTML, CSS และ JAVASCRIPT ใหม่ได้เท่านั้นเพื่อให้ตรงตามฟังก์ชันที่ซ้ำหรือคล้ายกันในหลายหน้า นับตั้งแต่เปิดตัวเบราว์เซอร์ IE 5.0 สถานการณ์นี้ก็ได้รับการปรับปรุงให้ดีขึ้น โดยได้นำวิธีการรวมคำสั่งใหม่มาให้เรา ซึ่งสามารถสรุปโค้ดที่ใช้ฟังก์ชันเฉพาะในส่วนประกอบได้ ดังนั้นจึงทำให้มีการใช้โค้ดซ้ำในหลาย ๆ หน้าและทำให้การเขียนโปรแกรมเว็บง่ายขึ้น เข้าสู่โลกใหม่ เทคโนโลยีใหม่นี้คือ "พฤติกรรม" ใน DHTML ที่เราจะพูดถึง

"พฤติกรรม" เป็นองค์ประกอบที่เรียบง่ายและใช้งานง่ายซึ่งสรุปฟังก์ชันหรือการกระทำเฉพาะเจาะจงบนหน้าเว็บ เมื่อมีการแนบ "พฤติกรรม" กับองค์ประกอบในหน้าเว็บ ลักษณะการทำงานดั้งเดิมขององค์ประกอบจะเปลี่ยนไป ดังนั้นโปรแกรมเมอร์หน้าเว็บสามารถพัฒนาคำสั่ง DHTML ทั่วไปและเปลี่ยนแปลงคุณลักษณะบางอย่างของออบเจ็กต์ดั้งเดิมโดยใช้ "พฤติกรรม" เพื่อปรับปรุงการทำงานของออบเจ็กต์ ในขณะเดียวกันก็ลดความซับซ้อนของโค้ด HTML ของเพจด้วย นอกจากนี้ การสร้างและการใช้ "พฤติกรรม" ยังง่ายและสะดวกมากและความรู้ที่จำเป็นมีเพียงสไตล์ชีต CSS, คำสั่ง HTML และภาษาสคริปต์ JAVASCRIPT ที่เคยใช้อยู่แล้ว ตราบใดที่คุณรู้อะไรบางอย่างเกี่ยวกับมันและมีประสบการณ์การเขียนโปรแกรมจริง ก็ไม่มีปัญหาในการเรียนรู้และเชี่ยวชาญการใช้ "พฤติกรรม" เราจะนำองค์ประกอบ "พฤติกรรม" ที่เปลี่ยนเอฟเฟกต์แบบอักษรมาเป็นตัวอย่างเพื่อแสดงวิธีการเขียนและใช้ "พฤติกรรม" และสัมผัสกับข้อดีและความสะดวกที่ "พฤติกรรม" นำมาสู่การแก้ไขหน้า

ขั้นแรก สร้างไฟล์ข้อความใหม่ชื่อ font_efftce.htc ไฟล์ที่ประกอบเป็นองค์ประกอบ "behavior" ทั้งหมดจะมีนามสกุล .htc เนื้อหาในไฟล์นี้คือคำอธิบายของเราเกี่ยวกับ "พฤติกรรม" นี้ ขั้นตอนในการสร้างและใช้งานมีดังนี้:

(1) ขั้นแรกให้เพิ่มการตอบกลับเหตุการณ์ต่างๆ ให้กับ "พฤติกรรม" นี้ รูปแบบการเขียนคำสั่งมีดังนี้:

< PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="glowit()" / >

< PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="noglow()" / >

< PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="font2yellow()" / >

< PUBLIC:ATTACH EVENT="onmouseup" ONEVENT="font2blue ()" / >

"EVENT" สอดคล้องกับชื่อเหตุการณ์ที่จำเป็น ได้แก่: onmouseover, onmouseout, onmousedown, onmouseup แน่นอนว่าคุณสามารถเพิ่มชื่อเหตุการณ์อื่น ๆ เพื่อตอบสนองความต้องการเฉพาะของคุณได้ "ONEVENT" สอดคล้องกับตัวจัดการเหตุการณ์แต่ละรายการ นั่นคือ ชื่อของฟังก์ชันที่เรียกเมื่อเหตุการณ์ถูกทริกเกอร์ ฟังก์ชั่น Glowit() ใช้สำหรับสร้างแสงสีแดงรอบๆ ตัวอักษร ฟังก์ชัน noglow() จะลบเอฟเฟกต์เรืองแสงของแบบอักษร ฟังก์ชัน Font2yellow() เปลี่ยนสีตัวอักษรเป็นสีเหลือง ฟังก์ชั่น Font2blue() เปลี่ยนสีตัวอักษรเป็นสีน้ำเงิน คำจำกัดความของเหตุการณ์ทั้งสี่มีความคล้ายคลึงกัน

(2) ต่อไป ให้เพิ่มคำจำกัดความ "วิธีการ" อีกสองคำให้กับ "พฤติกรรม" นี้ โดยมีเนื้อหาดังนี้

< PUBLIC:METHOD NAME="move_down" / >

< PUBLIC:METHOD NAME="move_right" / >

พารามิเตอร์ "NAME" สอดคล้องกับชื่อ "method" ที่กำหนด move_down และ move_right เป็นชื่อฟังก์ชันที่สอดคล้องกับ "วิธีการ" ในการเลื่อนลงและไปทางขวาตามลำดับ โปรดทราบว่าอย่าใส่วงเล็บ "( )" หลังชื่อวิธีการ กล่าวคือ ห้ามเขียนเช่น "move_down()" ซึ่งไม่ได้รับอนุญาตในรูปแบบไวยากรณ์ของคำจำกัดความ "method"

(3) ขั้นตอนต่อไปคือการใช้คำสั่งสคริปต์ JAVASCRIPT เพื่อเขียนเนื้อหาฟังก์ชันที่สอดคล้องกับ "ตัวจัดการเหตุการณ์" และ "วิธีการ" ในสภาพแวดล้อม DHTML ที่คุ้นเคยเพื่อให้ได้ผลตามที่ต้องการ โปรดดูโปรแกรมต้นฉบับด้านล่างสำหรับเนื้อหาเฉพาะ พารามิเตอร์ "องค์ประกอบ" อ้างอิงถึงออบเจ็กต์ที่แนบ "พฤติกรรม" นี้ไว้ เนื่องจาก "พฤติกรรม" จะแนบกับองค์ประกอบบนเพจเสมอและทำงานผ่านองค์ประกอบนี้ ข้อความอื่นๆ เป็นเนื้อหาการเขียนโปรแกรม DHTML ทั้งหมด ดังนั้นฉันจะไม่พูดอะไรเพิ่มเติมเกี่ยวกับสิ่งเหล่านั้น หากคุณมีคำถามใดๆ คุณสามารถดูเอกสารการพัฒนา MSDN ของ Microsoft สำหรับเบราว์เซอร์ IE ซึ่งมีเนื้อหาอ้างอิงการเขียนโปรแกรม DHTML โดยละเอียด คำแนะนำในการใช้คุณสมบัติและวิธีการ และมีบทความและโปรแกรมตัวอย่างจำนวนมาก การเยี่ยมชมเอกสาร MSDN ของ Microsoft เป็นประจำถือเป็นนิสัยการเรียนรู้ที่ดี โดยเฉพาะสำหรับผู้เริ่มต้น คุณสามารถรับคำตอบได้เกือบทุกข้อที่คุณต้องการ URL คือ: http://msdn.microsoft.com/ie/

เนื้อหาของเอกสาร "พฤติกรรม" ที่สมบูรณ์ "font_effect.htc" มีดังนี้:

///////////////////////////////// The " เริ่มเอกสาร behavior" // ///////////////////////////////////

// เพิ่มเหตุการณ์เมาส์สี่เหตุการณ์ใน "behavior "

<PUBLIC:ATTACH EVENT= "onmouseover" ONEVENT="glowit()" / >

< PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="noglow()" / >

< PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="font2yellow ()" / >

< PUBLIC :ATTACH EVENT="onmouseup" ONEVENT="font2blue()" / >

//กำหนดสองวิธีสำหรับ "พฤติกรรม"

< PUBLIC:METHOD NAME="move_down" / >

< PUBLIC:METHOD NAME=" move_right" / >

< SCRIPT LANGUAGE="JScript" >

//กำหนดตัวแปรเพื่อจัดเก็บสีฟอนต์

var font_color;

//กำหนดวิธีการย้ายข้อความลง

ฟังก์ชัน move_down()

{

element.style.posTop+=2;

}

// กำหนดวิธีการย้ายข้อความไปยัง

ฟังก์ชันที่ถูกต้อง move_right()

{

element.style.posLeft +=6;

}

//กำหนดฟังก์ชันการเรียกเมาส์ onmouseup

ฟังก์ชันเหตุการณ์ font2blue(){

if (event.srcElement == element)

{

element.style.color='blue';

}

}

//กำหนดฟังก์ชันการเรียกของฟังก์ชัน onmousedown ของเมาส์

font2yellow(){

if (event.srcElement == element)

{

element.style.color='yellow'

}

}

//กำหนดฟังก์ชันการเรียกใช้

ฟังก์ชันเหตุการณ์เมาส์โอเวอร์ Glowit()

{

if (event.srcElement == element)

{

font_color=style.color;

element.style.color

='white';

(สี =แดง,ความแข็งแรง=2)";

}

}

//กำหนดฟังก์ชันการเรียกเมาส์ onmouseout

ฟังก์ชัน noglow()

{

if

(

==

element

)

{

element.style.filter="";

element.style.color=font_color;

// //////////////// สิ้นสุดเอกสาร "พฤติกรรม" ////////////////////////// ////// /

(4) วิธีใช้ "พฤติกรรม" บนเพจ

การใช้ส่วนประกอบ "พฤติกรรม" บนเพจไม่จำเป็นต้องเรียนรู้ความรู้ใหม่ ความรู้ที่จำเป็นไม่มีอะไรมากไปกว่าการตั้งค่าสไตล์ชีต CSS และ HTML โปรดดูข้อความต่อไปนี้

< STYLE >

.myfilter{behavior:url(font_effect.htc);position:relative;font-weight:bold;width=180;left:0;}

< /STYLE >

จะเห็นได้ว่าสิ่งนี้แตกต่างจากสไตล์ที่เราคุ้นเคย คุ้นเคยกันดีอยู่แล้ว การตั้งค่าตารางก็เหมือนกันทุกประการ ข้อความข้างต้นกำหนดชื่อสไตล์: "myfilter" ซึ่งเนื้อหาที่ค่อนข้างใหม่สำหรับเราคือ: "behavior:url(font_effect.htc);", "behavior" คือชื่อของแอตทริบิวต์ "behavior" ใหม่ ซึ่งก็คือ วิธีการตั้งค่า "พฤติกรรม" ในสไตล์ชีต เนื้อหาในวงเล็บคือชื่อไฟล์ของเอกสาร "behavior" ในตัวอย่างนี้ ระบุว่าเอกสาร "behavior" อยู่ในไดเร็กทอรีเดียวกับไฟล์เพจ หากวางเอกสาร "behavior" ไว้ในไดเร็กทอรีอื่น ให้เพิ่ม "behavior" หน้าพารามิเตอร์นี้ ชื่อพาธที่สอดคล้องกันเพื่อให้แน่ใจว่าเอกสาร Behavior สามารถระบุตำแหน่งได้อย่างถูกต้อง เนื้อหาที่เหลือใน "สไตล์" นี้เป็นเพียงการตั้งค่าแอตทริบิวต์สไตล์ปกติ ซึ่งสามารถเพิ่มหรือลดได้ตามความต้องการของคุณ แต่ในตัวอย่างนี้ เนื่องจากการใช้เอฟเฟกต์ฟิลเตอร์ "เรืองแสง" แอตทริบิวต์ความกว้างอย่างน้อยหนึ่งรายการ จะต้องตั้งค่า จากข้อกำหนดลักษณะข้างต้น เราจึงมีสไตล์ชื่อ: "myfilter" ซึ่งมาพร้อมกับ "พฤติกรรม" พร้อมเอฟเฟกต์การเปลี่ยนแบบอักษร หากคุณต้องการใช้สไตล์นี้กับ "พฤติกรรม" ในองค์ประกอบของหน้า ก็ง่ายมาก เพียงวาง "ชื่อสไตล์" ในพื้นที่การตั้งค่าแอตทริบิวต์ของส่วนประกอบ ดูข้อความต่อไปนี้

< span id="myspan" class='myfilter' >เอฟเฟกต์ข้อความที่เกิดจากพฤติกรรม< /span >< br >

< span class='myfilter' >เรืองแสงหลังจากตัวชี้เมาส์</span>

ไม่มีอะไรใหม่ใน คำสั่งข้างต้น Content, class='myfilter' คือการตั้งค่าสไตล์ที่เราคุ้นเคย แท็ก "id" ยังถูกกำหนดไว้ในแอตทริบิวต์ของแท็ก "span" แรกด้วย ดังที่คุณจะเห็นในภายหลัง นี่เป็นการตั้งค่าให้สาธิตการเรียก "วิธีการ" ภายใน "พฤติกรรม" หลังจากการตั้งค่านี้ เนื้อหาในคอมโพเนนต์ "span" สามารถแสดงผลที่กำหนดไว้ล่วงหน้าในคอมโพเนนต์ "พฤติกรรม" ได้ดังนี้

1. เมื่อตัวชี้เมาส์เลื่อนไปเหนือเนื้อหาข้อความ เอฟเฟกต์เรืองแสงสีแดงจะถูกสร้างขึ้นรอบๆ ข้อความ และข้อความจะเปลี่ยนเป็นสีขาว

2. เมื่อกดปุ่มเมาส์ สีข้อความจะเปลี่ยนเป็นสีเหลือง

3. เมื่อยกปุ่มเมาส์ สีข้อความจะเปลี่ยนกลับเป็นสีน้ำเงิน

4. เมื่อตัวชี้เมาส์เคลื่อนออกนอกพื้นที่ข้อความ เอฟเฟกต์เรืองแสงสีแดงจะถูกลบออก และข้อความจะกลับสู่ลักษณะดั้งเดิม

นอกจากนี้ เราได้กำหนด "วิธีการ" สองวิธีเมื่อกำหนด "พฤติกรรม", "move_down" และ "move_right" หากต้องการเรียก "วิธีการ" ทั้งสองนี้ จะมีการกำหนดปุ่มสองปุ่มไว้:

< button onclick="myspan.move_right();" >ย้ายบรรทัดแรกของข้อความไปทางขวา</button >< br >

< button onclick="myspan.move_down ();" >ย้ายบรรทัดแรกของข้อความลงด้านล่าง</button>

ใช้เหตุการณ์ onclick ของปุ่มเพื่อเรียก "เมธอด" ทั้งสองนี้ แท็ก "id" ที่กำหนดไว้ก่อนหน้านี้ใช้เป็นชื่ออ็อบเจ็กต์ของส่วนประกอบ ใช้ " myspan.move_down" เพื่อเรียก "วิธีการ" เพื่อจัดการวัตถุนี้ จะเห็นได้ว่าหลังจากกดปุ่มที่เกี่ยวข้องแล้ว ข้อความในบรรทัดแรกจะเลื่อนลงหรือไปทางขวา แม้ว่าจะใช้เพียงบรรทัดแรกของข้อความในการสาธิต แต่จริงๆ แล้ว คุณยังสามารถย้ายวัตถุอื่นๆ ได้ตราบใดที่คุณทำการตั้งค่าที่เกี่ยวข้อง เนื้อหาทั้งหมดของเอกสารต้นฉบับของหน้ามีดังนี้:

< html >

< HEAD >

< TITLE > การสาธิตเอฟเฟกต์พฤติกรรม < /TITLE >

< STYLE >

.myfilter{behavior:url(font_effect.htc);position:relative;font-weight :bold; width=180;left:0;}

< /STYLE >

< /HEAD >

< BODY >

< span id="myspan" class='myfilter' >เอฟเฟกต์ข้อความที่เกิดจากพฤติกรรม< /span >< br >

< span class=' myfilter' >เรืองแสงหลังจากตัวชี้เมาส์< /span >< br >

< span class='myfilter' >ในเวลาเดียวกัน ข้อความจะเปลี่ยนเป็นสีขาว< /span >< br >

< span class='myfilter ' >ข้อความเปลี่ยนเป็นสีเหลืองหลังจากกดเมาส์ </ /span >< br >

< span class='myfilter' >ข้อความเปลี่ยนเป็นสีน้ำเงินหลังจากยกเมาส์ขึ้น< /span >< br >

< span class='myfilter' >ข้อความจะกลับสู่สถานะเดิมหลังจากที่เลื่อนเมาส์ออกไป< /span >< br >

< button onclick="myspan.move_right();" >ย้ายบรรทัดแรกของข้อความไปทางขวา</ /button >< br >

< ปุ่ม onclick="myspan.move_down();" >ย้ายบรรทัดแรกของข้อความลง</ /button >

</ /BODY >

</ /html >

จากการแนะนำสั้นๆ ข้างต้น เราจะเห็นว่าเราสามารถรวมเข้าด้วยกันได้อย่างง่ายดาย เอฟเฟกต์การเปลี่ยนแปลงข้อความหลายรายการใน "พฤติกรรม" เดียวในเวลาเดียวกัน และเปลี่ยนโดยพลการผ่านการตั้งค่า "สไตล์" ที่เรียบง่าย ซึ่งเกี่ยวข้องกับส่วนประกอบของหน้า ซึ่งสะท้อนถึงข้อดีและฟังก์ชันอันทรงพลังของส่วนประกอบ "พฤติกรรม" ส่วนประกอบ "พฤติกรรม" สามารถนำมาใช้ซ้ำได้ไม่เพียงแต่ภายในเพจเท่านั้น แต่ยังรวมถึงทุกเพจบนไซต์เดียวกันด้วย ลองจินตนาการดูว่า ถ้าคุณไม่ใช้ "พฤติกรรม" เพื่อให้ได้เอฟเฟกต์ข้างต้น แม้ว่าคุณจะสามารถเรียกใช้ชุดฟังก์ชันที่กำหนดไว้ล่วงหน้าในเพจเพื่อทำหน้าที่เดียวกันให้สมบูรณ์ได้ แต่แต่ละองค์ประกอบในเพจที่ใช้เอฟเฟกต์ข้อความจะมีเหตุการณ์เมาส์สี่เหตุการณ์ แนบมาด้วย หากใช้เอฟเฟ็กต์เดียวกันในหลายหน้า จะต้องตั้งค่าฟังก์ชันที่เรียกซ้ำๆ กันในแต่ละหน้าด้วย ในการเปรียบเทียบ เห็นได้ชัดว่าอันไหนดีกว่าและอันไหนแย่กว่า ดังนั้น เมื่อใช้องค์ประกอบ "พฤติกรรม" คุณสามารถสร้างเพจที่เรียบง่าย มีประสิทธิภาพ หลากหลาย และดูแลรักษาง่าย ตัวอย่างในบทความนี้เป็นเพียงการอธิบายการเขียนและการใช้กระบวนการขององค์ประกอบ "พฤติกรรม" เท่านั้น เพื่อให้ผู้อ่านมีความเข้าใจทั่วไปเกี่ยวกับการเขียนโปรแกรม "พฤติกรรม" และจากสิ่งนี้ พวกเขาจึงสามารถสร้างองค์ประกอบ "พฤติกรรม" ที่พวกเขาต้องการได้ หรืออ้างอิงโดยตรงเพื่อตอบสนองความต้องการส่วนบุคคล องค์ประกอบ "เชิงพฤติกรรม" สำเร็จรูป เนื่องจากแนวคิดของ "การแบ่งปันองค์ประกอบ" ก็เป็นจุดประสงค์ดั้งเดิมของนักพัฒนา "เชิงพฤติกรรม" เช่นกัน สุดท้ายนี้ ฉันหวังว่าบทความนี้จะสามารถตอบสนองจุดประสงค์ในการ "สร้างแรงบันดาลใจให้ผู้อื่น" และทำให้ผู้อ่านเข้าสู่โลกมหัศจรรย์ของการเขียนโปรแกรมเว็บ DHTML