การวาง Javascript ใน HTML File

| ไอที | JavaScript | 21925

การวาง Javascript ในไฟล์ HTML

เราได้รู้จักกับ Javascript และรู้พื้นฐานกันไปบ้างพอสมควรแล้ว จากบทความก่อนหน้าที่ผ่านมา บทความนี้เรามาดูวิธีใส่โค้ด Javascript ไว้ในส่วนต่าง ๆ ภายในไฟล์ HTML กันดีกว่าครับ ซึ่งในการแทรกโค้ด Javascript ในเอกสาร HTML นั้น ก็มีอยู่หลายวิธีด้วยกัน

จากบทความก่อน ๆ เราได้รู้ว่าเราสามารถแทรกโค้ด Javascript ไว้ในส่วนไหนก็ได้ภายใน File เรามาดูตัวอย่างการแทรกโค้ดในแต่ละที่กันดูครับ

การแทรกโค้ด Javascript ในแท็ก head

การแทรกโค้ดในแท็ก head นี้ส่วนมาก จะเป็นการแทรกสำหรับรองรับ event ต่าง ๆ ดังตัวอย่างด้านล่าง
<html>
<head>

</head>
<body>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>
ซึ่งเมื่อรันแล้ว จะได้ผลดังนี้

การแทรกโค้ด Javascript ในแท็ก body

การแทรกโค้ดในแท็ก body นี้ส่วนมาก จะเป็นการแทรกเพื่อให้สคริปต์ทำงานสำหรับสร้างเสื้อหาในส่วนของ body ของเอกสาร ดังตัวอย่างด้านล่าง
<html>
<head>
</head>
<body>
<script type="text/javascript">
	function sayHello() {
		document.write("Hello World");
	}
</script>
</body>
</html>
ซึ่งเมื่อรันแล้ว จะได้ผลดังนี้ Hello World

การแทรกโค้ด Javascript ในแท็ก head และในแท็ก body

เป็นการแทรกโค้ดทั้งในแท็ก head และในแท็ก body ดังตัวอย่างด้านล่าง
<html>
<head>

</head>
<body>
<script type="text/javascript">
	function sayHello() {
		document.write("Hello World");
	}
</script>

</body>
</html>
ซึ่งเมื่อรันแล้ว จะได้ผลดังนี้ Hello World

การแทรกไฟล์ Javascript เช้ามาในไฟล์ HTML

เป็นการแทรกไฟล์ของ javascript เข้ามาใช้ในหน้าเพจ ดังตัวอย่างด้านล่าง
<html>
<head>

</head>
<body>
</body>
</html>
comments