Skip to main content
0
DevInitFront-End Developer

การใช้งาน JavaScript ในการควบคุมเว็บไซต์

JavaScript คืออะไร?

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

การใช้งาน JavaScript ในการควบคุมเว็บไซต์

ผมจะสร้างตัวอย่างหน้าเว็บเพจขึ้นมาก่อน โดยผมจะขอยกตัวอย่างในแบบที่เข้าใจง่ายและกระชับที่สุดนะครับ

โค้ด:

<!DOCTYPE html>
<head>
  <title>บล็อค.th</title>
</head>
<body>
  <h1>สวัสดีครับ</h1>
  <p>ยินดีต้อนรับเข้าสู่บล็อค</p>
</body>
</html>


ผลลัพธ์:


ตอนนี้เราก็จะมีหน้าเว็บเพจแล้ว ถัดไปผมจะเขียน JavaScript ใส่เข้าไปในโค้ด โดยก่อนอื่นโค้ดที่เพิ่มเข้าไปคือ โค้ด HTML ที่ชื่อว่า “script” หรือ “<script>…</script>” โดยหลังนี้ผมจะใช้คำว่า “HTML element” แทนคำว่า “โค้ด HTML” ซึ่งในที่นี้คือ HTML element ที่ชื่อ script โดยการที่เพิ่ม HTML element นี้เข้าไปจะทำให้สามารถเขียน JavaScript ในไฟล์ HTML ได้เลยดังนั้นโค้ดทั้งในภาษา HTML และ JavaScript จะอยู่หน้าเดียวกัน ทำให้เราเห็นตัวอย่างได้ชัดเจน โดยโค้ดที่อยู่ระหว่าง HTML element script นี้ จะเป็นภาษา JavaScript ครับ

มาลองดูตัวอย่างแรกกันเลย

ตัวอย่าง 1

โค้ด:

<!DOCTYPE html>
<head>
  <title>บล็อค.th</title>
</head>
<body>
  <h1>สวัสดีครับ</h1>
  <p>ยินดีต้อนรับเข้าสู่บล็อค</p>

  <script>
    document.title = 'บล็อค.JavaScript';
  </script>
</body>
</html>


ผลลัพธ์:


สังเกตมั้ยครับว่ามีอะไรเปลี่ยนไป ลองดูอีกทีนะครับ


ชื่อของหน้าเว็บเพจเราเปลี่ยนจาก “บล็อค.th” ไปเป็น “บล็อค.JavaScript” แล้ว ทำไมกันนะ? ทั้งๆ ที่เราก็ใช้ <title>บล็อค.th</title>

นั่นก็เพราะว่าโค้ดของเราทำงานทีละบรรทัดจากบนลงมาล่าง และเมื่อเจอกับคำสั่ง JavaScript

document.title = 'บล็อค.JavaScript';

ก็จะทำการเปลี่ยนข้อความใน HTML element title ไปเป็น “บล็อค.JavaScript” ตามที่เราพิมพ์ลงไปนั่นเอง แล้วอะไรคือ document กันละ หลายคนอาจจะสงสัย ทำไมเราไม่พิมพ์ title = ‘บล็อค.JavaScript’; ไปเลย

Document คือ หนึ่งใน Build-in Objects ของ JavaScript โดยจะเรียกว่า “document object”
โดยเราจะใช้ ” . ” หรือ dot notation ในการเข้าถึง property ภายใน document object ซึ่งตาม
ตัวอย่างข้างบนก็คือ title property ครับ ลองดูตัวอย่างที่ 2 กันนะครับ จะได้เห็นภาพมากยิ่งขึ้น

จากตัวอย่างเว็บเพจที่เราสร้างตอนแรก ผมจะเพิ่มคำสั่งนี้ไปนะครับ

ตัวอย่าง 2

โค้ด:

<!DOCTYPE html>
<head>
  <title>บล็อค.th</title>
</head>
<body>
  <h1>สวัสดีครับ</h1>
  <p>ยินดีต้อนรับเข้าสู่บล็อค</p>

  <script>
    document.body.innerHTML = 'Cleared';
  </script>
</body>
</html>


ผลลัพธ์:


ทำไมข้อความเดิมในหน้าเว็บเราหายไปแล้ว? ทั้งๆ ที่ใส่ tag h1, p (HTML tag กับ HTML element มีความหมายเหมือนกันครับ) เหมือนกับตัวอย่างแรกครับโค้ดของเราทำงานทีละบรรทัดจากบนลงล่าง เมื่อมาเจอคำสั่ง
document.body.innerHTML = 'Cleared'; จะหมายถึงการที่เราเข้าถึง innerHTML property ของ body object แล้วให้แทนที่เว็บเพจด้วยข้อความ “Cleared”

จาก 2 ตัวอย่างที่แสดงไป จะเห็นได้ว่า document object จะเหมือนกับเป็นตัวแทนเว็บเพจของเรา หรือ
” The document object represents / models the webpage. ” หรือ
” Document Object Model (DOM) ”

ทำไมถึงต้องรู้จัก DOM?

เพราะ DOM เป็นแนวคิดหลักในการที่เราใช้ JavaScript ในการควบคุมเว็บไซต์ และสร้าง dynamic HTML ได้นั่นเองครับ DOM เป็นตัวแทนของ HTML document เหมือนกับโครงสร้างต้นไม้ โดยมีแต่ละส่วนย่อยๆ หรือโหนด (node) ประกอบกันขึ้นมาเป็น Document



ตัวอย่างสิ่งที่ JavaScript ทำได้

  • แก้ไข HTML elements
  • แก้ไข HTML attributes
  • แก้ไข CSS ที่ใช้ตกแต่ง
  • เพิ่มหรือลบ HTML elements
  • จัดการ events หรือเหตุการณ์ที่เกิดกับเพจ
  • และอื่นๆ

มาลองดูตัวอย่างอีกซักอันดีกว่าครับ

ตัวอย่าง 3

จากตัวอย่างเว็บเพจเดิมที่เราสร้างตอนต้นบทความ ผมมีการเพิ่ม

  • HTML tag button
  • HTML attribute “onclick”
  • ใน onclick event ผมมีการใส่ code JavaScript ด้านใน ซึ่งจะเรียกใช้เมื่อผู้ใช้กดปุ่ม
  • เพิ่ม id “heading” ใน tag h1
  • เพิ่ม id “paragraph” ใน tag p

โค้ด:

<!DOCTYPE html>
<head>
  <title>บล็อค.th</title>
</head>
<body>
  <h1 id="heading">สวัสดีครับ</h1>
  <p id="paragraph">ยินดีต้อนรับเข้าสู่บล็อค</p>

  <button onclick="
    document.body.style.background = 'black';
    document.getElementById('heading').style.color = 'white';
    document.getElementById('paragraph').style.color = 'red';
  ">
    click
  </button>
  <script>

  </script>
</body>
</html>


ผลลัพธ์: ก่อนกดปุ่ม


ผลลัพธ์: หลังกดปุ่ม


โดยผลลัพธ์ที่เปลี่ยนแปลงไปหลังกดปุ่มจะมี 3 อย่าง ตามโค้ด JavaScript 3 บรรทัดที่เพิ่มเข้าไป

document.body.style.background = 'black';
document.getElementById('heading').style.color = 'white';
document.getElementById('paragraph').style.color = 'red';
  1. document.body.style.background = ‘black’;
    -> จะเปลี่ยนสีพื้นหลังของเว็บเพจเป็นสีดำ
  2. document.getElementById(‘heading’).style.color = ‘white’;
    -> จะเปลี่ยนสีของตัวหนังสือที่มี HTML element id ชื่อ ” heading ” เป็นสีขาว
  3. document.getElementById(‘paragraph’).style.color = ‘red’;
    -> จะเปลี่ยนสีของตัวหนังสือที่มี HTML element id ชื่อ ” paragraph ” เป็นสีแดง

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

จากบทความวันนี้ สิ่งที่ผู้อ่านได้เรียนรู้

  • Document Object Model (DOM)
  • ตัวอย่างการใช้ JavaScript ในการแก้ไขจัดการ web page เบื้องต้น

ผู้อ่านทุกคนสามารถไปต่อยอด ลองศึกษาความสามารถของ JavaScript เพิ่มเติมได้เลย แล้วพบกันบทความหน้าครับผม

Keep coding ! Keep learning !


อ้างอิง

  • หนังสือ Eloquent JavaScript by Marijn Haverbeke
    Chapter 13: JavaScript and the Browser,
    Chapter 14: The Document Object Model,
    Chapter 15: Handling Events
    สืบค้นเมื่อ 1 เมษายน 2567
  • JavaScript HTML DOM สืบค้นเมื่อ 1 เมษายน 2567
    จาก https://www.w3schools.com/js/js_htmldom.asp
  • JavaScript HTML DOM Document สืบค้นเมื่อ 1 เมษายน 2567
    จาก https://www.w3schools.com/js/js_htmldom_document.asp
guywarin

Author guywarin

Front-end Developer

More posts by guywarin

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

ตั้งค่าความเป็นส่วนตัว

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

ยอมรับทั้งหมด
จัดการความเป็นส่วนตัว
  • คุกกี้ที่จำเป็น
    เปิดใช้งานตลอด

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

  • คุกกี้สำหรับการติดตามทางการตลาด

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

บันทึกการตั้งค่า