HTML, CSS และ JavaScript

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

HTML (HyperText Markup Language) คือโครงสร้าง — เนื้อหาและโครงกระดูกของมัน มันบอกว่า "นี่คือหัวข้อ นี่คือย่อหน้า นี่คือปุ่ม" มันคือคำนามของหน้าเว็บ ด้วยตัวมันเองแล้ว HTML เป็นเอกสารธรรมดาที่ไม่มีสไตล์ เหมือนไฟล์ข้อความที่มีป้ายกำกับ เบราว์เซอร์จะแปลง HTML ของคุณให้กลายเป็นต้นไม้ของออบเจ็กต์ที่มีชีวิตอยู่ในหน่วยความจำ เรียกว่า DOM (Document Object Model); เมื่อโค้ด "เปลี่ยนหน้าเว็บ" มันกำลังเปลี่ยน DOM จริงๆ และเบราว์เซอร์จะวาดใหม่ให้ตรงกัน

CSS (Cascading Style Sheets) คือสไตล์ — ทุกอย่างมีหน้าตาอย่างไร สี ฟอนต์ ระยะห่าง เลย์เอาต์ ชิดซ้ายหรือกึ่งกลาง หน้าจอเล็กหรือใหญ่ CSS ไม่ได้เปลี่ยน สิ่งที่ อยู่บนหน้าเว็บ เปลี่ยนแค่วิธีนำเสนอเท่านั้น ถ้า HTML เป็นคำนาม CSS ก็คือคำคุณศัพท์

JavaScript (JS) คือพฤติกรรม — สิ่งที่เกิดขึ้นเมื่อคุณโต้ตอบกับมัน มันฟังการคลิก ส่งข้อมูลไปยังแบ็กเอนด์ แสดงไอคอนหมุนโหลด อัปเดต DOM เมื่อคำตอบกลับมา HTML และ CSS เป็นแบบสถิต; JavaScript ทำให้หน้าเว็บ ทำ สิ่งต่างๆ ได้ มันคือคำกริยา (ภาษาเดียวกันนี้มักจะรันแบ็กเอนด์ด้วย ซึ่งเป็นเหตุผลที่คุณจะเห็นมันอยู่ทุกที่)

วิธีหนึ่งที่จะจินตนาการถึงการแบ่งงาน: HTML สร้างต้นไม้ (DOM), CSS ทาสีมัน และ JavaScript เอื้อมเข้าไปเปลี่ยนมัน:

   HTML ─▶ builds the DOM tree        CSS ─▶ styles it     JS ─▶ changes it
   ┌──────────────────────────┐
   │  page (document)          │
   │  ├── header               │      colors, fonts,       on click,
   │  │   └── "My App"         │      spacing applied      update a node
   │  └── form                 │      to each node         → browser redraws
   │      ├── input  (name)    │
   │      └── button "Save"    │
   └──────────────────────────┘