ถูกเขียนไว้ในบรรทัด และแต่ละแท็กจะถูกตั้งค่าแยกกัน
ฟังก์ชัน (1) ของการอ้างอิง js ผ่านแอตทริบิวต์เหตุการณ์ในแท็กเปิด
จะถูกเขียนในแอตทริบิวต์เหตุการณ์ของแท็ก (แอตทริบิวต์ที่ขึ้นต้นด้วยเปิด) เช่น onclick [on+ event Type]
คำแนะนำ: ใช้เครื่องหมายคำพูดคู่สำหรับ html และเครื่องหมายคำพูดเดี่ยวสำหรับ js
ตัวอย่าง:
<input type="button" value="Click me to open the world" onclick="alert('Hello World' )" /> หมายเหตุ: การแนะนำแบบอินไลน์ ใน JS แนวคิดเรื่องการเพิ่มน้ำหนักไม่ได้ใช้ใน ดังนั้นจึงไม่ค่อยมีการใช้โดยทั่วไป [ โดยทั่วไปไม่ได้ใช้ ]
ตัวอย่างมีดังต่อไปนี้: <html>
<title>การเขียนอินไลน์สไตล์ JS</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<ร่างกาย>
<!--JS วิธีการเขียนอินไลน์เริ่มต้นจาก 01-->
<!--เมื่อคลิกเมาส์ที่รูปภาพ จะมีหน้าต่าง Pop-up ขึ้นมาแสดง 1223-->
<div class="img">
คลิกกิจกรรม:
<img src="images/001.jpg" onclick="alert(1223)"></img>
</div>
<!--วิธีการเขียนอินไลน์ JS 01 สิ้นสุด-->
</ร่างกาย>
</html>ผลลัพธ์ที่ได้:
เขียนด้วยแท็กสคริปต์
การอ้างอิงภายใน: ใช้โดยการเขียนโค้ด js ในแท็กสคริปต์
แท็กสคริปต์สามารถเขียนได้ทุกที่บนเพจ
แท็กสคริปต์มักจะใช้ที่ส่วนท้ายของเนื้อหาหรือหลังเนื้อหา
(1) สามารถเขียนได้ทุกที่
เมื่อเราต้องอ้างอิงสคริปต์ที่ส่วนหัว ให้วางไว้ที่ส่วนหัว หรือไม่เช่นนั้นก็วางไว้ที่ด้านล่าง เนื่องจากการวางไว้ที่ส่วนหัวอาจส่งผลต่อการแสดงผลของเบราว์เซอร์
<สคริปต์>
alert('สวัสดีชาวโลก!');
</สคริปต์>หมายเหตุ: โดยทั่วไป เมื่อเขียนแบบฝึกหัดด้วยตัวเอง คุณจะใช้ [ Practice Use ] เมื่อคุณต้องการขี้เกียจและไม่ต้องการตั้งค่าไฟล์ js
โดยปกติเมื่อทำงานในโครงการของคุณเอง ให้วางไว้ที่ด้านล่างสุด ซึ่งจะไม่ส่งผลต่อลำดับการโหลดและสามารถแยกความแตกต่างจากไฟล์ CSS ได้ และไม่ส่งผลต่อการเรนเดอร์เบราว์เซอร์ หากคุณวางไว้ที่อื่น ควรใช้ onload
ตัวอย่างมีดังนี้: <html>
<title>การเขียนอินไลน์สไตล์ JS</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<ร่างกาย>
<!--การเขียนอินไลน์ js เริ่มต้นจาก 02-->
<div class="img">
คลิกกิจกรรม:
<img src="images/002.jpg" id='yuansu'></img>
</div>
<!--วิธีการเขียนอินไลน์ js 02 end-->
</ร่างกาย>
<สคริปต์>
//รหัส js//ค้นหาองค์ประกอบ XX โดยทั่วไปแล้วจะเพิ่มรหัสให้กับองค์ประกอบ
yuansuojb=document.getElementById('หยวนซู');
//เพิ่มเหตุการณ์ yuansuojb.onclick=function(){ ให้กับองค์ประกอบ xx
// การแจ้งเตือนส่วนของรหัส (1);
-
//ทริกเกอร์เหตุการณ์</script>
</html>ผลลัพธ์ที่ได้:
ใช้ src ในแท็กสคริปต์เพื่อแนะนำไฟล์ภายนอก
ขั้นตอน:
เขียนไฟล์ js อิสระ
อ้างอิงผ่านแท็กสคริปต์ในหน้า
(1) ไม่สามารถเขียนโค้ดในสคริปต์ที่แนะนำไฟล์ JS ภายนอกได้
(2) ใช้โครงสร้างโค้ดหน้า HTML เพื่อแยกโค้ด JS หลายส่วนออกนอกหน้า HTML ซึ่งสวยงามและสะดวกสำหรับการนำไฟล์กลับมาใช้ใหม่
<script src="main.js"></script>
หมายเหตุ: เช่นเดียวกับรูปแบบอินไลน์ การวางไว้ที่ด้านล่างและส่วนหัวจะต้องพิจารณาเป็นรายกรณี [ ใช้บ่อย ]
ใช้ src ไม่ใช่ href
ตัวอย่างมีดังนี้:เขียนโค้ด js ลงในไฟล์ .js และอ้างอิงเป็น HTML
เนื้อหาของไฟล์ .html มีดังนี้:
<html>
<title>วิธีการเขียนลิงค์ภายนอกสไตล์ JS</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<ร่างกาย>
<div class="img">
การเขียนลิงก์ภายนอก--คลิกเหตุการณ์:
<img src="images/003.jpg" id='yuansu'></img>
</div>
</ร่างกาย>
<script src='js/index.js'></script>
</html>เนื้อหาของไฟล์ .js มีดังนี้:
//รหัส js//ค้นหาองค์ประกอบ XX โดยทั่วไปแล้วจะเพิ่มรหัสให้กับองค์ประกอบ
yuansuojb=document.getElementById('หยวนซู');
//เพิ่มเหตุการณ์ yuansuojb.onclick=function(){ ให้กับองค์ประกอบ xx
//ส่วนโค้ด var str="hello world!!!";
การแจ้งเตือน (str);
-ผลลัพธ์ที่ได้:
