HTML CSS JavaScript ต่างกันอย่างไร อธิบายให้คนไม่เคยเขียนโค้ดเข้าใจ

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

เปรียบเทียบให้เห็นภาพ

ลองนึกถึงร่างกายคน

• HTML คือโครงกระดูก กำหนดว่ามีอะไรอยู่ตรงไหน หัวข้ออยู่ตรงนี้ ย่อหน้าอยู่ตรงนั้น รูปอยู่ตรงนี้
• CSS คือเสื้อผ้าและหน้าตา กำหนดว่าสิ่งเหล่านั้นหน้าตาเป็นอย่างไร สีอะไร ขนาดเท่าไหร่ วางตำแหน่งแบบไหน
• JavaScript คือกล้ามเนื้อ ทำให้ขยับได้ กดปุ่มแล้วมีอะไรเกิดขึ้น เมนูเปิดปิดได้ ฟอร์มเตือนเมื่อกรอกผิด

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

ดูของจริงทีละตัว

HTML บอกว่ามีอะไรบ้าง

<h1>ร้านกาแฟบ้านสวน</h1>
<p>เปิดทุกวัน 08:00 - 18:00</p>
<button>ดูเมนู</button>

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

CSS บอกว่าให้หน้าตาเป็นอย่างไร

h1 {
  color: #8B4513;
  font-size: 32px;
}
button {
  background: #C8A165;
  border-radius: 8px;
  padding: 12px 24px;
}

ตอนนี้หัวข้อกลายเป็นสีน้ำตาล ปุ่มมีพื้นหลังสีทองและมุมมน แต่กดแล้วก็ยังไม่มีอะไรเกิดขึ้นอยู่ดี

JavaScript ทำให้เกิดการกระทำ

document.querySelector('button')
  .addEventListener('click', function () {
    alert('เมนูวันนี้: ลาเต้ อเมริกาโน่ มอคค่า');
  });

คราวนี้กดปุ่มแล้วมีข้อความเด้งขึ้นมา เว็บเริ่มโต้ตอบกับผู้ใช้ได้แล้ว

ทำไมต้องแยกกันสามภาษา ทำไมไม่รวมเป็นอันเดียว

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

ประโยชน์ที่เห็นชัดคือ

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

แล้วควรเริ่มเรียนตัวไหนก่อน

เรียงตามลำดับนี้ครับ และอย่าข้าม

1. HTML ใช้เวลาไม่นาน แต่เป็นฐานของทุกอย่าง
2. CSS ตัวนี้ใช้เวลาฝึกนานที่สุด โดยเฉพาะเรื่องการจัดวางให้รองรับทั้งจอมือถือและคอมพิวเตอร์
3. JavaScript เริ่มเมื่อสองตัวแรกคล่องแล้ว จะเข้าใจง่ายขึ้นมาก

ข้อผิดพลาดที่พบบ่อยที่สุดคือรีบกระโดดไปเรียนเครื่องมือสำเร็จรูปตั้งแต่ยังไม่แน่นพื้นฐาน พอเจอปัญหาจริงจะแก้ไม่เป็น เพราะไม่รู้ว่าเครื่องมือนั้นทำอะไรให้อยู่เบื้องหลัง

สรุปสั้น ๆ

HTML คือเนื้อหา CSS คือหน้าตา JavaScript คือพฤติกรรม

เว็บที่ดีต้องมีครบทั้งสาม และที่สำคัญกว่านั้นคือใช้ให้ถูกหน้าที่ อย่าใช้ JavaScript ทำงานที่ CSS ทำได้ดีกว่า และอย่าใช้ CSS แต่งจนโครงสร้าง HTML เสียความหมาย