วิธีเชื่อมโยง JavaScript กับ HTML และ CSS
เผยแพร่แล้ว: 2022-02-25การสร้าง ออกแบบ และเริ่มต้นหน้าเว็บหรือเว็บไซต์ของคุณเป็นเรื่องง่าย หากคุณมองข้ามข้อความ โค้ด และสคริปต์ทั้งหมดที่มักจะแออัดและเติมหน้าจอของคุณ ภาษาของ HTML, CSS และ JavaScript เป็นที่รู้จักและใช้กันอย่างแพร่หลาย เพื่อให้เข้าใจสิ่งนี้มากขึ้น เราต้องการคำจำกัดความเกี่ยวกับ 3 สิ่งนี้ทำให้เข้าใจได้ง่ายและตรงไปตรงมา
ก่อนที่เราจะดำเนินการต่อ ฉันอยากจะมีโอกาสขอบคุณ NaturHandel.dk และ Virksomhedsoplysninger.dk ที่ทำให้บทความนี้เป็นไปได้
ดังนั้น ให้เราแนะนำหน้าเว็บของคุณเป็นงานศิลปะ งานศิลปะนี้มีองค์ประกอบ 3 ประการที่จะทำให้เป็นผลงานชิ้นเอก สิ่งนี้จะเกิดขึ้นได้ก็ต่อเมื่อต้องแน่ใจว่าเครื่องมือทั้งหมดที่คุณต้องการในการเริ่มแกะสลัก ระบายสี หรือสร้างงานของคุณมีการวางแผนและกำหนดอย่างถี่ถ้วนว่าอุปกรณ์เหล่านี้จะมีส่วนช่วยในงานศิลปะของคุณอย่างไร ประกอบด้วย (HTML) กระดาษหรือฐานของงานศิลปะ (CSS) สีและการออกแบบรวมอยู่ในฐานของคุณและสุดท้าย (JavaScript) วัตถุประสงค์และฟังก์ชันการทำงานของงานศิลปะนี้ ด้วยทั้งสามสิ่งนี้ ความสัมพันธ์ที่กลมกลืนกันถูกสร้างขึ้นเพื่อให้ทุกคนได้เห็น ใช้ และเป็นส่วนหนึ่ง
เรามาทำลายมันกันต่อไป เพื่อให้เราสามารถเชื่อมโยงความสัมพันธ์ที่ภาษาเหล่านี้มีได้อย่างเต็มที่ เราจะ:
HTML
- ภาษามาร์กอัปไฮเปอร์เท็กซ์ของคุณ
- ผืนผ้าใบเปล่าพร้อมชุดมาตรฐานทั้งหมด ผลงานชิ้นเอกของคุณจะตามมา
- ระบุข้อความ ชื่อเรื่อง และการดำเนินการที่จำเป็นสำหรับหน้าเว็บของคุณที่นี่
- นี่คือส่วนที่ส่วนอื่นๆ ทั้งหมดของคุณจะถูกโฮสต์ กำหนด หรือรวมเข้าด้วยกัน
- ที่ UI อยู่
CSS
- แผ่นสไตล์ Cascading
- ที่นี่คุณสามารถเข้าถึง ตกแต่ง ออกแบบ ตัดสินใจขนาด และเพิ่มสีสันให้กับงานศิลปะหรือหน้าเว็บของคุณตามแนวคิดหรือร่างแรกที่คุณทำบนผืนผ้าใบของคุณ องค์ประกอบด้านความงามทั้งหมดสามารถกำหนดได้ที่นี่ และป้อนข้อมูลที่นี่เพื่อให้ผู้ชมของคุณเห็น
JavaScript
- ภาษาที่คุณใช้ในหน้าเว็บหรืองานศิลปะของคุณที่กำหนดกราฟิก แอนิเมชั่น และเสียง
- หากคุณต้องการให้งานศิลปะของคุณได้รับโบนัสจากคุณสมบัติและฟังก์ชันอื่นๆ นี่เป็นส่วนที่รับผิดชอบ
- คิดว่ามันเป็นโบนัสและเพิ่มเปลวไฟให้กับงานศิลปะของคุณ
- สิ่งนี้มีหน้าที่อำนวยความสะดวกในขั้นตอนต่อไปสำหรับปุ่ม ลิงก์ ไอคอน และทุกอย่างที่เกี่ยวข้องกับสิ่งที่คลิกได้บนหน้าเว็บของคุณ
- สิ่งนี้กำหนดว่างานศิลปะของคุณเกี่ยวกับอะไรและมีไว้เพื่ออะไร
เพื่อให้แน่ใจว่าอาร์ตเวิร์กหรือหน้าเว็บของคุณใช้ประโยชน์สูงสุดจากองค์ประกอบ JavaScript ของคุณ คุณต้องแนะนำฟังก์ชันที่ต้องทำอย่างชัดเจนในแท็กของคุณ หัวข้อข่าวหรือข้อความของคุณจะสามารถเปลี่ยนเส้นทางคุณไปยังหน้าป๊อปอัปตามลิงก์/ลิงก์ที่แนบมาเมื่อคลิก เล่นวิดีโอ หรือนำเสนอรูปภาพ ภาษานี้ (JavaScript) รับผิดชอบการทำงานด้านกราฟิกของคุณและการดำเนินการอื่นๆ ทั้งหมดเมื่อมีการคลิกข้อความ ปุ่ม หรือไอคอนบนหน้าเว็บของคุณ
แต่เพื่อให้บรรลุสิ่งนี้ คุณต้องรวมองค์ประกอบเชื่อมโยงในคำสั่งของคุณ ซึ่งจะทำให้ภาษาของคุณเข้าใจฟังก์ชันที่คุณต้องการดำเนินการ กุญแจสำคัญในการทำให้การโต้ตอบทำงานในอินเทอร์เฟซผู้ใช้ของคุณถูกกำหนดโดยการมีอยู่ของ "แท็ก" ของคุณ แท็กนี้เป็นวิธีการของไซต์ของคุณในการค้นหาว่าอยู่ที่ใด ทำความเข้าใจกับสิ่งที่คุณต้องการทำ และจังหวะหรือความเร็วของหน้าเว็บที่ต้องใช้ในขณะที่โหลดบนเบราว์เซอร์ของคุณ แท็กของคุณสามารถรวมหรือรวมไว้ในไฟล์ส่วนหัว เนื้อหา หรือภายนอกที่คุณต้องการเพิ่มในไซต์ของคุณ เนื่องจากเป็นวิธีการทั่วไป (แท็กสคริปต์) จึงมีวิธีอื่นๆ ในการเชื่อมโยง JavaScript ของคุณ ขึ้นอยู่กับความชอบและอินเทอร์เฟซของคุณ
ต่อไปนี้เป็นหมายเหตุโดยละเอียดเกี่ยวกับวิธีการเชื่อมโยง JavaScript ของคุณ (กับ HTML และ CSS):
HTML พร้อมแท็กสคริปต์
<title>จาวาสคริปต์</title>
ในตัวอย่างนี้ คุณอาจเชื่อมโยง JavaScript ของคุณผ่าน HTML ด้วยวิธีนี้ เมื่อโหลด สิ่งนี้จะถูกมองว่าเป็น “JavaScript” เป็นชื่อในหน้าเว็บของคุณ
HTML ผ่านการเขียนโปรแกรมโค้ด
ใช้มากขึ้นสำหรับการทำงานแบบไดนามิกในหน้า เช่น การเปลี่ยนสี ขนาดของข้อความ ภาพเคลื่อนไหว ฯลฯ ซึ่งสามารถจัดการในภาษาของคุณผ่าน <script type=”text/JavaScript”> ('<body style=”background-color : (ใส่สีที่ต้องการ)”>')
โปรดจำไว้ว่า คุณอาจใช้โค้ด JavaScript ภายในในส่วนนี้ จากนั้นจึงแปลงโค้ดได้เช่นกัน หากมีข้อผิดพลาดเนื่องจากคุณยังคงสามารถจัดการฟังก์ชันนี้ในลักษณะอื่นที่แสดงต่อไปได้
HTML ผ่านแยกไฟล์
คุณอาจลองใช้เป็นไฟล์แยกต่างหากที่ไม่มีแท็กสคริปต์ผ่าน javascript.js แต่เทคนิคนี้ค่อนข้างยุ่งยาก เนื่องจากจะทำให้สับสนว่าเบราว์เซอร์หาโค้ดที่ตำแหน่งใดและอาจนำไปสู่ข้อผิดพลาดได้
เพื่อหลีกเลี่ยงข้อผิดพลาดเหล่านี้เมื่อใช้วิธีนี้ ให้แนบพาธเพื่อเปิดใช้งานทิศทางผ่าน <script src=(insert “PATH”)>
CSS ผ่านแท็กสไตล์
ในเนื้อความของ HTML ของคุณ ให้เพิ่มสิ่งที่สามารถระบุถึงสไตล์ที่มีการเชื่อมโยงของทั้งสอง (หรือวิธีที่คุณต้องการแสดงข้อความของคุณ) ผ่าน <title>การเชื่อมโยงไปยัง CSS และ JavaScript</title>
องค์ประกอบลิงก์ของคุณควรวางแท็ก JavaScript ระหว่างเอกสารต้นฉบับและ
HTML ด้วยวิธีนี้ ความสัมพันธ์ของรหัสที่เกี่ยวข้องแต่ละรหัสจึงถูกนำมาประกอบอย่างเป็นธรรม
แม้ว่าแนะนำว่าไม่จำเป็นต้องทำในกรณีส่วนใหญ่ เนื่องจากฟังก์ชันบางอย่างใน CSS และ JavaScript สามารถส่งมอบสิ่งที่มาจากพวกเขาได้ แต่ก็ยังเป็นไปได้
คุณสามารถจัดการสีพื้นหลังของเพจ ขนาดข้อความหรือแบบอักษร และไดนามิกของข้อความได้ที่นี่
คุณสามารถเพิ่มการดำเนินการปรับแต่งรูปภาพของไซต์ของคุณหรือการเปลี่ยนแปลงเนื้อหาแบบไดนามิกและการตรวจสอบแบบฟอร์มในฟังก์ชันของหน้าเว็บของคุณทั้งหมดโดยใช้พารามิเตอร์เหล่านี้ ทำให้งานศิลปะหรือหน้าเว็บของคุณครอบคลุมมากขึ้นผ่านสิ่งนี้ คำสั่งเหล่านี้จะช่วยให้คุณสามารถนำเข้าไฟล์ภายนอกและภายในเพื่อแนบไฟล์เหล่านี้ในโค้ด JavaScript ได้ เช่นเดียวกับในกรณีของ HTML แต่ไม่จำเป็นใน CSS ของคุณ ดังนั้น โปรดจำไว้ว่า ให้แทรกสคริปต์หรือแท็กก่อนฝัง JavaScript เพื่อให้เว็บไซต์หรือ HTML ของคุณเข้าใจภาษาของคุณ และจะรู้ว่าพวกเขาสามารถแปลฟังก์ชันที่คุณจัดการเพื่อดำเนินการโดยตรงได้อย่างไร หน้าของคุณขึ้นอยู่กับตรรกะที่คำสั่งของคุณมีอินพุตระหว่างแท็กสคริปต์ โค้ด และการเขียนโปรแกรมของคุณเป็นอย่างมาก เพื่อดำเนินการตามความเหมาะสมทีละขั้นตอน