เขียน JavaScript ตรงไหนได้บ้างในเว็บเพจ

มาดูกันครับว่า เราสามารถเขียนโค้ด JavaScript ไว้ตรงไหนได้บ้างในเว็บเพจของเรา

The <script> Tag

ปกติเวลาเราจะเขียนโค้ด JavaScript เราต้องเขียนไว้ภายในแท็ก <script></script> เพื่อให้เบราเซอร์รู้ว่า ตรงนี้เป็นส่วนของภาษาสคริปต์นะ

<script>
    document.getElementById("myId").innerHTML = "โค้ดภาษา JavaScript ของข่อย";
</script>

เมื่อก่อนเราจะเขียนแท็ก <script> แบบนี้ <script type="text/javascript"></script> แต่ปัจจุบันไม่ต้องแล้ว เพราะว่า ภาษา JavaScript เป็นภาษาสคริปต์ดีฟอลต์ใน HTML

เขียนโค้ด JavaScript ไว้ใน <head> หรือ <body>

เราสามารถเขียนโค้ด JavaScript ไว้ในส่วนหัวของเว็บเพจ ภายในแท็ก <head></head> หรือจะเขียนไว้ในส่วนบอดี้ คือภายในแท็ก <body></body> ก็ได้เช่นกัน ดังตัวอย่าง

เขียนโค้ด JavaScript ไว้ในแท็ก <head></head>

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Using JavaScript</title>
    <meta charset="utf-8">
    <script>
        function myFunction() {
            document.getElementById("demo").innerHTML = "ผลการทำงานของ JavaScript";
        }
    </script>
</head>
<body>
</body>
</html>

เขียนโค้ด JavaScript ไว้ในแท็ก <body></body>

<body>
    <script>
        function myFunction() {
            document.getElementById("demo").innerHTML = "ผลการทำงานของ JavaScript";
        }
    </script>
</body>

เขียน JavaScript ไว้ภายนอกเว็บเพจ

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

<script src="myScript.js"></script>
<script src="/js/myScript1.js"></script>

แต่เมื่อเขียน JavaScript ไว้ในไฟล์ .js ภายนอก เราจะไม่เขียนสคริปต์ไว้ภายในแท็ก <script></script> แต่เราสามารถเขียนสคริปต์ลงไปตรง ๆ ได้เลย เช่น

function myFunction() {
 document.getElementById("demo").innerHTML = "โค้ดจาวาสคริปต์จากภายนอก";
}

เขียน JavaScript ตรงไหนได้บ้างในเว็บเพจ