JavaScript Ep.2 —Where To

5 min readMay 19, 2020

พบกันอีกครั้งครับกับ Ep.2 ไม่รอช้า ไปดูจุดประสงค์ของ Ep นี้กันเลยครับ

จุดประสงค์(Objectives)

รู้และเข้าใจ <script> tag
รู้และเข้าใจ Functions และ Events เบื้องต้น
รู้และเข้าใจการเขียน JavaScript ในไฟล์ HTML ไม่ว่าจะเป็นเขียนในส่วนของ <head> และในส่วนของ <body> tag
สามารถเขียน JavaScript แยกจากไฟล์ HTML ได้ (External JS File)
รู้และเข้าใจการอิมพอร์ต JavaScript ไฟล์ เข้ามาใช้งานในหน้า HTML
รู้และเข้าใจประโยชน์ของการเขียนแยกจาก HTML

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

Here we go !!

ทำการสร้างโฟลเดอร์ ep2 ขึ้นมาใหม่ เพื่อใช้ใน Ep.2

สร้างโฟลเดอร์ ep2 ขึ้นมาเืพื่อใช้ใน Ep นี้

JavaScript โค้ดสามารถเขียนได้เลยในไฟล์ HTML โดยอยู่ภายใต้ <script> tag ดังนี้

ตัวอย่าง

<script>
     document.getElementById("changeElement").innerHTML = "Hi JS"
</script>

จากตัวอย่างโค้ดจะเห็นว่า โค้ดจะคล้ายคลึงกันกับในช่วงต้นบทความของ Ep.1 ถือว่าเป็นการทบทวนไปในตัวเลยแล้วกัน แต่ส่วนที่แตกต่างจาก Ep.1 คือ จากที่เขียนโดยอาศัยตัว tag ของ HTML อย่างเช่น <button> แต่คราวนี้จะเขียนอยู่ใน tag ของ JS โดยตรง นั่นก็คือ <script> JS Code </script> ซึ่งตัวโค้ด JS จะอยู่ใน tag เปิดและปิดของตัวมันเอง

สร้างไฟล์ HTML

จากในช่วงต้นบทความได้มีการสร้างโฟลเดอร์ ที่มีชื่อว่า “ep2” ขึ้นมาแล้วนั้น ทีนี้ก็สร้างไฟล์ HTML ขึ้นมาเพื่อทดสอบเขียนกันได้เลย โดยไฟล์มีชื่อว่า change-element2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Change Element2</title>
</head>
<body>

    <h1>JS in body</h1>
    <p id="changeElement"></p>

    <script>
        document.getElementById("changeElement").innerHTML = "Hi JS"
    </script>

</body>
</html>

How code works ?

เขียน JS โดยใช้เมธอด getElementById( ) โดย id มีชื่อว่า “changeElement” โดยใช้คำสั่ง innerHTML เพื่อทำการเปลี่ยนข้อความ “Hi JS”
สร้าง <p> tag แล้วรับ id “changeElement” เพื่อแสดงผลข้อความ Hi JS บน <p> tag

เปิดไฟล์ change-element2.html ขึ้นมา

ข้อความหรือ element ที่เขียนไว้ใน <script> tag ก็จะถูกแสดงผล

ตัว JS เวอร์ชั่นเก่านั้นใช้ตัว attribute <script type=”text/javascript”> ซึ่งตอนนี้ไม่จำเป็นต้องใช้แล้ว ใช้แค่ <script> เพียว ๆ ได้เลย

JS Functions และ Events

JS function คือส่วนของบล็อกของ JS code ซึ่งจะทำงานก็ต่อเมื่อมีถูกเรียกใช้

ตัวอย่างเช่น ฟังชันก์จะถูกเรียกใช้งาน เมื่อมีเหตุการณ์อะไรบางอย่างเกิดขึ้น อย่างเช่นมีการคลิ๊กที่ button

ตัว Functions และ Events จะขอพูดถึงแบบละเอียดมากขึ้นใน Ep ถัด ๆ ไปครับ

JavaScript ใน <head> และ <body> tag

เราสามารถเขียนโค้ด JS code ได้มากตามที่ต้องการได้เลยในไฟล์ HTML

ซึ่งตัว <script> tag สามารถวางอยู่ได้ทั้งใน <head> tag และก็ <body> tag ของ HTML

JavaScript in <head>

คือการเขียน JS สคริปต์ บน <head> tag ของ HTML โดยสคริปต์ที่กำลังจะเขียนนี้ ตัวฟังก์ชันจะถูกเรียกใช้เมื่อมีการคลิ๊กของ button

สร้างไฟล์ HTML

สร้างไฟล์ HTML ขึ้นมาใหม่ มีชื่อว่า javascript-in-head.html ดังภาพด้านล่าง

javascript-in-head.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript in head</title>
    <script>
        function myFunc () {
            document.getElementById("changeElement2").innerHTML = "Change element in head tag";
        }
    </script>
</head>
<body>

    <h1>JS in head tag</h1>
    <p id="changeElement2">Default text</p>
    <button type="button" onclick="myFunc()">Change text</button>

</body>
</html>

How code works ?

สร้างฟังก์ชัน โดยสร้างอยู่ภายใน <head> tag ของ HTML โดยฟังก์ชันแบบธรรมดา ไม่ได้พิเศษอะไร มีการเรียกใช้คำสั่ง innerHTML และตัว element คือข้อความ “Change element in head tag”
สร้าง button ใน <body> tag ของ HTML ขึ้นมา เพื่อให้ทริก event หรือเรียกใช้ฟังก์ชันเมื่อมีการคลิ๊ก โดยใช้คำสั่ง onclick จากนั้นเรียกใช้ชื่อฟังก์ชัน myFunc( ) ที่ได้กำหนดไว้ในสคริปต์ด้านบน
สร้าง <p> tag ขึ้นมา แล้วทำการเรียกใช้(Activate) id ที่เขียนอยู่ในฟังก์ชัน โดย id มีชื่อว่า “changeElement2”

เปิดไฟล์ javascript-in-head.html ขึ้นมา

JavaScript in <body>

คือการเขียน JS สคริปต์ บน <body> tag ของ HTML โดยสคริปต์ที่กำลังจะเขียนนี้ ตัวฟังก์ชันจะถูกเรียกใช้เมื่อมีการคลิ๊กของ button

สร้างไฟล์ HTML

สร้างไฟล์ HTML ขึ้นมาใหม่ มีชื่อว่า javascript-in-body.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS in body</title>
</head>
<body>

    <h1>JS in body tag</h1>
    <p id="changeElement3">Default</p>
    <button type="button" onclick="myFunc2()">Change text</button>

    <script>
        function myFunc2() {
            document.getElementById("changeElement3").innerHTML = "Change element in body tag";
        }
    </script>

</body>
</html>

How code works ?

สร้างฟังก์ชัน โดยสร้างอยู่ภายใน <body> tag ของ HTMLโดยฟังก์ชันแบบธรรมดา ไม่ได้พิเศษอะไร มีการเรียกใช้คำสั่ง innerHTML และตัว element คือข้อความ “Change element in body tag”
สร้าง button ใน <body> tag ของ HTML ขึ้นมา เพื่อให้ทริก event หรือเรียกใช้ฟังก์ชันเมื่อมีการคลิ๊ก โดยใช้คำสั่ง onclick จากนั้นเรียกใช้ชื่อฟังก์ชัน myFunc2( ) ที่ได้กำหนดไว้ในสคริปต์ใน <body> tag
สร้าง <p> tag ขึ้นมา แล้วทำการเรียกใช้(Activate) id ที่เขียนอยู่ในฟังก์ชัน โดย id มีชื่อว่า “changeElement3”

โค้ดแทบจะเหมือนกันทุกส่วนกับที่เขียนใน <head> tag เพียงแต่จะเปลี่ยนมาเขียนใน <body> tag

การวางสคริปต์ไว้ด้านล่างของ <body> tag จะช่วยให้แสดงผลได้รวดเร็วขึ้นกว่าวางไว้บน <head> tag

External JavaScript

JS สามารถเขียนแยกไฟล์กับ HTML ได้

โดยจะทำการสร้างไฟล์ที่มีชื่อว่า myScript.js (js คือนามสกุลไฟล์ของ JavaScript)

myScript.js

// external js file
function myExtFunc() {
    document.getElementById("changeElement4").innerHTML = "This text from external js file";
}

สคริปต์ไฟล์ที่ถูกเขียนไว้จากภายนอก จะถูกสร้างเมื่อมีการเรียกใช้สคริปต์นี้ซ้ำ ๆ และบ่อย ๆ ในไฟล์ HTML และหลาย ๆ หน้าเว็บของไฟล์ HTML ซึ่งจะทำให้สะดวกและง่ายต่อการใช้งาน
การเรียกใช้งานสคริปต์จากภายนอกทำได้โดยสร้าง <script> tag ขึ้นมาในไฟล์ HTML จากนั้นทำการกำหนด Attribute ตัว src(Source) ที่อยู่ของสคริปต์นั้น

ตัวอย่าง

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

สคริปต์ = JavaScript โค้ด , สคริปต์ไฟล์ = ไฟล์ JavaScript

สร้างไฟล์ HTML

สร้างไฟล์ HTML ขึ้นมาใหม่ มีชื่อว่า external-script.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>External Script</title>
</head>
<body>

    <h1>Import JS from external script</h1>
    <p id="changeElement4">Default</p>
    <button type="button" onclick="myExtFunc()">Change text</button>

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

</body>
</html>

How code works ?

เรียกใช้งานสคริปต์ไฟล์ที่ถูกเขียนแยกไว้นอก HTML
สร้าง button ใน <body> tag ของ HTML ขึ้นมา เพื่อให้ทริก event หรือเรียกใช้ฟังก์ชันเมื่อมีการคลิ๊ก โดยใช้คำสั่ง onclick จากนั้นเรียกใช้ชื่อฟังก์ชัน myExtFunc( ) ที่ได้กำหนดไว้ในสคริปต์ใน JS ไฟล์ที่มีชื่อว่า myScript.js
สร้าง <p> tag ขึ้นมา แล้วทำการเรียกใช้(Activate) id ที่เขียนอยู่ในฟังก์ชัน โดย id มีชื่อว่า “changeElement4”

สคริปต์ไฟล์ที่ถูกเขียนแยกจาก HTML ไม่สามารถเขียน <script> tag ในไฟล์จากภายนอกได้ ใช้ได้เฉพาะใน HTML ไฟล์ เท่านั้น

เปิดไฟล์ external-script.html ขึ้นมา

ข้อดีของการเขียนสคริปต์ไฟล์แยกมีดังต่อไปนี้

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

ถ้าหากต้องการเพิ่มหลาย ๆ สคริปต์ไฟล์จากภายนอก ก็ทำได้อย่างง่ายดาย เพียงแค่เพิ่ม <script> tags ตามจำนวนไฟล์ที่จะอิมพอร์ตเข้ามาใช้งานใน HTML

ตัวอย่าง

<script src="myScript1.js"> </script>
<script src="myScript2.js"> </script>
<script src="myScript3.js"> </script>

External References

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

<script src="https://www.w3schools.com/js/myScript1.js"></script>

ซึ่งการอิมพอร์ตหรือเรียกใช้งานสคริปต์ผ่าน url จากเว็บไซต์ภายนอกแบบนี้ จะเห็นได้บ่อยในการเรียกใช้ CDN ต่าง ๆ เช่นเรียกใช้ CDN ของ Bootstrap เป็นต้น

จบเรียบร้อยแล้วครับกับ Ep.2 เป็นยังไงกันบ้างครับ งงกันหรือเปล่า ? หวังว่าจะไม่งงนะครับ เพราะผมพยายามใส่ภาพและอธิบายเพื่อให้เข้าใจง่ายที่สุดที่จะทำได้ อย่าลืมหมั่นทบทวนความเข้าใจกันด้วยนะครับ

เมื่อจบ Ep นี้ แสดงว่าคุณผ่าน JavaScript Level 2เรียบร้อย กด Clap เพื่อซัพพอร์ตกันได้เลยนะครับ :)

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

พบกับ Ep ถัดไป เพื่อเก็บ Level 3 กันต่อได้เลยครับ

Sonny STACKPYTHON

ท่านสามารถติดตามพวกเราได้ที่ stackpython ตามช่องทางด้านล่างนี้ได้เลยครับ

Instagram: stackpython

Facebook: stackpython

Website: stackpython.co

YouTube: stackpython

Reference

https://www.w3schools.com/js/js_whereto.asp

JavaScript Ep.2 —Where To

จุดประสงค์(Objectives)

Here we go !!

ตัวอย่าง

สร้างไฟล์ HTML

How code works ?

JS Functions และ Events

JavaScript ใน <head> และ <body> tag

JavaScript in <head>

สร้างไฟล์ HTML

How code works ?

JavaScript in <body>

สร้างไฟล์ HTML

How code works ?

External JavaScript

ตัวอย่าง

สร้างไฟล์ HTML

How code works ?

ข้อดีของการเขียนสคริปต์ไฟล์แยกมีดังต่อไปนี้

ตัวอย่าง

External References

Written by stackpython

No responses yet