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

โปรแกรมแรก

เพื่อให้โปรแกรม JavaScript (หรือสคริปต์) โปรแกรมแรกของคุณทำงานได้ จะต้องฝังไว้ในเอกสาร HTML
สคริปต์ถูกฝังอยู่ในเอกสาร HTML ด้วยวิธีมาตรฐานที่หลากหลาย:

• ใส่รหัสโดยตรงลงในแอตทริบิวต์เหตุการณ์ขององค์ประกอบ HTML
• วางโค้ดระหว่างแท็กเปิดและแท็กปิด
• ใส่สคริปต์ทั้งหมดของคุณลงในไฟล์ภายนอก (ที่มีนามสกุล .js) จากนั้นลิงก์ไปยังเอกสาร HTML

JavaScript ในองค์ประกอบสคริปต์

วิธีที่ง่ายที่สุดในการฝัง JavaScript ลงในเอกสาร HTML คือการใช้นามสกุล . แท็กมักจะถูกวางไว้ภายในองค์ประกอบ และก่อนหน้านี้วิธีนี้ถือว่าเกือบจะบังคับ อย่างไรก็ตาม ปัจจุบันนี้มีการใช้แท็กทั้งในองค์ประกอบและในส่วนเนื้อหาของหน้าเว็บ

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

นี่เป็นเอกสาร HTML ปกติ

เราออกจากกลับไปที่ HTML

โปรดทราบ: เราระบุแอตทริบิวต์ภาษาของแท็ก ซึ่งระบุภาษาการเขียนโปรแกรมที่ใช้เขียนสคริปต์ ค่าเริ่มต้นของแอตทริบิวต์ภาษาคือ JavaScript ดังนั้นหากคุณใช้ JavaScript คุณสามารถละเว้นแอตทริบิวต์ภาษาได้

JavaScript ในแอตทริบิวต์เหตุการณ์องค์ประกอบ HTML

สคริปต์ข้างต้นถูกดำเนินการเมื่อเปิดเพจและส่งออกสตริง: "Hello, world!" อย่างไรก็ตาม คุณไม่ต้องการให้สคริปต์เริ่มทำงานทันทีเมื่อคุณเปิดเพจเสมอไป โดยส่วนใหญ่ คุณต้องการให้โปรแกรมทำงานเมื่อมีเหตุการณ์บางอย่างเกิดขึ้น เช่น เมื่อกดปุ่ม

ตัวอย่างต่อไปนี้จะวางฟังก์ชัน JavaScript ไว้ในส่วนของเอกสาร HTML นี่คือตัวอย่างขององค์ประกอบ HTML ที่มีแอตทริบิวต์เหตุการณ์ที่ตอบสนองต่อการคลิกเมาส์ เมื่อคลิกปุ่ม เหตุการณ์ onclick จะถูกสร้างขึ้น

สวัสดีชาวโลก!

คลิกฉัน

จาวาสคริปต์ภายนอก

หากมีโค้ด JavaScript จำนวนมาก โค้ดนั้นจะถูกแยกออกเป็นไฟล์แยกต่างหาก ซึ่งตามกฎแล้วจะมีนามสกุล .js

หากต้องการรวมโค้ด JavaScript จากไฟล์ภายนอกในเอกสาร HTML คุณต้องใช้แอตทริบิวต์ src (แหล่งที่มา) ของแท็ก ค่าควรเป็น URL ของไฟล์ที่มีรหัส JS:

ตัวอย่างนี้ระบุเส้นทางที่แน่นอนไปยังไฟล์ชื่อ script.js ที่มีสคริปต์ (จากรากของไซต์) ตัวไฟล์ควรมีเฉพาะโค้ด JavaScript เท่านั้น มิฉะนั้นจะอยู่ระหว่างแท็ก และ

โดยการเปรียบเทียบกับองค์ประกอบ คุณลักษณะ src ขององค์ประกอบสามารถกำหนด URL แบบเต็มที่ไม่เกี่ยวข้องกับโดเมนของหน้า HTML ปัจจุบัน:

หากต้องการเชื่อมต่อหลายสคริปต์ ให้ใช้หลายแท็ก:

...

หมายเหตุ: องค์ประกอบที่มีแอตทริบิวต์ src ไม่สามารถมีโค้ด JavaScript เพิ่มเติมระหว่างแท็ก และ แม้ว่าสคริปต์ภายนอกจะถูกเรียกใช้งาน แต่โค้ดแบบอินไลน์จะถูกละเว้น

หากมีแอตทริบิวต์ src ภายในแท็กสคริปต์จะถูกละเว้น!

ไม่ว่าโค้ด JS จะรวมอยู่ในเอกสาร HTML อย่างไร องค์ประกอบต่างๆ จะถูกตีความโดยเบราว์เซอร์ตามลำดับที่ปรากฏในเอกสาร HTML รหัสขององค์ประกอบแรกจะถูกตีความก่อน จากนั้นเบราว์เซอร์จะไปยังองค์ประกอบที่สอง และต่อๆ ไป

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

หมายเหตุ: คัดลอกเฉพาะโค้ด JavaScript ไปยังไฟล์ภายนอกโดยไม่ระบุแท็กเปิดและปิด และ .

แท็กตำแหน่ง

คุณรู้อยู่แล้วว่าเบราว์เซอร์อ่านเอกสาร HTML จากบนลงล่างและเริ่มเรนเดอร์เพจโดยแสดงส่วนของเอกสารจนถึงไฟล์. เมื่อพบแท็ก มันจะสลับไปที่โหมด JavaScript และรันสคริปต์ เมื่อเสร็จแล้ว จะกลับสู่โหมด HTML และแสดงส่วนที่เหลือของเอกสาร

สิ่งนี้แสดงให้เห็นอย่างชัดเจนจากตัวอย่างต่อไปนี้ เมธอด alert() จะแสดงหน้าต่างโมดอลพร้อมข้อความและหยุดการทำงานของสคริปต์ชั่วคราวจนกว่าผู้ใช้จะคลิกตกลง:

จุดเริ่มต้นของเนื้อหา...

เนื้อหาต่อ

หากหน้าเว็บใช้ JavaScript จำนวนมาก อาจมีความล่าช้าในการโหลดนานในระหว่างที่ผู้ใช้เห็นหน้าต่างเบราว์เซอร์ว่างเปล่า ดังนั้นจึงถือเป็นแนวปฏิบัติที่ดีที่จะรวมลิงก์ทั้งหมดไปยังสคริปต์ JavaScript หลังเนื้อหาหน้า ก่อนแท็กปิด:

การจัดเรียงสคริปต์นี้ทำให้เบราว์เซอร์สามารถโหลดเพจได้เร็วขึ้นโดยการโหลดเนื้อหาของเพจก่อนที่จะโหลดโค้ดสคริปต์
สิ่งนี้จะดีกว่าสำหรับผู้ใช้ เนื่องจากเพจถูกแสดงผลอย่างสมบูรณ์ในเบราว์เซอร์ก่อนที่จะประมวลผลโค้ด JavaScript

สคริปต์ที่ขี้เกียจและอะซิงโครนัส

ตามที่ระบุไว้ก่อนหน้านี้ ตามค่าเริ่มต้น ไฟล์โค้ด JavaScript จะขัดจังหวะการแยกวิเคราะห์เอกสาร HTML จนกว่าสคริปต์จะถูกดาวน์โหลดและดำเนินการ ซึ่งจะช่วยเพิ่มระยะเวลาก่อนที่เพจจะแสดงผลครั้งแรก
ลองมาดูตัวอย่างที่มีองค์ประกอบอยู่ที่ไหนสักแห่งตรงกลางหน้า:

ข้อความบางส่วน... ข้อความนี้จะไม่ปรากฏจนกว่าเบราว์เซอร์จะดำเนินการ script.js

ในตัวอย่างนี้ จนกว่าเบราว์เซอร์จะดาวน์โหลดและเรียกใช้งาน script.js เบราว์เซอร์จะไม่แสดงส่วนของหน้าที่อยู่ข้างใต้ ลักษณะการทำงานของเบราว์เซอร์นี้เรียกว่า "ซิงโครนัส" และอาจทำให้เกิดปัญหาได้หากเราโหลดไฟล์ JavaScript หลายไฟล์บนหน้าเว็บ เนื่องจากจะทำให้เวลาในการเรนเดอร์นานขึ้น

จะเกิดอะไรขึ้นถ้าเอกสาร HTML ไม่ได้ขึ้นอยู่กับไฟล์ JS เหล่านี้จริงๆ แต่นักพัฒนาต้องการควบคุมวิธีการโหลดและดำเนินการไฟล์ภายนอก

คุณลักษณะ async และ defer ขององค์ประกอบจะช่วยแก้ปัญหาการโหลดสคริปต์อย่างรุนแรง

แอตทริบิวต์อะซิงโครนัส

Async ใช้เพื่อระบุให้เบราว์เซอร์ทราบว่าสคริปต์สามารถดำเนินการได้ "แบบอะซิงโครนัส"

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

ไม่รับประกันสคริปต์ที่มีแอตทริบิวต์ async ว่าจะรันสคริปต์ตามลำดับที่เพิ่มเข้าไป เช่น:

ในตัวอย่าง สคริปต์ที่สองอาจถูกดำเนินการก่อนสคริปต์แรก ดังนั้นจึงเป็นสิ่งสำคัญที่ไม่มีการขึ้นต่อกันระหว่างสคริปต์เหล่านี้

หมายเหตุ: แอ็ตทริบิวต์ async ถูกใช้หากคุณต้องการอนุญาตให้เบราว์เซอร์โหลดเพจต่อโดยไม่ต้องรอให้การดาวน์โหลดเสร็จสิ้นและสคริปต์ดำเนินการ

เลื่อนแอตทริบิวต์

คุณลักษณะ defer เลื่อนการเรียกใช้สคริปต์จนกว่าหน้า HTML ทั้งหมดจะโหลดเต็ม

เช่นเดียวกับการโหลดสคริปต์แบบอะซิงโครนัส คุณสามารถโหลดไฟล์ JS ในขณะที่เอกสาร HTML ยังคงโหลดอยู่ อย่างไรก็ตาม แม้ว่าสคริปต์จะโหลดเสร็จสมบูรณ์ก่อนที่เบราว์เซอร์จะประมวลผลเพจเสร็จ สคริปต์นั้นจะไม่ถูกดำเนินการจนกว่าเอกสาร HTML จะได้รับการประมวลผลอย่างสมบูรณ์

แม้ว่าในตัวอย่างข้างต้น แท็กจะรวมอยู่ในองค์ประกอบเอกสาร HTML สคริปต์จะไม่เริ่มทำงานจนกว่าเบราว์เซอร์จะไปถึงแท็กปิด

นอกจากนี้ ลำดับที่สัมพันธ์กันของการดำเนินการของสคริปต์ที่มีแอตทริบิวต์ defer จะถูกรักษาไว้ ซึ่งต่างจาก async

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

หมายเหตุ: แอ็ตทริบิวต์ async และ defer รองรับเฉพาะไฟล์สคริปต์ภายนอกเท่านั้น เช่น ทำงานเฉพาะเมื่อมีแอตทริบิวต์ src อยู่

ผลลัพธ์

• คุณสามารถเพิ่ม JavaScript ลงในเอกสาร HTML โดยใช้องค์ประกอบได้สองวิธี:
  • กำหนดสคริปต์อินไลน์ที่อยู่ระหว่างคู่และแท็กโดยตรง
  • เชื่อมต่อไฟล์ภายนอกด้วยโค้ด JavaScript ผ่าน .
• หากใช้โค้ด JavaScript ในหลายเพจ จะเป็นการดีกว่าถ้ารวมโค้ดดังกล่าวเป็นสคริปต์ภายนอก สิ่งนี้อำนวยความสะดวกอย่างมากในการบำรุงรักษาและแก้ไขโค้ด และยังเพิ่มความเร็วในการโหลดและประมวลผลหน้าเว็บ - สคริปต์ภายนอกจะถูกโหลดโดยเบราว์เซอร์เพียงครั้งเดียว (หลังจากนั้นจะถูกดึงมาจากแคชของเบราว์เซอร์)
• คุณลักษณะ defer จะส่งสัญญาณไปยังเบราว์เซอร์ว่าการโหลดสคริปต์สามารถเริ่มต้นได้ทันที แต่การดำเนินการควรล่าช้าออกไปจนกว่าเอกสาร HTML ทั้งหมดจะโหลดเสร็จ
• ในกรณีที่ไฟล์สคริปต์มีฟังก์ชันที่โต้ตอบกับเอกสาร HTML ที่กำลังโหลด หรือในกรณีที่มีการพึ่งพาไฟล์อื่นบนเพจ เอกสาร HTML จะต้องโหลดอย่างสมบูรณ์ก่อนที่จะเรียกใช้สคริปต์ ตามกฎแล้ว ลิงก์ไปยังสคริปต์ JavaScript ดังกล่าวจะถูกวางไว้ที่ด้านล่างของหน้าก่อนแท็กปิด เพื่อให้แน่ใจว่าเอกสารทั้งหมดได้รับการแยกวิเคราะห์เพื่อให้ทำงานได้ อย่างไรก็ตาม ในสถานการณ์ที่ต้องวางไฟล์ JS ไว้ที่อื่นในเอกสาร ด้วยเหตุผลบางประการ แอตทริบิวต์ defer อาจมีประโยชน์ได้
• คุณลักษณะ defer จะรักษาลำดับสัมพันธ์ของการดำเนินการสคริปต์ ในขณะที่ async จะไม่รักษา
• สคริปต์ที่มีแอตทริบิวต์ async จะถูกดำเนินการแบบอะซิงโครนัสกับการประมวลผลเพจ เมื่อสคริปต์ถูกโหลด สคริปต์จะถูกดำเนินการแม้ว่าเอกสาร HTML จะยังไม่พร้อมอย่างสมบูรณ์ก็ตาม
• สำหรับไฟล์ JS ที่ไม่ขึ้นอยู่กับไฟล์อื่น แอ็ตทริบิวต์ async จะมีประโยชน์มากที่สุด เนื่องจากเราไม่สนใจว่าสคริปต์จะถูกดำเนินการเมื่อใด การโหลดแบบอะซิงโครนัสจึงเป็นตัวเลือกที่เหมาะสมที่สุด

งาน

• หน้าต่างป๊อปอัป

  นี่คือเอกสาร HTML อย่างง่าย วางสคริปต์ในส่วนเนื้อหาของหน้า HTML ที่แสดงหน้าต่างป๊อปอัปที่ระบุว่า: "เฮ้ javascript!"

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

นอกจากนี้ ในวิดีโอบทแนะนำนี้ เราจะสรุปการสนทนาเกี่ยวกับแผนที่รูปภาพ เราพูดคุยเกี่ยวกับเรื่องนี้กันมานานแล้ว แต่ฉันได้โอนการออกแบบภาพของวัตถุรูปภาพไปยังส่วนสคริปต์เพื่อไม่ให้เกิดความสับสนหรือความเข้าใจผิดในหัวของเรา ดังนั้นนี่คือ วันนี้เราจะปิดคำถามในการเพิ่มแผนที่รูปภาพแบบโต้ตอบลงในเอกสาร HTML อย่างสมบูรณ์ และรวมสคริปต์ที่จะช่วยเน้นวัตถุในภาพ

สคริปต์คืออะไร?

ฉันจะไม่อธิบายแนวคิดทางเทคนิคและแนวคิดอันชาญฉลาดใดๆ เราทุกคนรู้มานานแล้วว่า HTML คืออะไรและจำเป็นในการสร้างกรอบงานเว็บไซต์ แต่นอกเหนือจากกรอบในการสร้างเว็บไซต์แล้วยังต้องกำหนดค่าและออกแบบให้เหมาะสมอีกด้วย CSS สามารถช่วยเราได้ในเรื่องนี้ และจำเป็นต้องมีสคริปต์เพื่อขยายฟังก์ชันการทำงานของไซต์ โดยทั่วไปเพื่อเพิ่มไดนามิกให้กับเว็บไซต์ของเรา

สคริปต์ที่เราจะพูดถึงนั้นเป็นสคริปต์เฉพาะของเว็บไซต์และใช้ภาษาเช่น JavaScript และ JQuery ฉันสังเกตเห็นสิ่งนี้เนื่องจากแนวคิดของสคริปต์ค่อนข้างกว้างและใช้ในทิศทางที่ต่างกัน ในกรณีของเราคือเว็บไซต์

สคริปต์ในรูปแบบ HTML

ในกรณีของเรา เราจะใช้แท็ก HTML สองแท็กที่จะช่วยให้เราเชื่อมโยงสคริปต์

แท็ก HTML ได้รับการออกแบบมาเพื่อเชื่อมต่อสคริปต์กับหน้า HTML ในเวลาเดียวกัน เราสามารถใช้วิธีการเชื่อมต่อได้หลากหลาย เนื่องจากโค้ดสคริปต์สามารถอยู่ในไฟล์แยกต่างหาก ซึ่งสามารถอยู่ที่ใดที่หนึ่งบนเซิร์ฟเวอร์บุคคลที่สามหรือบนเซิร์ฟเวอร์ของเรา หรือฝังโดยตรงในโค้ด HTML ของเอกสาร .

แท็ก HTML มีวัตถุประสงค์เพื่อแจ้งให้ผู้เยี่ยมชมเพจทราบว่าการสนับสนุนสคริปต์ถูกปิดใช้งานในเบราว์เซอร์ของเขาหรือไม่มีอยู่เลย ซึ่งหมายความว่าเขาจะไม่สามารถใช้ฟังก์ชันการทำงานเต็มรูปแบบของหน้าเว็บที่เขาอยู่ได้

กำลังเชื่อมต่อสคริปต์ จะแทรกสคริปต์ลงใน HTML ได้อย่างไร? (ตัวเลือกการเชื่อมต่อทั้งหมด)

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

การเชื่อมต่อสคริปต์จากเซิร์ฟเวอร์อื่น

เมื่อใช้สคริปต์ เราไม่จำเป็นต้องเขียนสคริปต์เองหรือดาวน์โหลดไฟล์และวางไว้บนเซิร์ฟเวอร์ของเราเพื่อการเชื่อมต่อเสมอไป ไฟล์ที่มีสคริปต์สคริปต์สามารถอยู่ในเซิร์ฟเวอร์บุคคลที่สามได้ เช่น google

ในตัวอย่างนี้ เราจะรวมการสนับสนุน jQuery ไว้ในเอกสารของเรา ไฟล์ที่มีสคริปต์อยู่บนเซิร์ฟเวอร์ของ Google และในการเชื่อมต่อเราเพียงแค่ต้องระบุที่อยู่ที่ถูกต้องของตำแหน่งไฟล์ ควรสังเกตด้วยว่าเมื่อใช้แท็ก เราต้องใช้แอตทริบิวต์ประเภท HTML ซึ่งจะช่วยระบุให้เว็บเบราว์เซอร์ทราบว่าไฟล์ที่รวมอยู่นั้นเป็นของเอกสารประเภทใด

หากต้องการเชื่อมต่อ ให้ไปที่หน้านักพัฒนาซอฟต์แวร์ของ Google เพื่อให้การค้นหาของคุณง่ายขึ้น นี่คือลิงค์: https://developers.google.com/speed/libraries/devguide#jquery จากนั้นเราก็คัดลอกโค้ดลักษณะนี้ลงในเอกสาร HTML ของเรา:

เวอร์ชันของไลบรารีอาจแตกต่างกันไป

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

นี่อาจเป็นวิธีที่ง่ายที่สุด เนื่องจากที่นี่ นอกเหนือจากการคัดลอกและวางโค้ดที่เสร็จแล้วแล้ว คุณไม่จำเป็นต้องดำเนินการใดๆ อีก สิ่งเดียวที่จะเพิ่มคือเราต้องระบุแอตทริบิวต์ type ด้วยค่า นั่นคือโค้ดสุดท้ายจะมีลักษณะดังนี้:

การเชื่อมต่อสคริปต์จากเซิร์ฟเวอร์ของเรา

วิธีการเชื่อมต่อนี้คล้ายกับวิธีแรกเฉพาะเมื่อเชื่อมต่อสคริปต์จากเซิร์ฟเวอร์ของเรานั่นคือไฟล์ที่มีสคริปต์จะต้องอยู่บนโฮสต์ที่ไซต์ใช้เองเราจะต้องระบุเส้นทางที่ถูกต้องไปยังไฟล์ นอกจากนี้ เพื่อการจัดระเบียบการวางแนวในไฟล์ไซต์ที่สะดวกยิ่งขึ้น เราสามารถสร้างโฟลเดอร์แยกต่างหากสำหรับสคริปต์และตั้งชื่อได้ เช่น js จากนั้นในโฟลเดอร์นี้ เราต้องวางไฟล์ในรูปแบบ .js ซึ่งมีฟังก์ชันที่จำเป็นสำหรับการเชื่อมต่อ และระบุเส้นทางไปยังไฟล์นี้ในเอกสาร HTML ก่อนแท็กปิด head

ในตัวอย่างที่ฉันจะให้ด้านล่าง เราจะพยายามเชื่อมต่อสคริปต์ที่จะช่วยสร้างไฮไลต์สำหรับแผนที่รูปภาพ ในเวลาเดียวกัน เมื่อเชื่อมต่อสคริปต์ ฉันใช้เส้นทางสัมพัทธ์กับไฟล์ .

คุณสามารถดาวน์โหลดไฟล์สคริปต์ได้ในหน้าเอกสารเพิ่มเติมสำหรับหลักสูตรวิดีโอในหน้านี้

วิธีตรวจสอบการทำงานของสคริปต์แสดงอยู่ในคลิปวิดีโอ

การฝังสคริปต์สคริปต์ลงในเอกสาร HTML จะแทรกสคริปต์ลงใน HTML ได้อย่างไร?

วิธีหลังไม่พิจารณารวมไฟล์แต่ละไฟล์ แต่แนะนำให้ฝังสคริปต์ลงในเอกสาร HTML โดยตรง แต่ที่น่าสังเกตว่าหากสคริปต์ไม่ใหญ่เราก็สามารถนำไปใช้กับเอกสารได้อย่างง่ายดาย หากนี่เป็นฟังก์ชันขนาดใหญ่หรือทั้งไลบรารี คุณควรใช้วิธีใดวิธีหนึ่งที่แสดงไว้ข้างต้น

สมมติว่าเรามีสคริปต์บางตัวที่จำเป็นต้องนำไปใช้ ในกรณีของเรา สิ่งนี้จะอ้างอิงถึงการเน้นวัตถุแผนที่รูปภาพ คุณสามารถค้นหาฟังก์ชันได้ในเอกสารเพิ่มเติมในโฟลเดอร์ js ในตำแหน่งเดียวกับที่ไฟล์สคริปต์อยู่จะมีไฟล์ข้อความปกติซึ่งเขียนโค้ดที่จำเป็น คุณยังสามารถคัดลอกโค้ดสคริปต์ในหน้านี้:

$(function() ( $(".map").maphilight(); $("#squidheadlink").mouseover(function(e) ( $("#squidhead").mouseover(); )).mouseout( function(e) ( $("#squidhead").mouseout(); )).คลิก(function(e) ( e.preventDefault(); ));

หลังจากนั้นจะต้องแทรกระหว่างแท็ก นั่นคือเราสามารถเพิ่มฟังก์ชันบางอย่างลงในเอกสาร HTML ได้โดยตรงก่อนแท็ก:

นอกจากนี้ยังเป็นที่น่าสังเกตว่าเพื่อให้แผนที่รูปภาพที่เน้นทำงานได้คุณต้องเพิ่มสคริปต์ที่เสนอทั้งหมด นั่นคือไลบรารี JQuery เชื่อมต่อไฟล์ที่อยู่ในวัสดุเพิ่มเติมและเพิ่มฟังก์ชันลงในเอกสาร HTML หากไม่ทำตามขั้นตอนอย่างน้อยหนึ่งขั้นตอน ไฟแบ็คไลท์จะไม่ทำงาน

แท็ก HTML

สำหรับแท็กทุกอย่างก็เรียบง่าย แท็กนี้จะรวมอยู่ในงานหากเว็บเบราว์เซอร์ของผู้ใช้ไม่รองรับสคริปต์หรือถูกปิดใช้งาน นี่คือแท็กที่จับคู่ ระหว่างแท็กเปิดและแท็กปิด เราต้องระบุข้อมูลที่จะแสดงต่อผู้ใช้ในกรณีที่เบราว์เซอร์ไม่รองรับสคริปต์ ตัวอย่างเช่นเช่นนี้:

สคริปต์ของคุณไม่ทำงาน...

ต้องรวมแท็กนี้ไว้หลังแท็กเปิด

บทเรียนวิดีโอ: การเชื่อมต่อสคริปต์ใน HTML เปิดไฟแบ็คไลท์แผนที่รูปภาพ

ไดเรกทอรี HTML และสื่ออื่นๆ สามารถดาวน์โหลดได้!

ในวิดีโอหน้า เราจะทำความคุ้นเคยกับสคริปต์ใน HTML ต่อไป และเริ่มทำความคุ้นเคยกับแนวคิดอื่น ซึ่งก็คือออบเจ็กต์ใน HTML เช่น แบนเนอร์วิดีโอ เสียง และแฟลช ขั้นแรกเรามาดูวิธีแทรกวิดีโอลงใน HTML และทำความคุ้นเคยกับแท็ก HTML และ

จากผู้เขียน: สวัสดีเพื่อนๆ ในบทความนี้ เราจะได้เรียนรู้วิธีถ่ายโอนโค้ด JavaScript ของเราไปยังไฟล์ภายนอกและเชื่อมต่อสคริปต์ JavaScript บทความนี้มุ่งเป้าไปที่ผู้เริ่มต้นที่เริ่มต้นการเรียนรู้ภาษา JavaScript

เรามาเริ่มด้วยคำถามว่าทำไมคุณต้องใส่โค้ด JavaScript ลงในไฟล์ภายนอก? มันง่ายมาก ลองจินตนาการว่าสคริปต์ของคุณใช้โค้ดหลายสิบหรือหลายร้อยบรรทัด หรือมากกว่านั้น และแน่นอนว่าเรามักจะต้องใช้สคริปต์นี้ในทุกหน้าของเว็บไซต์ของเรา เห็นด้วย ในกรณีนี้ ในกรณีนี้การทำซ้ำโค้ดหลายร้อยบรรทัดในแต่ละไฟล์จะถือเป็นเรื่องเลวร้ายอย่างยิ่ง และการมีโค้ดที่ไม่ใช่ HTML ในเอกสาร HTML จะดูไม่ถูกต้องหรือสวยงามมากนัก

นั่นคือเหตุผลว่าทำไมจึงเป็นเรื่องปกติที่จะใส่โค้ด JavaScript ไว้ในไฟล์แยกต่างหากซึ่งเชื่อมต่อกับเพจ จริงๆ แล้ว ทุกอย่างจะเหมือนกับในกรณีของไฟล์สไตล์ จะเชื่อมต่อสคริปต์ JavaScript กับไฟล์หลักได้อย่างไร? ง่ายมาก ในการทำเช่นนี้ เราใช้แท็กที่คุ้นเคยอยู่แล้ว ซึ่งมีการเพิ่มแอตทริบิวต์ src เช่นเดียวกับในกรณีของรูปภาพ อย่างที่คุณอาจเดาได้ แอตทริบิวต์ src ระบุเส้นทางไปยังสคริปต์ JavaScript ที่จะเชื่อมต่อ

ลองถ่ายโอนโปรแกรมของเราซึ่งประกอบด้วยโค้ดหนึ่งบรรทัดไปยังไฟล์ภายนอกและรวมไฟล์นี้ด้วย ลองเรียกไฟล์นี้ว่า scripts.js:

จาวาสคริปต์ เริ่มต้นอย่างรวดเร็ว

alert("สวัสดี!");

หากเรารีเฟรชหน้าตอนนี้ จะไม่มีอะไรเปลี่ยนแปลง สคริปต์ของเราใช้งานได้และยังคงแสดงหน้าต่างโมดอลพร้อมคำทักทาย

จาวาสคริปต์ เริ่มต้นอย่างรวดเร็ว

เรียนรู้พื้นฐานของ JavaScript พร้อมตัวอย่างวิธีสร้างเว็บแอปพลิเคชันแบบลงมือปฏิบัติ

สิ่งที่คุณควรใส่ใจเมื่อเชื่อมต่อสคริปต์? เรารวมสคริปต์ไว้ที่ส่วนท้ายของเอกสาร ก่อนแท็กเนื้อหาปิด ก่อนหน้านี้ เป็นเรื่องปกติที่จะรวมสคริปต์ไว้ที่จุดเริ่มต้นของเอกสารในแท็กส่วนหัว อย่างไรก็ตาม ในปัจจุบันเราไม่แนะนำให้ทำเช่นนี้ และแนะนำให้รวมสคริปต์ไว้ท้ายเอกสารด้วย ทำไมจึงเป็นเช่นนี้?

ลองย้ายการเชื่อมต่อระหว่างแท็ก head:

เราเห็นอะไร? ไม่มีอะไรนอกจากหน้าต่างโมดอล ไม่มีเนื้อหา นั่นคือประเด็น เมื่อมีการรวมสคริปต์ภายนอกไว้ที่จุดเริ่มต้นของเอกสาร เบราเซอร์จะเริ่มดาวน์โหลดและพยายามดำเนินการ และจนกว่าการโหลดและการทำงานของสคริปต์จะเสร็จสิ้น เบราว์เซอร์จะไม่แสดงส่วนของเอกสารตามไฟล์ที่รวมไว้

ทีนี้ลองจินตนาการว่าไฟล์นี้โหลดช้ามากด้วยเหตุผลบางประการ เป็นผลให้ผู้ใช้ต้องรอและบางครั้งเขาก็อาจไม่รอ ด้วยเหตุนี้จึงแนะนำให้รวมสคริปต์ไว้ที่ส่วนท้ายของเอกสาร ก่อนแท็กปิดเนื้อหา

แต่จะเกิดอะไรขึ้นหากห้องสมุดบางแห่งจำเป็นต้องรวมไว้ที่ตอนต้นของเอกสารล่ะ? จะทำอย่างไรในกรณีนี้? ในกรณีนี้ เราจะได้รับความช่วยเหลือจากแอตทริบิวต์ async และ defer ซึ่งช่วยให้เบราว์เซอร์โหลดสคริปต์แบบอะซิงโครนัส เช่น เบราว์เซอร์จะเริ่มดาวน์โหลดสคริปต์ แต่จะไม่หยุดแสดงเอกสาร ลองใช้คุณลักษณะเหล่านี้ทีละรายการ:

< ! -- вариант1 -- > < ! -- вариант2 -- >

ในทั้งสองกรณีเราจะได้รับผลลัพธ์เดียวกัน สคริปต์เชื่อมต่อโดยไม่รบกวนการแสดงเอกสาร:

อะไรคือความแตกต่างระหว่างแอตทริบิวต์ async และ defer? คุณลักษณะ defer จะรักษาลำดับของการเชื่อมต่อสคริปต์ภายนอก เช่น สคริปต์ที่เชื่อมต่อด้านบนจะถูกดำเนินการก่อนเสมอ นี่เป็นสิ่งสำคัญเมื่อเราเชื่อมต่อสคริปต์หลายตัว และบางสคริปต์อาจขึ้นอยู่กับสคริปต์อื่น ในกรณีนี้ จะต้องเชื่อมต่อสคริปต์หลักก่อนสคริปต์ที่ต้องพึ่งพา คุณลักษณะ defer ช่วยให้มั่นใจได้ว่าคำสั่งซื้อจะยังคงอยู่ แอตทริบิวต์ async จะช่วยให้มั่นใจได้ว่าสคริปต์จะถูกดำเนินการทันทีหลังจากโหลดแล้ว ดังนั้นตัวเลือกนี้จึงไม่เหมาะสมเสมอไป เนื่องจากสคริปต์ที่ต้องพึ่งพาอาจโหลดก่อนสคริปต์หลัก

นี่เป็นการสรุปบทความ หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ JavaScript ฉันขอแนะนำให้คุณหันความสนใจไปที่ JavaScript แยกต่างหาก ขอให้โชคดี!

จาวาสคริปต์ เริ่มต้นอย่างรวดเร็ว

เรียนรู้พื้นฐานของ JavaScript พร้อมตัวอย่างวิธีสร้างเว็บแอปพลิเคชันแบบลงมือปฏิบัติ

วันนี้ฉันจะบอกคุณถึงวิธีเชื่อมต่อสคริปต์ประเภทต่างๆ กับเว็บไซต์ของคุณ นี่เป็นพื้นฐาน และฉันควรจะเขียนบทความนี้เป็นบทความแรกๆ ดังนั้นมาเริ่มกันเลย

การเชื่อมต่อสคริปต์ JS (ไฟล์ที่มีนามสกุล *.js) ไปยังไซต์

JavaScript ช่วยให้เราปรับปรุงการทำงานของเว็บไซต์ได้หลายวิธี ไม่ว่าจะเป็นปัญหาด้านเทคนิคบางประการ

JavaScript สามารถเชื่อมต่อได้สองวิธี:

1. อันดับแรก– นี่เป็นการแทรกโค้ดลงในเว็บไซต์ของคุณโดยตรงโดยใช้แท็ก:

รหัส

2. ที่สอง– การใช้ไฟล์:

โดยที่ “https://www..js” คือเส้นทางไปยังไฟล์สคริปต์ ขอแนะนำให้เขียนตัวเลือกนี้สำหรับไฟล์บนเซิร์ฟเวอร์ระยะไกล (ภายนอก) หากไฟล์อยู่บนไซต์ของคุณ คุณก็สามารถระบุเส้นทางที่เกี่ยวข้องได้:

วิธีนี้จะสะดวกหากคุณต้องการเปลี่ยนโดเมนโดยฉับพลันหรือโอนเว็บไซต์ไปยังโปรโตคอลอื่น

สำหรับตำแหน่งการเชื่อมต่อ ขอแนะนำให้เชื่อมต่อสคริปต์ทั้งหมดในส่วน HEAD ก่อนแท็กปิด ตัวอย่างเช่น:

ทุกอย่างสำหรับเว็บมาสเตอร์มือใหม่

สามารถเชื่อมต่อได้ในส่วน BODY ตัวอย่างเช่น ขอแนะนำให้รวมไลบรารีทั้งหมดไว้ในส่วน HEAD ในขณะที่ตัวนับ ตัวเลื่อน แกลเลอรี และสคริปต์อื่นๆ ทั้งหมดจะรวมอยู่ในส่วน BODY ก่อนแท็กปิดด้วย

การเชื่อมต่อสคริปต์ PHP (ไฟล์ที่มีนามสกุล *.php) ไปยังไซต์

การเชื่อมต่อสคริปต์ PHP ทำได้สามวิธี:

1. อันดับแรก– นี่เป็นการแทรกโค้ดเดียวกันในหน้าเว็บไซต์ (โปรดทราบว่าหากคุณมีหน้าเว็บที่มีนามสกุล *.html คุณจะต้องเปลี่ยนนามสกุลเป็น *.php) โดยใช้แท็ก:

2. การใช้ไฟล์ (ในกรณีนี้ สามารถทำการเชื่อมต่อบนเพจที่มีนามสกุล *.html ได้ด้วย):

แต่เพื่อให้วิธีนี้ใช้งานได้ คุณต้องเพิ่มบรรทัดเหล่านี้ลงในไฟล์ .htaccess ซึ่งอยู่ที่รากของไซต์ของคุณที่ด้านบนสุด:

RemoveHandler .html .htm แอปพลิเคชัน AddType/x-httpd-php .php .htm .html .phtml

หากไม่มีไฟล์ดังกล่าวบนโฮสติ้งของคุณ ให้สร้างไฟล์ดังกล่าวโดยใช้โปรแกรมแก้ไขข้อความ

3. ที่สาม– การใช้สคริปต์ JS ในกรณีนี้ คุณยังสามารถรับผลลัพธ์ของสคริปต์ PHP ที่ดำเนินการบนเซิร์ฟเวอร์ได้อีกด้วย

การนำไปปฏิบัติจะเป็นดังนี้:

$(document).ready(function() ( $(".result").load("/main.php"); ));

โดยที่ “.result” คือคลาสที่จะโหลดข้อมูล และ “/main.php” ตามลำดับคือที่อยู่ของสคริปต์ PHP

หากคุณกำลังโหลดข้อมูลจากเซิร์ฟเวอร์อื่น ก็ไม่จำเป็นต้องรองรับ PHP บนเซิร์ฟเวอร์ของคุณ อย่าลืมเชื่อมต่อไลบรารี jQuery กับเว็บไซต์ของคุณ

กฎในที่นี้จะเหมือนกันทุกประการ: ที่อยู่แบบเต็มของไฟล์หากอยู่บนเซิร์ฟเวอร์ภายนอก ที่อยู่แบบสัมพันธ์หากอยู่ในของคุณ

ใส่ใจ! หากคุณต้องการเชื่อมต่อสคริปต์ PHP กับเว็บไซต์ของคุณ เซิร์ฟเวอร์นั้นจะต้องรองรับ PHP ตรวจสอบกับผู้ให้บริการโฮสติ้งของคุณเพื่อดูว่าคุณมีตัวเลือกนี้หรือไม่

หากคุณกำลังเชื่อมต่อสคริปต์เป็นครั้งแรก ให้ลองเชื่อมต่อสคริปต์จากไฟล์เก็บถาวรซึ่งแนบมาท้ายบทความ หากในทั้งสองกรณีคุณได้รับข้อความ “Hello World! “หมายความว่าคุณทำทุกอย่างถูกต้องแล้ว”

สคริปต์เป็นอีกปัจจัยสำคัญสำหรับการดำเนินการที่ถูกต้องของเพจ หาก HTML มีหน้าที่รับผิดชอบในการสร้างโครงสร้าง และสไตล์มีหน้าที่รับผิดชอบต่อลักษณะที่ปรากฏ สคริปต์จะต้องรับผิดชอบต่อพฤติกรรมของเอกสาร ช่วยให้คุณสามารถสร้างองค์ประกอบที่เคลื่อนไหวได้ทุกประเภทบนหน้าเว็บ ตัวอย่างที่โดดเด่นที่สุดคือแอนิเมชั่น แต่มีผลกระทบอื่น ๆ อีกมากมาย ภาษาเช่น JavaScript ใช้เพื่อสร้างสคริปต์

กระบวนการเชื่อมต่อสคริปต์เข้ากับเพจนั้นเหมือนกับการเพิ่มสไตล์ทุกประการ นั่นคือมีสองตัวเลือก ประการแรกคือการเขียนโค้ดสคริปต์ภายในเพจเอง ประการที่สองเกี่ยวข้องกับการเชื่อมต่อโดยใช้ไฟล์ภายนอก

สคริปต์อินไลน์

หากต้องการเขียนสคริปต์ภายในเพจ คุณควรใช้นามสกุล . นี่คือตัวอย่าง:

รหัสจาวาสคริปต์

โดยทั่วไปแล้ว ไม่สำคัญว่าแท็กจะถูกใช้ตรงไหนในเอกสาร HTML อย่างไรก็ตาม ฉันขอแนะนำให้วางไว้ที่ส่วนท้ายของโค้ดหน้า ก่อนแท็กที่ปิดเอกสาร

ควรสังเกตว่าเมื่อเวลาผ่านไป คุณลักษณะบางอย่างของภาษา JavaScript จะถูกโอนไปยัง CSS ตัวอย่างคือความเป็นไปได้ในการระบุการเปลี่ยนแปลงค่าคุณสมบัติอย่างราบรื่น

สคริปต์ภายนอก

ตามกฎแล้ว ไฟล์ที่มีนามสกุล .js จะใช้เพื่อเชื่อมต่อสคริปต์ภายนอก การดำเนินการนี้ดำเนินการโดยใช้แท็กที่มาพร้อมกับแอตทริบิวต์ src ซึ่งระบุเส้นทางไปยังไฟล์นั้นเอง ตัวอย่างเช่น:

โปรดทราบว่าแท็กได้รับการจับคู่แล้ว ดังนั้นในกรณีนี้ เมื่อพูดถึงสคริปต์ภายนอก ไม่จำเป็นต้องเขียนอะไรในแท็ก

วิธีที่ดีที่สุดคือเชื่อมต่อสคริปต์จากไฟล์ก่อนแท็กที่ปิดเอกสาร