วิธีหลักในการสร้างเอฟเฟกต์ไดนามิกบนหน้าเว็บคือการใช้สคริปต์ฝั่งไคลเอ็นต์ เป็นโค้ดบางส่วนที่ตีความโดยเอ็นจิ้นสคริปต์ของแอปพลิเคชันที่แสดงเอกสาร JavaScript เป็นภาษาโปรแกรมยอดนิยมที่ใช้สำหรับการเขียนสคริปต์ เพื่อให้สคริปต์สามารถดำเนินการได้ จะต้องแทรกสคริปต์ลงในเอกสารด้วยวิธีใดวิธีหนึ่ง
มันจำเป็น
- - รหัสสคริปต์;
- - เอกสารต้นทาง
- - โปรแกรมแก้ไขข้อความ
คำแนะนำ
ขั้นตอนที่ 1
กำหนดวิธีที่ดีที่สุดในการแทรกสคริปต์ หากสันนิษฐานว่าจะใช้สคริปต์เดียวกันในเอกสารที่ต่างกัน ก็ควรย้ายสคริปต์นั้นไปยังไฟล์ภายนอกและเชื่อมต่อจากที่นั่น มิฉะนั้น ควรฝังข้อความสคริปต์ในเนื้อหาของหน้า หากขนาดของสคริปต์มีขนาดใหญ่ ควรวางไว้ในบล็อกแยกต่างหากในเอกสาร หากรหัสโปรแกรมมีปริมาณน้อยและดำเนินการตอบสนองต่อเหตุการณ์ใดๆ อนุญาตให้วางไว้ในแอตทริบิวต์ที่กำหนดตัวจัดการเหตุการณ์ในตัวขององค์ประกอบหรือแอตทริบิวต์ href ของลิงก์
ขั้นตอนที่ 2
วางสคริปต์จากแหล่งภายนอก เพิ่มองค์ประกอบ SCRIPT ด้วยแอตทริบิวต์ src และ type ที่ระบุไปยังเนื้อหาเอกสารหรือส่วน HEAD ตัวอย่างเช่น คุณสามารถทำเช่นนี้: ค่าของแอตทริบิวต์ src ต้องเป็น URI ที่ชี้ไปยังทรัพยากรที่จะโหลดข้อความสคริปต์ แอตทริบิวต์ charset เป็นทางเลือก ระบุการเข้ารหัสข้อความสคริปต์ แต่ถ้าละไว้ ค่าการเข้ารหัสจะถูกนำมาเป็นค่าการเข้ารหัสของเอกสารที่ใส่สคริปต์เข้าไป
ขั้นตอนที่ 3
แทรกสคริปต์ลงในข้อความของหน้า ใช้องค์ประกอบสคริปต์ที่มีข้อความสคริปต์อยู่ภายใน ตัวอย่างเช่น อาจมีลักษณะดังนี้:
alert ("สคริปต์กำลังทำงาน!");
ความคิดเห็น HTML ที่แนบโค้ดจำเป็นสำหรับความเข้ากันได้กับเบราว์เซอร์รุ่นเก่า คุณสามารถใช้ความคิดเห็น XML ในเอกสาร XHTML
ขั้นตอนที่ 4
แทรกโค้ดจาวาสคริปต์ลงในตัวจัดการเหตุการณ์แบบอินไลน์ ค้นหาองค์ประกอบในเอกสารที่มีเหตุการณ์ที่คุณต้องการจัดการ เพิ่มแอตทริบิวต์ที่กำหนดตัวจัดการที่เหมาะสม ตัวอย่างเช่น แอตทริบิวต์ที่ระบุตัวจัดการสำหรับการคลิกเมาส์บนองค์ประกอบคือ onclick ตัวจัดการสำหรับการสูญเสียสัญญาณโฟกัสคือ onblur และตัวจัดการการกดแป้นพิมพ์คือ onkeydown
ขั้นตอนที่ 5
ป้อนรหัสสคริปต์เป็นข้อความที่ระบุค่าของแอตทริบิวต์ที่เพิ่ม ตัวอย่างเช่น ในการแสดงข้อความเมื่อมีการคลิกองค์ประกอบ DIV ด้วยเมาส์ คุณสามารถใช้โครงสร้างต่อไปนี้: ข้อความ ข้อความ โปรดทราบว่าในการกำหนดตัวอักษรสตริงในโค้ดตัวจัดการองค์ประกอบแบบอินไลน์ คุณต้องใช้เครื่องหมายคำพูดประเภทอื่นที่ไม่ใช่ ที่ระบุค่าของแอตทริบิวต์ HTML …
ขั้นตอนที่ 6
เพิ่มสคริปต์ไปยังองค์ประกอบ href ของลิงก์ ค่า href ต้องเป็น URL ตัวอธิบายโปรโตคอลคือ "javascript:" และส่วนที่อยู่คือนิพจน์ที่คำนวณ ตัวอย่างเช่น: ลิงก์ข้อความ หากคุณต้องการใช้หลายนิพจน์ ให้ใช้บล็อกคำสั่งที่กำหนดโดยวงเล็บเหลี่ยม {และ}