HTML CSS JS ต่างกันยังไง? ทำหน้าเว็บร้านกาแฟแรกด้วยมือตัวเอง

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

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

จบบทความนี้คุณจะ:

• อธิบายได้ว่า HTML, CSS และ JavaScript ต่างกันยังไง ผ่านภาพบ้านหนึ่งหลัง
• เขียน index.html, style.css และ script.js ที่ทำงานร่วมกันได้จริง
• เข้าใจคำว่า Tag, Selector, Property และ Event
• เปิด DevTools ด้วยปุ่ม F12 แล้วอ่าน error ใน Console ได้
• ต่อยอดหน้าเว็บด้วยแบบฝึกหัด 3 ข้อพร้อมเฉลย

ถ้าอยากเห็นภาพรวมก่อน คลิปนี้สรุปไว้ใน 1 นาทีครับ

หน้าเว็บก็เหมือนบ้านหนึ่งหลัง

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

หน้าเว็บแบ่งงานแบบเดียวกันเลยครับ

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

ศัพท์ที่ต้องรู้

เตรียมเครื่อง

ของที่ต้องมีแค่ 2 อย่าง ฟรีทั้งคู่

• VS Code โปรแกรมแก้โค้ด โหลดได้ที่ code.visualstudio.com (ตัวอื่นก็ได้ แต่อย่าใช้ Word)
• เบราว์เซอร์ Chrome หรือ Edge ก็ได้ DevTools ของสองตัวนี้หน้าตาเหมือนกัน

จากนั้นเตรียมพื้นที่ทำงาน

1. สร้างโฟลเดอร์ใหม่ชื่อ coffee ไว้ที่ที่หาง่าย เช่น Desktop
2. เปิด VS Code แล้วไปที่เมนู File > Open Folder เลือกโฟลเดอร์ coffee
3. ที่แถบ Explorer ด้านซ้าย กดไอคอน New File แล้วสร้างไฟล์ 3 ไฟล์ตามนี้

coffee/
├── index.html
├── style.css
└── script.js

เช็กว่าได้แล้ว: แถบซ้ายของ VS Code ขึ้นโฟลเดอร์ COFFEE มีครบ 3 ไฟล์ ชื่อตรงเป๊ะ ตัวพิมพ์เล็กทั้งหมด

ระวังนามสกุลซ้อนบน Windows ไฟล์ที่สร้างจาก Notepad อาจกลายเป็น index.html.txt โดยเรามองไม่เห็น เพราะ Windows ซ่อนนามสกุลไว้ เปิด File Explorer แล้วเลือก View > Show > File name extensions (Windows 11) เพื่อให้เห็นนามสกุลจริง หรือสร้างไฟล์ใน VS Code ไปเลยจะชัวร์สุด

HTML วางโครงร้าน

เริ่มจากโครงก่อน เปิดไฟล์ index.html แล้วพิมพ์โค้ดนี้ลงไป พิมพ์เองจะจำได้ดีกว่าก๊อปครับ แต่ก๊อปก็ไม่ผิด

<!DOCTYPE html>
<html lang="th">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ร้านกาแฟ DevKub</title>
  </head>
  <body>
    <h1>ร้านกาแฟ DevKub</h1>
    <p>ลาเต้เย็น 55 บาท</p>
    <button id="buy">ใส่ตะกร้า</button>
    <p id="msg"></p>
  </body>
</html>

กด Ctrl+S (Mac ใช้ Cmd+S) เพื่อเซฟ แล้วดับเบิลคลิก index.html ในโฟลเดอร์ coffee ช่องที่อยู่ของเบราว์เซอร์จะขึ้นต้นด้วย file:/// แปลว่าเปิดไฟล์จากเครื่องเราเอง ยังไม่ได้อยู่บนอินเทอร์เน็ต

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

อ่านโค้ดทีละบรรทัด

• <!DOCTYPE html> บอกเบราว์เซอร์ว่านี่คือ HTML รุ่นปัจจุบัน ใส่ไว้บรรทัดแรกเสมอ
• <html lang="th"> ครอบทั้งหน้า และบอกว่าเนื้อหาเป็นภาษาไทย
• <head> ข้อมูลเบื้องหลังของหน้า ส่วนนี้ไม่โชว์บนหน้าเว็บโดยตรง
  • <meta charset="utf-8"> บอกว่าไฟล์เข้ารหัสตัวอักษรแบบ UTF-8 ถ้าขาดบรรทัดนี้ ภาษาไทยมีโอกาสกลายเป็นตัวอ่านไม่ออก
  • <meta name="viewport" ...> บอกมือถือให้แสดงหน้าตามความกว้างจอจริง ไม่ย่อจนตัวเล็กจิ๋ว
  • <title> ข้อความที่ขึ้นบนแท็บของเบราว์เซอร์
• <body> ส่วนที่คนเห็นจริงบนหน้าจอ
  • <h1> หัวข้อหลักของหน้า (h ย่อมาจาก heading) ปกติมีหน้าละหนึ่งอัน
  • <p> ย่อหน้าข้อความ (paragraph)
  • <button id="buy"> ปุ่ม และตั้งชื่อเฉพาะว่า buy ไว้ให้ JavaScript ตามหาเจอทีหลัง
  • <p id="msg"></p> ย่อหน้าว่างชื่อ msg ตอนนี้ยังไม่มีข้อความ เดี๋ยว JavaScript จะมาเติมให้

Tag ส่วนใหญ่มาเป็นคู่ คือป้ายเปิด <p> กับป้ายปิด </p> ที่มี / นำหน้า ส่วน <meta> เป็น Tag เดี่ยว เพราะไม่ได้ครอบเนื้อหาอะไร การย่อหน้าเป็นชั้นๆ ไม่มีผลกับหน้าเว็บ แต่ช่วยให้เราเห็นว่าอะไรอยู่ข้างในอะไร

วงจรแก้ เซฟ รีเฟรช

ตั้งแต่นี้ไปเราจะวนสามจังหวะนี้

1. แก้ โค้ดใน VS Code
2. เซฟ ด้วย Ctrl+S (Mac Cmd+S)
3. รีเฟรช หน้าเว็บในเบราว์เซอร์ด้วย F5 (Mac Cmd+R)

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

ลองดูครับ แก้ราคาเป็น ลาเต้เย็น 60 บาท เซฟ แล้วกด F5 ตัวเลขควรเปลี่ยนตาม เสร็จแล้วแก้กลับเป็น 55

สังเกตจุดกลมบนแท็บ แท็บไฟล์ใน VS Code ที่มีจุดกลมแทนกากบาท แปลว่ายังไม่ได้เซฟ และอย่าเผลอกด F5 ใน VS Code เพราะในนั้น F5 คือการเริ่ม debug ต้องคลิกที่เบราว์เซอร์ก่อนแล้วค่อยกด ถ้าขี้ลืมเซฟ เปิด File > Auto Save ไว้เลย

CSS ทาสีให้ร้านน่าเข้า

โครงพร้อมแล้ว ถึงเวลาทาสี เปิดไฟล์ style.css แล้วพิมพ์

body {
  font-family: sans-serif;
  background: #ffe8cc;
  text-align: center;
  padding: 40px;
}
 
button {
  background: orange;
  color: white;
  border: none;
  border-radius: 999px;
  padding: 12px 28px;
  font-size: 18px;
}
 
#msg {
  color: green;
  font-weight: bold;
}

เขียน CSS ไว้ยังไม่พอ ต้องบอก HTML ด้วยว่าให้ใช้ไฟล์นี้ เหมือนซื้อสีมาแล้วต้องบอกช่างว่าทาห้องไหน เพิ่มบรรทัด <link> ใน <head> ของ index.html ใต้ <title>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ร้านกาแฟ DevKub</title>
    <link rel="stylesheet" href="style.css">
  </head>

rel="stylesheet" บอกว่าไฟล์ที่ลิงก์มาคือไฟล์ตกแต่ง ส่วน href="style.css" คือชื่อไฟล์ เบราว์เซอร์จะหาไฟล์นี้ในโฟลเดอร์เดียวกับ index.html ชื่อจึงต้องตรงกันทุกตัวอักษร

เซฟทั้งสองไฟล์ แล้วกด F5

เช็กว่าได้แล้ว: พื้นหลังเป็นสีครีมอมส้ม ทุกอย่างอยู่กลางหน้า และปุ่มกลายเป็นสีส้มตัวหนังสือขาว ขอบมนเป็นแคปซูล

อ่าน CSS ยังไง

CSS ทุกก้อนมีรูปแบบเดียวกัน คือ Selector ตามด้วยปีกกา ข้างในเป็นคู่ Property กับค่า คั่นกลางด้วย : และปิดท้ายแต่ละบรรทัดด้วย ;

selector {
  property: value;
}

Selector ในไฟล์ของเรามีสองแบบ

• ชื่อ Tag ตรงๆ อย่าง body และ button หมายถึงทุกชิ้นที่เป็น Tag นั้น ถ้ามีสามปุ่ม ทั้งสามปุ่มจะเป็นสีส้มหมด
• # ตามด้วย id อย่าง #msg หมายถึงชิ้นที่มี id="msg" ชิ้นเดียว (อีกแบบที่เจอบ่อยคือ . ตามด้วยชื่อ class เช่น .price ใช้แต่งหลายชิ้นพร้อมกัน)

ส่วน Property แต่ละตัวทำหน้าที่ตามนี้

รหัสสีหกหลักคืออะไร #ffe8cc คือสีแดง เขียว น้ำเงิน ผสมกันสีละสองหลัก จาก 00 (ไม่มีเลย) ถึง ff (เต็มที่) ไม่ต้องจำครับ ใน VS Code จะมีช่องสีเล็กๆ ขึ้นหน้ารหัส เอาเมาส์ไปชี้แล้วเลือกสีจากจานสีได้เลย

JavaScript ทำให้ปุ่มกดได้

บ้านสวยแล้ว แต่สวิตช์ยังไม่ได้ต่อสายไฟ เปิดไฟล์ script.js แล้วพิมพ์

const buy = document.getElementById('buy');
const msg = document.getElementById('msg');
 
buy.addEventListener('click', () => {
  msg.textContent = 'ใส่ตะกร้าแล้ว 1 แก้ว';
});

จากนั้นกลับไปที่ index.html แล้วเพิ่มบรรทัด <script> ไว้ใต้ <p id="msg"></p> ก่อนบรรทัด </body> ไฟล์ฉบับเต็มจะเป็นแบบนี้

<!DOCTYPE html>
<html lang="th">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ร้านกาแฟ DevKub</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>ร้านกาแฟ DevKub</h1>
    <p>ลาเต้เย็น 55 บาท</p>
    <button id="buy">ใส่ตะกร้า</button>
    <p id="msg"></p>
    <script src="script.js"></script>
  </body>
</html>

เซฟทุกไฟล์ กด F5 แล้วลองคลิกปุ่ม

เช็กว่าได้แล้ว: คลิกแล้วมีข้อความสีเขียวตัวหนา "ใส่ตะกร้าแล้ว 1 แก้ว" ขึ้นใต้ปุ่ม สีเขียวมาจาก #msg ใน CSS ตรงนี้แหละที่ทั้งสามชั้นทำงานร่วมกัน

เกิดอะไรขึ้นเบื้องหลัง

• document.getElementById('buy') document คือตัวแทนของทั้งหน้า คำสั่งนี้แปลว่า "หาชิ้นที่มี id ชื่อ buy ให้หน่อย" แล้วเก็บไว้ในกล่องชื่อ buy ที่สร้างด้วย const (กล่องที่ใส่แล้วไม่เปลี่ยน) บรรทัดที่สองทำแบบเดียวกันกับ msg
• buy.addEventListener('click', ...) แปลว่า "ปุ่ม buy คอยฟังไว้นะ ถ้ามีคนคลิก ให้ทำงานนี้" การคลิกคือ Event หรือเหตุการณ์ ส่วน 'click' คือชนิดของเหตุการณ์
• () => { ... } คือฟังก์ชัน หรือชุดคำสั่งที่จะรันตอนเกิดเหตุการณ์ เขียนแบบลูกศร (arrow function) ซึ่งเป็นวิธีเขียนแบบสั้น
• msg.textContent = '...' เปลี่ยนข้อความข้างใน msg เป็นข้อความใหม่

จุดสำคัญคือ โค้ดในฟังก์ชัน ยังไม่รัน ตอนเปิดหน้า มันแค่ถูกฝากไว้กับปุ่ม และรันใหม่ทุกครั้งที่มีคนคลิก เหมือนเดินสายไฟรอไว้ แต่ไฟจะติดตอนกดสวิตช์

ทำไม script ต้องอยู่ท้าย body

เบราว์เซอร์อ่าน HTML จากบนลงล่าง และสร้างของบนหน้าตามลำดับที่อ่านเจอ ถ้าวาง <script> ไว้ใน <head> ตอนที่ script.js ทำงาน ปุ่มยังไม่ถูกสร้าง getElementById('buy') จึงได้ค่า null (ว่างเปล่า) แล้วบรรทัด buy.addEventListener ก็พังทันที พอวางไว้ก่อน </body> ทุกชิ้นถูกสร้างเสร็จแล้ว script จึงหาปุ่มเจอแน่นอน

อีกวิธีที่จะเจอในโค้ดคนอื่น บางคนวาง <script src="script.js" defer></script> ไว้ใน <head> คำว่า defer สั่งให้รอรันจนอ่าน HTML ครบทั้งหน้า ได้ผลเหมือนกัน แต่ตอนเริ่มต้นวางท้าย body ไปก่อนจะเห็นลำดับชัดกว่า

เปิด DevTools ส่องดูข้างใน

DevTools คือเครื่องมือนักพัฒนาที่ติดมากับเบราว์เซอร์ เปิดด้วย F12 หรือ Ctrl+Shift+J เพื่อไปที่ Console ทันที (Mac ใช้ Cmd+Option+J) แท็บ Console คือที่ที่ JavaScript รายงาน error

ลองทำให้พังดูสักครั้งครับ จะได้รู้ว่าเวลาพังจริงหน้าตาเป็นยังไง

1. ใน script.js แก้ 'buy' ในบรรทัดแรกเป็น 'by' (สะกดผิด) แล้วเซฟ
2. ที่หน้าเว็บ กด F12 เลือกแท็บ Console แล้วกด F5
3. จะเห็นบรรทัดสีแดงประมาณนี้

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
    at script.js:4:5

อ่านแบบนี้ครับ กล่อง buy เป็น null เพราะไม่มีชิ้นไหนชื่อ by จึงเรียก addEventListener จากของที่ไม่มีอยู่จริงไม่ได้ ส่วน script.js:4 บอกว่าพังที่บรรทัด 4 คลิกตรงนั้นเพื่อกระโดดไปดูบรรทัดได้เลย แก้กลับเป็น 'buy' เซฟ แล้วกด F5 error จะหายไป

Console ยังพิมพ์คำสั่ง JavaScript สดๆ ได้ด้วย ลองพิมพ์บรรทัดนี้ในช่องล่างสุดของ Console แล้วกด Enter

document.getElementById('msg').textContent = 'ทดลองจาก Console';

ข้อความใต้ปุ่มจะเปลี่ยนทันที แต่กด F5 แล้วก็หาย เพราะเราแก้แค่หน้าที่เปิดอยู่ ไม่ได้แก้ไฟล์ (ถ้าวางโค้ดแล้ว Chrome ขึ้นคำเตือน ให้พิมพ์เองแทน) อีกแท็บที่ควรรู้จักคือ Elements ลองคลิกที่ปุ่มในแท็บนี้ แล้วแก้ค่า background ในช่อง Styles ทางขวา สีปุ่มจะเปลี่ยนสดๆ ไว้ลองก่อนแก้จริงในไฟล์

แบบฝึกหัด 3 ข้อ พร้อมเฉลย

ลองทำเองก่อนแล้วค่อยอ่านเฉลยนะครับ

ข้อ 1 เพิ่มเมนูอเมริกาโน่

โจทย์: เพิ่มเมนู "อเมริกาโน่ 45 บาท" ใต้ลาเต้เย็น

เฉลย: เพิ่ม <p> ใหม่หนึ่งบรรทัดใน index.html ต่อจากบรรทัดลาเต้

    <h1>ร้านกาแฟ DevKub</h1>
    <p>ลาเต้เย็น 55 บาท</p>
    <p>อเมริกาโน่ 45 บาท</p>
    <button id="buy">ใส่ตะกร้า</button>

แก้แค่ HTML เพราะเป็นการเพิ่มของในโครง ส่วนการจัดกลางได้มาจาก CSS ของ body ที่มีอยู่แล้ว

ข้อ 2 เปลี่ยนสีปุ่ม

โจทย์: เปลี่ยนปุ่มจากสีส้มเป็นสีอื่น เช่นสีม่วง

เฉลย: แก้ที่ style.css บรรทัด background ของ button

button {
  background: purple;
  color: white;
  border: none;
  border-radius: 999px;
  padding: 12px 28px;
  font-size: 18px;
}

ใส่ชื่อสีอย่าง purple หรือรหัสสีอย่าง #ff4d5e (แดงอมชมพู) ก็ได้ ข้อนี้แก้แค่ CSS เพราะเป็นเรื่องหน้าตา ไม่ต้องแตะ HTML

ข้อ 3 นับจำนวนแก้ว

โจทย์: ตอนนี้กดกี่ครั้งก็ขึ้น "1 แก้ว" ตลอด ให้เปลี่ยนเป็นนับจริง กดครั้งแรกขึ้น 1 แก้ว ครั้งที่สองขึ้น 2 แก้ว ไปเรื่อยๆ

เฉลย: ต้องมีตัวแปรไว้จำจำนวน แล้วบวกเพิ่มทุกครั้งที่คลิก แก้ script.js ทั้งไฟล์เป็นแบบนี้

const buy = document.getElementById('buy');
const msg = document.getElementById('msg');
let n = 0;
 
buy.addEventListener('click', () => {
  n = n + 1;
  msg.textContent = 'ใส่ตะกร้าแล้ว ' + n + ' แก้ว';
});

• let n = 0; สร้างกล่องชื่อ n เริ่มที่ 0 ใช้ let แทน const เพราะค่าข้างในต้องเปลี่ยนได้
• n = n + 1; ทุกครั้งที่คลิก เอาค่าเดิมมาบวกหนึ่งแล้วเก็บกลับเข้ากล่อง
• 'ใส่ตะกร้าแล้ว ' + n + ' แก้ว' + ระหว่างข้อความกับตัวเลขคือการต่อข้อความ สังเกตช่องว่างหลัง "แล้ว" และหน้า "แก้ว" ถ้าไม่เว้น ตัวเลขจะติดกับคำ

เช็กว่าได้แล้ว: กดสามครั้งต้องขึ้น "ใส่ตะกร้าแล้ว 3 แก้ว" และพอกด F5 จะเริ่มนับใหม่ เพราะตัวแปรอยู่แค่ในหน้าที่เปิดอยู่

ระวังวาง let ผิดที่ ถ้าย้าย let n = 0; เข้าไปไว้ในฟังก์ชัน ตัวเลขจะเป็น 1 ตลอด เพราะทุกครั้งที่คลิก ฟังก์ชันจะสร้างกล่องใหม่ที่เริ่มจาก 0 แล้วค่อยบวกหนึ่ง ตัวนับต้องอยู่นอกฟังก์ชัน ถึงจะจำค่าข้ามการคลิกแต่ละครั้งได้

เจอปัญหา ลองเช็กตามนี้

ถ้ามุมขวาล่างของ VS Code ไม่ใช่ UTF-8 ให้คลิกตรงนั้น เลือก Save with Encoding แล้วเลือก UTF-8

กฎจำง่ายๆ คือ เจออะไรแปลกให้กด F12 ดู Console ก่อนเสมอ error ส่วนใหญ่บอกชื่อไฟล์และเลขบรรทัดมาให้แล้วครับ

ไปต่อ

• เรียนพื้นฐานเว็บต่อแบบเป็นขั้นตอนที่ MDN Learn web development ฟรีและละเอียด
• อยากจัดเมนูหลายรายการให้เรียงเป็นแถวเป็นคอลัมน์ ต่อด้วย Grid กับ Flexbox
• พอเว็บเริ่มมีหลายหน้า ลองดู เริ่มต้นใช้ Astro ที่ส่ง JavaScript ไปเฉพาะส่วนที่ต้องกดได้ เว็บจึงเบาและไว
• อยากให้เพื่อนเปิดเว็บนี้จากมือถือ ดูคลิปเอาเว็บขึ้น GitHub Pages ฟรีได้เลย

สรุป

• HTML คือโครงบ้าน บอกว่าหน้ามีอะไร CSS คือการทาสี บอกว่าหน้าตาเป็นยังไง JavaScript คือสายไฟ บอกว่ากดแล้วเกิดอะไร
• HTML ใช้ Tag เปิดปิดครอบเนื้อหา และใช้ id ตั้งชื่อให้ชิ้นที่ CSS หรือ JavaScript ต้องตามหา
• CSS คือ Selector ตามด้วยคู่ Property กับค่า และต้องลิงก์เข้ามาด้วย <link> ใน <head>
• JavaScript หาชิ้นด้วย getElementById แล้วฟัง Event ด้วย addEventListener โดยวาง <script> ไว้ก่อน </body> ให้ของบนหน้าเกิดครบก่อน
• แก้ เซฟ รีเฟรช ทุกครั้ง และเปิด F12 ดู Console เมื่อมีอะไรแปลก

พร้อมแล้วก็ไปทำ Quiz ท้ายบทด้านล่างเพื่อรับ XP ได้เลยครับ