ในวิดีโอก่อนหน้านี้ เราได้เรียนรู้ว่าเบราว์เซอร์เพียงแค่ส่งคำขอไปยังเซิร์ฟเวอร์ที่ใดที่หนึ่งในโลกผ่านทางอินเทอร์เน็ตโดยใช้โปรโตคอล
HTTPS จากนั้นเบราว์เซอร์จะได้รับไฟล์ JavaScript, HTML และ CSS เหล่านั้นเพื่อให้สามารถแสดงเว็บไซต์ได้
ตอนนี้.
เราจะตรวจสอบสิ่งนี้ได้อย่างไร?
ฉันสามารถไปดูนักพัฒนาซอฟต์แวร์ได้จริง ๆ และนี่คือการใช้ Google Chrome
ดังนั้นฉันจึงแนะนำส่วนนี้ให้ใช้ Google Chrome เพื่อให้คุณสามารถติดตามสิ่งที่ฉันทำ
ถ้าฉันไปที่เครื่องมือสำหรับนักพัฒนาที่นี่ มันจะเปิดกล่องเล็กๆ พร้อมข้อมูลให้ฉัน
ตอนนี้สิ่งที่ฉันต้องการเน้นคือแท็บเครือข่ายนี้
และแท็บเครือข่ายนี้จะบอกเราว่าเราได้รับข้อมูลประเภทใดจากเซิร์ฟเวอร์
ถ้าฉันรีเฟรชที่นี่ คุณจะสังเกตเห็นว่า
ฉันได้รับข้อมูลบางอย่างที่นี่?
ตอนนี้คุณต้องการให้แน่ใจว่าไม่มีตัวกรองที่เกี่ยวข้อง
เราเลยอยากบอกตรงนี้ว่าเราต้องการทุกอย่าง
ดังนั้นจึงไม่มีตัวกรอง ทุกอย่าง
ไม่มีการค้นหาใดๆ เกิดขึ้น และเราสามารถรีเฟรชได้อีกครั้งและ
เอาล่ะ เราเห็นไฟล์จำนวนมากขึ้น แต่นี่ดูน่ากลัว
ลองคิดดูว่าเราเพิ่งเรียนรู้อะไรไปบ้าง
เราเรียนรู้ว่าก่อนอื่นเราจะได้รับไฟล์ HTML ซึ่งเป็นไฟล์นี้
มันบอกว่านี่พิมพ์เอกสาร
และถ้าฉันคลิกตรงนี้ นี่คือเอกสาร HTML
ดังนั้นการตอบสนองจากเซิร์ฟเวอร์เมื่อฉันกดรีเฟรช จำได้ว่ามันสื่อสารกับเซิร์ฟเวอร์แห่งหนึ่งในโลกที่มีไฟล์เหล่านี้ในคอมพิวเตอร์เครื่องนั้น
และนี่คือไฟล์ HTML ของเรา
ถ้าฉันจะเลื่อนลง
ดูนั่นสิ
เราสามารถเห็นคอมมิคเกี่ยวกับความรัก การเสียดสี คณิตศาสตร์ และภาษาได้ที่นี่
จำได้ไหมว่าฉันพูดว่า HTML เป็นข้อความที่แสดงบนเว็บไซต์ได้อย่างไร
นี่คือ HTML ของเราที่เซิร์ฟเวอร์ตอบสนองและเบราว์เซอร์รู้วิธีอ่านและแสดงข้อความ
แล้ว CSIS ล่ะ?
ฉันสามารถคลิกที่แท็บ CSIS นี้ที่นี่ และแสดงไฟล์ CSIS ทั้งหมดที่มาจากเซิร์ฟเวอร์ให้ฉันดู
และคุณเห็นว่านี่ อีกครั้ง ดูแตกต่างออกไปเล็กน้อย
อยู่ในรูปแบบที่แตกต่างจาก HTML
แต่ทั้งหมดที่ทำในที่นี้คือทำให้ได้สไตล์ที่ฉันต้องการ
คุณสามารถดูได้ที่นี่ เราสามารถเลือกสีพื้นหลังได้
เราสามารถเลือกตำแหน่งที่แตกต่างกัน ตำแหน่งความกว้างด้านซ้าย
และสิ่งนี้ทำให้เรามีสไตล์ที่เราต้องการบนเว็บไซต์
แล้วถ้าเราไปที่ JavaScript เราจะเห็นไฟล์ JavaScript ที่เว็บไซต์นี้ใช้จริงๆ
ตอนนี้เราไม่ต้องกังวลเกี่ยวกับ JavaScript ที่นี่
JavaScript ช่วยให้เราสามารถโต้ตอบกับเว็บไซต์นี้ได้ ซึ่งในตอนนี้เราอาจไม่จำเป็นต้องกังวล
ตอนนี้ ฉันต้องการชี้ให้เห็นว่ายังมีสิ่งอื่นๆ อีกสองสามอย่างในที่นี้ เช่น รูปภาพและสื่อ
และอย่างที่คุณเห็น รูปภาพ เรามีรูปภาพบางรูปที่เราใช้งานอยู่อย่างแน่นอน
ถ้าฉันคลิกดูตัวอย่างเราจะเห็นภาพ
แต่สุดท้ายแนวคิดก็เหมือนเดิม
เรามีไฟล์ HTML
ซึ่งในกรณีของเราอยู่ตรงนี้
คุณจะเห็นว่าไฟล์ HTML แสดงผลโดยไม่มี CSS ได้อย่างไร ซึ่งเป็นเพียงข้อความที่เป็นข้อความที่เรามี
CSS ซึ่งเป็นสไตล์
ของหน้าของเราแล้ว JavaScript บางส่วนเพื่อให้หน้าของเราโต้ตอบและบางทีบางภาพ
แต่สุดท้ายแล้ว สิ่งเหล่านี้ล้วนเป็นเพียงข้อความที่เราได้รับจากเซิร์ฟเวอร์เท่านั้น
นั่นหมายความว่าเพื่อให้เราสามารถสร้างเว็บไซต์ของเราได้ เราต้องสร้างสามสิ่งนี้เป็นไฟล์
HTML, ไฟล์ CSS และไฟล์ JavaScript
อันที่จริง เราไม่จำเป็นต้องมีไฟล์ JavaScript หากเราไม่ต้องการการโต้ตอบใดๆ
เราไม่ต้องการไฟล์ CSS ด้วยซ้ำ
หากเราไม่ต้องการสไตล์ใด ๆ เราก็สามารถใช้ไฟล์ HTML ได้
ในวิดีโอหน้า เราจะสร้างเว็บไซต์แรกของเรา
เจอกันในนั้นครับ
ลาก่อน.