หน้าเว็บสร้างจากวัตถุดิบสามอย่าง · เล่ม 01

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

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

1.1สิ่งที่เดินทางมาถึง ไม่ใช่ภาพ

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

หยุดคิดสักนิด

ลองเดาดูก่อน: ถ้าสิ่งที่ได้กลับมาไม่ใช่ภาพของหน้าเว็บ แล้วมันคืออะไร?

FIG. 1.1 — หน้าเดียวกัน สองมุมมอง

คาเฟ่ริมทาง

เปิดทุกวัน 7 โมงเช้า

ดูเมนู

หน้าเว็บที่คุณเห็น มีหัวข้อสีอิฐ ข้อความ และปุ่มสีเหลือง ลองกดดูว่าเบื้องหลังมันคืออะไร

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

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

เจาะลึก · สำหรับคนที่อยากรู้มากกว่านี้แล้วรูปภาพในหน้าเว็บล่ะ ไม่ได้ส่งมาเป็นภาพหรือ?

รูปภาพแต่ละรูป เช่น รูปขนมปัง ถูกส่งมาเป็น ไฟล์ภาพแยก จริง ๆ แต่ตัวหน้าเว็บทั้งหน้าไม่ใช่ภาพ ลำดับคือ เบราว์เซอร์ได้รับไฟล์ HTML ก่อน อ่านเจอแท็ก <img src="bread.png"> แล้วจึงส่งคำขอไปเอาไฟล์รูปนั้นมาอีกรอบ จากนั้นวางรูปลงในตำแหน่งที่ HTML บอก ส่วนตัวอักษร ปุ่ม และการจัดวางทั้งหมด เบราว์เซอร์วาดเองจากข้อความ นี่คือเหตุผลที่คุณเลือกคัดลอกข้อความบนหน้าเว็บได้ แต่คัดลอกข้อความในรูปถ่ายไม่ได้

ความเชื่อที่พบบ่อย

“เว็บไซต์ส่งภาพหน้าจอสำเร็จรูปมาให้ เครื่องของเราแค่เอาภาพนั้นมาแสดง”

คำสั่งที่เบราว์เซอร์ได้รับ เขียนด้วยภาษาสามภาษา แต่ละภาษามีหน้าที่ของตัวเองชัดเจน และไม่ก้าวก่ายกัน เรามาทำความรู้จักทีละภาษา

1.2วัตถุดิบที่หนึ่ง: HTML บอกว่ามีอะไร

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

HTML · HyperText Markup Languageภาษาโครงสร้างหน้าเว็บ: ภาษาที่ใช้บอกว่าหน้าเว็บประกอบด้วยชิ้นส่วนอะไรบ้าง โดยห่อเนื้อหาแต่ละชิ้นด้วย 'ป้ายชื่อ' ที่เรียกว่าแท็ก เพื่อบอกว่าชิ้นนั้นคืออะไร

ป้ายชื่อหรือ แท็ก (tag) เขียนอยู่ในวงเล็บแหลมแบบนี้ <h1> และมักมีคู่ปิดที่มีเครื่องหมายทับ </h1> เนื้อหาที่อยู่ระหว่างคู่นี้คือชิ้นส่วนหนึ่งชิ้น ลองอ่านดู แล้วคุณจะเดาได้เองว่าแต่ละบรรทัดคืออะไร

HTML

<h1>ขนมปังอบใหม่ทุกเช้า</h1>
<p>แป้งหมักเอง อบด้วยเตาถ่าน ส่งถึงบ้าน</p>
<img src="bread.png" alt="ขนมปังก้อนกลม">
<button>สั่งขนมปัง</button>

index.html — h1 คือหัวข้อใหญ่, p คือย่อหน้า (paragraph), img คือรูปภาพ, button คือปุ่ม

การเปรียบเทียบ · ช่วยให้นึกภาพออก

เปรียบเทียบ: รายการสิ่งของในห้อง

ถ้าหน้าเว็บคือห้องหนึ่งห้อง HTML ก็คือรายการที่เขียนว่าในห้องนี้มีโต๊ะหนึ่งตัว เก้าอี้สองตัว และโคมไฟหนึ่งดวง รายการนี้บอกว่ามีอะไร และเรียงลำดับอย่างไร แต่ไม่ได้บอกว่าโต๊ะสีอะไร

ข้อควรระวัง · การเปรียบเทียบนี้ใช้ไม่ได้ตรงไหน

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

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

FIG. 1.2 · HTML ล้วน: ทุกบรรทัดคือหนึ่งชิ้นบนหน้า

เว็บเดียวกับในห้องทดลอง 01

index.html · แตะบรรทัดใดก็ได้จับคู่แล้ว 0/3

สิ่งที่เบราว์เซอร์วาด

banpaeng.example

ร้านบ้านแป้ง · เมนู · ติดต่อ

ขนมปังอบใหม่ทุกเช้า

แป้งหมักเอง อบด้วยเตาถ่าน ส่งถึงบ้าน

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

เจาะลึก · สำหรับคนที่อยากรู้มากกว่านี้แท็กบอก 'ความหมาย' ไม่ใช่ 'หน้าตา'

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

1.3วัตถุดิบที่สอง: CSS บอกว่าหน้าตาเป็นอย่างไร

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

CSS · Cascading Style Sheetsภาษากำหนดหน้าตา: ภาษาที่ใช้บอกเบราว์เซอร์ว่าชิ้นส่วนแต่ละชิ้นควรมีสี ขนาด ระยะห่าง ฟอนต์ และตำแหน่งอย่างไร โดยไม่ต้องแตะเนื้อหาใน HTML เลย

CSS เขียนเป็น กฎ แต่ละกฎมีสองส่วน ส่วนแรกบอกว่ากฎนี้ใช้กับชิ้นไหน เช่น h1 แปลว่าหัวข้อใหญ่ทุกอัน ส่วนที่สองอยู่ในวงเล็บปีกกา บอกว่าจะเปลี่ยนอะไรเป็นค่าเท่าไร

CSS

h1 {
  color: #9C3A15;      /* สีตัวอักษร */
  font-size: 32px;     /* ขนาดตัวอักษร */
}

button {
  background: #E3A72F; /* สีพื้นปุ่ม */
  border-radius: 12px; /* มุมโค้ง */
}

style.css — กฎหนึ่งข้อ เปลี่ยนหัวข้อทุกอันในหน้าเว็บพร้อมกัน

หยุดคิดสักนิด

ถ้าเราลบไฟล์ CSS ทิ้งทั้งไฟล์ หัวข้อ ย่อหน้า และปุ่ม จะหายไปจากหน้าเว็บด้วยไหม?

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

FIG. 1.3 · ใส่ CSS ทีละกฎ: หน้าตาเปลี่ยน เนื้อหาไม่เปลี่ยน

เว็บเดียวกับในห้องทดลอง 01

style.css · 0/4 กฎ

สิ่งที่เบราว์เซอร์วาด

HTML 5 บรรทัด · ไม่ถูกแก้

banpaeng.example

ร้านบ้านแป้ง · เมนู · ติดต่อ

ขนมปังอบใหม่ทุกเช้า

แป้งหมักเอง อบด้วยเตาถ่าน ส่งถึงบ้าน

เปิดกฎ CSS ทีละข้อแล้วดูหน้าเว็บเปลี่ยนรูปลักษณ์ สังเกตตัวนับด้านล่าง: HTML ไม่เปลี่ยนเลยสักบรรทัด

เจาะลึก · สำหรับคนที่อยากรู้มากกว่านี้ตัว C ใน CSS มาจากคำว่า Cascade

Cascade แปลว่า น้ำตกที่ไหลลงเป็นชั้น ๆ ในหน้าเว็บจริงมักมีกฎหลายข้อที่พูดถึงชิ้นเดียวกัน เช่น กฎหนึ่งบอกว่าปุ่มทุกปุ่มเป็นสีเทา อีกกฎบอกว่าปุ่มสั่งซื้อเป็นสีส้ม เบราว์เซอร์ต้องตัดสินว่าจะเชื่อกฎไหน โดยดูว่ากฎไหน เจาะจงกว่า (เรียกว่า Specificity) และถ้าเจาะจงเท่ากัน กฎที่มา ทีหลัง จะชนะ ที่น่าสนใจคือ หน้าตาเรียบ ๆ ตอนไม่มี CSS ก็มาจาก CSS เหมือนกัน เป็นชุดกฎพื้นฐานที่ติดมากับเบราว์เซอร์ (User Agent Stylesheet) เช่น กฎที่ทำให้ <h1> ตัวหนาและใหญ่กว่าข้อความปกติ

1.4วัตถุดิบที่สาม: JavaScript บอกว่าทำอะไรได้

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

JavaScriptภาษาสั่งพฤติกรรม: ภาษาโปรแกรมที่เบราว์เซอร์ทุกตัวรันได้ ในหน้าเว็บใช้สั่งให้หน้าเว็บตอบสนองต่อสิ่งที่ผู้ใช้ทำ เช่น กด พิมพ์ หรือเลื่อน และเปลี่ยนแปลงหน้าเว็บได้ทันทีโดยไม่ต้องโหลดหน้าใหม่

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

JavaScript

const button = document.querySelector("button");

button.addEventListener("click", () => {
  document.querySelector("h1").textContent = "ขอบคุณที่สั่ง!";
});

script.js — อ่านจากบนลงล่าง: หาปุ่ม → รอฟังการกด → เมื่อถูกกด เปลี่ยนข้อความหัวข้อ

เว็บบ้านแป้งตอนนี้มีทั้ง HTML และ CSS แล้ว ลองกดปุ่ม สั่งขนมปัง ดูก่อน แล้วเปิดสวิตช์ JavaScript และกดอีกครั้ง ช่อง Event log จะเล่าว่าหลังการกดแต่ละครั้งเกิดอะไรขึ้นบ้าง

FIG. 1.4 · เปิด JavaScript: หน้าเว็บเริ่มฟังคุณ

เว็บเดียวกับในห้องทดลอง 01

script.js

// ยังไม่มี JavaScript
// ไม่มีใครคอยฟังการกด

Event log · สิ่งที่เกิดขึ้นหลังการกด

ยังไม่มีการกด

สิ่งที่เบราว์เซอร์วาด · ลองกดปุ่มบนหน้าเว็บ

banpaeng.example

ร้านบ้านแป้ง · เมนู · ติดต่อ

ขนมปังอบใหม่ทุกเช้า

แป้งหมักเอง อบด้วยเตาถ่าน ส่งถึงบ้าน

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

การเปรียบเทียบ · ช่วยให้นึกภาพออก

เปรียบเทียบ: พนักงานที่ยืนรอฟังกริ่ง

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

ข้อควรระวัง · การเปรียบเทียบนี้ใช้ไม่ได้ตรงไหน

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

เจาะลึก · สำหรับคนที่อยากรู้มากกว่านี้ไม่มี JavaScript แล้วทุกปุ่มจะกดไม่ได้เลยหรือ?

ไม่ทั้งหมด HTML มีพฤติกรรมพื้นฐานติดมาบางอย่าง ลิงก์ <a href> พาไปหน้าอื่นได้เอง และปุ่มที่อยู่ในฟอร์ม <form> ส่งข้อมูลไปให้เซิร์ฟเวอร์ได้เองโดยไม่ต้องเขียน JavaScript (ซึ่งเบราว์เซอร์จะโหลดหน้าใหม่ทั้งหน้า) ปุ่ม 'สั่งขนมปัง' ในบทนี้เป็นปุ่มเดี่ยวที่ไม่อยู่ในฟอร์ม จึงไม่มีอะไรเกิดขึ้นเมื่อไม่มี JavaScript สิ่งที่ JavaScript เพิ่มเข้ามาคือการเปลี่ยนหน้าเว็บตามที่เราต้องการ ทันที โดยไม่ต้องโหลดใหม่

เจาะลึก · สำหรับคนที่อยากรู้มากกว่านี้ภาษา JavaScript กับ 'เครื่องมือของเบราว์เซอร์' เป็นคนละส่วนกัน

ตัวภาษา JavaScript มีแค่กฎการเขียน เช่น การจำค่าและการคำนวณ ส่วนคำสั่งอย่าง document.querySelector หรือ addEventListener เป็นเครื่องมือที่ เบราว์เซอร์จัดเตรียมไว้ให้ เรียกรวม ๆ ว่า Web API นี่คือเหตุผลที่ JavaScript ชุดเดียวกันสามารถไปทำงานนอกเบราว์เซอร์ได้ด้วย เช่น บนเซิร์ฟเวอร์ผ่านโปรแกรมอย่าง Node.js ซึ่งไม่มีหน้าเว็บให้แก้ แต่มีเครื่องมืออื่นแทน เช่น การอ่านไฟล์ (เราจะได้เจออีกครั้งในเล่ม 02)

1.5ลงมือ: ประกอบหน้าเว็บด้วยมือคุณเอง

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

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

ภารกิจในห้องทดลอง 01

สำเร็จ 0/5

ไม่ต้องกดเช็กเอง ภารกิจจะติ๊กให้เองเมื่อห้องทดลองด้านล่างอยู่ในสถานะที่ตรงเงื่อนไข

ปิด CSS ทั้งหมด แล้วดูว่าอะไรยังอยู่ (ยังไม่สำเร็จ)
แท็บ CSS → ปิดสวิตช์ 'เปิดใช้ CSS'
สำเร็จเมื่อ: สวิตช์ CSS อยู่ในสถานะปิด
เปิดเอกซเรย์ HTML (ยังไม่สำเร็จ)
ปุ่ม 'เอกซเรย์ HTML' เหนือหน้าเว็บ
สำเร็จเมื่อ: ปุ่มเอกซเรย์ถูกเปิดและเห็นป้ายชื่อแท็ก
ลบหัวข้อใหญ่ออกจาก HTML (ยังไม่สำเร็จ)
แท็บ HTML → กด 'หัวข้อใหญ่' แล้วดูโค้ด
สำเร็จเมื่อ: ไม่มีบรรทัด <h1> ในโค้ด HTML
กดปุ่มตอน JavaScript ปิด แล้วเปิด JavaScript กดอีกครั้ง (ยังไม่สำเร็จ)
กด 'สั่งขนมปัง' → แท็บ JavaScript เปิดสวิตช์ → กดอีกครั้ง
สำเร็จเมื่อ: กดปุ่มครบทั้งสองแบบ และครั้งที่เปิด JavaScript หน้าเว็บตอบสนอง
ภารกิจท้าทาย: กดปุ่มแล้วมีขนมปังเพิ่มในรายการ (ยังไม่สำเร็จ)
ต้องใช้ทั้ง HTML (มีรายการ) และ JavaScript (เติมของ)
สำเร็จเมื่อ: รายการ <ul> อยู่บนหน้า และมีขนมปังอย่างน้อย 1 ชิ้นในรายการ

ข้ามห้องทดลองนี้ ไปอ่านต่อ →

EXPERIMENT · ห้องทดลอง 01เว็บบ้านแป้งหน้าเดิม คราวนี้อยู่ในมือคุณทั้งหมด ทดลองได้ไม่จำกัด กด 'เริ่มใหม่' เมื่อไรก็ได้

LAB 01 — Frontend Construction Chamber

สนามทดลองหน้าเว็บ

IDLESimulation

หน้าเว็บจำลองนี้ทำงานในเบราว์เซอร์ของคุณ โค้ดด้านล่างคือโค้ดที่หน้าเว็บจริงจะใช้ เพื่อให้เห็นความสัมพันธ์ระหว่างภาพกับภาษา

ผลลัพธ์ · สิ่งที่ผู้ใช้เห็น

HTML5 ชิ้นบนหน้า
CSSกำลังตกแต่ง
JavaScriptปิดอยู่ · ไม่มีใครฟัง

เกิดอะไรขึ้น?

หน้าเว็บนี้สร้างจากสามภาษา เลือกแท็บด้านซ้ายเพื่อควบคุมทีละส่วน ลองเริ่มจาก ปิด CSS ในแท็บ CSS หรือเปิด เอกซเรย์ HTML เพื่อดูว่าทุกชิ้นบนหน้ามีชื่อเรียก

banpaeng.example

ร้านบ้านแป้ง เมนู · ติดต่อ

ขนมปังอบใหม่ทุกเช้า

แป้งหมักเอง อบด้วยเตาถ่าน ส่งถึงบ้าน

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

index.html · โค้ดที่ตรงกับหน้าจอตอนนี้

<body>
  <header>ร้านบ้านแป้ง · เมนู · ติดต่อ</header>
  <h1>ขนมปังอบใหม่ทุกเช้า</h1>
  <p>แป้งหมักเอง อบด้วยเตาถ่าน ส่งถึงบ้าน</p>
  <img src="bread.png" alt="ขนมปังก้อนกลม">
  <button id="order">สั่งขนมปัง</button>
</body>

1.6สิ่งที่คุณเพิ่งค้นพบ

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

ความจริงทางเทคนิค: แยกหน้าที่ให้ชัด

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

ในเว็บไซต์จริง สามภาษานี้มักแยกอยู่คนละไฟล์ ไฟล์ HTML จะมีบรรทัดที่บอกเบราว์เซอร์ว่า 'ไปหยิบไฟล์ CSS และ JavaScript มาด้วยนะ' เบราว์เซอร์จึงขอไฟล์ทั้งหมดตามลำดับ แล้วประกอบเข้าด้วยกัน

HTML

<link rel="stylesheet" href="style.css">   <!-- หยิบหน้าตามาใช้ -->
<script src="script.js"></script>          <!-- หยิบพฤติกรรมมาใช้ -->

บรรทัดที่เชื่อมสามไฟล์เข้าหากัน

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

FIG. 1.6 — ใครรับผิดชอบเรื่องนี้?

ถูก 0/6

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

1.7สามภาษานี้คือทั้งหมดของเว็บไซต์หรือเปล่า?

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

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

FIG. 1.7 — หน้านี้เอง โหลดอะไรมาบ้าง?

ข้อมูลจริงจากเบราว์เซอร์ของคุณ

กำลังอ่านข้อมูลจากเบราว์เซอร์…

ตัวเลขนี้นับจากการเปิดแท็บนี้ ขนาด 0 KB หมายถึงเบราว์เซอร์ใช้สำเนาที่เก็บไว้แล้ว อยากเห็นรายการทีละไฟล์ เปิดปุ่ม Machine Lens มุมขวาล่าง แล้วเลือกแท็บ BACKEND

ความจริงทางเทคนิค: สามภาษานี้คือแกนหลักของฝั่งหน้าบ้าน ไม่ใช่ทั้งหมด

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

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

Frontendฝั่งหน้าบ้าน: ทุกอย่างที่ทำงานอยู่ในเบราว์เซอร์บนเครื่องของผู้ใช้ ได้แก่ HTML, CSS และ JavaScript ที่คุณเพิ่งทดลอง ตรงข้ามกับ Backend ซึ่งทำงานอยู่บนเครื่องของผู้ให้บริการ

SYSTEM SUMMARY

สรุปบทนี้

01เบราว์เซอร์ไม่ได้รับภาพของหน้าเว็บ แต่ได้รับไฟล์ข้อความ แล้ววาดหน้าเว็บขึ้นมาเอง
02HTML บอกว่าหน้าเว็บมีอะไร โดยห่อเนื้อหาด้วยแท็ก เช่น <h1> หรือ <button>
03CSS บอกว่าแต่ละชิ้นหน้าตาเป็นอย่างไร ลบ CSS ทิ้ง เนื้อหาก็ยังอยู่ครบ
04JavaScript บอกว่าหน้าเว็บตอบสนองอย่างไร โดยรอฟัง Event เช่น การกดปุ่ม
05ทั้งสามภาษาแยกหน้าที่ชัดเจน แต่ต้องทำงานร่วมกันจึงได้หน้าเว็บที่สมบูรณ์
06สามภาษานี้เป็นแกนหลักของฝั่งหน้าบ้าน แต่หน้าเว็บยังโหลดรูปภาพและฟอนต์ และข้อมูลส่วนใหญ่มาจากเซิร์ฟเวอร์

ข้ามแบบทดสอบ ไปอ่านต่อ →

ท้ายบท

เช็กความเข้าใจ

ตอบแล้ว 0/5

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

ข้อ 1

เพื่อนของคุณบอกว่า 'ตอนเปิดเว็บ เครื่องเราดาวน์โหลดภาพของหน้าเว็บมาแสดง' ข้อใดอธิบายได้ถูกต้องที่สุด?

ข้อ 2

คุณอยากเปลี่ยนปุ่มทุกปุ่มบนเว็บจากสีเหลืองเป็นสีฟ้า ควรแก้ที่ไหน?

ข้อ 3

ในห้องทดลอง ตอนปิด JavaScript แล้วกดปุ่ม 'สั่งขนมปัง' ทำไมไม่มีอะไรเกิดขึ้น?

ข้อ 4

ข้อใดเป็นงานของ Frontend ทั้งหมด?

ข้อ 5

ข้อใดอธิบายเว็บไซต์ได้ถูกต้องที่สุด?

1.8ภารกิจสุดท้าย: ประกอบหน้าเว็บด้วยความเข้าใจของคุณ

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

ข้ามแบบฝึกนี้ ไปอ่านต่อ →

MINI CHALLENGE · ประกอบหน้าเว็บด้วยตัวเอง

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

01 · เป้าหมาย

R1มีหัวข้อ “โปรโมชันวันนี้” ให้เห็นบนหน้า
R2มีย่อหน้าอธิบายโปรโมชันให้เห็น
R3มีปุ่ม “จองเลย” ให้เห็น
R4ปุ่มเป็นสีส้ม และมีมุมโค้ง
R5กดปุ่มแล้ว ข้อความบนปุ่มเปลี่ยนเป็น “จองแล้ว ✓”

02 · เลือกชิ้นส่วน

HTML · มีอะไรบนหน้า

03 · หน้าเว็บของคุณ (ลองกดปุ่มได้)

promo.example

หน้าเว็บยังว่าง เพราะ HTML ยังไม่มีชิ้นส่วนใดเลย

ตรวจได้ไม่จำกัดครั้ง

ดูโค้ดที่สร้างจากชิ้นส่วนของคุณ

<body>
  <!-- ยังว่าง -->
</body>

ดูโค้ดที่สร้างจากชิ้นส่วนของคุณ

<body>
  <!-- ยังว่าง -->
</body>

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

อธิบายด้วยคำพูดของคุณเอง

ถ้าต้องอธิบายให้เพื่อนที่ไม่เคยเขียนโค้ดฟัง HTML, CSS และ JavaScript ต่างกันอย่างไร?

ข้อความนี้อยู่แค่ในหน้าจอของคุณ ไม่ถูกส่งหรือบันทึกไว้ที่ไหน และระบบไม่ได้ให้คะแนน

เขียนอีกนิด (0/30 ตัวอักษร)

เส้นทางการเรียนรู้

0/9

สลับดูสิ่งที่เบราว์เซอร์ได้รับจริง (ยังไม่ได้ทำ)ภาพ 1.1: กด 'สิ่งที่เบราว์เซอร์ได้รับ'
จับคู่โค้ด HTML กับชิ้นบนหน้า (ยังไม่ได้ทำ)ภาพ 1.2: แตะบรรทัดโค้ดอย่างน้อย 3 บรรทัด
ใส่ CSS ครบทั้ง 4 กฎ (ยังไม่ได้ทำ)ภาพ 1.3: เปิดกฎให้ครบ 4 ข้อพร้อมกัน
กดปุ่มทั้งตอนไม่มีและมี JavaScript (ยังไม่ได้ทำ)ภาพ 1.4: กดตอนปิด แล้วเปิด JavaScript กดอีกครั้ง
ทำภารกิจห้องทดลองครบ 5 ข้อ (ยังไม่ได้ทำ)ห้องทดลอง 01: ภารกิจติ๊กเองเมื่อทำสำเร็จ
แยกหน้าที่สามภาษาครบ 6 สถานการณ์ (ยังไม่ได้ทำ)ภาพ 1.6: เลือกคำตอบให้ครบทุกข้อ
ตอบแบบทดสอบท้ายบทครบทุกข้อ (ยังไม่ได้ทำ)ตอบครบทุกข้อ ผิดได้ ไม่มีผลกับการติ๊ก
ผ่าน Mini Challenge (ยังไม่ได้ทำ)ตรวจงานแล้วผ่านครบทั้ง 5 ข้อ
อธิบายด้วยคำพูดของตัวเอง (ยังไม่ได้ทำ)เขียนอย่างน้อย 30 ตัวอักษร แล้วกด 'เทียบกับคำอธิบายตัวอย่าง'

รายการนี้บันทึกสิ่งที่คุณได้ลงมือทำในเบราว์เซอร์นี้ ไม่ใช่ใบรับรองว่าเข้าใจแล้ว วิธีวัดที่ดีที่สุดคือลองอธิบายให้คนอื่นฟัง ล้างบันทึกได้ที่ Machine Lens แท็บ DATABASE

1.1สิ่งที่เดินทางมาถึง ไม่ใช่ภาพ

คาเฟ่ริมทาง

1.2วัตถุดิบที่หนึ่ง: HTML บอกว่ามีอะไร

ขนมปังอบใหม่ทุกเช้า

1.3วัตถุดิบที่สอง: CSS บอกว่าหน้าตาเป็นอย่างไร

ขนมปังอบใหม่ทุกเช้า

1.4วัตถุดิบที่สาม: JavaScript บอกว่าทำอะไรได้

ขนมปังอบใหม่ทุกเช้า

1.5ลงมือ: ประกอบหน้าเว็บด้วยมือคุณเอง

ขนมปังอบใหม่ทุกเช้า

1.6สิ่งที่คุณเพิ่งค้นพบ

1.7สามภาษานี้คือทั้งหมดของเว็บไซต์หรือเปล่า?

สรุปบทนี้

เช็กความเข้าใจ

1.8ภารกิจสุดท้าย: ประกอบหน้าเว็บด้วยความเข้าใจของคุณ

บทที่ 2: เบราว์เซอร์อ่านหน้าเว็บอย่างไร